PDA

Click to See Complete Forum and Search --> : min-width in Internet Explorer

Marcus Maximus
09-27-2007, 10:13 AM
How do i set a min width in internet explorer so that my banner and buttons don't overlap my border images. I have this and works perfect for firefox

<style type="text/css">
html {background:url(images/bg_image.jpg) repeat-y 100% 0;background-color:black; width: 99%; min-width: 1050px; }
body {background:url(images/bg_image.jpg) repeat-y 0 0; margin-bottom:-20px; }
#wrapper
{border:0px solid blue; width:auto; height:auto; margin-left:200px; margin-right:200px; height:auto; background-color:black; padding-bottom:20px;}
#wrapper p, h1, h2, h3, h4, h5, h6
{color:white; margin:24px 50px 10px 20px;}

</style>
TJ111
09-27-2007, 10:27 AM
min-width:1050px;
width:auto !important;
width:99%;
Marcus Maximus
09-27-2007, 10:30 AM
doesn't work :(
TJ111
09-27-2007, 10:37 AM
Try using the same value for min-width and width, ie set both to 1050px or 99%. I use that in my CSS frequently and I never have any problems with it.
drhowarddrfine
09-27-2007, 11:05 AM
min-width has never worked in IE but IE treats width as min-width.
Marcus Maximus
09-27-2007, 11:07 AM
Thank you very much :):):):):):)

2 of ye
Marcus Maximus
09-27-2007, 11:11 AM
is there a way to hide width 1050 from firefox cos now i don't have an image down the right its 1050
TJ111
09-27-2007, 11:31 AM
Just lower the value maybe?
curious_george
09-27-2007, 02:43 PM
html{
min-width:1050px;
width:auto;
}

* html html {
width:99%;
}


Using "* html" is a hack for IE. You might need to switch the value around a little. The width:99%; will not be rendered in browsers other than IE.
Marcus Maximus
09-28-2007, 11:37 AM
Can anyone tell me why this won't work

html{background:url(images/bg_image.jpg) repeat-y 100% 0;background-color:black; min-width: 1050px; width:auto;}
* html {width:1050px;}
Marcus Maximus
09-28-2007, 12:52 PM
This is the full internal style sheet

<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; height:101%; font-size:100.1%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size:0; font-size:1.0em; line-height:1.0em; margin:26px 0 22px 0;}

h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica, sans-serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:20px 0 14px 10px;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1.0em;}
</style>

<style type="text/css">
html{background:url(images/bg_image.jpg) repeat-y 100% 0;background-color:black; min-width:1050px;}
* html{width:1050px;}
body {background:url(images/bg_image.jpg) repeat-y 0 0; margin-bottom:-20px; }
#wrapper
{border:0px solid blue; width:auto; height:auto; margin-left:150px; margin-right:150px; height:auto; background-color:black; padding-bottom:20px;}
#wrapper p, h1, h2, h3, h4, h5, h6
{color:white; margin:24px 50px 10px 20px;}

</style>


Is there anything else i need to do to get it to work in IE cos it ain't working
WebJoel
09-28-2007, 06:18 PM
Can you post the entire page, -CSS & HTML. 'Just the CSS' doesn't give any real clues as to what is going on..
Centauri
09-28-2007, 09:14 PM
This conditional comment inserted in the html head just below your stylesheet link will implement minimum width in IE6 - IE7 supports minimum width.
<!--[if lte IE 6]><style type="text/css">html {width:expression( documentElement.clientWidth < 1050 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 1050 ? "1050" : "auto") : "1050px") : "auto" );}</style><![endif]-->
Marcus Maximus
09-29-2007, 09:11 AM
I have IE7 and min-width doesn't work in it. Heres the entire page with css

<!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>
<meta name="keywords" content="keywoprds">
<meta name="description" content="Client description.">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Client</title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; height:101%; font-size:100.1%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size:0; font-size:1.0em; line-height:1.0em; margin:26px 0 22px 0;}

h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica, sans-serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:20px 0 14px 10px;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1.0em;}
</style>

<style type="text/css">
html{background:url(images/bg_image.jpg) repeat-y 100% 0;background-color:black; min-width:1050px;}
body {background:url(images/bg_image.jpg) repeat-y 0 0; margin-bottom:-20px; }
#wrapper
{border:0px solid blue; width:auto; height:auto; margin-left:150px; margin-right:150px; height:auto; background-color:black; padding-bottom:20px;}
#wrapper p, h1, h2, h3, h4, h5, h6
{color:white; margin:24px 50px 10px 20px;}

</style>

