Resolved border-top, border-bottom in IE won't work

Blackeye · 09-13-2011, 03:01 PM

Hej!

I've got a little problem with some border styling. I want a border-bottom and a border-top on a table row. In IE 6, IE 7 and IE 8 there is no border. It works in all other browsers.

Here is my css:

Code:

.switchcontentZi {
	border-top: 1px solid black !important;
        border-bottom: 1px solid black !important;
}

And here is my HTML-Construct:

Code:

<table class="medium" width="720">
     <tr id="room1" class="switchcontentZi" style="display: block;">
     <tr id="room2" class="switchcontentZi" style="display: block;">
     <tr id="room3" class="switchcontentZi" style="display: block;">
     <tr id="room4" class="switchcontentZi" style="display: block;">
     <tr id="room5" class="switchcontentZi" style="display: block;">
</table>

I've already searched in this forum and via google and found some hints that the "display: block" could be the problem. But I couldn't solve this problem.

Can someone help me and fix this problem?

Blackeye

Rowsdower! · 09-13-2011, 03:04 PM

It generally works best to put the border onto the td and/or th elements in the row. You can achieve that with your existing CSS with only a minor tweak:

Code:

.switchcontentZi td, .switchcontentZi th{
	border-top: 1px solid black !important;
	border-bottom: 1px solid black !important;
}

With that said, you aren't showing us any td or th elements in those rows... they are there, aren't they?

VIPStephan · 09-13-2011, 03:09 PM

Yeah, don’t style table rows, style the cells in these rows. Table rows have proven inconsistent in different browsers when it comes to CSS.

Blackeye · 09-14-2011, 07:22 AM

You are my heroes! Thank you very much for this hint!

Now it works perfect in all browsers!