Forum Moderators: not2easy
here's a link to a test case:
[princeton.luispunchy.com...]
Not sure if I'm allowed to post URLs, so here's a snip of offending html and CSS. Both validate.
CSS:
/* Zero out browser default margins and paddings */
*, div, p, ul, li {
margin: 0;
padding: 0;
}
body {
font: 95%/1.5em Verdana, Arial, Helvetica, sans-serif;
color: #666;
background: #fff;
}
/*h1, h2, h3, h4, h5, h6, p {
margin: 1em 0;
}*/
ul {
list-style: none;
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
/*position: relative;
*/}
/*
MAIN CONTENT --------------------- */
#content {
position: relative;
width: 800px;
background: #fff url(img/side-image-home.jpg) right top no-repeat;
}
#contentMain {
float: left;
width: 251px;
padding: 0 0 0 40px;
display: inline;
}
/*
MAIN VERTICLE NAVIGATION -------------*/
#navMain {
height: 64px;
overflow: hidden;
margin: 0;
padding: 0;
}
#home #navMain {
width: 220px;
margin: 25px 0 0 0;
}
#navMain li {
margin: 0 0 17px 0;
}
#navMain a {
display: block;
padding: 10px 0 0 0;
overflow: hidden;
height: 0px!important;
height /**/:10px; /* for IE5/Win only */
}
/* :TODO: add selected states for other body ids once pages are created, e.g. '#plan #navMain a' */
#navMain a:hover, #navMain a:active {
background-position: 0 -10px;
}
#navEvol a {
width: 147px;
background: url(img/nav-evol.gif) top left no-repeat;
}
#navPlan a {
width: 128px;
background: url(img/nav-plan.gif) top left no-repeat;
}
#navDial a {
width: 162px;
background: url(img/nav-dial.gif) top left no-repeat;
}
/*
P.I.E. FLOAT CLEARING
See [positioniseverything.net...]
--------------------- */
.clearfix:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}
.clearfix {
display: inline; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
---------
HTML:
<body id="home">
<div id="wrapper">
<div style="width: 800px; border: 1px solid black; margin: 10px 0;">
<p>some other stuff here</p>
<p>some other stuff here - below is the test case scenario</p>
</div>
<!-- MAIN CONTENT -->
<div id="content" class="clearfix">
<div id="contentMain">
<ul id="navMain">
<li id="navEvol"><a href="campus-evolution.php" title="Learn how the campus has evolved over the years">Campus Evolution</a></li>
<li id="navPlan"><a href="campus-plan" title="The plan going forward">Campus Plan</a></li>
<li id="navDial"><a href="continuing-dialogue" title="Be a part of the discussion">Continuing Dialogue</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
<!-- end #contentMain -->
</div>
<!-- end #content -->
</div>
<!-- end #wrapper -->
</body>
---------
The problem is localized to IE. Should be apparent when viewed in browser - the vertical nav / list should have 3 visible links, as in Firefox, Opera, et al. In IE (6 & 7), only the first two links are showing. It appears the third is overlapped by the adjacent p tag. Furthermore, the amount of space above and between those links is increased, nearly double of what is intended via CSS and showing in other browsers.
ANY IDEAS?
After much searching, found the (likely) cause and a solution (one of several), as follows - in case others encounter. I'll update the title to reflect.
Apparently, this problem in IE is due to a white space bug. IE/Win adds extra space above and below list items. So there are a number of ways to fix, according to several links I've found:
* [csscreator.com...]
* [maxdesign.com.au...]
* [andybudd.com...]
While those posts appear to suggest the problem is only with IE5/Win, I can attest that it is in IE5+, right up to IE7. But happily, the solutions suggested still work.
Best fit solution, in this case, appears to be add 'display:inline' to the li declaration and then style the margins/padding as needed from there. Seems to work!
