positioning & padding in DIV elements ...

[Ralf]

hi folks,

trying to evolve from table-based design to using DIV-ID's etc for
positioning of elements. having a nasty time getting the right edges of
elements on my page to "behave" in terms of placement and padding to make
text content sit symetrically.

here's my URL: http://www3.telus.net/peaklong/test/intro.htm

my INTRO & BACKGROUND pages behave fine except for mysterious extra
padding-right in my outer content box; all other site pages, the outer box
sits fiine but this mysterious extra padding is now added to my inner
content box.

My bottom nav-bar was meant to follow the page-width of my Mainbody area,
but the only way I can approximate that is by bumping up the width to 103%
in the CSS.

any help with these items would certainly be appreciated....

Ralf

 

[Adrienne Boswell]

here's my URL: http://www3.telus.net/peaklong/test/intro.htm

my INTRO & BACKGROUND pages behave fine except for mysterious extra
padding-right in my outer content box; all other site pages, the outer
box sits fiine but this mysterious extra padding is now added to my
inner content box.

My bottom nav-bar was meant to follow the page-width of my Mainbody
area, but the only way I can approximate that is by bumping up the
width to 103% in the CSS.

Validate your CSS and see what happens.

 

[Ralf]

my INTRO & BACKGROUND pages behave fine except for mysterious extra

Validate your CSS and see what happens.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

thanks Adrian. missing some ALT image tags - seems the only problem W3C
pointed out; filled most of them in - no effect on errant padding ...

R

 

[Adrienne Boswell]

thanks Adrian. missing some ALT image tags - seems the only problem W3C
pointed out; filled most of them in - no effect on errant padding ...

Note: I said to validate the _CSS_ http://jigsaw.w3.org/css-validator/

 

[John Hosking]

here's my URL: http://www3.telus.net/peaklong/test/intro.htm

my INTRO & BACKGROUND pages behave fine except for mysterious extra
padding-right in my outer content box; all other site pages, the outer box
sits fiine but this mysterious extra padding is now added to my inner
content box.

When you say "extra padding-right", I think you really mean "space on
the right side (of something) that you didn't expect." I'm not sure it's
really padding-right. It's often hard to tell from behavior whether one
is looking at an element's right margin or its container's right padding
(or both).

IAC: Your #header-graphic { width: 100%; } makes it try to be the same
full width as div.content2, but you're starting it 10px to the right
because of the left margin in margin: 5px 10px 9px 10px;. So one obvious
workaround/solution is to remove the width declaration from #header-graphic.

Or maybe you want to try adding right padding to your outer box, and
resize the contents accordingly: .content2 { padding-right: 20px; }

BTW, I didn't detect a difference between the Intro and Background pages
relative to any of the others. They all look the same (content excepted)
to me in FF.

My bottom nav-bar was meant to follow the page-width of my Mainbody area,
but the only way I can approximate that is by bumping up the width to 103%
in the CSS.

You're mixing percentages with pixels, and doing it with elements that
have differing margins, padding, and/or borders. If you aim at margins
and padding, and let the widths come naturally, maybe you'll see better
results. As it is, I get a permanent horizontal scrollbar (I suspect the
following ruleset:
#page-header {
position: absolute;
top: 8px;
left: 8px;
width: 100%;
...etc. }
Leave the left and top if you want, but get rid of at least one of the
other declarations.)

BTW #2: For CSS issues, make sure you read (and post in) the NG
comp.infosystems.www.authoring.stylesheets.

HTH.

 

[Jonathan N. Little]

hi folks,

trying to evolve from table-based design to using DIV-ID's etc for
positioning of elements. having a nasty time getting the right edges of
elements on my page to "behave" in terms of placement and padding to make
text content sit symetrically.

here's my URL: http://www3.telus.net/peaklong/test/intro.htm

One thing I noticed:

