PDA

View Full Version : min-width for entire page



gucci09
Jan 11th, 2007, 01:40 PM
hey all. i seem to be having a problem with making a min-width for the entire page. i have tried placing it many places but it doesnt seem to do what i want. all i want is for there to be a scroll bar on the bottom of the screen on resize if the window gets too small. here is my code.

CSS


html,body{
height: 100%;
width: 100%;
min-height:500px;




}
* {
margin: 0;
padding: 0;
}



#container {
height:100%;
width: 100%;
background: #000000;
min-width:500px;




}
#menu {
width: 100%;
height:10%;
position:relative;
background: yellow;

}
#tree {
float:left;
width: 30%;
height: 90%;
background: green;
overflow:auto;
}
#input {
width: 70%;
height: 60%;
float: right;
position:relative;
background: orange;
overflow:auto;

}
#description {
width: 70%;
height: 30%;
float: right;
position:relative;
background: lightblue;
overflow:auto;
}



HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link href="jvdt.css" rel="Stylesheet" type="text/css" />
</head>
<body>

<title>JVDT - CSS Test</title>

<div id="menu"><center>yellow</center></div>
<div id="tree">green
blahbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
<br />
valh
<br />
afadfdfa
<br />
dffad
<br />
fadf
<br />
dafa
<br />
dfadfaf
<br />
dafadf
<br />
afdfad
<br />
fadfa
<br />
dfadfad
<br />
fdf
<br />
fdfadfdaf
<br />
d
<br />
fda
<br />
fad
<br />
f
<br />
ad
<br />
fad
<br />
f
<br />
ad
<br />
fa
<br />
d
<br />
fa
<br />
df
<br />
ad
fd
fa
d
f
daf
afd
adsf

</div>
<div id="input">orange
adkfljadl;f
<br />
adfadfdaf
<br />
adfadfadfad
<br />
afdafdfdaf
<br />
hthgjyud
<br />
agdfgfagfafg
<br />
adfadffdafgasghg<br />
<br />
afdedf
<br />
<br />
adfadfadfdhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjjjhhh
<br />
adfadffhfgd
<br />
adfahgrfd
<br />
fddagf
<br />
dfadfag
<br />
afdafafsc
<br />
adfdadfdfa
<br />
daffaaf

</div>
<div id="description">lightblue
dafdfdsxd<br />
<br />
dfdafdfhhhhhhhhhhhhhhhhhhhhhhhhhhgggggggggggggggggggg
<br />
afadffad
<br />
adfadfadfd
<br />
adfafadfgdaf
<br />
adfafdfa
<br />
afdfadfdag
<br />
dafdffdadfag
<br />
dfa
<br />
dfad
<br />
dagafg
<br />
dfgfhghh
<br />
dfadhfhsf
<br />
fagafhafg
<br />
fdgdfgagg
<br />
agshhgfghs
<br />
gffdgfhgfh
<br />
agfhhgs
<br />
dgadgharf
<br />
dgfdgh
<br />
dgdagfgdagda

</div>
</body>
</html>



i know there is alot of nonsense going on in the html but thats bc i was using all that for testing of scroll bars. anyway. please help. that would be awesome!

ronaldb66
Jan 11th, 2007, 01:45 PM
You could start by taking off the 100% width on the html and body element; the default already is auto.
Also, do keep in mind that IE < 7 does not recognise the min-width en min-height properties; which browser did you use?

gucci09
Jan 11th, 2007, 01:52 PM
i tried taking off the 100% width but that didnt seem to help. im using IE6 and FF. i hope this doesnt come off as a dumb question but im literally 3 days old to CSS

ronaldb66
Jan 11th, 2007, 03:35 PM
The min-width property is set for an element with id="container"; however, there is no such element. Seems you need to slap a container div around the current markup. Alternatively, you could try setting a min-width for the body element instead.

By the way: the title element is misplaced; this should be in the head section, not in the body.

