CODEWITHSUNDEEP
javascripthtmlcss
r1nzler
r1nzler

Reputation: 2533

Chrome CSS Height Property different from Firefox?

I'm trying do display a little block which is actually a .png image.

I set the image properties of the little block using css to have 2% width and 2% height.

This image is inside the body, which is set at 100% width, and 100% height.

My problem is, the image comes out correctly in firefox, as in, it looks like a square, but in Chrome, it looks like a rectangle. The image width seems to be correct (2%) but the height seems to not be correct.

Here are pics to illustrate my example:

Firefox: (this is what i want)

enter image description here

Chrome: (this is what I do not want. I want it to look like how it looks in firefox).

enter image description here

I'm using html with javascript inside and css and here's my code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testlayout.css" />
<script>    

var x;

function myFunction()
{                   
    var img = new Image(); 
    img.src = 'bgimage.png';
    document.body.appendChild( img );                                       
};

</script>
</head>
<body onload="myFunction()"> 

</body>
</html>

And here's my css:

body
{
margin:0; padding: 0; cellspacing: 0;
line-height: 0;  /* removes gap betwen rows */
height: 100%;
width: 100%;
}

img
{
height: 2%;
width: 2%;
}

That's all. If you guys know what the problem is, please let me know, any help will be greatly appreciated. Thanks!

Upvotes: 1

Views: 2133

Answers (3)

cimmanon
cimmanon

Reputation: 68339

Your body may be set to height: 100%, but its parent container (html) isn't.

Upvotes: 0

okcoker
okcoker

Reputation: 1349

try adding a * {margin:0;padding:0} to the beginning of your css file.

Also look into adding a CSS Reset

edit:

Now that I think about it, are you sure bgimage.png exists in that directory? You could also try setting img.width and img.height within your javascript sort of like this

http://jsfiddle.net/2Uk53/1/

Upvotes: 0

Vahe Hovhannisyan
Vahe Hovhannisyan

Reputation: 480

Window sizes on firefox and chrome can differ. In this kind of situations use pixel values instead of percents.

img 
{
    height: 50px;
    width: 50px;
}

Upvotes: 1

Related Questions