Changing resolution makes image table cell 2 px wider...

kimlb

02-04-2005, 07:16 AM

I have the following CSS:

--
table {
margin: 0 auto;
border-collapse: collapse;
border-left: 1px solid #65859a;
border-right: 1px solid #65859a;
border-top: 1px solid #65859a;
background-color: #ffffff;
color: #000000;
font: normal 10pt Arial, Verdana, Tahoma, Times, Sans-Serif;
}

td {
border-left: 1px solid #65859a;
border-right: 1px solid #65859a;
}

td.header {
width: 759px;
height: 100px;
padding: 0px;
}

td.spacer {
width: 759px;
height: 6px;
padding: 0px;
background-color: #ffffc0;
}
--

and the following HTML:

--
<table cellspacing="0">
<tr><td class="header"><img width="759px" height="100px" src="images/design/header_index.gif" alt="Header image - Main page"></td></tr>
</table>

<table cellspacing="0">
<tr><td class="spacer"></td></tr>
</table>
--

These two tables have identical lenghts when shown in 1280x1024 res. However, when changing res to 800x600, the width of the "title" td expands by 2 pixels. The #65859a (bluish) border can be seen as being wider for the td "title" than the td "spacer", and changing to <img width="757px"> "fixes" the problem in the 800x600 res. The picture is 759px wide.

Browser/OS: IE6/XP SP2.

Any ideas why this is happening?

Addendum: Just found out that pressing F11 (View/Full Screen) also sorts the problem. Is this an IE feature/bug?

Crewcut

02-04-2005, 12:34 PM

Hmm... bit tricky to make sure where the problem resides, since your code is nothing i ever use myself. But, try and see if this works for you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Homepage</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="language" content="dutch-NL">
<link rel="stylesheet" href="includes/css/NR-style.css">
<style type="text/css">
body {
margin:0;
padding:0;
font:normal 10pt Arial,Verdana,Tahome,Times,Helvetica,sans-serif;
color:#000;
background-color:#fff;
}
body div {text-align:left;}
div#center div {
margin-left:auto;
margin-right:auto;
text-align:left;
}

div.header {
margin-top:10px;
width: 757px;
height: 100px;
padding: 0;
border:solid 1px #65859a;
border-bottom:none;
}

div.spacer {
width: 757px;
height: 5px;
padding: 0px;
border:solid 1px #65859a;
border-bottom:none;
background-color: #ffffc0;
}
</style>
</head>
<body>
<div id="center">
<div class="header">Here ya put the header-image....</div>
<div class="spacer"><img src="spacer.gif" alt="" width="1" height="6" border="0"></div>
</div>

</body>
</html>

kimlb

02-05-2005, 05:49 AM

I can give that a go, but reducing the width to 757px already fixed the issue in the first place. I was wondering why it happened when the td.header container was 759px and the image 759px.

I did notice that when I reduced from 759 to 757px, the horizontal scrollbar dissapeared at the page (all other elements on the page have the same width, it was only the td.header containing the image that suddenly expanded by 2px compared to the rest).

I "fixed" this issue by reducing the width of the image to 750px, and making all other elements on the page equally smaller width-wise. With this, no horizontal scroll-bar under 800x600, and td.header have same width as the other elements on the page, regardless of resolution.

To me, it looked like the length during 800x600 was somewhat border-line, and the rendering of the image somehow caused IE to display it 2px wrong or something, further causing the horizontal scroll-bar, dunno why this would happen though. "Fixed" by reducing the width, I'm not gonna lose more sleep over it.

I'm gonna start playing around with the DIV container, haven't tried this out yet. Thanks for the reply.