CODEWITHSUNDEEP
htmlxhtmlinternet-explorer-9css
Scopace
Scopace

Reputation: 31

IE9 HTML Element Resize Bug with Min-Width Child Div

Consider the following simple example code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style=" height:100%; width:100%; background:yellow; " >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE9 Min-Width Problem</title>
</head>
<body style=" width:100%; height:100%; margin:0; background:green;">
<div style=" position:relative; min-width:300px; max-width:100%; margin:auto; background:red; ">
<div style=" position:relative; min-width:0; max-width:600px; margin:auto; padding:10px; ">
<div style=" position:relative; width:100%; height:600px; background:blue; ">
Page contents go here.
</div><!-- closes content -->
</div><!-- closes inner-wrapper -->
</div><!-- closes outer-wrapper -->
</body>
</html>

My website uses code similar to this to achieve a fluid page layout with a min and max width, and it works beautifully in every browser except, surprise surprise, Internet Explorer. For some reason, when you first load the page and re-size it smaller (or zoom in), the HTML element does not re-size, so you immediately get a horizontal scroll bar and the HTML background is visible on the right. However, if you refresh the page the problem goes away entirely and IE acts like every other browser. It is only on the first initial load of the page that this problem occurs, so if you refresh the page you have to leave and come back to the site.

Please note that this only seems to occur when the web page is on a server. If you view the html file locally, this bug does not rear its ugly head. That being the case, I've taken the liberty of uploading this code to my testing server for anyone gracious enough to help me figure out what's going on.

View the page at http://pace-testing.net84.net

If anyone has any information that could be helpful, I would greatly appreciate it. This includes (1) a fix (2) a workaround or (3) a better way of accomplishing my objective. Let me know if you have any questions, as I will be checking this post frequently (I'm pulling my hair out on this one, so I'm anxious to fix it).

Additional details: I'm running Internet Explorer 9.0.8 on Windows 7 32-bit. The browser is in Internet Explorer 9 Standards Mode due to the XHTML 1.0 Strict Doctype.

Upvotes: 0

Views: 1047

Answers (2)

Amanda Tarafa Mas
Amanda Tarafa Mas

Reputation: 1128

I've solved my problem adding this meta, a litle bit different from yours.

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Also, you might want to check this post, although you'll need to change somehow the meta tags to make them XHTML compatible

Compatibility and Standards View

Hope it helps

Upvotes: 0

Andrew Morton
Andrew Morton

Reputation: 25023

I don't see that happening in IE9/W7x64 unless I switch on compatibility mode (that broken page icon in the address bar). Maybe you have that switched on acccidentally?

You appear to have a major typo on the second line of the page:

<html xmlns="http://www.w3.org/1999/xhtml" style=" height:100%; width:100%; background:yellow; " >

What's the style doing in there?

It's a good idea to check your page with validator.w3.org as it spots things like that. (There are other validators.)

Upvotes: 1

Related Questions