Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

IE bumping menu DIV down below

Looks great in FF

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

New User

5+ Year Member

joined:May 2, 2012
posts: 7
votes: 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 { }
10:00 pm on May 21, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts: 2239
votes: 0

Floated elements act unpredictably when they don't have explicit widths. So
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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members