...

View Full Version : IE problem with position relative



moleculezz
02-20-2008, 08: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 (http://home2.telebyte.nl/~gdarends/demo.html)

here is the html code:


<!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&#37;" 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:


*{ 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, 08:32 PM
if you dont mind me asking why dont you include the picture as a background image in your css like



#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, 09:19 PM
if you dont mind me asking why dont you include the picture as a background image in your css like



#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, 09: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!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum