CODEWITHSUNDEEP
htmlinternet-explorerlayoutcss
small fish
small fish

Reputation: 3

CSS Percentages completely fails in IE

I just finished designing a webpage for my photography. I used Chrome as my test browser.

But opening my page on IE, nothing was visible. After some trouble, I isolated the problem to the fact that I'm using percentages. I searched online for solutions but everything is about minor variations (related to padding and percentages).

Here is a simple HTML file that works perfectly in Chrome, but not all in IE (the div is a pixel-less box, slightly expanded by the presence of text). Your help is greatly appreciated. If I can't solve this issue, I'll have to completely redesign my site.

<html>
<head>
    <title>A test HTML</title>
    <style type="text/css">
        #currpage
        {
            position: absolute;
            bottom: 18%;
            right: 10%;
            left: 35%;
            top: 15%;
            border:2px solid green;
            z-index: 240;
        }
    </style>
</head>
<body>
    <div id="currpage" style="visibility: visible; opacity: 1;">
        This is just a test.
    </div>
</body>
</html>

Upvotes: 0

Views: 90

Answers (3)

Working Title
Working Title

Reputation: 254

Set height and width of the containing element explicitly. I had a similar issue with one of my old pages (worked fine in Firefox and Chrome, went to hell in IE) and what I found that that in that Firefox and Chrome will automatically set the dimensions of the containing element if none are explicitly assigned and then base those percentages off those assumptions. IE makes no such assumptions so when it looks at the percentages it basically says "um 35% of what?"

Upvotes: 0

Johannes Klau&#223;
Johannes Klau&#223;

Reputation: 11020

Well, I'm on mac, so I can't check it, but it seems that you don't have a doctype in your HTML, so the IE might be in trouble because he doesn't know how to parse your code.

At the very first line (even before the <html>-Tag write the following:

<!DOCTYPE html>

This is for a HTML5 document.

Edit: ....edit.... forget that point.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Have you tried... actually making a well-formed HTML file?

Without a DOCTYPE, the browser renders the page in Quirks Mode. In the case of IE, it renders as it would in IE5.5, which didn't support a lot of now-basic stuff.

Add <!DOCTYPE HTML> to the start of the file.

EDIT: While you're at it, always include a Content-Type <meta> tag (such as <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> so that the browser knows what the encoding is. Also consider adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to force IE to use the strictest standards mode it has. These appear on every single one of my pages, even the blank template. The DOCTYPE and Content-Type are required (if you want it to actually work), and the Compatible header is optional (I mainly use it to get rid of the Compatibility Mode button that is annoyingly close to the Refresh button...)

Upvotes: 4

Related Questions