SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image width not set in chrome?

    Hi,

    I have a banner image that is of width-800px and my site page width is set as 800.

    Now, that banner image is showing properlly in IE but not in Chrome. Why? Means, menu width is 800 but image shows both sides 10 px space in chrome.

    Please give me an idea to resolve it.

    Thanking you..

  2. #2
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Germany
    Posts
    20
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    By default the body tag has a margin of 8px, hence all of elements inside of this specific container will not be set directly at the borders of the browser window.

    c04e.png

    If you can not fix it by setting the margins of the body code to 0, then please post your code

  3. #3
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is my code::
    Image width is 800 and site width also 800, in chrome it is increasing the Menu backgroung image, where as in IE, it is showing nice.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <META content="text/html; charset=windows-1252" http-equiv=Content-Type>
    <head>
    <style type="text/css">
    body{
    bgcolor:#306EFF;
    display:block;
    margin:8px;
    }
    .menu {
    list-style-type: none;
    background-image: url(navi_bg.jpg);
    height: 25px;
    width: 800;
    margin: 0px;
    padding-left: 30px;
    }
    .menuitem {
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 15px;
    padding-left: 15px;
    display: block;
    line-height: 25px;
    text-decoration: none;
    font-family: "Times New Roman";
    font-size: 16px;
    color: #ffffff;
    margin: 0;
    float: left;
    }
    a{
    text-decoration: none;
    }
    ul a:hover {
    color: #000;
    }
    </style>
    </head>
    <body>
    <img src="eg3.jpg">
    <ul class="menu">
    <li class="menuitem"><a href="index.php">Home</a></li>
    <li class="menuitem"><a href="about.php">About</a></li>
    <li class="menuitem"><a href="login.php">Login</a></li>
    <li class="menuitem"><a href="register.php">Register</a></li>
    <li class="menuitem"><a href="services.php">Services</a></li>
    <li class="menuitem"><a href="terms.php">Terms & Conditions</a></li>
    <li class="menuitem"><a href="suggestions.php">Suggestions/Mail</a></li>
    <li class="menuitem"><a href="contactus.php">Contact us</a></li>
    </ul>
    </body>
    </html>

  4. #4
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in IE, B/w image and menu some 2px Horizontal space is coming. But in Chrome its not.
    Is it good practice to set site (all pages) width in css.?

    Any suggestions to resolve it.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It would be easier if you post a working example that we can test, including the image. There are some tips on this page for doing that:

    http://www.sitepoint.com/forums/show...Posting-Basics

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The doctype you are using will throw IE9 and under into quirks mode and render much like IE5 so you lose any benefits of css that was coded this century.

    Your menu is 800px wide and you have added 30px left padding so its total width is 830px. In quirks mode IE9 and under use the old broken box model and padding is included in the width but other browsers add the padding to the width so there will be a 30px difference between IE and other browsers.

    Use a full doctype which for html4 should be this one:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Now all browsers will render the same and thus you need to reduce the menu width by 30px.

    (As an aside you can use box-sizing to change box-models these days.)


    e.g.
    Code:
    .menu {
    width:770px;/* do not omit the px or it will be treated as zero*/
    padding-left: 30px;
    }
    Set the image to display:block to kill the whitespace under it as images are inline by default and placed on the baseline like text to allow room for dwescenders.

    img{display:block}

    If you need images inline then add a class to the image instead and target it like that.


Bookmarks

Posting Permissions

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