Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: <div> position problem

  1. #1
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default <div> position problem

    Hello,

    Using <div>s with code like this

    #Layer1 {
    position:absolute;
    left:193px;
    top:121px;
    width:106px;
    height:17px;
    z-index:1;
    }

    seem not to be working in IE6. The site is for a friend and I really want to get it right... does that look wrong to anyone?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,166
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    There isn't really enough information there to tell much. We would need to see it in connection with the content. The width and height of an absolutely positioned element will not take up any layout space though.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I just shot you a PM. Need your opinion before I post more information. Thanks!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,166
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    The only problem in IE 6 that I see is that your png's which apparently use alpha channel transparency, look opaque. As someone suggested in another thread, try .gif's. Unless you are using partial transparency, this will be fine. Even if you are, there may be a way, with the full transparency of a .gif to get the effect you want. The alternatives are:

    1. Have special css that uses .gif's for IE 6 and below only.
    2. Use IE 6's alpha image loader filter (the filter is tricky and poorly designed, I do not recommend this but, it can be done).
    3. Use a different design altogether.


    I don't see this as having anything to do with the bit of style that you posted in your first post in this thread.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The .PNGs will be replaced by text soon. So I am not conserned with the alpha problem.

    What I am having trouble with is the position of the nav menus in IE6. The position of the <div>s are defined in the .css file. They work like a champ in IE7 but not IE6.

    www.coreyhine.com is the site.

    Here is part of a screenshot Corey sent me http://www.flickr.com/photos/39111115@N00/358583119/

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,166
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    It simply doesn't look like that in IE 6 here. Not much more I can say about it. Make sure that your friend empties the cache in the browser and tries again.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok, found out why it looked different to you. You didnt look at the 'graphic design' page. I have cleaned up the code so that all the nav buttons now pull from the same external css.

    www.coreyhine.com/test

    On IE6 stacks them all to the left. Here is the code for the graphic design button <div>

    #LayerGraphicDesign {
    position:fixed;
    left:193px;
    top:121px;
    width:106px;
    height:17px;
    z-index:1;
    }

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,166
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    That's different than the style in your in your first post and is the problem. IE 6 and before don't do position:fixed; - so if you can live with position:absolute; - it would be the same in all browsers. If you want to only use position:absolute in IE 6 and earlier, you can probably use the hack:

    Code:
    #LayerGraphicDesign {
    position:fixed;
    left:193px;
    top:121px;
    width:106px;
    height:17px;
    z-index:1;
    }
    
    * html #LayerGraphicDesign {
    position:absolute;
    }
    Fortunately, in this case, even IE 7 will ignore this as will all other browsers except IE versions 6 and less. But, it won't validate and will show errors in some browsers' error consoles. The preferred method would be an IE version specific conditional comment. This would require a separate stylesheet linked to, or a separate style section on each page though. To do that, make an IE version specific comment with the added stylesheet link contained within:

    Code:
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="ie_6_and_less.css" type="text/css">
    <![endif]-->
    Place that below the regular stylesheet link on each page and then in the ie_6_and_less.css file have:

    Code:
    #LayerGraphicDesign {
    position:absolute;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    FANTASTIC. I'll give this a shot tonight! MANY THANKS.

    I apologize for the confusion about my previous code... being new at css the first few versions of the site weren't coded clean... i.e. most pages contained their own css in the header. I have since cleaned the code for the /test page. But even now if you go to www.coreyhine.com and go to the graphic design page, then look at the code, you will notice that has a different css than the other pages blah, I AM LEARNING THOUGH!

  10. #10
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is what the site looks like in Safari.

    http://www.flickr.com/photos/39111115@N00/361628244/

    I want to learn CSS better, but my first understanding was to get sites to look the same across all browsers... this simply has been the oposite from my experience. :/

    Am I doing something fundamentally wrong?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •