Member Avatar for ctaylo21

Hey guys,
I am working on a page that works perfectly in firefox, chrome, safari, and opera, but not in IE. I am trying to make the page semi-fluid, that is you can minimize the content of the page to an extent before the content stops getting smaller. That's where the min-width comes in. It just has no affect in IE. I have an outer div containing all the elements of my page with a min-width set to 960px, and in IE you can keep smashing the content down until the size of the text finally stops it. Anybody know why min-width is not working for me in IE? I am running IE8, but at the top of all my code I have <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> so apparently its rendering it somewhat like IE7 to get a consistent feel. This may be whats causing the problem, any ideas? Thanks.

Caleb

  • 3 Contributors
  • 5 Replies
  • 2K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ctaylo21

Dani AI

Generated

the short version: IE7/IE8 do honor min-width, but only in Standards mode. In Quirks mode the engine emulates older IE behavior, so min-width will not stick. Anything, even a single byte, before the DOCTYPE can throw IE into Quirks; and with X-UA-Compatible set to IE=EmulateIE7, IE will use IE7 Standards only if a valid DOCTYPE is present, otherwise it falls back to Quirks. That matches what you saw in your test vs. real page. (learn.microsoft.com)

Quick fix checklist (building on ’s point about the doc mode):

  • Put the DOCTYPE at the very first line and prefer the simple HTML5 one.
  • Drop EmulateIE7 entirely or change it to IE=edge so you get the highest standards mode IE supports.
  • Keep your outer wrapper as a block-level element and let it own the constraint. (developer.mozilla.org)

Example you can paste to confirm behavior:

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>Min-width sanity check</title>
  <style>
    body { margin: 0; }
    .page { width: 100%; min-width: 960px; background: #eee; }
  </style>
</head>
<body>
  <div class="page">Resize the window; this should never shrink below 960px in IE7+ Standards.</div>
</body>
</html>

If it still collapses, check for edge cases: min-width does not apply to non-replaced inline elements and some table display types, and IE7/IE8 modes exclude a few table-column* values from min-width support. Make sure your container is not using one of those displays. (developer.mozilla.org)

For future readers: min-width was introduced in IE7 and requires a standards DOCTYPE. If you hit unexpected Quirks, re-check includes/templates for stray output before the DOCTYPE, exactly the issue uncovered. (learn.microsoft.com)

Recommended Answers

All 5 Replies

Member Avatar for drumichael87

Unfortunately, min-width and min-height are not and have never been supported by Internet Explorer. There are ways you can TRY to fake it though.
Check out this link:

Member Avatar for scrappedcola

Actually IE 7/8 will respect min-width see this MSDN article on CSS Compatibility: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx. Make certain you have an appropriate doc type. You can check to make sure you are not in Quirks mode by looking in the developer tools at the Document Mode. Here is an example of a simple fluid width with a minimum sizing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    
<style>
#minDiv{
min-width:300px;
width:100%;
background-color:green;
}
</style>
</head>
<body>
<div id=minDiv>
THis is my div with min width;
</div>
</body>
</html

Perhaps you could post your code and css, or atleast some html and css that exemplifies what you are trying to accomplish? That article the previous poster posted is 5 years old there have been some improvements in IE's html rendering since then.

Edited by scrappedcola because: n/a
Member Avatar for drumichael87

I apologize Caleb, I was not aware of IE being able to handle min-width. I didn't mean to provide you with bad info!

Member Avatar for ctaylo21

It's not a problem drumichael, I thought it didn't support it either for a while. Then after looking it up apparently its supported by IE7 and up. Scrappedcola you may have found one of the problems at least, it seems my page renders in quirks mode by default according to the IE developer tools. I'm not sure why, I'll look into it now though. According to this page, however, IE7/IE8 should still support min-width in quirks mode. So I'm not quite sure what to make of that.

My html header looks like this:

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

I'm going to test a few things and if I still can't figure it out I'll post some css and more code. Thanks for the help guys.

I've established that using the simple test code above posted, IE does work fine with min-width. But that's because it is rendered in IE standards. When I switch the mode to quirks mode, min-width no longer works. So I just need to figure out why my pages are being rendered in quirks mode.

Edited by ctaylo21 because: Tested some code
Member Avatar for ctaylo21

Found the problem. I had included somethings above the doctype declaration that made the browser render in quirks mode (which apparently makes everything look like it work in IE4). I fixed the problem, now I just have to re-write all of my CSS :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.