padding/margin in (non)floating sections

[Lukasz Grabun]

There's a page

http://www.dwarfscorner.com

It looks as nice as I could design it; I like it, I think. There's
just one thing I can't get along with: the vertical allignment of h2
in grey and white sections. The former is noticably lower than the
latter! And I can't figure out why it is this way. The grey section is
floated - does it influence the standard padding/margin in any way?
Corresponding CSS style file can be found here

http://www.dwarfscorner.com/css/style.css

Grey section is labeled #sideblog, the white one - .blog. Headers look
OK in FireFox whilst they're altered in IE and old Mozillas.

Anyone?

--
Lukasz Grabun
(reply-to field is fake, use grabek (at) acn dot waw dot pl to reply)

[Lee K. Seitz]

In article <sl************ ***********@pur gatory.abyss>,
Lukasz Grabun <gr****@purgato ry.abyss> wrote:

There's a page

http://www.dwarfscorner.com

It looks as nice as I could design it; I like it, I think. There's
just one thing I can't get along with: the vertical allignment of h2
in grey and white sections. The former is noticably lower than the
latter! And I can't figure out why it is this way. The grey section is
floated - does it influence the standard padding/margin in any way?
Correspondin g CSS style file can be found here

http://www.dwarfscorner.com/css/style.css

I believe the difference is because of what's between the beginning of
each DIV and the first H2:

<div id="sideblog">
<h2 class="title">
Corner's Specific
</h2>

vs.

<div class="blogbody ">

<a name="000022"></a>
<h2 class="title">B rand new round</h2>

While it's true multiple lines or spaces reduce to one in HTML,
there's a difference between having one or more blank lines and not
having any.

(Aside: And is it valid to add a named anchor without any content? I
forget and am too lazy/busy right now to look it up.)

Some other comments on your CSS. Why declare all your H2s in the
sideblog as class "title"? If they're all going to look the same, do
without the class and change the CSS declaration from

.title

to

#sideblog h2

If you ever *do* have multiple H2 styles, make the lesser used one the
exception and declare a class for it. Although if you ever do do
that, make sure you shouldn't really use H3 instead.

Similarly, why have all those "side" divs if everything's an anchor?
Change that as follows:

#sideblog a
{
font-family:georgia, times, "times new roman", serif;
font-size:small;
font-weight:normal;
line-height: 140%;
padding: 10px 0 20px 0;
color: #c60;
text-decoration: underline;
}

#sideblog A:link { color: #c60; text-decoration: underline; }
[etc.]

I'm sure there's more examples of things that can be simplified in
your style sheet, but those were the two that struck me on a quick
glance. Your HTML will look much cleaner without all those extra
DIVs.

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
WALLY: I believe God created the Earth because he hates people.
-- Scott Adams, Dilbert, 6 Mar 1999

[Lukasz Grabun]

On Wed, 03 Mar 2004 21:34:43 -0000, lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net wrote:

While it's true multiple lines or spaces reduce to one in HTML,
there's a difference between having one or more blank lines and not
having any.

I cleaned up the code. It does not help, however :-(

I really am fed up with it. Can someone with a fresh look take a
glimpse?

[snip tips]

Thank you. Those are really useful.

--
Lukasz Grabun
(reply-to field is fake, use grabek (at) acn dot waw dot pl to reply)