Okay, ignore the stupid design, it's a work in progress. For some reason, the second navigation button (leftnav2_2) likes to bump to the next line in IE. I've checked and double-checked the widths, and everything lines up. Is there a type of hack that I need to do to any IE-induced margins or paddings to go away?
The thing that bothers me is that the first navigation button (leftnav1_2) works fine. Argh. Posted below is the HTML, and then the CSS. Thanks! I highlighted the problem in red.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welcome! :: EastOhioSports.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content">
<div id="header">
<a href="#" class="divlink" title="Home"><div id="homeicon"> </div></a>
<a href="#" class="divlink" title="Contact Us"><div id="contacticon"> </div></a>
</div>
<div id="toprow1"><span class="tiny"> </span></div>
<a href="#" class="divlink" title="Main Forum Page"><div id="toprow2"> </div></a>
<a href="#" class="divlink" title="General Forums"><div id="toprow3"> </div></a>
<a href="#" class="divlink" title="Fall Forums"><div id="toprow4"> </div></a>
<a href="#" class="divlink" title="Winter Forums"><div id="toprow5"> </div></a>
<a href="#" class="divlink" title="Spring Forums"><div id="toprow6"> </div></a>
<a href="#" class="divlink" title="Statewide Forum"><div id="toprow7"> </div></a>
<div id="toprow8"><span class="tiny"> </span></div>
<div id="secondrow1"><span class="tiny"> </span></div>
<div id="secondrow2"><span class="tiny"> </span></div>
<div id="secondrow3"><span class="tiny"> </span></div>
<div id="secondrow4"><span class="tiny"> </span></div>
<div id="secondrow5"><span class="tiny"> </span></div>
<div id="secondrow6"><span class="tiny"> </span></div>
<div id="secondrow7"><span class="tiny"> </span></div>
<div id="secondrow8"><span class="tiny"> </span></div>
<div id="topspacer"><span class="tiny"> </span></div>
<div id="leftcontent">
<div id="leftnav1_1"><span class="tiny"> </span></div>
<a href="#" class="divlink" title="Home"><div id="leftnav1_2"> </div></a>
<div id="leftnav2_1"><span class="tiny"> </span></div>
<a href="#" class="divlink" title="ECOL Index"><div id="leftnav2_2"> </div></a>
</div>
<div id="rightcontent">
<div id="rightmain">blah blah blah<br />text to make you scroll
<br />text to make you scroll<br />
<br />text to make you scroll<br />
<br />text to make you scroll<br />
<br />text to make you scroll<br /></div>
</div>
</div>
</body>
</html>
a {
text-decoration: none;
}
img {
border: none;
}
.divlink {
font-size: 0px;
cursor: hand;
}
.tiny {
font-size: 0px;
}
body {
background: #003BD3;
margin: 0;
padding: 0;
text-align: center;
}
#content {
width: 770px;
margin: 0px auto;
text-align: left;
}
#header {
width: 770px;
height: 47px;
background: url(../images/header2.gif);
}
#homeicon {
position: absolute;
top: 30px;
left: 700px;
height: 14px;
width: 14px;
background: url(../images/home_icon.gif);
}
#contacticon {
position: absolute;
top: 30px;
left: 720px;
height: 15px;
width: 14px;
background: url(../images/contact_icon.gif);
}
#toprow1 {
background: url(../example/images/index4_05.gif);
width: 219px;
float: left;
height: 28px;
}
#toprow2 {
background: url(../example/images/index4_06.gif);
width: 89px;
float: left;
height: 28px;
}
#toprow3 {
background: url(../example/images/index4_07.gif);
width: 89px;
float: left;
height: 28px;
}
#toprow4 {
background: url(../example/images/index4_08.gif);
width: 89px;
float: left;
height: 28px;
}
#toprow5 {
background: url(../example/images/index4_09.gif);
width: 89px;
float: left;
height: 28px;
}
#toprow6 {
background: url(../example/images/index4_10.gif);
width: 89px;
float: left;
height: 28px;
}
#toprow7 {
background: url(../example/images/index4_11.gif);
width: 89px;
float: left;
height: 28px;
}
#toprow8 {
background: url(../example/images/index4_12.gif);
width: 17px;
float: left;
height: 28px;
}
#secondrow1 {
background: url(../example/images/menu1.gif);
width: 219px;
height: 9px;
float: left;
}
#secondrow2 {
background: url(../example/images/menu2.gif);
width: 89px;
height: 9px;
float: left;
}
#secondrow3 {
background: url(../example/images/menu3.gif);
width: 89px;
height: 9px;
float: left;
}
#secondrow4 {
background: url(../example/images/menu4.gif);
width: 89px;
height: 9px;
float: left;
}
#secondrow5 {
background: url(../example/images/menu5.gif);
width: 89px;
height: 9px;
float: left;
}
#secondrow6 {
background: url(../example/images/menu6.gif);
width: 89px;
height: 9px;
float: left;
}
#secondrow7 {
background: url(../example/images/menu7.gif);
width: 89px;
height: 9px;
float: left;
}
#secondrow8 {
background: url(../example/images/menu8.gif);
width: 17px;
height: 9px;
float: left;
}
#topspacer {
background: url(../example/images/index4_21.gif);
width: 770px;
height: 2px;
float: left;
}
#leftnav1_1 {
background: url(../example/images/index4_22.gif);
width: 10px;
height: 22px;
float: left;
}
#leftnav1_2 {
background: url(../example/images/index4_23.gif);
width: 194px;
height: 22px;
float: left;
}
#leftnav2_1 {
background: url(../example/images/index4_25.gif);
width: 10px;
height: 22px;
float: left;
}
#leftnav2_2 {
background: url(../example/images/index4_26.gif);
width: 194px;
height: 22px;
float: left;
}
#leftcontent {
float: left;
width: 204px;
}
#rightcontent {
float: right;
width: 566px;
}
#rightmain {
background: url(../example/images/index4_24.gif);
float: right;
width: 566px;
}
Grr to IE6... positioning problem
Okay, more problems. Disregard the code up top. Here's the link to the page:
http://www.ohiopreptalk.com/eos/index.html
I know the page loads slowly, and it's bad form for the page itself, but any help with the huge gap on the left side there in IE? Thanks.
Grr to IE6... positioning problem
Hi OPTAdmin,
This one appears to be caused by the float / margin bug
if you temporarily put div{display:inline !important;}
at the bottom of your stylesheet the gap disappears.
Remember to take it once you work out which floated boxes are causing the problem and apply display:inline only to the ones that need it.
Hope that helps
Grr to IE6... positioning problem
Thanks, Tony. I knew it was a bug like that, but I couldn't find it. Much thanks.
Grr to IE6... positioning problem
Haha, but that just kicks the crap out of the Firefox display, eh? I'll work on it.
Grr to IE6... positioning problem
Hi OPTAdmin,
Did you read the last line of my post
Remember to take it out once you work out which floated boxes are causing the problem and apply display:inline only to the ones that need it.
Grr to IE6... positioning problem
I understood you, though. All I did was apply the inline display to everything within the leftcontent div, and it lined everything up.
Thanks Tony!