I have a site under development - http://susanbmarlowe.com/index.html (she picked the color theme and fonts, so no complaining about bright or gaudy colors, although I think it does match well with the kind of art she does - a small sampling on the right side)

anyway, I'm doing my best to make fully CSS standards compliant, yada yada yada. But the list on the left side is bugging the hell out of me (and the right side too, but it's not as noticeable). The middle "row" is made of 3 divs. The left div has 0 margin and padding on the left side and a 2px border. It contains a UL that has padding-left: 15px so that the left edge of the custom bullet is 15px from the border. Then UL LI A also has padding-left: 15px so that the start of the actual words in the list is 15px from the left edge of the bullet. In FireFox and Safari it looks beautiful. In IE though, the pushed way over to the right of the div, apparently completely ignoring the padding in the CSS.
Similarly in the right column, thumbnails (created with another UL) is centered properly in the DIV in FF/Safari, but pushed to the right in IE, but this isn't nearly as noticible as the left menu.

relevant code:

  <div id="leftMenu">
    <ul>
      <li><a href="index.html" id="">home</a></li>
      <li><a href="about.html" id="current">about susan</a></li>
      <li><a href="galleries.html" id="">galleries</a></li>
      <li><a href="contact.php" id="">contact</a></li>
    </ul>
  </div>

#leftMenu {
	padding: 40px 10px auto 0px;
	border-left: 2px solid #66FF33;
	border-right: 2px solid #66FF33;
	width: 150px;
	float: left;
}

#leftMenu ul {
	list-style-type: none;
	text-align: left;
	padding-left: 15px;
	list-style-position: outside;
}

#leftMenu ul li {
	padding-bottom: 25px;
}

#leftMenu ul li a {
	color: #FF00FF;
	text-decoration: none;
	padding-left: 15px;
	text-align: left;
	font-weight: bold;
}

11/14/2005 4:54:09 AM

Try making it with a table quick and see what happens. Sometimes there's something in your main CSS folder (if you reference one) that is affecting parts of your page. Make sure you didn't double name the menu in your CSS as well.

It looks more to me that there isn't enough room for it to display correctly (in my IE). It's like you've set a width, then your padding is so far over that its forcing a text wrap. Try reducing the padding a bit and just use a line return for spaces down (<br>.

11/14/2005 8:17:11 AM

Every time i see CSS, I'm thinking Content Services Switch.

11/14/2005 8:57:28 AM

1) Don't pad the link.
2) One browser handles the padding and margins for the LI element in the LI element, the other handles it in the UL.

So basically, start over, set padding and margin to 0 in all elements and start from scratch. It's more than possible to do cross-browser.

11/14/2005 10:58:39 AM

just got it.

all i had to do was add margins 0 to the UL. Apparently IE will include a default margin or something. Once I set margin: 0 to the UL tag everything lines up fine (haven't uploaded it yet).

^ if I don't pad the link, then the bullet will show up on top of the text. The link is padded to move the text to the right 15px, then the bullet and the text start from the same place.

I did the whole page from scratch and added one CSS element at a time and tested it in Safari and FireFox for Mac with each change, and of course it looked good. So to say the least, it was very disheartening the first time I tested it on my wifes Windows machine in IE and it looked like total crap.... I made several other fixes, but the list was all that was left, but I htink i got it smoothed out now with the margin changes.

11/14/2005 11:09:05 AM