IE problem with position relative

moleculezz · 02-20-2008, 07:20 PM

Hello,

I seem to have a small problem with IE. I have a site that is centered but there is 1 div that I have the position set to relative for a specific reason that is giving me some trouble. In IE it doesn't flow correctly when you resize the browser width. Only when you hit refresh that the specific div goes to its correct position. This happens both in IE6 and IE7. In Firefox it flows smoothly to its position when I resize the browser.

You can check out the page here: demo page

here is the html code:

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="base.css" type="text/css" />
<title>Interprint</title>
</head>

<body>
<div align="center"><div id="wrapper">
<div id="head"><img src="images/top-yellow.png" width="596" height="84" alt="" /></div>
<div id="logo"><img src="images/logo.png" width="80" height="141" alt="" /></div>
<div id="menu">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="home"><a href="#"><span>home</span></a></td>
<td class="services"><a href="#"><span>services</span></a></td>
<td class="portfolio"><a href="#"><span>portfolio</span></a></td>
<td class="quotations"><a href="#"><span>quotations</span></a></td>
<td class="company"><a href="#"><span>company</span></a></td>
</tr>
</table>
</div>
<div id="main"></div>
<div id="footer">
<p>All rights reserved — Developed by: A Inc.</p>
</div>
</div></div>
</body>
</html>

here is the css code:

Quote:

*{ margin:0; padding:0 }
html {background:#FFF}

body {
background: url(images/bg.gif) repeat-y #FFF;
font-family:Arial, Helvetica, sans-serif;
color:#666;
width:770px;
margin:0 auto;
text-align:center;
}
#wrapper{width:596px; margin:0 auto}
#head, #logo, #menu, #main { display:inline-block }

#head{ }
#logo{ position:relative; float:left; top:-35px }

#menu{
float:left;
background: url(images/bg_menu_right_border.gif) no-repeat top right #ADAFB2;
width:515px;
height:27px;
margin-top:7px;
text-align:left
}
#menu table{ width:380px }
#menu td{ width:76px; height:27px }

#menu a span { display:none }
#menu a { display:block; width:76px; height:27px }

td.home a { background-image:url(images/menu_home.gif); }
td.services a { background-image:url(images/menu_services.gif); }
td.portfolio a { background-image:url(images/menu_portfolio.gif); }
td.quotations a { background-image:url(images/menu_quotations.gif); }
td.company a { background-image:url(images/menu_company.gif); }

td.home a:visited { background:url(images/menu_home.gif) no-repeat; display:block; width:76px; height:27px }
td.services a:visited { background:url(images/menu_services.gif) no-repeat; display:block; width:76px; height:27px }
td.portfolio a:visited { background:url(images/menu_portfolio.gif) no-repeat; display:block; width:76px; height:27px }
td.quotations a:visited { background:url(images/menu_quotations.gif) no-repeat; display:block; width:76px; height:27px }
td.company a:visited { background:url(images/menu_company.gif) no-repeat; display:block; width:76px; height:27px }

td.home a:hover { background:url(images/menu_home_hover.gif) no-repeat; display:block; width:76px; height:27px }
td.services a:hover { background:url(images/menu_services_hover.gif) no-repeat; display:block; width:76px; height:27px }
td.portfolio a:hover { background:url(images/menu_portfolio_hover.gif) no-repeat; display:block; width:76px; height:27px }
td.quotations a:hover { background:url(images/menu_quotations_hover.gif) no-repeat; display:block; width:76px; height:27px }
td.company a:hover { background:url(images/menu_company_hover.gif) no-repeat; display:block; width:76px; height:27px }

#footer{ font-size:65%; clear:both }

jcdevelopment · 02-20-2008, 07:32 PM

if you dont mind me asking why dont you include the picture as a background image in your css like

Code:

#logo{ position:relative; float:left; top:-35px; background-image:url(path...); height:..; width:..; }

i dont know if that would help correct it or not.

also the top-35px did not end in an ";"

i looked through alot of your css, and there are quite a few with an ";", its good practice to end all with them

moleculezz · 02-20-2008, 08:19 PM

Quote:

Originally Posted by jcdevelopment

if you dont mind me asking why dont you include the picture as a background image in your css like

Code:

#logo{ position:relative; float:left; top:-35px; background-image:url(path...); height:..; width:..; }

i dont know if that would help correct it or not.

also the top-35px did not end in an ";"

i looked through alot of your css, and there are quite a few with an ";", its good practice to end all with them

Tried what you suggested but did not change anything.. thanks though.

And for not having ";" after is fine.... the last property you don't have to put ";"

jcdevelopment · 02-20-2008, 08:46 PM

ok, sorry it must some stupid IE glitch!! Ok, i was told once that it did matter but it was from someone whos wasnt that great of a teacher, haha!!