1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Positioning problem with IE

Discussion in 'CSS' started by nevetS, Dec 28, 2004.

0
  1. #1
    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 28, 2004 IP
  2. nevetS

    nevetS Evolving Dragon

    Messages:
    2,544
    Likes Received:
    211
    Best Answers:
    0
    Trophy Points:
    135
    #2
    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.
     
    nevetS, Dec 28, 2004 IP
  3. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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>
    Code (markup):
    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.
     
    J.D., Dec 28, 2004 IP
  4. nevetS

    nevetS Evolving Dragon

    Messages:
    2,544
    Likes Received:
    211
    Best Answers:
    0
    Trophy Points:
    135
    #4
    Very Interesting... I'm gonna have to install opera again to check out how it renders my test site.
     
    nevetS, Dec 28, 2004 IP