SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Absolute position problem in IE7/8

    So I am working on my new portfolio site and everything looks great in Firefox, Safari, Chrome etc. IE 7/8 is what is the issue for me right now.

    The issue is I have a header and a nav section that is getting pushed down the page. All the other elements on the page look great, just these 2 things. I am pulling my hair out trying to solve it. I have created an IE only style sheet to deal with it, but I am having no luck. I will post the code as it stands now for the problem areas:

    Here is the HTML code:
    Code HTML4Strict:
    <h1><a href="index.php">Arteye</a></h1>
    <div id="navdad">
    <div id="lnav">
    <ul id="leftnav">
    	<li><a href="projects.php" id="proj">Projects</a></li>
    	<li><a href="about.php" id="about">About Me</a></li>
    	<li><a href="devotion.php" id="dev">Devotion</a></li>
    </ul>
    </div>
    <div id="rnav">
    <ul id="rightnav">
    	<li><a href="thoughts.php" id="brain">Thoughts</a></li>
    	<li><a href="respect.php" id="resp">Respect</a></li>
    	<li><a href="contact.php" id="intouch">Contact</a></li>
    </ul>
    </div>
    </div>

    The current CSS for these problem items:
    Code CSS:
    h1 {  background: url(imgs/ae_top_logo.png) no-repeat; position:absolute; display: inline; float: left; left: 50%; margin: 12px 0 0 -385px; width: 769px; height: 210px; z-index:1; text-indent: -10000px; }
    h1 a { display: block; height: 131px; overflow: hidden; text-indent: -10000px; width: 100%; }
    #navdad { position:absolute; height: 43px; left: 50%; margin: 158px 0 0 -413px; width: 826px; z-index:3; display:inline; }

    If anyone has any suggestions, I would be most grateful. I don't want to not address IE users coming to my site as much as we all dislike the browser!

    Thanks!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    header and a nav section is getting pushed down the page. All the other elements on the page look great,
    Hi,
    We need to see the page to see what is going on. Please post a link if you have it online.

    Running the posted code by itself renders the same in FF and IE.

    For starters though you can take that inline display and float off the H1 because the absolute position wins out.

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure thing on the link. Here it is: http://www.arteye.com/client/csspost/

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Let's get rid of that absolute positioning on the H1 & #navdad div and let everything from there down be static blocks. Then center them with auto margins and lift that navdad div up with a negative top margin.

    These changes get it working for me in FF and IE -

    Code:
    h1 {  
    background: url(imgs/ae_top_logo.png) no-repeat;   
    margin: 12px auto 0; 
    width: 769px; 
    height: 210px; 
    text-indent: -10000px; 
    }
    #navdad {
    height: 43px;  
    margin: -64px auto 0; 
    width: 826px; 
    }
    #lnav { 
    position:relative; 
    float: left; 
    margin:0; 
    width: 297px; 
    height: 43px; 
    z-index:8; 
    }
    #rnav { 
    position:relative; 
    float: right; 
    margin:0; 
    width: 291px; 
    height: 43px; 
    z-index:9; 
    }
    
    #container {  
    margin: 0 auto; 
    width: 960px; 
    text-align: left; 
    overflow:hidden;/*contain floats*/
    }
    #hpf {  
    background: url(imgs/hp_feature.png) no-repeat; 
    float: left; 
    margin: 20px 0 0 0; 
    width: 960px; 
    height: 26px;
    }
    #hpfeature {  
    background: url(imgs/hp_feature_pama.jpg) no-repeat;  
    float: left; 
    margin: 6px 0 0 0; 
    width: 960px; 
    height: 457px; 
    }

  5. #5
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked as far as keeping it in tact for Firefox, it still looks messed up for me in IE. I added in your code as you mentioned. I get what you mean here but don't understand why it is still being crazy in IE.. I tried 7 and 8.

  6. #6
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wait! It does work. I forgot to take out all the stuff I was forcing in the IE only style sheet! Thanks for your advice. This worked nicely and makes sense over how I was doing it. I think I was making it more difficult than it needed to be.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked out for you!

    Yeah, I forgot about that IE stylesheet you were using, I did not even use it when I was testing your code on my local machine.

    There were a lot of other things that could have been cleaned up in your css but I will leave that to you. Just remember that when you set a float on an element or if it is a div there is no need to declare display;block; since they are block levels by default.

    No need to set floats along with absolute positioning either, position:absolute; carries more weight and negates the float.

    Cheers


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
  •