By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,987 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a
"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

P: n/a
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

P: n/a
"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

This discussion thread is closed

Replies have been disabled for this discussion.