Vertical Alignment and (#2) Horizontal Rule Problems...

Frank Wheeler

Why am I unable to attain proper vertical alignment between a DIV and a
TABLE here:

http://www.whbvillage.com/agenda-archives/agendex.html

The DIV is coded:

<DIV style="float: left;
background: transparent;
color: #000099;
line-height: 200%;
width: 40%;
text-align: left;
border: none;
margin: 10px;
padding: 10px;">

....while the TABLE is styled:

<TABLE style="background: transparent;
color: #0000ff;
width: 50%;
border: none;
margin: 10px;
padding: 10px;
line-height: 200%;">

The exterior style sheet is at:

http://www.whbvillage.com/css/main.css

Additionally, in MSIE 6 one will note two different <HR> thicknesses on
that page, yet both are styled identically... the top one as a DIV
border-bottom and the lower one as an <HR>.

{ border: solid 1px #0000ff; }

(Of course, in Netscape 7 the top one doesn't display at all while the
lower one is hollow.)

All comments gratefully accepted.

Thank you.

----
- Frank Wheeler... trying to immerse himself in CSS

Jul 20 '05 #1

Karl Smith

"Frank Wheeler" <fr**********@optonline.net> wrote in message news:<%g********************@news4.srv.hcvlny.cv.n et>...

Why am I unable to attain proper vertical alignment between a DIV and a
TABLE here:

http://www.whbvillage.com/agenda-archives/agendex.html

The DIV is coded:

<DIV style="float: left; <-- Woof!
background: transparent;
color: #000099;
line-height: 200%;
width: 40%;
text-align: left;
border: none;
margin: 10px; <-- Woof!
padding: 10px;">

...while the TABLE is styled:

<TABLE style="background: transparent;
color: #0000ff;
width: 50%;
border: none;
margin: 10px; <-- Woof!
padding: 10px;
line-height: 200%;">

Margins on floats don't collapse with the margin above them.

--
Karl Smith.

Jul 20 '05 #2

Frank Wheeler

Karl Smith <go************@kjsmith.com> advises...

Why am I unable to attain proper vertical alignment
between a DIV and a TABLE here: http://www.whbvillage.com/agenda-archives/agendex.html The DIV is coded: <DIV style="float: left; <-- Woof!
background: transparent;
color: #000099;
line-height: 200%;
width: 40%;
text-align: left;
border: none;
margin: 10px; <-- Woof!
padding: 10px;"> ...while the TABLE is styled: <TABLE style="background: transparent;
color: #0000ff;
width: 50%;
border: none;
margin: 10px; <-- Woof!
padding: 10px;
line-height: 200%;">

Margins on floats don't collapse with the margin above them.

Thank you, Karl... but I've removed both margin styles, and while it's
better, it's still not right.

Unanswered is the Border issue.

--
- Frank Wheeler...

Jul 20 '05 #3

Karl Smith

"Frank Wheeler" <fr**********@optonline.net> wrote in message news:<RE********************@news4.srv.hcvlny.cv.n et>...

Karl Smith <go************@kjsmith.com> advises...

Why am I unable to attain proper vertical alignment
between a DIV and a TABLE here: http://www.whbvillage.com/agenda-archives/agendex.html The DIV is coded: <DIV style="float: left; <-- Woof!
background: transparent;
color: #000099;
line-height: 200%;
width: 40%;
text-align: left;
border: none;
margin: 10px; <-- Woof!
padding: 10px;"> ...while the TABLE is styled: <TABLE style="background: transparent;
color: #0000ff;
width: 50%;
border: none;
margin: 10px; <-- Woof!
padding: 10px;
line-height: 200%;">

Margins on floats don't collapse with the margin above them.

Thank you, Karl... but I've removed both margin styles, and while it's
better, it's still not right.

I was too curt, I see. Margins on floats don't collapse, but margins
on normal elements do. So by specifying the 10px margin on the floated
element you were forcing it 10px further down the page than you wanted
it. Just removing that margin on the float would have made them line
up.

If they're still just 2 or 3 pixels out of alignment, it might be
default cell spacing on the table? Try: table {border-collapse:
collapse;}. It looks ok now though.

--
Karl Smith.

Jul 20 '05 #4