Log in

View Full Version : Help needed to get min-width working


Vicki2
04-09-2007, 07:30 AM
Hello folks

I'm a newbie with some nous but obviously not enough. I volunteered to rewrite a website (my first mistake!) not knowing anything about it at all. It's been a steep learning curve :)

I wanted a liquid design so after trial and error used Russ Weakley's design at
http://www.maxdesign.com.au/presentation/two-columns/

This works fine as the only thing in the left column will be a background pattern and 3 to 5 little boxes floated left.

I wanted the banner (gif), a front page photo and divider bars to be liquid so used
http://www.michelf.com/weblog/2005/liquid-image/

Yep – Peekaboo!

Soooo...
I put position: relative: as the first thing and display: inline; as the last thing on everything in sight in the CSS trying to make sure everything had "layout" though most divs already had a width or height.

Someone seemed to think the following would work on Peekaboo
Body {
position: relative; /* peekaboo fix for ie6 */
min-width: 0; /* peekaboo fix for ie7 */
}

And I think this has worked since the breaks I get are always on the same page in the same place and whizzing the scrollbar doesn't change anything.

But to make sure I put in Stu Nicholls "haslayout"
1. <!--><style>
2. /* style for IE 6 + IE5.5 + IE5.0 */
3. .gainlayout { height: 0; }
4. </style><![endif]-->
5.
6. <!--[if IE 7]><style>
7. .gainlayout { zoom: 1;}
8. /* or whatever we might need tomorrow */
9. </style><![endif]-->

Okaaaay....I think peekaboo's gone.

But I [I]really need min-width to work at 460px on the container (everything) or I get breakup – always in the same places. But I am going crazy trying to work these things together, since IE6 apparently doesn't understand min-width.

I'm using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

because I want to install Mike Hall's menu at http://www.brainjar.com/dhtml/menubar/
and since it looks the same in both IE6 and FF2, I figure any trouble I get into is my own fault :D But I can't/won't go on to trying to install the menu until this min-width is licked...if it can be :(

I'm using 2K/IE6 to develop since I haven't worked out how to invoke FF in Arachnophilia. I'm sorry I can't link you to the source so you can see/try it out for yourselves, but the powers that be haven't organised access to the server for me yet (and there's a site already up).


Hmmm....anyone want to weigh in please? Any help very much appreciated.

thanks
Vicki
Vicki2
04-09-2007, 10:41 AM
Okay, I've been nosing around and see that you folks don't mind chunks of code, so I hope this helps.

I'll post the HTML separately since it's complaining this is too long.

This is the CSS



<!--****************************************-->
<!--* NASM style sheet
<!--****************************************-->

/*----------- Page Layout ---------------- */
<head>
<title>NASM</title>
<link rel="stylesheet" type="text/css" media="screen" />
</head>

body
{
position: relative; /* peekaboo fix for ie6 */
min-width: 0; /* peekaboo fix for ie7 */
background-color: #663399;
margin: 0;
padding: 1em;
font: "trebuchet ms", arial, helvetica, sans-serif;
}


a:link { color: #663399; font-weight: bold; text-decoration: none; }
a:visited { color: #663399; font-weight: bold; text-decoration: none; }
a:hover { color: #A67AD1; font-weight: bold; text-decoration: underline; }
a:active { color: #A67AD1; font-weight: bold; text-decoration: underline; }

ol <font face="Trebuchet MS" SIZE=0.9em> {list-style-image: url("images/bluedot.jpg")</font> }
ol li { margin: 0 0 0 0 }


/*---------------------------------------------------------*/
/* Container and resizing of banner, photo & bar */
/*---------------------------------------------------------*/
#container
{
position: relative;
background-image: url("images/viojewel140_2.gif");
background-repeat: repeat-y;
margin: 0 15&#37;;
border: 6px ridge #FFB6F1;
}

#masthead
{
width: 100%;
}

#bar
{
width: 100%;
}
#photo
{
width: 77%;
}
/*----------------------------------------------------------------*/
/* Layout */
/* banner, navbar, topjewel, leftjewel, content & footer */
/*----------------------------------------------------------------*/
#banner
{
position: relative;
height: 130px;
background-color: #663399;
border: 0 0 6px 0;
border-style: ridge;
border-color: #FFB6F1;
}


#navbar
{
position: relative;
height: 25px;
color: #FFFFFF;
text-align: center;
border-color: #FFB6F1;
border-width: 6px 0 0 0;
border-style: ridge;
}
p { margin-top: 0; }

#topjewel
{
position: relative;
background-image: url("images/viojewel140_2.gif");
background-repeat: repeat-x;
height: 35px;
padding: 0 0 0 0.4em;
border-color: #FFB6F1;
border-width: 6px 0 0 0;
border-style: ridge;
}
p { margin-top: 0; }


h2 {
position: relative;
font-size: 2em;
font: "Trebuchet MS", arial, helvetica, sans-serif;
color: #A67AD1;
font-style: italic;
font-weight: bold;
margin: 0;
}

h3 {
position: relative;
color: #A67AD1;
font-size: 3em;
font: "Trebuchet MS", arial, helvetica, sans-serif;
font-style: italic;
font-weight: bold;
margin: 0;
}

.box
{
float: right;
width: 50px;
margin: 1em;
padding: 0.5em;
color: #6A5ACD;
font-size: 0.6em;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
text-align: center;
background: #FFAFD5 url("images/rosie_rb1.gif");
background-repeat: repeat-y;
border: 5px double #FF69B4;
display: inline;
}
p { margin-top: 0; }


.box2
{
position: relative;
clear: both;
float: left;
width: 50px;
margin: 300px 0 0 25px;
padding: 0.5em;
background: #FFAFD5 url("images/rosie_rb2.gif");
background-repeat: repeat-y;
color: #6A5ACD;
font-size: 0.6em;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
text-align: center;
border-color: #A67AD1;
border-width: 5px;
border-style: solid;
display: inline;
}
p { margin-top: 0; }


.box3
{
position: relative;
clear: both;
float: left;
width: 50px;
margin: 100px 0 0 25px;
padding: 0.5em;
background: #FFAFD5 url("images/rosie_rb2.gif");
background-repeat: repeat-y;
color: #6A5ACD;
font-size: 0.6em;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
text-align: center;
border-color: #A67AD1;
border-width: 5px;
border-style: solid;
display: inline;
}
p { margin-top: 0; }

.box4
{
position: relative;
clear: both;
float: left;
width: 50px;
margin: 100px 0 0 25px;
padding: 0.5em;
background: #FFAFD5 url("images/rosie_rb2.gif");
background-repeat: repeat-y;
color: #6A5ACD;
font-size: 0.6em;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
text-align: center;
border-color: #A67AD1;
border-width: 5px;
border-style: solid;
display: inline;
}
p { margin-top: 0; }

.box5
{
position: relative;
clear: both;
float: left;
background: #FFAFD5 url("images/rosie_rb2.gif");
background-repeat: repeat-y;
width: 60px;
margin: 550px 0 0 25px;
padding: 0.5em;
color: #6A5ACD;
font-size: 0.6em;
Font-family: "Trebuchet MS", arial, helvetica, sans-serif;
text-align: center;
border-color: #A67AD1;
border-width: 5px;
border-style: solid;
display: inline;
}
p { margin-top: 0; }

#floatbuild
{
float: left;
margin: 10px 10px 10px 0;
display: inline;
}
p { margin-top: 0; }

#floatfont
{
float: right;
margin: 0 0 10px 10px;
display: inline;
}
p { margin-top: 0; }

#content
{
position: relative;
margin-left: 134px;
padding: 2em;
font-size: 0.9em;
text-color: #FFFFFF;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
text-align: left;
background: url("images/bgtxt1.jpg");
background-repeat: repeat;
border-color: #FFB6F1;
border-width: 6px 0 0 6px;
border-style: ridge;
display: inline-block;
}

#floatBarb
{
float: right;
height: 150px;
width: 120px;
margin: 1em;
padding: 2px;
background: url("images/barbanell.jpg");
background-repeat: no-repeat;
border: 10px solid #BB0000;
display: inline-block;
}
p { margin-top: 0; }

#floatBirch
{
float: right;
height: 150px;
width: 120px;
margin: 1em;
padding: 2px;
background: url("images/silverbirch.jpg");
background-repeat: no-repeat;
border: 10px solid #FFE4B5;
display: inline-block;
}
p { margin-top: 0; }



#footer
{
position: relative;
clear: both;
background-color: #663399;
color: #FFFFFF;
font-size: 0.7em;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
text-align: right;
border-top: 6px ridge #FFB6F1;
padding: 0.5em;
display: inline-block;
}
Vicki2
04-09-2007, 10:45 AM
And this is the HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--****************************************************************-->
<!--* Copyright 2007 by NASM Inc. *-->
<!--****************************************************************-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>NASM</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="nasm.css" rel="stylesheet" type="text/css" />

<!----image resizing---->
<script type="text/javascript">
function reflow() {
var masthead = document.getElementById(*masthead*);
masthead.style.border=masthead.style.border;
var bar = document.getElementById(*bar*);
bar.style.border=bar.style.border;
var photo = document.getElementById(*photo*);
photo.style.border=photo.style.border;
}
window.onload = reflow;
</script>
<!---- end of image resizing ---->


<!---- haslayout script ---->
<!--[if lt IE 7]><style>
/* style for IE 6 + IE5.5 + IE5.0 */
.gainlayout { height: 0; }
</style><![endif]-->

<!--[if IE 7]><style>
.gainlayout { zoom: 1;}
/* or whatever we might need tomorrow */
</style><![endif]-->

</head>

<body backgroundgcolor="#663399">

<!---- Page layout ---->
<div id="container">

<div id="banner">
<img src="images/trinitylight.jpg" id="masthead" alt="masthead"/>
</div>

<div id="navbar">
<p>where the menu sits</p>
</div>

<div id="topjewel">
</div>



<!---- Little boxes on left ---->
<div class="box2">
<b>Read about the 7 Principles</b>
</div>

<div class="box3">
<div align="center"><b><font color="#6A5ACD">How The Rosa Tingey Centre was named</font></b></div>
</div>

<div class="box4">
<div align="center"><b><font color="#6A5ACD">Saving Rosa's books!</font></b></div>
</div>

<div class="box5">
<b><font color="#663399"><a href="facets.html"><div align="center">Forthcoming Special Events in the FACETS Newsletter</div></a></font></b>
</div>

<!---- Main text & right box ---->
<div id="content">

<h2>Welcome</h2>

<div class="box">
<b><a href="facets.html">April FACETS Newsletter now available</a></b>
</div>

<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>

<div id="floatbuild"/>
<img src="images/bldgfront.jpg" id="photo" alt="The Rosa Tingey Centre"/>
</div>

<br />
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />
<br />
More text and a link <a href="facets.html">Schedule</a>
</p>

<h2>Aims</h2>
<ol><p><img src="images/bluedot.jpg" width=12 height=12/>&nbsp; text</p></ol>

<ol><p><img src="images/bluedot.jpg" width=12 height=12/>&nbsp; text</p></ol>

<ol><p><img src="images/bluedot.jpg" width=12 height=12/>&nbsp; text</p></ol>

<ol><p><img src="images/bluedot.jpg" width=12 height=12/>&nbsp; text</p></ol>

<ol><p><img src="images/bluedot.jpg" width=12 height=12/>&nbsp; text</p></ol>

<ol><p><img src="images/bluedot.jpg" width=12 height=12/>&nbsp; text</p></ol>

<p><img id="floatfont" src="images/font_sm.gif" alt="Font" width="140" height="256"/><h2>NASM Philosophy</h2>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>

<br />

<div align="center"><img src="images/trinitytrans.gif" alt="Top"/></div>
<br />

<div align="center"><font size="-2"><font color="#ff0099"><b>"People are like stained-glass windows.
They sparkle and shine when the sun is out but when the darkness sets in, their true beauty is revealed only if there is a light within."</b>
<br /><i>~ Elisabeth Kubler-Ross</i></font></font></div>


</div> <!---- Closes the content ---->

<div id="footer">
<p><font size="-2">&copy; Copyright NASM Inc. 2007</font></p>
</div>

</body>
</html>

Again, thanks for any suggestions on fixing the overall min-width: 460px; (#container)

cheers
Vicki
Twey
04-09-2007, 12:21 PM
<style type="text/css">
#container {
min-width: 460px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#container {
width: 460px;
}
</style>
<![endif]-->The thing is that IE treats width the way other browsers treat min-width. So, we set the width to 460px in IE rather than the min-width. I'm being optimistic and assuming that this problem won't persist in IE8 :)
var masthead = document.getElementById(*masthead*);That's not valid Javascript... strings are indicated by quotes (" or '), not asterisks (*).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--****************************************************************-->
<!--* Copyright 2007 by NASM Inc. *-->
<!--****************************************************************-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>NASM</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />Uh-uh. If you're using XHTML, you need to serve it with a MIME type of application/xhtml+xml, otherwise it will just be treated as badly-formed HTML. If you do so, however, you'll lose support for IE, which doesn't support XHTML yet.

Not only that, your page isn't valid (X)HTML Strict. Run it through validator.w3.org (http://validator.w3.org/) and fix the errors (starting with changing the DOCTYPE to HTML 4.01 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">if you want to support IE).
mburt
04-09-2007, 12:39 PM
As for the min-width, width deal:

IE treats "width" without borders, margins, paddings, etc. which is the same way FireFox treats "min-width". IE is stupid like that.
Vicki2
04-09-2007, 01:16 PM
Thanks for looking at this Twey.:)

I've just put the little script into my index.html, (right above the <!-image resizing -> hope that's where it's supposed to go!) but it isn't quite what I want.

It has made the web page fixed 460px slightly off centre and I've lost the dynamic resize. Previously I had an elastic page that opened at 70% of the viewport and would stay liquid as the browser was resized. But I want to stop the wrapping and have the bottom scroll bar active at 460px since this seems to be the optimum size for the page. Hence the min-width 460px.

In IE6 that is. and in my editor it has highlighted the first part of the script, which I presume is for IE7 and the lte IE7 is still black as though it hasn't been read.

As to the .js strings, I just copied the photo one and formatted the others the same :confused: But I've now changed them - thanks for the tip. It did work though, so it beats me :)

As to the DOCTYPE, I haven't got around to working out what it really means. As I said above, I copied the Brainjar one because I want to implement that menu. The code validates in Arachnophilia but I think it's Transitional. I did try the W3.org validator a couple of days ago and was horrified to see that it objected to all my comments! So I scratched my head and went away to think about it another day. So once again, thanks for the heads-up, I've now copied yours into my pages....are you able to tell me if that new doctype will work with that menu??:confused:

Any other thoughts on min-width appreciated.

Thanks
Vicki
Vicki2
04-09-2007, 01:33 PM
Hello Mike

Yes, I became aware of the border/margin/padding issues when I was going round the mulberry bush over at PIE trying to implement one of their liquid designs before I decided there had to be a simpler template somewhere. Fortunately it isn't an issue here because the page always keeps it's 15% margins and it's the main container I want the min-width to act on.

thank you & cheers :)
Vicki
Vicki2
04-21-2007, 08:01 AM
Bit of an update.....

I found the perfect answer to what I want to do at

http://webdesign.html.it/articoli/leggi/545/progressive-layout/1/


/* Progressive Layout by Alessandro Fulciniti
just change the first line */

MakeLayout("container",540,850,1024);

function MakeLayout(id,minr,maxw,maxr){
if(document.getElementById){
SetWidth(id,minr,maxw,maxr);
window.onresize=function(){ SetWidth(id,minr,maxw,maxr);}
}
}

function SetWidth(id,a,b,c){
var w=getBrowserWidth();
if(w==0) return;
var el=document.getElementById(id);
el.style.margin="0 auto";
var d=el.style;
if(w<=a) d.width=a+"px";
else if(w>=c) d.width=b+"px";
else{
var m=(b-a)/(c-a);
d.width=parseInt(m*w+a*(1-m))+"px";
}
}

function getBrowserWidth(){
if (window.innerWidth) return window.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth!=0)
return document.documentElement.clientWidth;
else if (document.body) return document.body.clientWidth;
return 0;
}

So I created the little script file and called it minmax.js put

<script type="text/Javascript" src="minmax.js"></script>

before the </body> tag as told to do in the instructions, my container is called "container" and I changed the minmax parameters to 465 and 700 like so...

MakeLayout("container",465,700,1024);

...and expected perfection :)

Zilch! :(
Doesn't even appear to read the file from what I can see - have I missed something?

Thanks for any help

Vicki