p.top-para {
padding-bottom: -5px;
....

"Unlike margin properties, values for padding values cannot be negative.
Like margin properties, percentage values for padding properties refer
to the width of the generated box's containing block." from:
http://www.w3.org/TR/CSS21/box.html#propdef-padding

Also you have such a mishmash of inline CSS and old HTML styling
attributes plus and external stylesheet that appears just as haphazardly
composed with pixels and points and em's oh my!

I'd recommend stripping is all out all the inline style and deprecated
attributes to get the page in a clean and well formed state. Then add
style via your stylesheet. Start with the bold strokes first in other
words define the most general rules first. Then judiciously add more
specific one for those special parts within your page...

 

[Ralf]

my INTRO & BACKGROUND pages behave fine except for mysterious extra

Note: I said to validate the _CSS_ http://jigsaw.w3.org/css-validator/

Hi, well, my CSS had a few glitches; mostly negative top/bottom padding
values which I changed to zero. The CSS is now clean, but no effect on the
right padding inconsistencies I mentioned above.

Interestingly enough, both Opera and Firefox render my bottom nav bar @ 100%
width, consistent - as desired -with my page content. However both Opera and
FF do bizarre things with the right-page margins and paddings which I won't
attempt to solve. I'm happy for now if I can get any consistency for IE on
the padding issue.

It's this very thing that makes me want to run back to the safety and
predictibility of table formatting.

Ralf

(testing site: http://www3.telus.net/peaklong/test/intro.htm )

 

[Ralf]

IAC: Your #header-graphic { width: 100%; } makes it try to be the same

full width as div.content2, but you're starting it 10px to the right
because of the left margin in margin: 5px 10px 9px 10px;. So one obvious
workaround/solution is to remove the width declaration from

#header-graphic.

Hi John,

I removed the "width: 100%" item on the top page graphic; this made my outer
box padding totally disapper; I then added the padding to the outer box
again and that right padding issue is "solved" (in fact, 'perfect' on the
intro and bkg pages), but on the other site pages, the header graphic is now
"short" but about 12 px and the "extra space" or padding on the inner box
still sits there.

tried removing the width declaration from the bottom nav, but it makes it
even shorter (all browsers); at least before Opera & FF rendered it @ 100%.

Ralf

 

[John Hosking]

I removed the "width: 100%" item on the top page graphic; this made my outer
box padding totally disapper; I then added the padding to the outer box
again and that right padding issue is "solved" (in fact, 'perfect' on the
intro and bkg pages), but on the other site pages, the header graphic is now
"short" but about 12 px and the "extra space" or padding on the inner box
still sits there.

Well, I still don't see any difference between the pages.

IAC, have you tried taking away the width: 100%; from .content2?

 

[Ralf]

here's my URL: http://www3.telus.net/peaklong/test/intro.htm

my INTRO & BACKGROUND pages behave fine except for mysterious extra
padding-right in my outer content box; all other site pages [snip]

IAC, have you tried taking away the width: 100%; from .content2?

thanks to John & others for your patience with this: it seems what was
causing a lot of the "padding-chaos" was the width declarations on my
'inner' text boxes, as opposed to controlling width by margin attributes.
When I removed these declarations, all falls into place (even the bottom nav
bar). what a learning curve.

one further minor dilemma; in "cleaning up" my CSS, I removed the "negative
padding" values for the paragraph declaration that had "snugged" the
paragraphs a little closer together, as per my client's wish. How can I now
go about shortening the spacing between paragraphs without resorting to a
negative bottom margin or padding?

thanks all for your help ...

Ralf

 

[John Hosking]

Ralf wrote:
[without attributions AGAIN and with garbled quotes so cut it out]

John Hosking wrote:

When I removed these declarations, all falls into place (even the bottom nav
bar). what a learning curve.

Yes. It's easy to get tangled up in all the fiddly things one can do
with CSS, and lose sight of the bigger picture. I see a lot of pages
(mostly though these NGs) which are way overspecified. Simplify and improve.

one further minor dilemma; in "cleaning up" my CSS, I removed the "negative
padding" values for the paragraph declaration that had "snugged" the
paragraphs a little closer together, as per my client's wish. How can I now
go about shortening the spacing between paragraphs without resorting to a
negative bottom margin or padding?

Well, I don't completely understand. I mean I don't understand why you
think you need negative margins when you haven't even tried zero values
yet. Here are your paragraph styles, with your crazy indents removed:

p.top-para { margin: 10px 0px 7px 0px;
padding: 0px; }

p.dent { text-indent: 2em;
margin: 10px 0px 7px 0px;
padding: 0px; }

Simply reduce the values for top- and bottom-margins from
margin: 10px 0px 7px 0px; to something like
margin: 0px 0px 0px 0px; (or, of course, margin:0.

But having said that, I personally don't think the spacing between
paragraphs should be reduced at all. That's good spacing already, except
that it really ought to be in ems, not px. margin:.8em 0px .5em 0px; ?

And here's something I meant to include in a previous post, but forgot.
I don't see why you added the height: 40px; to the #header-graphic rule.
It used to fit nicely, but with the height specified (too small), the
header doesn't fit in its space. Simplify and improve.

thanks all for your help ...

You're welcome. In future, please try to keep track of attributions and
quoted texts.