css problem in ie with tables

[ktpmm5]

I've got the following code that displays tabs with jquery, then grabs data from a mysql database:

<div id="concessions">
<ul>
<li><a href="#Varsity"><span>Varsity</span></a></li>
<li><a href="#JV"><span>JV</span></a></li>
<li><a href="#Freshman"><span>Freshman</span></a></li>
</ul>

<div id="Varsity" class="anchor">

<table id="varsity" cellpadding="5" cellspacing="5">
..... table stuff displays here...

The table displays fine in both FF and IE. Here is the pertinent css code for the table varsity - I do not have any css definitions for Varsity (capital letter) or concessions (yet)

#varsity, #jv, #freshman {
text-align: center;
font-size: 100%;
border-left: 5px double #bebea9; 
border-top: 5px double #bebea9; 
 border-right: 5px double #909070; 
border-bottom: 5px double #909070
}

In FF everything displays great - in IE, I get 2 double borders around the table - does anyone have any idea of how I can get rid of this second double border or where it's coming from in IE?

[dreamcatcher]

Hi ktpmm5, welcome to WebmasterWorld. :)

What you have is standard IE browser behaviour for padded tables. Just clear the table borders:

#varsity table {
border:0;
}

dc

[ktpmm5]

I must be confused - if i do this, it wipes out all my borders, even in FF - ?

[novakin]

Hello, try this code :

#varsity, #jv, #freshman {
text-align: center;
font-size: 100%;
border-left: 5px double #bebea9;
border-top: 5px double #bebea9;
border-right: 5px double #909070;
border-bottom: 5px double #909070

* border-left: 5px double #bebea9;
* border-top: 5px double #bebea9;
* border-right: 5px double #909070;
* border-bottom: 5px double #909070
}
copy and paste the entire code along with the stars and you can change values to the code with the stars for the desired effect in IE, dont worry, this code will not affect other browsers. What this does is, IE reads the code with the stars while other browsers read the code without the stars, works for me very good !

[ktpmm5]

worked great - thank you! I'll have to remember this for future IE problems (of which there seem to be many)...

[novakin]

Your welcome :D

[alt131]

Hi ktpmm5,
and welcome to webmasterworld ;)

I'll have to remember this for future IE problems (of which there seem to be many)...

I'd suggest not - it is a hack, and invalid code. Better to locate the source of the trouble rather than adding extra code to fix the symptom, code to avoid it, and on the rare occassion ie must be sent different rules, do so via conditional comments.

On the issue itself, I could not reproduce the reported trouble on the css provided. That indicates the cause lies elewhere. Try validating your css and html, then follow the other steps in the CSS Troubleshooting refresher [webmasterworld.com] (pinned to the top of the forum) to isolate the issue. If there are still problems, post back with more information.

[novakin]

Yes i forgot to mention that, thanks !

[novakin]

I really hate this browser thing with CSS, its pain in the a.. :D
i tested my website in all browsers and it looks great and i remove all hacks from the CSS and i still get some small errors like 'expandind box problem' and they are all IE problems specially for IE 6.0! My website looks good in every browser out there including safari, except IE it still looks good but there is misplacement from 1 to 4 pixels on some objects ! MAAAAAN :D Web Designers Nightmare to many browsers :D

[alt131]

Hi novakin,
and welcome to webmasterworld ;)

Great to hear another coder is avoiding hacks !

[novakin]

Thanks !

And im looking forward to post and help here :D
i like this forum very much, i was looking for something like this :D