Excavator
Jan 11th, 2007, 04:49 PM
Hello again gucci09,
Have a look at http://www.nopeople.com/gucci/
I set min-width/height to 1024x768 but, as ronaldb66 already said, IE does not have the best support.

I put the 100% width and height on the body on purpose. I know it defaults to auto but for the 100% height to work you need to define the defaults...plus I think it set's up the browser to render everything in percentages? Not sure about that.
Anyway, without the 100% settings in body, some browsers won't do the following percentages correctly.

gucci09
Jan 11th, 2007, 09:07 PM
I HATE IE 6 AND BELOW!!!!!
does anyone know a hack that will make the min-width and min-height work? and that is not a java script bc i tried that earlier but i got yelled at.

ps. thank you again soo much for your help!!! you guys are awesome. maybe one day we can find something i can help u guys with!!!!

Excavator
Jan 11th, 2007, 11:38 PM
This is what I started messing with applying to your site but I never finished it.
Give it a look at http://www.cssplay.co.uk/boxes/width.html

ronaldb66
Jan 12th, 2007, 09:54 AM
Setting the body width to 100% without zeroing out all padding, borders and margins will actually make the total width larger than the browser window, causing a horizontal scroll bar to appear; that's why I recommended against using it. Besides, it is not necessary.
Height of course is a whole different matter.

gucci09
Jan 12th, 2007, 02:02 PM
maybe i did something wrong but i didnt really see any instructions on that site u put up there. and both of the methods seemed like the same thing. i really do feel like an idiot though bc like i see all these hacks online and i just dont know how to apply them. its so frustrating for me! i wish i had the knowledge you guys did. anyway. thanks again for all the help. :)

Graft-Creative
Jan 12th, 2007, 06:32 PM
For IE 6 and below you could try IE Expressions, try placing thias code in the head of your document and see if it works for you:



<!--[if lt IE 7]>
#container {
width:expression(document.body.clientwidth < 505? "500px" : 100%);
}
<![endif]-->


Kind regards,

Gary

butlins
Jan 12th, 2007, 06:40 PM
At the risk of invoking the wrath of the CSS and XHTML gods, and being cursed to develop in a world without Firefox, I tend to use IE's conditional comments to feed version specific styling to older browsers. There's a very good article at http://www.positioniseverything.net/articles/multiIE.html on how they work.

All my pages have something like the following, which loads the main stylesheet and then, in turn, loads CSS specific to all versions of IE, then CSS specific to v6 and before, then earlier than v6, then Mac IE (which takes advantage of the fact that it doesn't worry that there's no space between @import and the open bracket, but does mean that the CSS won't perfectly validate as a result - your choice). Finally it loads stylesheets specific to handheld devices and for print.


<link href="/Styles/screen.css" rel="stylesheet" type="text/css" media="screen"/>
<!--[if IE]>
<link href="/Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
<link href="/Styles/iebugs.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 6]>
<link href="/Styles/ieboxmodel.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
@import("/Styles/iemac.css");
</style>
<link href="/Styles/handheld.css" rel="stylesheet" type="text/css" media="handheld" />
<link href="/Styles/print.css" rel="stylesheet" type="text/css" media="print" />

You can then avoid the need for hacks which can possibly break on version updates and, while it is Microsoft specific, it's not strictly non-standard XHTML as it's all wrapped in a comment tag. It's true that I do feel dirty after using it, but it usually passes after a quick walk to grab a coffee.

I've never found a way around IE6's refusal to accept min-width. I'm afraid I use a div that contains a 1 pixel high transparent gif stretched to the the requisite width at the top of the page, when it's essential. This is set to display=none by default in my screen.css file (which also contains the min-width setting for those browsers that work properly), and display=block in my iebugs.css file which loads it and prevents the browser window from shrinking smaller than the gif's width.

gucci09
Jan 12th, 2007, 06:53 PM
thanks to both of u for ur help but neither of those worked. i dunno y. i think IE hates me.

Excavator
Jan 12th, 2007, 07:11 PM
Hi Butlins,
Could you take a look at my test site (http://www.nopeople.com/test/)and tell me what I'm doing wrong? I've tried this before and was never successful but I thought I'd give it another go since you say it works for you.
If it works, it would be MUCH easier than the link I gave gucci09 in an earlier post. I've used that before and the only thing I like about it is that it works.





//edit - gucci09, don't feel bad. IE hates everybody.

Graft-Creative
Jan 12th, 2007, 08:18 PM
@ Butlins


I use a div that contains a 1 pixel high transparent gif stretched to the the requisite width at the top of the page

..why the gif? Why not just apply the required width to the div itself? Unless I'm missing something...

I really like your suggestion though - so obvious now you mention it! :)
I think an empty div in the markup is reasonable payoff if it means avoiding all those css hacks and IE only expressions!

@ gucci

Can you be a bit more specific when you say it's not working?
have a look at this, is this working?
gucci min-width test (http://graftcreative.co.uk/gucci/)
Did you wrap everything in the #container div as Ronald sugested?

Kind regards,

Gary

gucci09
Jan 12th, 2007, 09:01 PM
no that doesnt work at all. it displays the code u wrote on the actual page. there is no scroller on the bottom. and it flashes really bad when u resize. i hate IE. i really do. y cant everyone just get firefox and be happy haha. neway. thanks for tryin for me.

gucci09
Jan 12th, 2007, 09:16 PM
so it seems that after all this code that i have been using that i am either retarted and dont understand borders or there is a special way to do them. does anyone want to show me how to put a border around my code. i tried using border:white; border-width:1px; but for some reason its not workin.


CSS:


html, body {
height: 100%;
width: 100%;

}
* {
margin: 0;
padding: 0;
}
#container {
height:100%;
width: 100%;
background: #000000;
min-width: 1024px;
min-height: 768px;
border:white;
border:width: 1px;

}
#menu {
width: 100%;
height:10%;
position:relative;
background-color: #ffff00;
border:#FFFFFF;
border-width:thin;

}
#tree {
float:left;
width: 30%;
height: 90%;
background-color: #008000;
border:white;
border-width: 1px;
}
#input {
width: 70%;
height: 60%;
float: right;
position:relative;
background-color: #ffa500;
overflow:auto;
border:white;
border-wdith: 1px;
}
#description {
width: 70%;
height: 30%;
float: right;
position:relative;
background-color: #add8e6;
overflow:auto;
border:white;
border-width: 1px;
}



html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>

<link href="jvdt.css" rel="Stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="jvdtie.css" rel="Stylesheet" type="text/css" />
<![endif]-->


<body>

<title>JVDT - CSS Test</title>


<div id=container>
<div id="menu"><center>yellow</center></div>
<div id="tree">green
blahbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
<br />
valh
<br />
afadfdfa
<br />
dffad
<br />
fadf
<br />
dafa
<br />
dfadfaf
<br />
dafadf
<br />
afdfad
<br />
fadfa
<br />
dfadfad
<br />
fdf
<br />
fdfadfdaf
<br />
d
<br />
fda
<br />
fad
<br />
f
<br />
ad
<br />
fad
<br />
f
<br />
ad
<br />
fa
<br />
d
<br />
fa
<br />
df
<br />
ad
fd
fa
d
f
daf
afd
adsf

</div>
<div id="input">orange
adkfljadl;f
<br />
adfadfdaf
<br />
adfadfadfad
<br />
afdafdfdaf
<br />
hthgjyud
<br />
agdfgfagfafg
<br />
adfadffdafgasghg<br />
<br />
afdedf
<br />
<br />
adfadfadfdhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjjjhhhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
<br />
adfadffhfgd
<br />
adfahgrfd
<br />
fddagf
<br />
dfadfag
<br />
afdafafsc
<br />
adfdadfdfa
<br />
daffaaf

