Forum Moderators: not2easy
I'm working my way through a CSS design after heavily relying on tables in the past. I've got a little roadblock that I just can't seem to fix.
When I test the following in IE6 I get a gap between my topmenu div and my line div of 14px when I only want 5. It works great in FF. Any help?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>New Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: .8em arial,sans-serif;text-align:center;background:#000}
div#container{text-align:left}
div#container{width:762px;margin:0 auto}
div#header{margin-top:20px; margin-bottom:5px;border:1px solid #7C7C7C; height:76px}
div#topmenu{margin-bottom:5px;border:1px solid #7C7C7C; height:22px;}
div#line {background: #000 url('images/line-bg.gif') no-repeat center bottom;
margin: 0px auto;height: 1px;max-height:1px;}
div#linebottom {background: url('images/line-bottom.gif') no-repeat;margin:0;height:16px;clear:both;}
div#content{background: #000 url('images/main-bg.gif') repeat-y;margin:0;}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/header.jpg" alt=""></div>
<div id="topmenu"></div>
<div id="line"></div>
<div id="content"></div>
<div id="linebottom"></div>
</div>
</body>
</html>
You could try:
font-size: 0;overflow: hidden;divHow's that sound? :)
I did end up using the font-size:0 and it works (well 1px off) but I'll add the overflow part and see how it looks. It's workable now as is but if I can perfect it... all the better.
Thanks.
but maybe one browser is honouring it, and the other one isn't.
try removing the height:22px and see if the gap becomes the same in each browser.
it might be the height:22px. i'm pretty sure that you can't size a divs height like you can table cells.
a div will stretch to cover whatever content is inside it (unless you use max-height, or something like that). but if there's not enough content inside to fill up 22px, then you'll end up with something smaller.
londrum, that's what the OP is asking for - a 22px tall bar. You can size a
divmax-heightbut maybe one browser is honouring it, and the other one isn't.
try removing the height:22px and see if the gap becomes the same in each browser.
That's exactly right, IE 6 isn't honouring the value - because height is supposed to force it to that value, irrespective of content inside it.
But is removing the height value doable?
I would rather set
font-size: 0;line-height: 0;
+----------+ +------------------------------+
¦..........¦ ¦..............................¦
¦..........¦ ¦..............................¦
¦..........¦ ¦..............................¦
¦..........¦ ¦..............................¦
¦..........¦ ¦..............................¦
¦..........¦ ¦..............................¦
¦..........¦ ¦..............................¦
¦..........¦ ¦..............................¦
¦..........¦ ¦..............................¦
+----------+ +------------------------------+
The top and bottom are a 1px image that allows me to finish off the bottom of the border.
Hope that explains it. Either way... I got it working and it is WC3 validated and compliant across all browsers.
As an example... look at the Newcastle United website. (sorry if that violates TOS)
