Border Problem

[ginger213]

Hi,

I'd be really grateful if someone could take a look at this page and tell me what's causing the problem with the red borders above and below the header. I applied the borders to the (2 side by side) td's. I've set the border-collapse to 0 for tables. In Firefox 3.09 the blue border intersects the red top border, but not the bottom border. In IE6, it intersects both top and bottom with a sort of ragged edge. (It's hard to explain. You have to see it to know what I'm talking about.)

Right now, the border css is applied inline to the cells. I'll move it to the external style sheet after I resolve this issue, if I can resolve it.

http://webpages.charter.net/testspace213/border-problem.html

I know I should be using css for layout rather than tables, but this is a site I'm doing for free for a relative, and I haven't completely made that transition yet (being able to position everything with css).

Thanks for any insight you can provide.

 

[g0ste]

I am pretty sure that the border properties in CSS are very buggy.

In order to get the effect you want, a cheap workaround is to set the element with the image "hdr-pic.gif" to a width of 508px (not the image itself) and set the background color to the border color - don't forget to remove the border-left: ...etc... from the adjacent cell (that contains the navigation element).

from this:

<tr><td valign="top" style="border-top: 6px double #C00000; border-bottom: 6px double #C00000"><img src="images/hdr-pic.gif" alt="Photo Here" width="500" height="200"></td>

to this:

<tr><td valign="top" style="border-top: 6px double #C00000; border-bottom: 6px double #C00000; width: 508px; background-color:#5A78A5;"><img src="images/hdr-pic.gif" alt="Photo Here" width="500" height="200"></td>

A little further reading on the border properties:

http://reference.sitepoint.com/css/border-left

________________________________
Top 10 reasons to procrastinate:
1)

 

[ChrisHunt]

I am pretty sure that the border properties in CSS are very buggy.

On the contrary, border properties are pretty well supported across browsers, with even IE6 getting it right most of the time.

It's just that "right" doesn't necessarily equal "what you want". You're asking it to draw a box with a double-red line border at top & bottom, and a solid blue border down the side. That's what it does, but what should happen at the corners?
[ol]
[li]The double-red border overlies the blue one[/li]
[li]The blue border overlies the double-red one[/li]
[li]A diagonal junction is made between the two borders, giving equal weight to each[/li]
[/ol]
You (presumably) would like either option 1. or 2., what IE does is option 3. I think that's the least-bad option for most cases, although it doesn't suit yours.

If you want the double-red border to take precedence, that's not too difficult. g0ste has suggested one way of doing it. I'd just wrap a <div> inside the <td> and give it the vertical borders instead.

Getting the blue border on top is a bit more tricky. The tacky way of doing it would be to have an empty, blue <td> in there fixed to the width you want to act as a border, but hopefully someone else can think of a more elegant solution...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ginger213]

Thank you both. I think I have it lined up now. I had a terrible time getting both the top and bottom lined up. (When I assigned a background color to the left top td, the color showed through the double border, so I ended up applying the top vertical border to the image that's going to the left of the navigation. Then I had to put 2 div's inside the main content td, but it seems to be lined up now in both Firefox and IE.

I guess I never really used the double border much before, so I never ran into this.

Thanks again!