DIV Hieghts not lining up Options

[dave1969]

Please see attached. I have a table with 1 Table row having 3 Table data cells. in each TD there is a DIV Each DIV has a height in CSS set to 393 but as you can see the heights do not line up correctly at the bottom. the reason this is important is in the CSS we also have a border and would ilke those borders to line up with each other making a smooth appearance.

Speaking of the border it also appears that there is a solid and a dashed border. but i only put in the CSS "solid" not sure what happened.. the center TD cell that has a white background has no left or right border. this was deliberate but there is a tiny space where the border would have been.. We want a solid border 2px wide around everything except the outer sides. the problem was that when the borders met each border was 2 px wide therefore creating a border on the right and left of the white background that was 4 px wide... I tried setting the borders in the TR but could not get it to work. Can you help with both these issues that are in a round about way connected? The website is
http://www.mcrmysoldiers.com/Temp/indextest.html

Thank you so much!

[Frederiek]

Start by fixing the markup errors found by the validator.

And you have one CSS error: height: 262; (for #main2Buttons in styles.css) needs a unit.

[dave1969]

ok... w3 IS VALID! and errors fixed but the borders still dont line up.. any suggestions?

[Darin McGrew]

The first td element uses height="447" not height="393"

[pandy]

What about using the border on the TDs instead of the DIVs, as with the background color earlier? That way they cannot but line up and you don't need to use a height. With CSS tables don't need to have double borders and you can specify all borders individually (each side of each cell).

[dave1969]

Darin,

Here is something strange...... I delete that height setting.... I highlight it and then hit the back space button... then I may check it to see if that solved the problem in Dreamweaver but to my surprise the height setting comes back.... very weird.. I cant seem to get rid of it.... no I dont have a virus....

This post has been edited by dave1969: Sep 27 2011, 03:51 AM

[dave1969]

Pandy, I tried that but If I use the border setting in TD as opposed to DIV I get a double border in the middle where the two TD's meet. This happens because each TD has a border of 2... so where they meet, each has a border of 2.... making a border of 4 when combined..

[pandy]

Read what I said again.

And then read this.
http://www.w3.org/TR/CSS2/tables.html

Going with a fixed height for fluid content like text is a dead end. What will you do? Change those heights on every page depending on how much text they have? What if someone uses very large text size in their browser, making the text require more space?

[dave1969]

sorry I understand the fixed height issue but I am completely lost on setting up the table borders..:-(

This post has been edited by dave1969: Sep 27 2011, 03:58 PM

[dave1969]

Sorry... I am very new to CSS

[dave1969]

I think I figured it out...thanks to you :-)

Thanks!

check out the web page now :-)

it is not exactly what I wanted but good enough

This post has been edited by dave1969: Sep 27 2011, 04:27 PM

[pandy]

OK. What do you want different?

Did you add those nested tables now, for the borders? Because you don't need them for that.