Grow your CSS skills. Land your dream job.

IE top: position not working!

  • # April 16, 2010 at 10:14 am

    I need help here so IE positioning is very different than in firefox. I’m not sure why that is.. but I’ve tried to set my top: to -1px 0px etc even higher than -1 like -5px and It will not go any higher but in firefox it will. I want to make my social media icons line up ontop of my header like it does in firefox…but in IE it doesn’t look right..

    CSS:

    #social_media_youtube {
    position:absolute;
    width:32px;
    height:32px;
    left: 879px;
    top: -5px;
    z-index: 10;
    }

    #social_media_facebook {
    position:absolute;
    width:32px;
    height:32px;
    left: 820px;
    top: -5px;
    z-index: 10;
    }
    #social_media_twitter {
    position:absolute;
    width:32px;
    height:32px;
    left: 850px;
    top: -5px;
    z-index: 10;
    }

    Any idea’s would be greatly appreciated thanks!!!

    # April 16, 2010 at 12:15 pm

    is it possible to post a link to the page? FireBug is my best friend ;-)

    -Jacob

    # April 16, 2010 at 12:49 pm

    hey! yeah of course here you go http://www.promoteyourteam.com works in chrome as well.

    # April 16, 2010 at 1:09 pm

    Expo,

    Try setting the positioning context for the social media links. That way you can absolutely position the icons within that context:

    Code:
    ul#top_nav li {
    position: relative;
    }

    #social_media… {
    top: -15px; // or whatever
    }

    Looks like you might need an IE specific stylesheet to get it right everywhere, though.

    Hope this helps.

    -Jacob

    # April 16, 2010 at 1:24 pm

    I’m just starting to learn CSS and enjoy it so sorry for being a noob….I’m not 100% on what you mean but i added

    ul#top_nav li {
    position: relative;
    }

    Then i was able to do :

    #social_media_youtube {
    position:absolute;
    left: 879px;
    top: -70px;
    z-index: 10;
    }

    and got it to line up perfect in IE.. but now in firefox its way to high up on the page. so it just back-flopped.

    If i were going to make a IE specific css file how would i do that?

    What do i do from here?

    Thanks for the help!

    ps. i also noticed that the homepage isn’t lined up right its slightly to the left.. but when you click on any other page besides the homepage it lines center. any idea how to fix that? i must be something on body css right?

    # April 16, 2010 at 1:31 pm

    Chris outlines the how-to/reasons-to implement IE only stylesheets here: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

    I’ll look at the page jump right now.

    -Jacob

    # April 16, 2010 at 1:35 pm

    Instead of setting a width and margin: 0 auto; on the body, wrap all of the contents inside the body in a <div> with an id like #pageWrap or #wrapper or whatever. Then set the width of this div to whatever, looks like you’re using 1024px. Then set it’s margin to margin: 0 auto; to center it on the page.

    http://css-tricks.com/snippets/css/centering-a-website/

    # April 16, 2010 at 1:40 pm

    thanks doodie! ill give it a try even though i’m not very good @ this :)

    — Made a all-ie-only.css and it worked! gotta work on the page position now!!! really appreciate your help thanks!! —

    # April 16, 2010 at 1:51 pm

    No problem. Glad I could help.

    If you have any other questions, feel free to hit me up. I’m sure you’ll figure it out, though.

    Definitely go back and check out some of Chris’ earlier screencasts. They’ll get you up to speed.

    -Jacob

    # April 16, 2010 at 2:08 pm

    Jacob -

    Tried the <div id="page-warp"> set it to 1024px but still isnt’ working…. Maybe its because its using a CMS(volusion) and it generates a dynamic page?

    # April 16, 2010 at 2:38 pm

    remove the width and margin from the body. also, your search div should have a set width on it, then position it accordingly.

    Do you use FireBug? It’s an addon for FireFox that makes life better…

    -Jacob

    # April 16, 2010 at 3:27 pm

    Sweet that worked!!! Thanks again Jacob! I wish i had you on MSN/AIM or something to annoy the crap out of you with my little questions :)

    # April 16, 2010 at 3:44 pm

    If you use Google Chat, PM me for my email address.

    Glad I could help!

    -Jacob

    # April 16, 2010 at 3:45 pm

    Oh yeah, I noticed that the body element on the homepage still has a margin-left set to 15px which causes a slight shift between pages…

    -Jacob

    # April 16, 2010 at 4:07 pm

    Thanks – PM’d :)

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

You must be logged in to reply to this topic.

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