6 replies [Last post]
OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 18 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

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.

Quote:
<!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">&nbsp;</div></a>
<a href="#" class="divlink" title="Contact Us"><div id="contacticon">&nbsp;</div></a>
</div>

<div id="toprow1"><span class="tiny">&nbsp;</span></div>
<a href="#" class="divlink" title="Main Forum Page"><div id="toprow2">&nbsp;</div></a>
<a href="#" class="divlink" title="General Forums"><div id="toprow3">&nbsp;</div></a>
<a href="#" class="divlink" title="Fall Forums"><div id="toprow4">&nbsp;</div></a>
<a href="#" class="divlink" title="Winter Forums"><div id="toprow5">&nbsp;</div></a>
<a href="#" class="divlink" title="Spring Forums"><div id="toprow6">&nbsp;</div></a>
<a href="#" class="divlink" title="Statewide Forum"><div id="toprow7">&nbsp;</div></a>
<div id="toprow8"><span class="tiny">&nbsp;</span></div>

<div id="secondrow1"><span class="tiny">&nbsp;</span></div>
<div id="secondrow2"><span class="tiny">&nbsp;</span></div>
<div id="secondrow3"><span class="tiny">&nbsp;</span></div>
<div id="secondrow4"><span class="tiny">&nbsp;</span></div>
<div id="secondrow5"><span class="tiny">&nbsp;</span></div>
<div id="secondrow6"><span class="tiny">&nbsp;</span></div>
<div id="secondrow7"><span class="tiny">&nbsp;</span></div>
<div id="secondrow8"><span class="tiny">&nbsp;</span></div>

<div id="topspacer"><span class="tiny">&nbsp;</span></div>

<div id="leftcontent">

<div id="leftnav1_1"><span class="tiny">&nbsp;</span></div>
<a href="#" class="divlink" title="Home"><div id="leftnav1_2">&nbsp;</div></a>
<div id="leftnav2_1"><span class="tiny">&nbsp;</span></div>
<a href="#" class="divlink" title="ECOL Index"><div id="leftnav2_2">&nbsp;</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>

Quote:

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;
}

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 18 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

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.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 18 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Grr to IE6... positioning problem

Thanks, Tony. I knew it was a bug like that, but I couldn't find it. Much thanks.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 18 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Grr to IE6... positioning problem

Haha, but that just kicks the crap out of the Firefox display, eh? I'll work on it.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Grr to IE6... positioning problem

Hi OPTAdmin,
Did you read the last line of my post

Quote:
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.
woops I left out a vital word, "out", so now my quote is an edited quote.

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 18 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

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!

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!