Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE top: position not working!

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #28752
    expo703
    Participant

    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!!!

    #74251
    doobie
    Member

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

    -Jacob

    #74254
    expo703
    Participant

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

    #74258
    doobie
    Member

    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

    #74260
    expo703
    Participant

    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?

    #74261
    doobie
    Member

    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

    #74279
    doobie
    Member

    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/

    #74280
    expo703
    Participant

    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!! —

    #74281
    doobie
    Member

    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

    #74285
    expo703
    Participant

    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?

    #74266
    doobie
    Member

    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

    #74267
    expo703
    Participant

    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 :)

    #74268
    doobie
    Member

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

    Glad I could help!

    -Jacob

    #74269
    doobie
    Member

    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

    #74272
    expo703
    Participant

    Thanks – PM’d :)

Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.