Background.gif in diff browsers? uneven?

[nlikens]

I have a background.gif that will not line up in I.E., it works perfectly in Firefox, but when I go to I.E. Its off about 10 pixels, Im stumped as to why? Any one know of any workarounds?

heres the link

http://www.charterglobal.com/about_us/overview.htm

[neilkw]

are you referring to the vertical grey line?

[nlikens]

NO the Background.gif image for the right part of the screen. The horizontal lines that line up with the options and header. The header portion is white and the one right below is a very light blue.

They line up evenly with the images in FIrefox, but in I.E. they shift down about ten pixels making the background.gif image uneven and not lining up as it should.

[jscheuer1]

This is the code for that bottom area:

<table width="100%" border="0" cellspacing="0" cellpadding="6">
      <tr>
        <td width="4%" bgcolor="#7193a9">&nbsp;</td>
        <td width="18%" bgcolor="#7b9aaf">&nbsp;</td>
        <td width="75%" class="subtopic_text"><div align="center"><a href="http://www.charterglobal.com/contact.htm" class="subtopic_text">Contact Us</a> &nbsp;| &nbsp;<a href="http://www.charterglobal.com/sitemap.htm" class="subtopic_text">Site Map</a> &nbsp;| &nbsp;<a href="http://www.charterglobal.com/legal.htm" class="subtopic_text">Legal</a> &nbsp;| &nbsp;<a href="http://www.charterglobal.com/privacy.htm" class="subtopic_text">Privacy </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Copyright Charterglobal.com All rights Reserved 2006</div></td>
        <td width="3%" bgcolor="#6a7377">&nbsp;</td>
      </tr>
    </table>

Since the widths of the cells (td tags) are set in percentages, they become subject to the vagaries of browser interpretation. Just for your information, Opera displays it off as well but by a different amount of space. I think FF counts the cellpadding when determining % width and IE does not or it may be the other way around. If you were to use a strict DOCTYPE the various browsers might see things more alike but it may also throw off other alignments on the page. This is probably the best solution though it would be a bit of work, getting things to look as intended, overall, with a strict DOCTYPE. Another fairly good solution, if applicable (I haven't looked that deeply into the overall page structure), would be to make this bottom table not a separate table as it now is but to make it a continuation of the table above it that contains the vertical line that you are concerned with, that way the cells would have to line up. Also consider the fact that it doesn't look so bad in IE. Consider leaving it alone. However, you could style the elements involved using IE specific styling for IE and allowing others to use your default. One way to do this is:

<td style="width:20px!important;width:18px">

The first 20px value will be used by all browsers except IE. This is by far not the best solution but simply the most expedient.

[jscheuer1]

I just realized that my above response may not address your concern but, since I am not sure, I am leaving it there. Further analysis of your page showed only one background image (using FF Web Developer Extension's outline images tool) but, its position seemed fine in all three browsers mentioned in my previous post.

[nlikens]

Thanks for the replies, however I dont think Im describing my problem correctly.

Ok I have a normal webpage, with this code for the background as part of a embedded css:

body {
background-image: url(http://www.charterglobal.com/index_background.gif);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

The image is a .gif image. the size of the image is: 24 px wide by 842 px tall

It works perfectly in Firefox and is flush but in Internet Explorer it is not flush and makes the lines not line up like they are supposed to.

Im trying to make the background look like it does in FIrefox on both browsers and can not figure it out.

[jscheuer1]

Add this declaration (red) below the current body one:

body {
	background-image: url(http://www.charterglobal.com/index_background.gif);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

* html body {
background-position:0 -13px;
}

This is a quick fix though, for the future, look into using a strict DOCTYPE and this sort of thing may not happen so much.

[nlikens]

THANK YOU....wow! You do man!.

I appreciate ya