newbie needs a bit of help

[John]

Hi all - wonder if you can help? I have put together avery simple site at
www.johndouglas.demon.co.uk. I have used css. 1 problem - as I go from page
to page the "banner" at the top of the page changes height by a small
amount - annoying but not catastrophic I know. Can't see what I'm doing
wrong - can anyone help?

Thanks John

ps the CSS is as below:
H1{font-family: "Arial";color:black;font-size:18pt;}
H5{font-family: "Arial";color:black;font-size:10pt;font-weight:normal}
P {color:"#000099"}
A:link{color:white;text-decoration:none}
A:visited{color:white;text-decoration:none}
A:hover {color:#9999FF;text-decoration:none}
A:active {color:white;text-decoration:none}

#main {
width:82%;
height:600px;
margin:auto;
}

#content {
background:#fff;
vertical-align:top;
padding:10px;height:300px;width:600px;
}

#banner {
font:color:#fff;

background:#9999FF;
height:60px;
vertical-align:top;
}

#side {vertical-align:top;
background: #000099;height 300px;
width:20%
}

 

[windandwaves]

Hi all - wonder if you can help? I have put together avery simple
site at www.johndouglas.demon.co.uk. I have used css. 1 problem - as
I go from page to page the "banner" at the top of the page changes
height by a small amount - annoying but not catastrophic I know.
Can't see what I'm doing wrong - can anyone help?

Thanks John

ps the CSS is as below:
H1{font-family: "Arial";color:black;font-size:18pt;}

consider doing this:

body {font-family: arial, verdana, tahoma, helvetical, sans-serif;}
stipulating alternatives and making it the same all the way through

H5{font-family: "Arial";color:black;font-size:10pt;font-weight:normal}
P {color:"#000099"}
A:link{color:white;text-decoration:none}
A:visited{color:white;text-decoration:none}

if you want you can rewrite as:
A:link, A:visisted{color:white;text-decoration:none}

A:hover {color:#9999FF;text-decoration:none}
A:active {color:white;text-decoration:none}

#main {
width:82%;
height:600px;
margin:auto;
}

#content {
background:#fff;
vertical-align:top;
padding:10px;height:300px;width:600px;
}

#banner {
font:color:#fff;

background:#9999FF;
height:60px;
vertical-align:top;
}

#side {vertical-align:top;
background: #000099;height 300px;
width:20%
}

I could not replicate your problem, but I am impressed with your css. Great
for someone who is new to this. Now all you need to do is throw out the
frontpage editor (i use notepad2 and I love it). Strictly speaking you also
do not need to use a table. Consider a structure like this

<div id="contentholder">
<div id="banner>....</div>
<div id="menu" style="float: left; width: 100px;">menu here</div>
<div id="content" style="margin-left: 105px;">content here</div>
</div>

of course you can move the css to your css file.

also, you should change your characterset to
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>Well, anyway, just some of my input. Good on ya for the organic garden,
we need more of that real soon!>nicolaas

 

[Chris Beall]

Hi all - wonder if you can help? I have put together avery simple site at
www.johndouglas.demon.co.uk. I have used css. 1 problem - as I go from page
to page the "banner" at the top of the page changes height by a small
amount - annoying but not catastrophic I know. Can't see what I'm doing
wrong - can anyone help?

Thanks John

(snip CSS, available online)

John,

Hmmm. Some odd behavior here.

I think you've tried to control things a bit too much here. The web is
a flexible place and you are giving things very precise dimensions.

Try removing the 'height:600px;' from '#main' in the CSS. No guarantees.

There are also some errors in both your HTML and CSS. If you add a
DOCTYPE and then run the pages through validation, you will likely get
much better results.

See http://pages.prodigy.net/chris_beall/TC/index.html for some more
stuff that will be useful to you.

Chris Beall

 

[Andy Dingley]

Hi all - wonder if you can help? I have put together avery simple site at
www.johndouglas.demon.co.uk. I have used css.

Mainly you've mis-used a table to control layout. This is a bad thing
generally, and you're actually getting caught by one of the specific bad
instances about it.

Tables are dynamic content-driven things, not rigidly sized. So when you
then tried to control their sizes by setting the _overall_ size, they
still jiggle about internally. It's trying to take its overall fixed
height and partitiion it according to how the content fills it.

I suggest you abandon this table-based layout and use a proper CSS-based
one. This is harder to write, but you can download one from glish.com
bluerobot.com and others.

If you insist on using tables, then set the height of the top row (which
you care about) and let the overall height float free, according to what
the content needs to fill it.

Also replace font-family: "Arial"; with
font-family: "Arial", sans-serif;
and font-size:18pt; with font-size:180%;

Oh, and throw away FrontPlague. It's awful.

 

[John]

Thanks to all who have got back to me on this.

I'm going to have a go at using the "DIV" tag stuff as suggested. I'm also
going to look the websites mentioned- I've also changed a few other things
as suggested.

Many thanks

John