<h2> and <p> Padding Problems with 2 Column Layout - Please Read Inside

[slim]

hi all,

whilst creating a mock-up site, i am trying to follow the rules and
guidelines i have been digesting over the last few months with regards to
css positioning and accessibility.

well, i know the journey is far from over and i'm using this mock-up as a
learning process.

the problem stumping me at the moment can be seen here:

http://www.awash.org/vd/index.html

using this style sheet:

http://www.awash.org/vd/vd.css

parts of the content of the right hand column seems to sit under the left
hand column. basically, i like the way it looks now but i want the
header on the right (with the light blue background), and the paragraph,
to have clear white space around them.

for some reason that i can't see, the blue background of the text seems
to draw all the way over to the left of the viewport in ie6, and then the
left hand column is drawn over the top of it. either that, or my graphics
card renders things in an odd order ;) it doesn't seem to render that way
in opera, but then it could just be too fast for me to see.

if i add padding-left to the <h2> element it has no effect. the same
happens with the <p> element in the right hand column.

can anybody tell me why this is? i'm stuck here and would appreciate
pointers.

also, feel free to butcher the rest of my code too and point out any
other errors, incorrect approaches, etc. i'm aware there may be kludges
and bad coding in there - it's early days yet.

i would like to make this as cross-browser compatible and as accessible
as possible eventually. although i'm only testing in ie6 and opera7.1
currently, it pays to get it right early on.

finally, i have validated it so it should be clean.

thanks in advance for any help you can offer.
--
slim

[Neal]

On 11 May 2004 20:51:38 GMT, slim <sl**@antiCorp.invalid> wrote:

hi all,

whilst creating a mock-up site, i am trying to follow the rules and
guidelines i have been digesting over the last few months with regards to
css positioning and accessibility.

well, i know the journey is far from over and i'm using this mock-up as a
learning process.

the problem stumping me at the moment can be seen here:

http://www.awash.org/vd/index.html

using this style sheet:

http://www.awash.org/vd/vd.css

parts of the content of the right hand column seems to sit under the left
hand column. basically, i like the way it looks now but i want the
header on the right (with the light blue background), and the paragraph,
to have clear white space around them.

Try

div#rightcol {border:1px dashed red; margin: 1em; padding: 1em;}

[Neal]

On 11 May 2004 20:51:38 GMT, slim <sl**@antiCorp.invalid> wrote:

http://www.awash.org/vd/index.html

A few other thoughts on the page:

font-size: 80% is a bit small. Yes, it's resizable, but you ought to use
the size the user prefers to read - which ostensibly will be the browser's
100% setting. If it's not set to what they prefer, their complaining about
the site is like blaming the TV program when the vertical hold on your set
is not set properly. But if you broadcast the TV show with intentional
vertical-hold problems, they then try to adjust. (Thank you Andy Kaufman.)
We don't want to make the user adjust if they've set it to their
preference already.

No use in 0px - simply use 0.

div#leftcol {
float:left;
....
width:16%;
}

Consider using ems for this column's width, as that will scale the width
with the user's text preference. In really huge text settings and narrow
viewports, this may make the column unusually wide and the content
unusually small, but that would be, clearly, unusual. The content area
will take up the remaining space, which will vary of course.

a:link a:hover a:hover a:active - use that order.

I overall like your design.

[slim]

|| name | Neal <ne*****@yahoo.com> | message |
|| news:op**************@news.individual.net: ||

On 11 May 2004 20:51:38 GMT, slim <sl**@antiCorp.invalid> wrote:

http://www.awash.org/vd/index.html
A few other thoughts on the page:

thanks, this is exactly what i'm after :)
font-size: 80% is a bit small. Yes, it's resizable, but you ought to
use the size the user prefers to read - which ostensibly will be the
browser's 100% setting. If it's not set to what they prefer, their
complaining about the site is like blaming the TV program when the
vertical hold on your set is not set properly. But if you broadcast
the TV show with intentional vertical-hold problems, they then try to
adjust. (Thank you Andy Kaufman.) We don't want to make the user
adjust if they've set it to their preference already.
i have now changed all of the font sizes to 100% except the horizontal
navigation bar - i see & accept your well made point but i would like
that to be clearly less "in your face" than other text around it.

No use in 0px - simply use 0.

thanks, have done.
div#leftcol {
float:left;
...
width:16%;
}

Consider using ems for this column's width, as that will scale the
width with the user's text preference. In really huge text settings
and narrow viewports, this may make the column unusually wide and the
content unusually small, but that would be, clearly, unusual. The
content area will take up the remaining space, which will vary of
course.
i have set this to 10em now, thanks.

a:link a:hover a:hover a:active - use that order.
hmm. i have changed this at a guess to link, hover, visited, active. is
that right? above you've put hover twice - not that i'm moaning, i just
want to get it right :)

I overall like your design.

thank you!
--
slim

[Neal]

On 11 May 2004 21:53:48 GMT, slim <sl**@antiCorp.invalid> wrote:

|| name | Neal <ne*****@yahoo.com> | message |
|| news:op**************@news.individual.net: ||

a:link a:hover a:hover a:active - use that order.

hmm. i have changed this at a guess to link, hover, visited, active. is
that right? above you've put hover twice - not that i'm moaning, i just
want to get it right :)

Second should be visited. I screwed up.

LVHA. Las Vegas Has Acne. Whatever helps you remember.

[slim]

|| name | Neal <ne*****@yahoo.com> | message |
|| news:op**************@news.individual.net: ||

On 11 May 2004 20:51:38 GMT, slim <sl**@antiCorp.invalid> wrote:

<snip>

parts of the content of the right hand column seems to sit under the
left hand column. basically, i like the way it looks now but i want
the header on the right (with the light blue background), and the
paragraph, to have clear white space around them.

Try

div#rightcol {border:1px dashed red; margin: 1em; padding: 1em;}

thanks, i tried this and it works kind of - but i still get the same
problem with the <h2> elements background drawing all the way to the
left. i must be doing something else wrong i guess.

here is a link to a .jpg of what i am seeing here in ie6, perhaps it's
just me:

http://www.awash.org/vd/images/design_problem.JPG

the blue header is drawn with a 1em margin around it now, but it still
draws under the left column...

if you can see any other obvious error i've made, i'd be grateful. this
is bugging the hell out of me!

tia
--
slim

[slim]

|| name | Neal <ne*****@yahoo.com> | message | news:opr7uu6zxc6v6656
@news.individual.net: ||

On 11 May 2004 21:53:48 GMT, slim <sl**@antiCorp.invalid> wrote:

|| name | Neal <ne*****@yahoo.com> | message |
|| news:op**************@news.individual.net: ||

a:link a:hover a:hover a:active - use that order.

hmm. i have changed this at a guess to link, hover, visited, active. is
that right? above you've put hover twice - not that i'm moaning, i just
want to get it right :)

Second should be visited. I screwed up.

LVHA. Las Vegas Has Acne. Whatever helps you remember.

hehe, ok. thanks for the clarification - i think las vegas has acne will
now stick :)
--
slim

[Neal]

On 11 May 2004 21:58:20 GMT, slim <sl**@antiCorp.invalid> wrote:

|| name | Neal <ne*****@yahoo.com> | message |
|| news:op**************@news.individual.net: ||

div#rightcol {border:1px dashed red; margin: 1em; padding: 1em;}

thanks, i tried this and it works kind of - but i still get the same
problem with the <h2> elements background drawing all the way to the
left. i must be doing something else wrong i guess.

here is a link to a .jpg of what i am seeing here in ie6, perhaps it's
just me:

Nope, try adding, after the margin: 1em; this: margin-left: 11em;

[slim]

|| name | Neal <ne*****@yahoo.com> | message | news:opr7uvqmku6v6656
@news.individual.net: ||

On 11 May 2004 21:58:20 GMT, slim <sl**@antiCorp.invalid> wrote:

|| name | Neal <ne*****@yahoo.com> | message |
|| news:op**************@news.individual.net: ||

div#rightcol {border:1px dashed red; margin: 1em; padding: 1em;}

thanks, i tried this and it works kind of - but i still get the same
problem with the <h2> elements background drawing all the way to the
left. i must be doing something else wrong i guess.

here is a link to a .jpg of what i am seeing here in ie6, perhaps it's
just me:

Nope, try adding, after the margin: 1em; this: margin-left: 11em;

woop! thanks - that worked great...

however, i now have the same problem i had before in opera where it adds
a gap between the horizontal navigation bar and the left hand column.

i think i fixed this by adding the margin:0; to the <h1> element but it
doesn't seem to work now i've altered as above.

sorry to be a pain in the arse, but any ideas why? :D

thanks
--
slim

[Neal]

On 11 May 2004 22:16:28 GMT, slim <sl**@antiCorp.invalid> wrote:

however, i now have the same problem i had before in opera where it adds
a gap between the horizontal navigation bar and the left hand column.

Right. Change the whole margin rule to:
margin: 0 1em 1em 11em;

and see what that'll do. (The shortcut goes clockwise to all sides
starting at the top.) This should return the top margin to what it was
like before.

[slim]

|| name | slim <sl**@antiCorp.invalid> | message |
|| news:Xn**************************@38.144.126.79: ||

<snip>

woop! thanks - that worked great...

however, i now have the same problem i had before in opera where it
adds a gap between the horizontal navigation bar and the left hand
column.

i think i fixed this by adding the margin:0; to the <h1> element but
it doesn't seem to work now i've altered as above.

sorry to be a pain in the arse, but any ideas why? :D

thanks
--
slim

in fact, it all seems to have gone a bit wrong: the left hand column no
longer reaches the bottom of the page and the red dashed border becomes
solid lower down (not that it really matters as it won't be there once
debugged).

drat! :/
--
slim

[slim]

|| name | Neal <ne*****@yahoo.com> | message |
|| news:op**************@news.individual.net: ||

On 11 May 2004 22:16:28 GMT, slim <sl**@antiCorp.invalid> wrote:

however, i now have the same problem i had before in opera where it
adds a gap between the horizontal navigation bar and the left hand
column.

Right. Change the whole margin rule to:
margin: 0 1em 1em 11em;

and see what that'll do. (The shortcut goes clockwise to all sides
starting at the top.) This should return the top margin to what it was
like before.

thanks for all your help, i just fixed it another way - it was just me
being stupid i think. i've uploaded the changed page now :)

now i've just got to figure out why the left column doesn't meet the
bottom of the page anymore, and i'm all set.

or maybe i just fixed the other stuff badly. it's late and i'm tired!

thanks again
--
slim

[Neal]

On 11 May 2004 22:20:59 GMT, slim <sl**@antiCorp.invalid> wrote:

in fact, it all seems to have gone a bit wrong: the left hand column no
longer reaches the bottom of the page and the red dashed border becomes
solid lower down (not that it really matters as it won't be there once
debugged).

drat! :/

Drat indeed.

I didn't want to do this, but return to what you had before, getting the
left column back to 100%. No margins or padding. Then add a wrap div
around the "rightcol" div styled like this.

#contentwrap {
margin: 1em;
padding: 1em;
}

I've never encountered this before, but somehow the float div is being
affected by styles set to the other div, which is extremely weird.

[Neal]

On Tue, 11 May 2004 18:32:43 -0400, Neal <ne*****@yahoo.com> wrote:

I didn't want to do this, but return to what you had before, getting the
left column back to 100%. No margins or padding. Then add a wrap div
around the "rightcol" div styled like this.

#contentwrap {
margin: 1em;
padding: 1em;
}

Scratch that, I am so off tonight.

Add no margin, just padding.

[slim]

|| name | Neal <ne*****@yahoo.com> | message |
|| news:op**************@news.individual.net: ||

On Tue, 11 May 2004 18:32:43 -0400, Neal <ne*****@yahoo.com> wrote:

I didn't want to do this, but return to what you had before, getting
the left column back to 100%. No margins or padding. Then add a wrap
div around the "rightcol" div styled like this.

#contentwrap {
margin: 1em;
padding: 1em;
}

Scratch that, I am so off tonight.

Add no margin, just padding.

hmm. i think i've done what you asked, and it seems to look the same as i
had it after i modified it. but i'm not sure what you mean by "return to
what you had before" - do you mean 16% width for the left column again?

i have left it as 10em for now as i think i may have misinterpreted.

the left column still doesn't reach the floor of the page so i must be
doing something wrong.

i've added a green border to the container div that both columns are held
in. that just confused me further as ie6 displays the bottom border at
the foot of the page (though the left column doesn't reach it). whereas
opera7 displays the green border (roughly) at the bottom of the left
column, which may go some way to explaining why it's not reaching the
foot of the page.

i'm very confused right now...

thanks for the help :)
--
slim