ansaurus

Question

CSS issue: Top border not displaying in IE

Answer 1

+2 A:

It looks like you're using curved borders. IE 6 and 7 don't support curved borders. I think IE 8 does.

Create an IE-specific stylesheet and change the way you create the borders here.

<!--[if IE]><link rel="stylesheet" type="text/css" href="/public/stylesheets/ie.css" /><![endif]-->

You can either display regular borders or remove the borders and create a background image to make it look like there are curved borders.

marcgg 2009-08-17 20:40:11

No curved borders in IE 8, I'm afraid.

Nick Presta 2009-08-17 20:47:33

Yes, I am using curved borders but should IE still display the top border regardless?

TimJK 2009-08-17 20:48:48

It's displaying the left and right border just fine but not the top border.

TimJK 2009-08-17 20:49:36

Since it's not supported there's a high chance of everything breaking altogether. Try removing it a test if it's working

marcgg 2009-08-17 20:50:11

If you notice in the CSS for 'ul.tabbernav li a', I even explicitly tell IE to display the border-top and it's still not

TimJK 2009-08-17 20:51:41

@marcgg, I tested removing all 'radius' attributes and IE 6/7 still didn't display a border-top. Only left/right borders. Very strange

TimJK 2009-08-17 20:55:48

I see this: border-style: solid solid none, try changing it to border-style:solid;

marcgg 2009-08-17 21:04:37

@marcgg, where do you see border-style: solid solid none? what code line since when I do a search for that, I don't find it in my index.html

TimJK 2009-08-17 21:07:51

@marcgg (thanks in advance for your help so far ... hoping you can help pinpoint this problem) :)

TimJK 2009-08-17 21:10:31

I see that on "ul.tabbernav li a" using firebug

marcgg 2009-08-17 21:10:43

I added "border-style:solid" to "ul.tabbernav li a" but in IE 6, that doesn't fix it. You can see it live at the link in the original post. Again, thanks for helping so far. We are getting close

TimJK 2009-08-17 21:14:21

It's working fine in IE7 now. I only have IE 7 here so I'm not sure how I can help you more.Try looking up if you have IE6 specific styles ( starting with _ )

marcgg 2009-08-17 21:16:22

oh nevermind it's not working in IE7 :\ I was looking it up in safari for some reason. I don't really have any more ideas here. triple check any IE specific things and border related styles

marcgg 2009-08-17 21:22:00

Nope, no ie hacks like using the underscore (_). Thanks marcgg for you're help. Hopefully someone else can figure it out. I'm at a loss

TimJK 2009-08-17 21:27:24

damn. well good luck with that, sorry I wasn't more helpful :)

marcgg 2009-08-17 21:54:24

Answer 2

A:

I haven't got IE with which I can test at the moment; but is there a chance of the borders being outside of the height of the containing div (.tabbernav) and hidden with an overflow rule elsewhere?

On the off chance, you might want to try addding overflow: visible to the .tabbernave class. That or increasing it's height, and reducing the height of the .tabbernave lis.

David Thomas 2009-08-17 21:50:01

Answer 3

A:

Eather add margin-top:1px; to ul.tabbernav

or

padding-top:1px; to div.listingTabs

I know this is an IE error but Firebug in FF can still help. If you inspect your ul or the div you will see the ul is outside of the display area of the parent div.

NerdyNick 2009-08-17 21:51:32

Answer 4

A:

Try setting the line-height for those. I had an extremely similar issue in ie7 once, except it did not show both the top and bottom borders. They were actually being cutoff.

line-height: 22px;

Not sure about the exact height that would work for you here, but try it out.

mrinject 2009-08-17 21:53:41

ansaurus

tags:

views:

answers:

CSS issue: Top border not displaying in IE

related questions