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 (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%" 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 }
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%" 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 }