- This topic is empty.
-
AuthorPosts
-
April 16, 2010 at 10:14 am #28752expo703Participant
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 #74251doobieMemberis it possible to post a link to the page? FireBug is my best friend ;-)
-Jacob
April 16, 2010 at 12:49 pm #74254expo703Participanthey! yeah of course here you go http://www.promoteyourteam.com works in chrome as well.
April 16, 2010 at 1:09 pm #74258doobieMemberExpo,
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 #74260expo703ParticipantI’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 #74261doobieMemberChris 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 #74279doobieMemberInstead 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.
April 16, 2010 at 1:40 pm #74280expo703Participantthanks 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 #74281doobieMemberNo 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 #74285expo703ParticipantJacob –
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 #74266doobieMemberremove 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 #74267expo703ParticipantSweet 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 #74268doobieMemberIf you use Google Chat, PM me for my email address.
Glad I could help!
-Jacob
April 16, 2010 at 3:45 pm #74269doobieMemberOh 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 #74272expo703ParticipantThanks – PM’d :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.