Image width not set in chrome?

Get Started
1

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

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.

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

3

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

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

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:

6

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:


<!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.


.menu {
[B]width:770px;/* do not omit the px or it will be treated as zero*/[/B]
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.

7