View Full Version : Resolved border-top, border-bottom in IE won't work

09-13-2011, 04:01 PM

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:

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

And here is my HTML-Construct:

<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;">

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?


09-13-2011, 04: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:

.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? :D

09-13-2011, 04: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.

09-14-2011, 08:22 AM
You are my heroes! Thank you very much for this hint!

Now it works perfect in all browsers! :thumbsup: