Apply for Credit Card - vBulletin - Debt Consolidation - Deaf Topics - Bet365 bonus
PDA

View Full Version : Positioning problem with IE

nevetS
Dec 28th 2004, 3:58 am
I'm having a problem with positioning in IE. Problem doesn't exist in firefox.

I have 3 divs - banner, nav, and "below banner" below banner contains a few more divs (sidemenu, content, and some blocks), but the idea is that my "below banner" div will be like a frame bordering on the top part of the screen, and the banner and nav divs make up the top part.

I set the positioning as follows:

banner: top: 0; height: 100px;
nav: top: 100px; height: 25px;
belowbanner: top 125px;

In IE, the belowbanner sits 1 pixel up from where it should - overlapping the nav div. In firefox it looks fine. When I add: border: 1px dotted #FFF; to the belowbanner, the border shows, and the div is positioned properly. margins and padding are set to 0 for all these divs. Any ideas?
nevetS
Dec 28th 2004, 4:24 am
fixed my own problem here... Set the following property on my nav div:

overflow: hidden;

Seems that the size of my text in the nav div was increasing the size of the nav div. Apparently, IE and firefox have different ways of dealing with that issue.
J.D.
Dec 28th 2004, 3:40 pm
Seems that the size of my text in the nav div was increasing the size of the nav div. Apparently, IE and firefox have different ways of dealing with that issue.

Most likely you are missing line-height in your CSS. If line-height is greater than height, the content is supposed to be visible outside the element. IE and Opera screw up while dealing with height, line-height and overflow and produce incorrect results in most combinations. Try this in IE, Opera and FF:


<html>
<head>
<style type="text/css">
div {background-color: yellow; border: 1px solid red; margin-top: 20px; font-size: 12pt; padding: 0px;}
</style>
</head>
<body>
<div style="line-height: 10px; height: 5px; overflow: hidden;">line-height: 10px; height: 5px; overflow: hidden;</div>
<div style="line-height: 10px; height: 30px; overflow: hidden;">line-height: 10px; height: 5px; overflow: hidden;</div>
<div style="line-height: 10px; height: 5px; overflow: visible;">line-height: 10px; height: 5px; overflow: visible;</div>
<div style="line-height: 10px; height: 30px; overflow: visible;">line-height: 10px; height: 5px; overflow: visible;</div>
</body>
</html>


You might be able to fix your HTML by tweaking line-height. You can also try using tables - all three are closer to each other in how they implement tables.

J.D.
nevetS
Dec 28th 2004, 10:08 pm
Very Interesting... I'm gonna have to install opera again to check out how it renders my test site.