3 replies [Last post]
css_seth
Offline
Regular
minneapolis, mn
Last seen: 15 years 49 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

http://www.esultants.com/d/dsm/

first off, any general comments about coding conventions, better ways i could do things are welcome and appreciated.

my main confusion rests with why FB(MozillaFirebird) butchers my sidebar links by adding weird padding to the anchors and not rendering borders properly, while IE does a beautiful job.

also, with my sidebar DIV, i had text-align: center set, but that didn't work unless the images were enclosed in P tags. but i know that text-align: applies to DIVs and such too. so what gives?

also, the footer, secondary nav starts on a new line in IE, but wraps around the dive with the three large circle buttons above it in FB. the Div above it is set to display: block, so this behavior baffles me.

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 16 years 7 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

i am baffled once more: IE=beauty, FB=hackjob???

Actually text-align does not apply directly to divs or any
block element, but only to inline text and images, etc.
However, IE5.x/win does wrongly apply it to all elements.

I won't say that IE's way of handling line boxes is necessarily
worse than Moz and Opera, but it is different. To get all the
browsers to agree here the links should not be wrapped in p's.

Next the links are given "display: block;" and a width the same as
the images (the images should all hopefully be the same width). They
also can be margined apart vertically and have side "auto" margins.

The images get either "vertical-align: bottom;" or "display: block;"
to prevent the image from sitting on the link's baseline, just above
the bottom.

The "text-align: center;" on #sidebar will make IE5.x center the
links, but that browser will need a box model hacked extra 2px
width on #container due to its 1px side borders.

The footer does not wrap under in non-IE because IE wrongly
"auto-encloses" floats and standard browsers do not. You need
to "clear" the footer nav so it stays below the floated image.

http//www.positioniseverything.net/

css_seth
Offline
Regular
minneapolis, mn
Last seen: 15 years 49 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

i am baffled once more: IE=beauty, FB=hackjob???

can you explain the clear property to me? i'm aware of the W3 CSS spec and how to find all the properties and definitions, but i often require a more practical example for it to click.

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 16 years 7 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

i am baffled once more: IE=beauty, FB=hackjob???

Say you have a div container box. Inside is a float, and
a following paragraph. You want the p to run down the side
of the float (actually the text runs down; the p is overlapped
bu the float) so the p is NOT cleared. Then, to make the
container div appear to enclose the float/p pair and not
just the p, another "cleared element is placed last in the
container, like so:

<div class="container">
<div style="float: left;">float text</div>
<p>text</p>
<div style="clear: both;></div>
</div>

A break tag may also be cleared this way. Sometimes a
cleared div triggers a bug in some browser, but then switching
to a cleared break usually corrects the problem, altho it might
cause an extra line of empty space.

http//www.positioniseverything.net/