misaligned header in IE

**sprintuser** · 07:18 PM

I'm hoping there's some thing that can be done to fix the header in IE.
It works fine in Firefox and Netscape but in IE there's 2 problems.
First, it's off by a few pixels to the right in IE.

Also there's a gap between the red image in the header on the left and the mainContent div.

Here's the code:

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" />
<title>Untitled Document</title>
<style type="text/css"> 
<!-- 
* {
    margin: 0;
    padding: 0;
}


h1, h2, h3 {

    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    font-style: italic;
    color: #303030
        margin: 0;
}

h2 {
    font-weight: bold; color:#5d7858;
}
body  {
border:0;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background-color:blue;
    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;
}
.twoColFixRtHdr #header {
 
  height:338px;
  margin-bottom:0px;
 margin-top:0px;
     text-align: left;
    margin-left:0px;
    display: inline;
float: left;
position:relative;
padding:0px 0 0 0;
    margin: 0;
 
}
.twoColFixRtHdr #container { 

    width: 780px;  
    background: green;
 
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border-bottom:10px solid #000000 ;
    border-left:10px solid #000000 ;
    border-right:10px solid #000000 ;
    margin-top: 0px;
 
    text-align: left; /* this overrides the text-align: center on the body element. */
} 
  
.twoColFixRtHdr #sidebar1 {
    float: right; 
    width: 305px; 
    background:green; 
    padding: 0px 0px 0 10px 0;
    border:0px; margin:0px; padding:0px;
    
}
.twoColFixRtHdr #mainContent { 

    width: 450px;
    margin: 0 0px 0 0; 
    padding: 0 0 0px 10px; 
} 

.twoColFixRtHdr #upper {
    padding: 10px 10px 20px 10px; 
    background-color:#D3D4C9;
    font-size:16px;
    font-family:Georgia, Times New Roman, Times, serif;
    font-stretch:expanded;
    font-weight:bold;
    border:0px; margin:0px;  
    
}
.twoColFixRtHdr #upper  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 */
    }
    
    
.twoColFixRtHdr #footer a {
    color: #999999;
}
.twoColFixRtHdr #footer {
    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 */
    font-size: x-small;
    color: #999999;
    
 

 

    
 }
 
.tab {
    font-family: "Times New Roman", Times, serif;
    font-size: 13px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    color: #000000;
     display:inline
     border:0px; margin:0px; padding:0px;
}

  .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;
}

 

--> 
</style><!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="twoColFixRtHdr" >
<!-- Header -->
<div id="header" style=" display: inline">
   <table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td> <img src="http://www.webmaster-talk.com/images/spacer.gif" width="592" height="338" alt="dsfsf" align="left"  /> </td><td><img src="http://www.webmaster-talk.com/images/spacer2.gif" width="311" height="339" alt="sdfsdff" align="right"    /></td>
  </tr>
</table>
</div>
<div id="container" > 

 <!-- right column -->
  <div id="sidebar1">
    <br />

  
 <table width="224"   border="0" cellpadding="0" cellspacing="0" bgcolor="#B4C6A8">
  <tr>
    <td width="244" align="center"><font size="12" color="#FFFFFF"><strong>ABCDE</strong></font></td>
  </tr>
</table>
 <table width="224"   border="0" cellpadding="0" cellspacing="0" bgcolor="#9FAB8F">
  <tr>
    <td width="244" align="center"><font size="12" color="#FFFFFF"><strong>ABCDE</strong></font></td>
  </tr>
</table>
 <table width="224"    border="0" cellpadding="0" cellspacing="0" bgcolor="#99A572">
  <tr>
    <td width="244" align="center"><font size="12" color="#FFFFFF"><strong>ABCDE</strong></font></td>
  </tr>
</table>
<br />
<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas diam. Proin adipiscing, urna at blandit molestie, velit ipsum suscipit enim, ut accumsan tellus tortor eu quam. Donec suscipit suscipit eros. Donec consequat fringilla eros. Nunc rutrum, quam eget ornare varius, risus nulla faucibus mi, in placerat risus arcu non orci. Phasellus quis nibh. Sed in leo
<!-- end #sidebar1 -->
  <!-- end of right column -->
<!-- right column --></div>
  <div id="mainContent" style="float: left; display: inline"><br />
  
  <br /> 
    <h2> Welcome </h2><br />
 

   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas  diam. Proin adipiscing, urna at blandit molestie, velit ipsum suscipit  enim, ut accumsan tellus tortor eu quam. Donec suscipit suscipit eros.  Donec consequat fringilla eros. Nunc rutrum, quam eget ornare varius,  risus nulla faucibus mi, in placerat risus arcu non orci. Phasellus  quis nibh. Sed in leo. Vivamus hendrerit est quis lectus. Etiam mollis  lorem et justo. Pellentesque sodales, ante ac ornare ullamcorper,  ligula libero venenatis tortor, a sollicitudin ipsum metus ac ipsum. Ut  nibh velit, molestie eget, dictum et, convallis nec, erat.</p>
 
 
 
 
  </div>
    
    <!-- end #mainContent -->
    <!-- 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="upper" align="center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas diam. Proin adipiscing, urna at blandit molestie. Donec suscipit suscipit eros.  <br /> 
<br />


<center> <table width="605" border="0" cellspacing="5" cellpadding="5"   class="tab">
  <tr>
    <td width="306" valign="top" >  
 <strong> <font color="#3C3C3C">sfsdfsdf</font> </strong>&nbsp;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas diam. Proin adipiscing, urna at blandit molestie, velit ipsum suscipit enim, ut accumsan tellus tortor eu quam. </td>
    <td width="264"valign="top"> <strong><font color="#3C3C3C"> abcdim</font></strong> &nbsp;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas diam. Proin adipiscing,  </td>
  </tr>
</table></center>

   
 </div>
  <div id="footer">
<p align="center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
  <!-- end #footer --></p></div>
<!-- end #container --></div> 
</body>
</html>

here's what it looks like
http://s88077848.onlinehome.us/helooo/dwspan.html

I don't know if it's a glitch from IE or it's my own coding.
Btw when I made the two images of the header into one big image (1005x335) it still has the same problem in IE. I'm really hoping it can be fixed. What I'm trying to do is have a header that looks like it's spills out of the border (but it's just a big left header image)...like this http://www.csszengarden.com/?cssfile=100/100.css http://www.csszengarden.com/?cssfile=207/207.css

If there's no way to fix it, can someone recommend a tutorial on how to do the image overlapping outside of the border? Does that involve css or can it be done another way.. a better way than my shortcut of using graphics?

I'd really appreciate any help, thanks in advance!

Btw I just pulled up their layout in IE and they have different flower images for IE and FF.
How do I go about coding my site so it pulls up a different image for each browser? (The reason I ask is because I don't want to infringe any copyrights if I follow their code for that absolute positioning.)

**vn5ltr** · 05-29-2008, 02:25 AM

That looks really, really messy.

First of all, I don't see why you are zeroing ALL margins (*) as they will affect form elements like select boxes when you use them. You only need to zero things like headers, p's, div's, lists, etc. You are also re-zeroing margins after you have zeroed them globally!!!!

Secondly, never use BR 's unless you have to. They are extra markup for nothing when everything like that can be controlled via css. You are also laying out a page with divs AND tables! Yuck. Make the choice. Tables or css positioning.

Finally, there is no need for conditional IE comments for a basic css layout such as yours. Everything can be positioned perfectly if you write clean, understandable and logical code.

I don't see what you are trying to achieve because when i pop it up in my firefox browser, the red box is aligned with the extreme left side of my screen and the pink box to the right of it. So to me, unless that is the effect you are trying to achieve, it doesn't seem to work in neither IE nor Firefox.

**sprintuser** · 05-29-2008, 03:13 AM

I wanted the red image to be against the far left margin and the other to end at the border. So that was on purpose. What I want to do is to have both the header images to align with the bottom and in IE it's not and there's also a tiny gap under the red image.

I zeroed the margins at the last minute hoping that maybe it will somehow work in IE. As you can tell, I really need help. I also added display: inline to the header which really moved the header to about where it belongs. But I still need to move it a few more pixels in IE.

Is there a reason why I need to pick either tables or css? will tables affect the code?

I didn't write the code. It was a css structural template from dreamweaver so those comments were included and I didn't bother to delete them yet.

So far I guess I need to take out <BR> and not zero all margins and forget tables. But will doing these things fix what I want??

Again, the left image is on purpose because I wanted to get the appearance of an image spilling outside of the borders like those links I provided(not sure what the correct term is that's why I can't really google a tutorial if there is any). I changed the image so maybe now you can see what I mean.

**wayfarer07** · 05-29-2008, 09:42 AM

There's nothing wrong with zeroing all padding and margins with the universal selector:

Code:

* {
padding: 0;
margin: 0;
}

I do this every time I start a stylesheet, which is often. This resets the browser defaults so that they are more structurally similar to each other. This is especially useful for form elements, which depend on operating system and browser for their original specification. You will need to add your own margins on paragraphs, headings, etc, but you will have complete control.

Also, I recommend this in the body:

Code:

body {
font-size: 62.5%;
}

Percentages are the only way to get consistent font defaults across all browsers. This exact percentage allows ems to be expressed (at default font settings) as if they were pixels, where 1em = 10px. This is very useful when designing proportional elements that must expand along with font sizes.

But we're getting a bit off topic. The real question is, why are you worried about only a few pixels?

**LadynRed** · 05-29-2008, 10:14 AM

Tables are fine - as long as they are used for TABULAR DATA, they should NEVER be used for layout, for that you need CSS. You can get almost anything you want in a layout with CSS.

As for your examples, you need to look at how they were constructed. The one with the umbrella - view the background image to see how it was achieved. The header doesn't really 'spill out'. On the one with the flower, the flower is absolutely positioned at the top, so the 'spill over' is something of an illusion, the header itself doesn't really spill out.

**sprintuser** · 05-30-2008, 06:46 PM

Wayfarer07 thanks for the tips, I think I'll do that with the margins/padding and font from now on. As for your question, I'm not really sure how to answer that... I thought we all strive to have our sites look exactly how we want it to look in each browser. For me these few pixels are really glaring and obvious and I can't ignore it.

LadyNRed, thanks for clarifying about the tables.

with my layout, I tried to follow the example of the umbrella layout by making my graphic "look" like it's coming out of the borders with just one image.

since that's not working in IE, I just redid it today with absolute positioning.

I added:

Code:

#pix{
    position: absolute;
    width: 200px;
    left: 0px;
    height: 150px;
    border: 0px;
    top: 0px;
}
</style>
<body class="twoColFixRtHdr" >
 <div id="header" style=" display: inline">
   <table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td> <img src="images/spacer.gif" width="592" height="338" alt="dsfsf" align="left"  /> </td><td><img src="images/spacer2.gif" width="311" height="339" alt="sdfsdff" align="right"    /></td>
  </tr>
</table>


<div id="pix">
            <img src="images/left.gif" width="592" height="338" alt="dsfsf"  />        </div>

</div>

But again there's still the same problem in IE.

Any tips?? I'm doing absolute positiong differently than the flower layout example.. is that the reason or is it just IE?

**wayfarer07** · 05-30-2008, 07:39 PM

You may want to start here: http://validator.w3.org/check?verbos...%2Fdwspan.html

Of interest: I removed the table in the header completely, and floated the images to the left, which has the exact same result. I also removed the "align" property in the images, since it is depreciated, and wasn't doing anything anyway.

**vn5ltr** · 01:03 AM

Quote:

Originally Posted by wayfarer07

There's nothing wrong with zeroing all padding and margins with the universal selector:

Code:

* {
padding: 0;
margin: 0;
}

I do this every time I start a stylesheet, which is often. This resets the browser defaults so that they are more structurally similar to each other. This is especially useful for form elements, which depend on operating system and browser for their original specification. You will need to add your own margins on paragraphs, headings, etc, but you will have complete control.

Also, I recommend this in the body:

Code:

body {
font-size: 62.5%;
}

Percentages are the only way to get consistent font defaults across all browsers. This exact percentage allows ems to be expressed (at default font settings) as if they were pixels, where 1em = 10px. This is very useful when designing proportional elements that must expand along with font sizes.

But we're getting a bit off topic. The real question is, why are you worried about only a few pixels?

Wrong. Form elements will inherit the zeroing. Your select boxes will be affected amongst other things. Have you ever tested every element for yourself under firefox, opera and IE? I doubt it by saying zeroing EVERYTHING is good practice.

And why would someone be worried about a few pixels? That's ridiculous, sorry. To me, if you classify yourself as a quality designer and developer, you would.

**wayfarer07** · 12:41 PM

Quote:

I doubt it by saying zeroing EVERYTHING is good practice.

Hey, call me a control freak, but I'd much rather have control over my forms than have inconsistencies. I've done it like this for a long time and never had any problems. This is especially useful to someone like me, who usually works with very picky designers that often prefer images over natural form elements. Zeroing the margins and padding on the form elements also help give me better exact control over the dimensions and positioning if each element. And it isn't hard to re-add padding if it is needed, but often it isn't.

And a few pixels difference in IE6, for example, is usually not a big deal, in the right circumstances, depending on it's effect on the real look of the layout. Obsessive-compulsive perfectionists are the worst kind of person to work with, because they never get anything done.

**vn5ltr** · 06-01-2008, 07:06 PM

Quote:

Originally Posted by wayfarer07

And a few pixels difference in IE6, for example, is usually not a big deal, in the right circumstances, depending on it's effect on the real look of the layout. Obsessive-compulsive perfectionists are the worst kind of person to work with, because they never get anything done.

Obvious pixel misalignments are not acceptable such as gaps between images or offset images when they should be aligned. Invisible differences such as whitespace between paragraphs or list items, etc. are acceptable.

To some degree, I would agree with you that perfectionists can take longer, but the end results speak for themselves.

**wayfarer07** · 06-01-2008, 10:12 PM

I would agree that obvious misalignments are improper. I would never let something that is really wrong go just because it may take a little longer.