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..
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?
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.
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?
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!!!
-Jacob
Try setting the positioning context for the social media links. That way you can absolutely position the icons within that context:
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
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?
I'll look at the page jump right now.
-Jacob
http://css-tricks.com/snippets/css/centering-a-website/
--- Made a all-ie-only.css and it worked! gotta work on the page position now!!! really appreciate your help thanks!! ---
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
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?
Do you use FireBug? It's an addon for FireFox that makes life better...
-Jacob
Glad I could help!
-Jacob
-Jacob