Grow your CSS skills. Land your dream job.

IE6/IE7 Problem with position:absolute and floats

  • # June 12, 2009 at 10:41 am

    I have a lot of issues with Internet Explorer 6,7 not mentioning 5 ;) I’ll put code+images to show problem:

    1.- Internet Explorer 6:
    – Main Navigation is messed up, it’s a sprite image: Here is the code http://pastie.org/509697 and is based on the Sprite2 technics by AListApart, I’ve tried with conditionals but I don’t know what it causes the problem.

    – Navigation 2 is missing:
    This is a float problem, why if I floated to the left and positioned absolute isn’t show, here’s the code I’ve used

    Code:
    .feed
    {
    float: right;
    position: absolute;
    top: 15px;
    right: 102px;
    }
    .feed UL LI
    {
    display: inline;
    }

    .feed A
    {
    color: #626364;
    text-transform: uppercase;
    font-size: 0.7em;
    }
    .feed A:hover
    {
    color: #626364;
    text-transform: uppercase;
    font-size: 0.7em;
    text-decoration: underline;
    }
    .rss
    {
    float: right;
    width: 85px;
    height: 28px;
    display: block;
    margin: -23px -93px 0 0;
    background: transparent url(../images/rss-trans.png) no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    }

    A picture is worth a thousand words
    [img]http://webtipsmagazine.com/examples/IE6.jpg[/img]

    2.- Internet Explorer 7:

    – The search box is messed up too: here is the code i’ve used http://pastie.org/509709

    – The navigation 2 (feed/rss) isn’t float to the right, is showing to the left instead.
    [img]http://webtipsmagazine.com/examples/IE7.jpg[/img]

    3. Google Chrome is perfect :D
    [img]http://webtipsmagazine.com/examples/chrome.jpg[/img]

    3. Firefox is perfect :D
    [img]http://webtipsmagazine.com/examples/firefox.jpg[/img]

    Here is the example link
    http://themeforest.webtipsmagazine.com/gs/

    Thanks.-

    # June 13, 2009 at 9:03 pm
    "ipad" wrote:
    I have a lot of issues with Internet Explorer 6,7 not mentioning 5 ;) I’ll put code+images to show problem:

    1.- Internet Explorer 6:
    – Main Navigation is messed up,

    Try making this selector grab all anchors (instead of a:link and a:visited only) and I’d keep it all lowercase:

    Code:
    .nav li a
    {
    position: absolute;
    top: 0;
    height: 52px;
    text-indent: -9000px;
    overflow: hidden;
    }
    "ipad" wrote:
    - Navigation 2 is missing:

    Give the .feed a width so that it can’t be 100% wide
    Also this (bolded) is not a good idea:

    Code:
    .feed {
    float:right;
    [b]margin:-37px [/b]55px 0 0;
    }

    Instead have move that div above ul.nav.current in your HTML markup

    "ipad" wrote:
    2.- Internet Explorer 7:

    – The search box is messed up too

    Yea, that’s a really wack way of positioning your search box. Simplify it by creating putting a div around it and positioning that div to the right. Then you can position the inputs/buttons inside that div seperately.

    "ipad" wrote:
    - The navigation 2 (feed/rss) isn’t float to the right, is showing to the left instead.

    See my note above

    "ipad" wrote:
    Here is the example link
    http://themeforest.webtipsmagazine.com/gs/

    Thanks.-

    Doh… Please put the link at the top next time ;)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".