CODEWITHSUNDEEP
htmlcssimageinternet-explorerlayout
Mr.Web
Mr.Web

Reputation: 7154

Internet Explorer and Google Chrome different showup of content

I'm setting up an online form where to choose boxes and stuff. I almost finished the whole thing when I said to my self "Let's try it in IE".

This is the result I want and what comes up in Google Chrome:

Google Chrome result

And this is what happens in IE:

enter image description here

And this is the CSS and HTML for that part:

HTML 

<div id="choosen"><img src="img.jpg" class="center-img" /></div>

CSS 

 img.center-img{
        margin-top:15px;
        position:relative;
        width: <?php echo $width; ?>px;
        left:50%;
        margin-left:-<?php echo $width/2; ?>px;
    }

Basically the image is centered into the div as this page I'm writing will be included into another one which I never saw and someone else will do it.

EDITED

Here is the link

Upvotes: 1

Views: 129

Answers (3)

Rob
Rob

Reputation: 15160

Without a proper doctype, you are in 'quirks mode'. Add this to your very first line with nothing else in front of it: <!DOCTYPE html> . That will take you out of quirks and put you into standards mode, especially with regard to Internet Explorer. Then let's see where we stand.

A doctype is required of all new web pages. The one I show is the newest one and puts all browsers into standards mode where you want to be. Quirks uses a broken box model from the 1990s and you never want to be there.

Upvotes: 0

miah
miah

Reputation: 10433

How about changing the CSS to

img.center-img{
    margin:15px auto 0;
    display:block;
}

Upvotes: 2

Hive7
Hive7

Reputation: 215

Try using css hacks. Here is a link with some on:

http://www.paulirish.com/2009/browser-specific-css-hacks/

Upvotes: 0

Related Questions