View Full Version : IE7 zoom causing div elements to drift apart

Jan 12th, 2011, 03:26 AM
I am building a web site that uses 4 divs to separate a header that is the full width of the browser window, a links bar directly below that is also the full width of the browser window, a left ribbon that fills up about 20% of the width of the remaining area and the rest of the height, then a final content area that fills the rest of the space. The header, links bar, and left ribbon all have .png images that are absolutely positioned within the relatively positioned div. I have used percentages for this layout and would like to continue doing that. The ONLY issue I have with this plan so far is IE7 page zoom. It causes my div element images to drift apart if I zoom in or cover each other when I zoom out. As I zoom in the background images I have created - which are just inline elements absolutely positioned - spread apart revealing more of the body background image. Has anyone else experienced images within div elements spreading apart (when designed to otherwise be next to each other) in IE7 page zoom? IE8 and Firefox 3.6.3 does not increase the background images at all when using the ctrl+mouse wheel zoom. Maybe it is different in firefox or IE8 and it isn't even page zoom. I am not sure where to begin fixing this. Here is my html:

<!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">
<title>Temp Title</title>
<link href="Template_Pieces.css" rel="stylesheet" type="text/css" />

<div id="header"><img id="headerimage" src="Header_Bckgrnd.png" alt="header image" /><img id="headerlogo" src="Logo.png" alt="logo" /></div>

<div id="links_bar"><img id="linksbarbackgroundimage" src="Links_Bckgrnd.png" alt="links image" />
<div id="Links">
<div class="sitenav" id="musiclink"><a id="A1" class="sitenavlink" href="http://www.google.com" title="Hear Music"><img alt="Click To Hear Music" title="Hear Music" src="Link_Music.png" class="sitenavlinkimage"/></a></div>
<div class="sitenav" id="biolink"><a id="A2" class="sitenavlink" href="http://www.yahoo.com" title="Beyond the Sound"><img alt="Click to go beyond the music" title="Beyond the Sound" src="Link_Bio.png" class="sitenavlinkimage"/></a></div>
<div class="sitenav" id="performanceslink"><a id="A3" class="sitenavlink" href="http://www.cats.com" title="Upcoming Performances"><img alt="See When and Where I'm Performing" title="See When and Where I'll be Performing" src="Link_Performances.png" class="sitenavlinkimage"/></a></div>

<div id="left_ribbon"><img id="leftribbon_background" src="Left_Ribbon_Background.png" alt="left ribbon background" height="100%" /><img id="leftribbon_picture" src="Left_Ribbon_Pic_LakeMichThroughTrees.png" alt="picture of lake michigan" height="100%"/></div>

<div id="content"></div>


Here is the CSS

html, body {height:100%; background-image: url('BrownBackground_Extended.png'); border: 0px; margin: 0px; padding: 0px}

#header {padding: 0px; margin: 0px; border: 0px; top: 0px; left: 0px; height: 20%; width: 100%; position: relative}
#headerimage {width: 100%; height: 100%; z-index: 1}
#headerlogo {z-index: 2; left: 16%; top: 8%; position: absolute; height: 90%}

#links_bar {padding: 0px; margin: 0px; border: 0px; height: 15%; width: 100%; position: relative}
#linksbarbackgroundimage {height: 100%; width: 100%; position: absolute; top: 0px; left: 0px}

#Links {position: absolute; top: 23%; height: 80%; left: 12%; width: 75%}
.sitenav {position: relative; float: left; border: 0px; padding: 0px; margin-left: 8%; margin-top: .1%; margin-bottom: .2%; height: 35%}
.sitenavlinkimage {border-style: none; height: 70%}
#musiclink {margin-left: 0px}
#left_ribbon {height: 65%; width: 15%; position: relative; border: 0px; margin: 0px; padding: 0px; left: 0px}

#leftribbon_background {height: 102.8%; width: 105%; z-index: 1; position: absolute; top: -2.8%; left: -5%; border: 0px; margin: 0px; padding: 0px}
#leftribbon_picture {height: 99%; width: 92%; z-index: 2; position: absolute; top: 0px; left: 0px}

This is meant to be a fluid design and does so very well. It is just eh IE7 zoom that is killing. Any help will be much appreciated.


Jan 26th, 2011, 11:46 PM
For anyone who comes here looking for an answer - to fix my problem I made the parent element relatively positioned. In my case the div elements were inside the body tag, so I added the position: relative attribute to my CSS for the body element. That fixed it.