<link rel="shortcut icon" href="favicon.ico" /><!-- path to your favicon -->
</head>
<body>
<p align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="600" height="125">
<param name="movie" value="Logo5.swf">
<param name="quality" value="high">
<embed src="ManganslLogo5.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="125"></embed></object>
<br>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="120" height="20">
<param name="movie" value="button1.swf">
<param name="quality" value="high">
<param name="base" value="./">
<param name="bgcolor" value="#000000">
<embed src="button1.swf" base="./" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="120" height="20" bgcolor="#000000"></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="120" height="20">
<param name="movie" value="button2.swf">
<param name="quality" value="high">
<param name="base" value="./">
<param name="bgcolor" value="#000000">
<embed src="button2.swf" base="./" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="120" height="20" bgcolor="#000000"></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="120" height="20">
<param name="movie" value="button5.swf">
<param name="quality" value="high">
<param name="base" value="./">
<param name="bgcolor" value="#000000">
<embed src="button5.swf" base="./" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="120" height="20" bgcolor="#000000"></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="120" height="20">
<param name="movie" value="button3.swf">
<param name="quality" value="high">
<param name="base" value="./">
<param name="bgcolor" value="#000000">
<embed src="button3.swf" base="./" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="120" height="20" bgcolor="#000000"></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="120" height="20">
<param name="movie" value="button4.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#000000">
<embed src="button4.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="120" height="20" bgcolor="#000000"></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="120" height="20">
<param name="BGCOLOR" value="#000000">
<param name="movie" value="button6.swf">
<param name="quality" value="high">
<param name="base" value="./">
<embed src="button6.swf" width="120" height="20" base="./" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#000000" ></embed>
</object></p>
<div id = "wrapper">
<div style="float:right;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="385" height="364">
<param name="movie" value="Mangans%20Slideshow.swf" />
<param name="quality" value="high" />
<embed src="Mangans%20Slideshow.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="385" height="364"></embed></object>
<br></div>
<div align="center">
<p>Some text about the client</p>
</div>
<br><br><br><br><br><br>
<div align="center"><FONT
color="#ffffff" size="+1">
<MARQUEE bgcolor="#000080"
direction="left" width="40%">
<STRONG>Offers by the client</STRONG>
</MARQUEE>
</FONT></DIV><br>
<div align="center"><font color="#FFFFFF" size="1">Designed by:<A HREF="mailto:me">
F&M</A><br> <br>Site Requires <a href="http://www.macromedia.com/go/getflashplayer/"><br><img src="images/get_flash_player.gif" width="88" height="31" border="0"></a></font>
</div>
</div>
</body>
</html>
Centauri
09-29-2007, 09:30 AM
Minimum width does work in IE7, but not on the html element. Treating the html and body elements as two separate identities with different styling is probably not a good idea - better off using body as the outer element and using a wrapper div.
Kravvitz
09-29-2007, 10:19 PM
Setting width or min-width on <html> and/or <body> is a bad idea. It tends to trigger bugs in IE.
Marcus Maximus
09-30-2007, 11:28 AM
how would you suggest i do it
Centauri
09-30-2007, 11:36 AM
I haven't had any problems using minimum width on the body element in IE, so I would apply it there and put the background images on body and #wrapper.
Kravvitz
10-03-2007, 12:10 AM
I have IE7 and min-width doesn't work in it.
It seems that IE7 doesn't support min-width on <html>, but it does on <body>.

how would you suggest i do it

This is how I do it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">

html, body {
margin: 0;
padding: 0;
}

#outermost>.minwidth {
min-width:780px;
}
.minwidth {
padding: 1px 0; /* to prevent collapsing margins */
background-color: #ccf;
}
h1 {
font-size: 1.5em;
text-align: center;
margin: .6em;
}
p {
padding: 0 1em;
margin: 1em 0;
}

/*
WARNING: This technique doesn't work right in IE4, so I recommend using an
@import filter or conditional comment to hide it from IE4.
(At least one of the @import filters and the conditional comment would also
hide it from IE5/Mac though.)
*/


/* min-width for IE5-6/Win and IE5/Mac */
* html body {padding-left:780px;width:auto;}
* html #outermost .minwidth {margin-left:-780px;position:relative;}
/* \*/
* html #outermost,* html .minwidth {height:1px;}
/* */
</style>
</head>
<body>

<div id="outermost"><div class="minwidth">

<h1>IE5-6 Min-Width Workaround</h1>

<p>This is based on <a href="http://www.webreference.com/programming/min-width/"
>Stu Nichols' technique</a>.</p>

</div></div>

</body>
</html>
I haven't had any problems using minimum width on the body element in IE
It's possible that I misremembered that min-width can cause problems on <body>. I have seen width cause problems IE6 though. I'm not sure if any of those time were in IE7 in standards mode as well though.