homepage Welcome to WebmasterWorld Guest from 23.20.19.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
IE bumping menu DIV down below
Looks great in FF
momma12345




msg:4455929
 1:24 pm on May 21, 2012 (gmt 0)

I have 2 divs, that are side by side. The left is the menu and the right are my social media icons. This appears beautifully in FF, but looks stupid in IE. When I preview in IE, it bumps the Menu down under the social icons div. It's in the correct position still, to the left, but it just sits 1 line down and looks off. I can't find a fix for IE. Here's some code...any ideas?


*/
html { padding:0; margin:0 auto; /*background:#e9e9e9 url(main_bg.jpg) repeat left top;*/}
body { margin:0; padding:0; width:100%; border:0; color:#8a8a8a; font:normal 13px/1.5em "Liberation sans", Arial, Helvetica, sans-serif; /*background:url(header_bg.gif) repeat-x left top;*/}
* { outline:none;}
.main { margin:0 auto; padding:0; background:#555 url(main_bg.jpg) repeat left top;}
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
h2 { margin:0; padding:10px 0; font-size:22px; font-weight:normal; color:#434343; text-transform:uppercase;}
p { margin:0; padding:8px 0;}
a { color:#ca3460; text-decoration:underline;}
img { border:none;}

.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar { margin:0; padding:0;}

/* header */
.header { padding:0 0 12px; background:url(header_bg.gif) repeat-x left 163px;}
.header_resize { margin:0 auto; padding:0; width:960px;}
.logo { padding:0; float:left; width:auto; height:134px;}
h1 { margin:0; padding:36px 0 0; font-size:58px; font-weight:normal; line-height:1.2em; color:#fff; text-transform:none;}
h1 a, h1 a:hover { color:#fff; text-decoration:none;}
h1 span { padding:0 4px; color:#fff; font-weight:bold; background:#ca3460;}
h1 small { display:inline; margin:0; font-size:13px; line-height:1.2em; text-transform:none; color:#fff; font-weight:normal;}
.slider { padding:0;}

/* social */
.social { padding:17px 20px 0 0; float:right; width:auto;}
.social p { padding:0; float:right; width:auto; color:#fdfdfd; text-align:right; font-size:13px; line-height:1.5em; font-weight:normal;}
.social a { color:#fdfdfd; text-decoration:none;}
.social a:hover { text-decoration:underline;}
.social img { margin:-3px 0 -3px 2px; border:none;}

/* menu */
.menu_nav { margin:0 0 16px; padding:0; height:54px; background:url(menu_bg.png) repeat-x left top;}
.menu_nav ul { list-style:none; padding:0; height:54px;}
.menu_nav ul li { margin:0; padding:0; float:left; border-right:1px solid #444;}
.menu_nav ul li a { display:block; margin:0; padding:0 0 0 20px; font-size:16px; line-height:20px; font-weight:normal; color:#c0c0c0; text-decoration:none; text-transform:uppercase; text-align:center;}
.menu_nav ul li a span { display:block; padding:17px 20px 17px 0; height:20px;}
.menu_nav ul li.active a, .menu_nav ul li a:hover { color:#fff; background:#ce3864;}
.menu_nav ul li.active a span, .menu_nav ul li a:hover span { }

 

createErrorMsg




msg:4456153
 10:00 pm on May 21, 2012 (gmt 0)

Floated elements act unpredictably when they don't have explicit widths. So
float:right;width:auto is almost guaranteed to give you problems.

Beyond that, I think we would need to see the accompanying html in order to see what is nested in what and properly recreate/diagnose the problem.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved