CODEWITHSUNDEEP
css
Andrew
Andrew

Reputation: 3589

IE CSS Percentage

I'm making a website for a project, and I've used percentages to float my divs for cross compatiblity across multiple resolutions/browsers. It seems to work fine for Firefox, Safari, etc. but the major problem comes with IE 9. The items just seem to stay put in the upper left corner. Any ideas?

CSS:

#center-container {
    width: 960px;   
    height: 100%;
    margin:0 auto;
}
img#google {
    padding-top: 17%;   
    padding-left:35%;
    margin: 0 auto;     
}
form#searchBox {
    padding-top: 25px;
    padding-left:25%;
    margin: 0 auto; 
}
#buttons {
    padding-top: 20px;
    padding-left: 40%;  
}

HTML:

<div id = "center-container"> 
<img id="google" src="images/google.png" width="275" height="95" />
<form id="searchBox">
    <input type="text" id = "search" name="search" size="85"/><br />        
</form>
<div id="buttons">
    <a href="javascript:void(0)" onClick="searchCensor()" class="button">Google Search</a>
    <a href="#" class="button">I'm Feeling Lucky</a>
</div>

</div>

Website: andrewgu12.kodingen.com/history

Upvotes: 1

Views: 1844

Answers (3)

lakshmi priya
lakshmi priya

Reputation: 159

You would not have added the doctype... IE doesn't support few css property by default... So we have to use the doctype to explicitly make it accept..

So use,

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It ll work...

Upvotes: 0

Rick
Rick

Reputation: 1258

I opened your page in IE8, and found that it's rendering in Quirks Mode. When switching to Standards Mode, all the padding worked out fine and looks exactly as it does in Firefox for me.

Quirks Mode will activate when you don't have a proper Doctype. Add one, and you should be fine.

Upvotes: 0

Thomas Jones
Thomas Jones

Reputation: 4962

Youre missing a DOCTYPE statement, and as such IE is in quirks mode

http://www.quirksmode.org/css/quirksmode.html

Use a doctype, even a HTML5 doctype will work fine.

<!DOCTYPE html>

Upvotes: 2

Related Questions