</div>
<div id="description">lightblue
dafdfdsxd<br />
<br />
dfdafdfhhhhhhhhhhhhhhhhhhhhhhhhhhggggggggggggggggggggdffddddddddddddddddddddddddddddddddd
<br />
afadffad
<br />
adfadfadfd
<br />
adfafadfgdaf
<br />
adfafdfa
<br />
afdfadfdag
<br />
dafdffdadfag
<br />
dfa
<br />
dfad
<br />
dagafg
<br />
dfgfhghh
<br />
dfadhfhsf
<br />
fagafhafg
<br />
fdgdfgagg
<br />
agshhgfghs
<br />
gffdgfhgfh
<br />
agfhhgs
<br />
dgadgharf
<br />
dgfdgh
<br />
dgdagfgdagda
</div>
</div>
</body>
</html>

Graft-Creative
Jan 12th, 2007, 10:38 PM
Here:

A take on Butlin's approach: the scrollbar should kick in at less than 1024px, on ALL browsers!

min-width test (http://graftcreative.co.uk/gucci/)

Kind regards,

Gary

Excavator
Jan 12th, 2007, 11:07 PM
HOLY COW!!!
Can it really be that easy???
How cool is that Graft-Creative?!?!?!?!?


///ahh, should have known it wasn't that easy. Look at http://www.nopeople.com/test/ and see. Can you tell me what I did wrong?

Graft-Creative
Jan 13th, 2007, 01:40 AM
# oops, got it wrong :)

butlins
Jan 15th, 2007, 02:28 PM
Graft Creative definitely works, but just in case, here's the code I was thinking of too, which is up here (http://www.johndixon.org.uk/min-width/)


<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
min-width: 800px;
margin:0;
}

#iebugs {
display:none;
}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
<!--
#iebugs {
display:block;
}
-->
</style>
<![endif]-->
</head>
<body>
<div id="iebugs"><img src="spacer.gif" alt="" width="800" height="1" />
<p>You'll see this if you're in IE6 </p>
</div>
<p>Test to force minimum width is 800px </p>
</body>
</html>


I've embedded all the CSS, rather than linked to external style sheets, to make it simpler.

Excavator
Jan 15th, 2007, 06:17 PM
Ok, I've just tried several variations on this #iebugs technique and it doesn't work at all.
I put some color in my examples, but it wasn't necessary. The original that John Dixon has on his site will squeeze down to a couple px width.
example1 (http://www.nopeople.com/CSS/min-width_CSS/)
example2 (http://www.nopeople.com/CSS/min-width_CSS/test.html)

butlins, are you viewing it wih IE6??

butlins
Jan 16th, 2007, 12:08 PM
It's definitely IE6 - that's why I used the conditional comments, so I could be sure that the styles would only apply in that case, and the "You'll see this..." text would appear.

I can see the problem - while the div does stay at the correct minimum width and the horizontal scroll bar dutifully appears, the text within still acts as though the div has no minimum width and breaks fluidly as the browser window resizes. Bum. Guess I need to use more text next time, rather than just check that the horizontal scroll bar appears when I'm testing.

I know I got this to work in the past, but I'll have to dig out the site I used it on to see what I did - it's obviously more than I can remember here!

Have to say all hail to Graft-Creative's DOM Scripting solution as it sounds like the most likely avenue:


<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
min-width: 800px;
margin:0;
}

.iebugs {
display:none;
}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
<!--
#wrapper {
width: expression(document.body.clientWidth < 802? "800px" : "auto");
}

.iebugs {
display:block;
background-color:#CCC;
}

-->
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<h2 class="iebugs">You'll see this if you're in IE6. More text to check to
see whether the text breaks properly, which I should have done in the first place! </h2>
<h2>Test to force minimum width to 800px </h2>
</div>
</body>
</html>


This doesn't really need to be fed separately to IE6 and below in a conditional comment, but I still like to keep code meant for it separate. It's a neatness thing.

The only potential downside is that anyone who has their security settings set to 'High' in IE6 (or has scripting disabled in a custom setting) won't allow the ECMAscript (I know I'm the only person that still calls 'Javascript' 'ECMAScript', but I'm old-fashioned like that) to run. But, presumably, people who set their security settings to stun are used to seeing all kinds of wierdness already when surfing.