I have a problem with my header moving left and right when resizing my Internet Explorer window. Instead of using text for my header I used images. Does anyone know what the problem could be and how to fix it?
Here is my coding:
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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>F-Body Mopars</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
*/
.twoColElsLtHdr #container {
width: 46em; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #660000;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColElsLtHdr #header {
background: #660000;
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.twoColElsLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 150px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
*/
.twoColElsLtHdr #sidebar1 {
float: left;
width: 12em; /* since this element is floated, a width must be given */
background: #660000; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
}
.twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
*/
.twoColElsLtHdr #mainContent {
margin: 0 1.5em 0 13em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
}
.twoColElsLtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#660000;
}
.twoColElsLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.style6 {font-size: x-large; font-family: Hyborian; }
.style8 {font-size: large; font-family: Hyborian; }
.style10 {font-size: xx-large; font-family: Hyborian; }
.style11 {
font-size: large
}
.style15 {
font-size: medium
}
-->
</style><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColElsLtHdr">
<div id="container">
<div id="header">
<h1></h1>
<!-- end #header --></div>
<div Id="image0" name="image0" style="position:absolute; left:277px; top:7px; z-index:4252">
<img src="_wizardimages/moparsymbollogolightred2.jpg" width="300" height="300"></div>
<div Id="image1" name="image1" style="position:absolute; left:612px; top:12px; z-index:4253">
<img src="_wizardimages/moparfbodyslogan12.jpg" width="400" height="125"></div>
<div Id="image2" name="image2" style="position:absolute; left:576px; top:154px; z-index:4274">
<img src="_wizardimages/dodge-symbol.jpg" width="92" height="75"></div>
<div Id="image3" name="image3" style="position:absolute; left:670px; top:154px; z-index:4275">
<img src="_wizardimages/rt-symbol.jpg" width="95" height="75"></div>
<div Id="image4" name="image4" style="position:absolute; left:770px; top:154px; z-index:4276">
<img src="_wizardimages/plymouth-symbol.jpg" width="126" height="75"></div>
<div Id="image5" name="image5" style="position:absolute; left:906px; top:154px; z-index:4277">
<img src="_wizardimages/rr-symbol.jpg" width="108" height="75"></div>
<div id="sidebar1">
<h3 align="left" class="style6">Sections</h3>
<p class="style8"><a href="http://www.fbodymopars.com/forums">Forums</a></p>
<p class="style8"><a href="http://www.fbodymopars.com/email">E-Mail</a></p>
<p class="style8"><a href="http://www.fbodymopars.com/chat">Live Chat</a></p>
<p class="style8"><a href="http://www.fbodymopars.com/forums/viewforum.php?f=12">Classified Ads</a></p>
<p class="style8"><a href="http://www.fbodymopars.com/pictures.html">Pictures</a></p>
<p class="style8"><a href="http://www.fbodymopars.com/parts.html">Parts</a></p>
<p class="style8"><a href="http://www.fbodymopars.com/links.html">Links</a></p>
<p class="style8"><a href="http://www.fbodymopars.com/contact.html">Contact</a></p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1 align="center" class="style10">Welcome To F-Body Mopars</h1>
<p class="style11">This website is dedicated to the Dodge Aspen and Plymouth Volare that was manufactured by Chrysler in 1976 1977 1978 1979 and 1980</p>
<h2>News</h2>
<p class="style15">I have 1000+ fbodymopars.com email accounts to give away. (@fbodymopars.com)<br />
Contact me with the email address you would like to have and the password you would like to use and I will get you setup. You may change your password later after.</p>
<p class="style15">8/16/08 - Gave main website a complete makeover</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<div align="center"></div>
<p align="center" class="style15">F-Body Mopars Copyright © 2008</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Header Moves When Resizing Internet
