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
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.