Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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?
    Last edited by kimlb; 02-04-2005 at 08:10 AM.

  • #2
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •