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

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

On 11 May 2004 20:51:38 GMT, slim <slim (AT) antiCorp (DOT) 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;}

On 11 May 2004 20:51:38 GMT, slim <slim (AT) antiCorp (DOT) 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.

|| name | Neal <neal413 (AT) yahoo (DOT) com> | message |

| newspr7us7c0y6v6656 (AT) news (DOT) individual.net: ||

On 11 May 2004 20:51:38 GMT, slim <slim (AT) antiCorp (DOT) 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

On 11 May 2004 21:53:48 GMT, slim <slim (AT) antiCorp (DOT) invalid> wrote:

|| name | Neal <neal413 (AT) yahoo (DOT) com> | message |
|| newspr7us7c0y6v6656 (AT) news (DOT) 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.

|| name | Neal <neal413 (AT) yahoo (DOT) com> | message |

| newspr7uslh0e6v6656 (AT) news (DOT) individual.net: ||

On 11 May 2004 20:51:38 GMT, slim <slim (AT) antiCorp (DOT) 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

|| name | Neal <neal413 (AT) yahoo (DOT) com> | message | newspr7uu6zxc6v6656
@news.individual.net: ||

On 11 May 2004 21:53:48 GMT, slim <slim (AT) antiCorp (DOT) invalid> wrote:

|| name | Neal <neal413 (AT) yahoo (DOT) com> | message |
|| newspr7us7c0y6v6656 (AT) news (DOT) 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

On 11 May 2004 21:58:20 GMT, slim <slim (AT) antiCorp (DOT) invalid> wrote:

|| name | Neal <neal413 (AT) yahoo (DOT) com> | message |
|| newspr7uslh0e6v6656 (AT) news (DOT) 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;

|| name | Neal <neal413 (AT) yahoo (DOT) com> | message | newspr7uvqmku6v6656
@news.individual.net: ||

On 11 May 2004 21:58:20 GMT, slim <slim (AT) antiCorp (DOT) invalid> wrote:

|| name | Neal <neal413 (AT) yahoo (DOT) com> | message |
|| newspr7uslh0e6v6656 (AT) news (DOT) 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?

thanks
--
slim

On 11 May 2004 22:16:28 GMT, slim <slim (AT) antiCorp (DOT) 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.