...

View Full Version : 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:


.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;">
</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:


.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

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! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum