12 replies [Last post]
Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 5 years 23 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

http://www.cleanpaw.net/csstest/test.htm My test site.

I've got a problem that I hope is easy to solve. What code do I include to make the minimum scree size 1024x768? Translation, if the browser is minimized or if screen resolution is less than 1024 I get scroll bars. On the flip side it expands to 100% on larger resolutions.

I'm trying to ditch tables and I'm reasonably new to CSS. I'm sure this is easy but it's way over my head. Any help is greatly apreciated!!!

THANKS!!! :thumbsup:

The header is made up of 4 rows. R1 applies to Row 1, R2 applies to Row 2, etc etc.

<!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>Untitled Document</title>
<style type="text/css">
 
body {
	margin: 0px ;	
}
 
p {
  padding: 0px ;
  margin: 0px ;
}
 
div {
  padding: 0px ;
  margin: 0px ;
}
 
.clear-left {
  clear:left ;
}
 
div#header-r1 {    
   background-color: #000000 ;   
   height: 10px ;    
   width: 100% ;   
}
 
div#header-r2 {   
   background-color: #ffb411 ;         
   height: 72px ;
   width: 100% ;                 
}
 
div#header-r3 {     
   background-color: #000000 ;      
   height: 34px ;
   width: 100% ;             
}
 
div#header-r4 {   
   background-image: url(images/hp-bg-r4.gif) ;     
   height: 24px ;
   width: 100% ;         
}
 
p#header-r1-left {
   background-color: #3C75AE ;
   float: left ;
   height: 10px ;
   width: 50px ;     
}
 
p#header-r2-left {  
   float: left ;
   padding: 19px 0px 0px 6px ;     
   width: 410px ;        
}
 
p#header-r2-right {  
   float: right ; 
   padding: 6px 0px 0px 0px ; 
   width: 480px ;            
}
 
p#header-r3-left { 
   background-color: #3C75AE ;       
   float: left ;     
   width: 50px ; 
   height: 34px ;     
}
 
p#header-r3-center {
   font: 16px Arial, Helvetica, sans-serif ;
   color: #FFF ; 
   float: left ; 
   padding: 6px 0px 0px 6px ;             
}
 
p#header-r3-right {   
   float: right ;  
   width: 35px ;
   line-height: 0;    
}
 
p#header-r4-left {
   font: 13px Arial, Helvetica, sans-serif ;
   color: #000 ;  
   float: left ; 
   padding: 4px 0px 0px 4px;    
   width: 50px ;       
}
 
p#header-r4-right {   
   float: right ;
   width: 24px ;       
}
 
</style> 
</head>
<body>
  <div id="header-r1">
    <p id="header-r1-left"></p>
  </div> 
  <div id="header-r2">
    <p id="header-r2-left"><img src="images/test-logo.gif" alt="" width="395" height="39"></p>
	<p id="header-r2-right"><img src="images/test-right.gif" alt="" width="468" height="60"></p>
  </div>
  <div id="header-r3">  
    <p id="header-r3-left"></p>
    <p id="header-r3-center">Test text goes here</p>
    <p id="header-r3-right"><img src="images/header-r3-tri.gif" alt="" width="35" height="34"></p>
  </div>    
  <div id="header-r4">
    <p id="header-r4-left">Home</p>
    <p id="header-r4-right"><img src="images/hp-r4-tri.gif" alt="" width="24" height="24"></p>  
  </div>
</body>
</html>

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

You'll want to use the

You'll want to use the min-width property.. although you need to add a bit extra for some browsers (Internet Explorer).

This isn't going to use your exact code, but you could set up a container div something like this:

#sample {
min-width:1024px;
/* IE Dynamic Expression to set the width */
width:expression(document.body.clientWidth < 1024 ? "1024px" : "100%" );
}

EDIT:
I ended up tossing it in your code to make sure it worked.. here's the result (works):

<!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>Untitled Document</title>
<style type="text/css">
 
body {
	margin: 0px ;	
}
 
p {
  padding: 0px ;
  margin: 0px ;
}
 
div {
  padding: 0px ;
  margin: 0px ;
}
 
.clear-left {
  clear:left ;
}
 
#container {
min-width:1024px;
/* IE Dynamic Expression to set the width */
width:expression(document.body.clientWidth < 1024 ? "1024px" : "100%" );
}
 
div#header-r1 {    
   background-color: #000000 ;   
   height: 10px ;    
   width: 100% ;   
}
 
div#header-r2 {   
   background-color: #ffb411 ;         
   height: 72px ;
   width: 100% ;                 
}
 
div#header-r3 {     
   background-color: #000000 ;      
   height: 34px ;
   width: 100% ;             
}
 
div#header-r4 {   
   background-image: url(images/hp-bg-r4.gif) ;     
   height: 24px ;
   width: 100% ;         
}
 
p#header-r1-left {
   background-color: #3C75AE ;
   float: left ;
   height: 10px ;
   width: 50px ;     
}
 
p#header-r2-left {  
   float: left ;
   padding: 19px 0px 0px 6px ;     
   width: 410px ;        
}
 
p#header-r2-right {  
   float: right ; 
   padding: 6px 0px 0px 0px ; 
   width: 480px ;            
}
 
p#header-r3-left { 
   background-color: #3C75AE ;       
   float: left ;     
   width: 50px ; 
   height: 34px ;     
}
 
p#header-r3-center {
   font: 16px Arial, Helvetica, sans-serif ;
   color: #FFF ; 
   float: left ; 
   padding: 6px 0px 0px 6px ;             
}
 
p#header-r3-right {   
   float: right ;  
   width: 35px ;
   line-height: 0;    
}
 
p#header-r4-left {
   font: 13px Arial, Helvetica, sans-serif ;
   color: #000 ;  
   float: left ; 
   padding: 4px 0px 0px 4px;    
   width: 50px ;       
}
 
p#header-r4-right {   
   float: right ;
   width: 24px ;       
}
 
</style> 
</head>
<body>
<div id="container"> <!-- begins the container div -->
 
  <div id="header-r1">
    <p id="header-r1-left"></p>
  </div> 
  <div id="header-r2">
    <p id="header-r2-left"><img src="images/test-logo.gif" alt="" width="395" height="39"></p>
	<p id="header-r2-right"><img src="images/test-right.gif" alt="" width="468" height="60"></p>
  </div>
  <div id="header-r3">  
    <p id="header-r3-left"></p>
    <p id="header-r3-center">Test text goes here</p>
    <p id="header-r3-right"><img src="images/header-r3-tri.gif" alt="" width="35" height="34"></p>
  </div>    
  <div id="header-r4">
    <p id="header-r4-left">Home</p>
    <p id="header-r4-right"><img src="images/hp-r4-tri.gif" alt="" width="24" height="24"></p>  
  </div>
 
</div> <!-- ends the container div -->
</body>
</html>

EDIT #2:
I just thought of something, I tested that with Firebug, and didn't actually verify that it works in IE!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

(document.documentElement.cli

(document.documentElement.clientWidth)
Might be better

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 5 years 23 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

You ROCK!!!

A W E S O M E!

But what the heck, no validate for IE? That is weird since that's IE code. Now that I have something I need to start messing with this. I'm building a site but I'm using it to teach myself CSS. CSS is definitely tougher than HTML.

Thank you so much! :thumbsup:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No validate? validating

No validate? validating what? the CSS stylesheet? it won't validate as it's a pile of garbage code where web standards are concerned it's proprietary MS stuff

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 5 years 23 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

It takes an Active X Control

Thanks a million but Dang! Both versions trigger an Active X Control warning. I'm afraid that might scare people off so I might have to go with fixed width 1024.

Thanks again!

---Update---

I just googled min-width and came across this. I am going to test it.

http://www.webreference.com/programming/min-width/
from the link...
"After many hours of experimenting, I've found a CSS only answer. My method requires additional divs to control the width and min-width but I believe this is a small price to pay for a non-JavaScript method that works cross-browser (even on Mac IE5)."

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yeah that's an old technique

Yeah that's an old technique devised by Stu Nichols a css genius however it's a rather hacky approach I would head of to his site and check what his current methods are as that's a very old example which he may have improved on, personally I wouldn't give a hang what IE6 was throwing up by way of warnings no one should be using that damned browser any longer :curse:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hugo wrote:Yeah that's an

Hugo wrote:

Yeah that's an old technique devised by Stu Nichols a css genius however it's a rather hacky approach I would head of to his site and check what his current methods are as that's a very old example which he may have improved on, personally I wouldn't give a hang what IE6 was throwing up by way of warnings no one should be using that damned browser any longer :curse:

Amen to that!

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 5 years 23 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

You are right

I'm going through that example like a tutorial and I'm on the 2nd page now. You guys are right, it's a total hack. I'm looking for something simple. I'll see if something better is floating around.

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 5 years 23 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

Update on min-width and IE code

http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/

The code from this page works perfectly. When my page is on my hard drive I get an Active X warning but when I put it online it works fine. I still feel kind of weird about using Javascript but... I dunno it does work.

I checked the code on Fark and it looks like they use it or something just like it.
http://www.fark.com/

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You've simply backed tracked

You've simply backed tracked to using expressions though, which is fine as far as I'm concerned and use when necessary, the activeX issue is as you've found a non issue.

I keep seeing document.body although in standards mode the root element is HTML or document.documentElement which I always use.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 5 years 23 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

admittedly true

I'm admitting defeat on this one and going with code, hehe. I don't want to use a CSS hack that I can't comprehend and crashes the next time a browser version updates. It seems crazy to me that IE doesn't have min-width. Weird. I read that IE7 has min-width but doesn't implement it correctly. I'm not sure about IE8.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 48 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

You don't seem to be

You don't seem to be understanding what Hugo is trying to tell you. I have made 3 elastic sites by using this (put it in your html and it will even validate)

/* liquid layout for IE */
<!--[if lte IE7]>
    #wrapouter { width: expression(document.documentElement.clientWidth < 780 ? "780px" : document.documentElement.clientWidth > 1024 ? "1024px" : "95%"); }
    #wrapinner { width: expression(document.documentElement.clientWidth < 780 ? "780px" : document.documentElement.clientWidth > 1024 ? "1024px" : "95%"); }
    #textbox { width: expression(document.documentElement.clientWidth < 780 ? "780px" : document.documentElement.clientWidth > 1024 ? "1024px" : "95%"); } 
<![endif]-->	
 
</style>

Note the #wrapouter, #wrapinner and #textbox all then have to have the min-width set in the css, like this...

#wrapouter {
  background: #e6e4e2;
  font-size: 0.9em;
  margin: 0 auto;
  min-width: 780px;
  max-width: 1024px;
  overflow: hidden;
}

ETA: I think he's telling you it has to be on an element not the body, which is why I've used wrappers. When you hit the min-width the text will stop wrapping at that point and the scroll bars will appear.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile