SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This is a completely noob question. Margin-top not working in IE.

    I have a website: Action One . In IE the nav bar malfunctions it automatically goes down to the next wrapper? I guess that what you call it. But in Firefox it works as it should. I can give you a copy of the css file, I've googled but the explanations I've found really do no justice. If anyone has enough patience to provide an explanation I would be so grateful.
    Here is the CSS:
    .navigation {
    background: url("http://www.sitepoint.com/forums/images/navbar.jpg") no-repeat scroll 0 0 transparent;
    font-size: 12px;
    height: 48px;
    margin-left: 245px;
    margin-top: 60px; This is what doesn't work in IE.
    padding-right: 18px;
    position: relative;
    width: 689px;
    z-index: 6;

    If anyone needs the index.php file I'll be happy to post it Thanks in advance guys!
    Last edited by ScallioXTX; Jul 2, 2011 at 02:11. Reason: .

  2. #2
    SitePoint Enthusiast alexson's Avatar
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in your html you call a second css file with IE hacks in it:

    http://actionone.net/wp-content/them...eativix/ie.css

    In this you specify a float:left and margin of -50px, if I disable these in IE's dev tools the menu moved to the correct place.

    So I think if you delete the .navigation class in the IE stylesheet above it'll work

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you can see, it drops it down lower in IE now. My current navigation settings are as follow(again this is my style.css not iecss):
    .navigation {
    background: url(images/navbar.png) no-repeat;
    padding-right:18px;
    font-size:12px;
    position: relative;
    z-index: 6;
    width: 689px;
    height: 48px;
    margin-left: 217px;
    margin-top: 50px;
    }

    If you view it in IE currently you can see the result after I deleted the .navigation in the iecss file. I'll leave the settings so everyone is able to see what is going on between ie and ff. Thank you for your input, we have a stepping stone

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The main problem is that you have set the header to height 100px which is is clearly incorrect as the logo itself is 200px high. Good browsers will assume that anything over the 100px height will be ignored and therefore the nav is placed ignoring the great big logo that is in the way. IE tries to help you out and expands the header to include the logo and thus misplacing the navigation. The header doesn't really need a height anyway as the content will dictate that.

    I would set position:relative on the header and remove the height and that will allow you to absolutely position the nav in the top right corner. You can then remove the redundant margin-top from your slider.

    Code:
    #header{position:relative;}
    .navigation {
        background: url(http://actionone.net/wp-content/themes/wp-creativix/images/navbar.png) no-repeat;
        padding-right:18px;
        font-size:12px;
       /* position: relative;*/
        z-index: 6;
        width: 689px;
        height: 48px;
        position:absolute;
        top: 50px;
        margin:0;
        right:0;
    }
    
    
    
    #slide-wrapper {
        background: url(http://actionone.net/wp-content/themes/wp-creativix/images/slider-bg.gif) no-repeat;
        width: 921px;
        height: 365px;
        /*margin-top: 147px;*/
        padding-top:5px;
        z-index:1;
        margin-left: 10px;
        clear: both;
        float: left;
        margin-bottom: 5px;
    }
    That seems to get the desired effect in all browsers consistently.

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YOU GUYS ROCK!!!!!! THANK YOU FOR ALL YOUR INPUT!!!!! I've been lurking for 5 years, my first post, you guys nailed it. Thank you Paul O'B for taking the time. You guys ROCK!


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
  •