<li> problems in IE

drives text higher

[Ohioian]

Okay, I have something really kewl happening in IE but I would like it to stop. When your present on the active page of the corresponding link lets say “index.html” the link text and bottom block line from the block property drives high in the IE browser about another 4 pixels higher. What is causing this?

html code:

<div id="mainmenu"><img src="images/mainmenu.gif" align="left" border="0" />
<ul><li><a href="index.html" target="_self"><em>Home</em></a></li><li><a
href="javascript:openWin('fundcondition.html')">Fund's Update</a></li><li><a
href="advertisement.html" target="_self">Help! MyTSP Grow</a></li><li><a
href="mytspnews.html" target="_self">MyTSP News</a></li><li><a
href="construction.html" target="_self">MyTSP Articles</a></li></ul>
</div>

CSS code:

#mainmenu ul, #precepts ul {
padding: 0px;
margin: 0px;
text-align: left;
margin-top: 40px;
}
#mainmenu ul li, #precepts ul li {
list-style-type: none;
text-align: left;
margin: 0px;
padding: 0px;
}
#mainmenu ul li a:link, #precepts ul li a:link {
color: #000000;
font-size: 14px;
text-decoration: none;
padding-top: 3px;
padding-bottom: 4px;
display: block;
font-weight: bold;
padding-left: 20px;
background: #006600;
border-bottom-color: #003333;
border-bottom-style: solid;
border-bottom-width: 1px;
}
#mainmenu ul li a:hover, #precepts ul li a:hover {
color: #000000;
font-size: 16px;
text-decoration: none;
font-weight: bold;
}
#mainmenu a:visited, #precepts a:visited {
text-decoration: none;
font-style: italic;
padding-top: 3px;
padding-bottom: 4px;
padding-left: 20px;
display: block;
color: #000000;
border-bottom-color: #003333;
border-bottom-style: solid;
border-bottom-width: 1px;
}

[D_Blackwell]

a:link; is calling for font-size: 14px;,
while a:hover is calling for font-size: 16px;

[Ohioian]

yep, but the cursor isn't over the link at the time. I had them formerly incased with a solid border all the way around and it didn't do this, removed the border except for the bottom and it started.

[Ohioian]

I found it display: inline; dress's those babies right up, thanks folks!

[Ohioian]

Found one minute problem with display: inline;
It doesn't validate for IE 5.0, their lose!

[createErrorMsg]

It doesn't validate for IE 5.0

Not sure what this means. HTML code validates to a DOCTYPE, not a browser. CSS code validates to a version, not a browser.

Technically, setting the LI to display:inline and the anchor to display:block is illegal, since it results in a block level anchor nested in an inline list item. It doesn't throw an error, however, since it happens in the CSS. The validator only throws an error for this kind of nesting if the HTML elements in question have default display values that are illegal. In other words, nesting a paragraph in an anchor gives a validator error since <p> defaults to block and <a> defaults to inline. But since the defaults for <li> and <a> do not result in an invalid nesting, the needed CSS values to fix the whitespace bug should not throw validator errors, at all.

If you're really concerned about it, stick the display:inline in an IE specific stylesheet so only IE gets it.

cEM

[Ohioian]

WHAT?

It's a CSS validation that found the error. I'm no browser code guru but it's probably IE didn’t include this property in the Mac and Win IE 5.0 browser, or they used the property for something else.

What are you rambling about? It’s nothing to worry about, what percentage of browser’s out there are still IE 5.0? If need be I’ll have a script redirect that version to a table layout.

[createErrorMsg]

What are you rambling about?

That's nice.

What I am rambling about is code validation. When you run CSS or HTML code through the W3 validators, they check the content of the code against the rules specified in the DOCTYPE used on the page (in the case of HTML validation), or the rules specified by the latest accepted CSS version (in the case of CSS validation).

I've never seen, nor used, a validator that compares the code against a specific browser. Apparently they exist, although I don't see what the point would be in using one.

FYI, display:inline is fully supported in IE5.

If you would care to further discuss this validation error you received, perhaps some more details would be in order (although the insults are fun, too).

cEM

[Ohioian]

LOL! (you can strike right back, I deserve it!)
Yes, O'Reilly CSS Reference said display: inline; was available for IE 5 Win IE 4 Mac... I agree with what your saying. It's why you would waste your time saying it to begin with?!
I appreciate help that show's results, book's are for when I run into a validation error such as, "Value 'inline' is not supported for CSS property display [Microsoft Internet Explorer 5.0]". Now I have to check it against an older machine to see if it's valid or BS.

Here, your an intelligent human being help me with this:
[webmasterworld.com...]
If the area is swelled with text great the div shift's right, if not the div center's.

[Stormfx]

Ohioian, cEM what trying to help. :p No need to get excited.

His response was accurate for the context of your query. The correct format of your question would've been:

"The CSS validator says it won't work in IE 5.0".

You'll have to understand that most of us who respond are used to looking at code, which is context sensitive. When we respond to a post, it's in context to what's been posted.

You have to be careful when asking questions to make sure that your comments express exactly what you're trying to say.

Good luck. :)

[Ohioian]

My apologizes cEM! I turn to you folks for help in the unexplained; I have tried the hack sheets and their very vague. So you’re the avenue I take for help when everything looks right but don’t appear right. And I understand this isn’t a forum I use to vent my anger over these $#@&*^^% browser CSS compliancy issue’s. You folks have seen it all and know the answers.

Again, I apologies for my frustration!