Forum Moderators: not2easy
I'm Jan and new to this forum ànd to CSS. It's the first time I'm trying to make a site with CSS separated as much as possible from HTML. It worked rather fine (with some help of my friends) but in IE6 things are going wrong: the div 'content' goes too high and covers the div 'headernav3' for a part.
As a result of that the horizontal navigation bar is almost invisible and links can't be reached in IE6. I think the same happens in other browsers too (the top of the background image is invisible) but there the navigation bar stays on top of the div 'content' with no consequences for the navigation possibilities.
Can someone help me to fix that please?
Many thanks on beforehand of course,
Jan
CSS:
* {margin:0;padding:0;}
body{
background:#ffffff url(../img/achtergrond_mini.gif) repeat-y;
padding-top:24px;
text-align:center;
font-family:verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
}
p { }
a:link { color: #000000; font-size: 1em; text-decoration: none; }
a:visited { color: #336; font-size: 1em; text-decoration: none; }
a:hover { color: #336; font-size: 1em; text-decoration: none; }
#main-container{margin: 0 auto;width:920px;text-align:left;}
h1{color:#395ab5;font-size:3em;padding:10px 0;text-align:right;}
#content h2 { color: #395ab5; font-size: 1.6em; padding: 150px 10px 0; }
#content p{font-size: 1.4em;padding:15px 12px 12px; }
#header{ background:#ffffff; }
#headernav3{background:#ffffff url(../img/headernav.gif) no-repeat right top;
padding:0 0 5px 0;
}
#headernav3 ul{list-style:none;overflow:hidden;text-align:center;margin:0 0 0 100px;}
#headernav3 li{float:left;width:100px;}
#headernav3 li a{
color:#283f7f;
font-size:1.2em;
text-decoration:none;
display:block;
padding:8px 0 8px 0;
}
#headernav3 li a:link{}
#headernav3 li a:hover{color:#fffff7;}
.nav{background:#395ab5 url(../img/logo-Argos-blauw.gif) no-repeat left top; float:left; width:310px; padding-top:50px; }
.nav ul{list-style:none; margin:10px; padding:30px 10px 10px; }
.nav li{
margin:10px;
padding:10px;
}
.nav li a{
color:#D3FFFE;
font-size:1.2em;
text-decoration:none;
}
.nav li a:link{}
.nav li a:hover{color: #f60;}
#content{background:#ffffff url(../img/bluesky_argos_strook.jpg) no-repeat center top;}
head+body #content{overflow:hidden;}
* html #content{float:left;}
* html #headernav3 ul{height:1px;}
* html #content h2{height:1px;}
HTML
<body>
<div id="main-container">
<div class="nav">
<ul>
<li><a title="link 1" href="-ENG/USA.html" target="_top">link 1</a></li>
<li><a title="link 2" href="-ENG/EU.html" target="_top">link 2</a></li>
<li><a title="link 3" href="-ENG/ASIA.html" target="_top">link 3</a></li>
</ul>
</div>
<div id="content">
<div id="header">
<h1>PureClean Air Systems</h1>
</div>
<div id="headernav3">
<ul>
<li><a title="link A" href="-ENG/index_ENG.html" target="_top">link A</a></li>
<li><a title="link B" href="-ENG/products.html" target="_top">link B</a></li>
<li><a title="link C" href="-ENG/facts.html" target="_top">link C</a></li>
<li><a title="link D" href="-ENG/partners.html" target="_top">link D</a></li>
<li><a title="link E" href="-ENG/events.html" target="_top">link E</a></li>
</ul>
</div>
<h2>About us</h2>
<p>
Our mission
</p>
the div 'content' goes too high and covers the div 'headernav3' for a part.
Welcome aboard micjan, I don't see a doctype [webmasterworld.com] and don't know if it validates [validator.w3.org], but check out those two links and get it to validate.
That being said, on an initial look at your code all you might have to do is put a clearing div either right before the closing header </div> or immediately after it. If you put a border on the nav div, you might see it's a thin line above your navigation with no height at all.
.clear { clear: both; }
<div class="clear"></div>
head+body #content{overflow:hidden;}
* html #content{float:left;}
* html #headernav3 ul{height:1px;}
* html #content h2{height:1px;}
head+body: the "+" sibling selector should not ever trigger on html+body (they never should be siblings, html is the parent of body), so I guess it's a parser hack.
Similarly * html is a common parser hack.
Parser hacks are dangerous to use, there is no telling what a next version or a new browser might decide to do with then. Since most if not all of them or meant to give different content to IE from the other browsers, it's my strong belief we'd all better stop using parser hacks, and instead switch to conditional comments for IE6 and IE7.
That way you don't have to worry as much about IE's bugs and "features": once your code is solid, you just modify the look in each of the IE versions that you care about to look good. Other browsers, validators etc will see it as comments, no risk to them.
With IE8 on track to be standards compliant, make sure to only target specific versions of IE.
I left doctype and other code not relevant for my problem out of my message.
That beeing said, the closing header div = div .headernav3? In that case I don't see any improvement if I put the .clear div just before or just after that div.
Btw, my first attempt used many divs which was changed by a friend into less divs and more classes. Can you tell me what's the benifit of that?
Many divs: you still have rather many:
<div class="nav">
<ul>
<li><a title="link 1" href="-ENG/USA.html" target="_top">link 1</a></li>
<li><a title="link 2" href="-ENG/EU.html" target="_top">link 2</a></li>
<li><a title="link 3" href="-ENG/ASIA.html" target="_top">link 3</a></li>
</ul>
</div>
<ul class="nav">
<li><a title="link 1" href="-ENG/USA.html" target="_top">link 1</a></li>
<li><a title="link 2" href="-ENG/EU.html" target="_top">link 2</a></li>
<li><a title="link 3" href="-ENG/ASIA.html" target="_top">link 3</a></li>
</ul>
Setting the height in IE6 gives the element the proprietary attribute "hasLayout". It starts to behave differently. In part it's also using the bug that IE6 treats height as if it were min-height.
But just imagine what would happen if a browser that actually respects height would parse the selector and set the height to 1px...
So, yes I firmly believe a CSS style for all browsers that has overrides changing things as needed for IE6 and IE7 is the way to go. It's also easier to create it all that way as you can forget IE till the very end (and then not have to worry about how the other browsers will react to it all.)
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="generator" content="Adobe GoLive" />
<title>PureClean Air Systems</title>
<link href="css/test2.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="main-container">
<div id="navdiv">
<ul>
<li><a title="USA address information" href="-ENG/USA.html" target="_top">ARGOS Environmental Corporation </a></li>
<li><a title="Europe address information" href="-ENG/EU.html" target="_top">ARGOS Environmental Europe</a></li>
<li><a title="Asia address information" href="-ENG/ASIA.html" target="_top">ARGOS Environmental Asia & Pacific</a></li>
</ul>
</div>
<div id="contentdiv">
<div id="headerdiv">
<h1>PureClean Air Systems</h1>
</div>
<div id="headernavdiv">
<ul>
<li><a title="go to About Us" href="-ENG/index_ENG.html" target="_top">About Us</a></li>
<li><a title="go to Products" href="-ENG/products.html" target="_top">Products</a></li>
<li><a title="go to Facts" href="-ENG/facts.html" target="_top">Facts</a></li>
<li><a title="go to Partners" href="-ENG/partners.html" target="_top">Partners</a></li>
<li><a title="go to Events" href="-ENG/events.html" target="_top">Events</a></li>
</ul>
</div>
<div id="contentcontentdiv"></div>
</div>
</div>
</body>
</html>
CSS:
body{
background:#ffffff url(../img/achtergrond_mini.gif) repeat-y;
padding-top:24px;
text-align:center;
font-family:verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
}
p { }
a:link { color: #000000; font-size: 1em; text-decoration: none; }
a:visited { color: #336; font-size: 1em; text-decoration: none; }
a:hover { color: #336; font-size: 1em; text-decoration: none; }
#main-container{margin: 0 auto;width:920px;text-align:left;}
h1{ color:#395ab5; font-size:3em; text-align:right; }
#navdiv{ background: #395ab5 url(../img/logo-Argos-blauw.gif) no-repeat left top; width:310px; float: left; }
#contentdiv{ width: 610px; float: left; }
#headerdiv{ background-image: none; width: 600px; }
#headernavdiv{ background-image: url(../img/headernav.gif); background-repeat: no-repeat; background-position: right 0; width: 603px; padding:0 0 2px; }
#contentcontentdiv{ background-image: url(../img/bluesky_argos_strook.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; width: 602px; height: 600px; }
/*bovenste navigatie bar*/
#headernavdiv ul{ overflow:hidden; text-align:center; margin:0 0 0 100px; list-style: none; }
#headernavdiv li{ float:left; width:100px; height: 30px; }
#headernavdiv li a{
color:#283f7f;
font-size:1.2em;
text-decoration:none;
display:block;
padding:5px 0 5px 0;
}
#headernavdiv li a:link{}
#headernavdiv li a:hover{color:#fffff7;}
/*linker navigatie panel*/
#navdiv ul{ margin: 10px 5px; list-style:none; padding:75px 0 10px; }
#navdiv li{
margin:10px;
padding:10px;
}
#navdiv li a{
color:#D3FFFE;
font-size:1.2em;
text-decoration:none;
}
#navdiv li a:link{}
#navdiv li a:hover{color: #f60;}
Jan
