CSS border not showing in IE

[robsworld]

Hi, I'm just learning CSS but theres something I can't figure out, I've done lots of reading but nothing works.

I have a site that I wanted to make a spreadsheet type look with grid lines of course using all CSS. I found some methods that used the table tags but I don't want any table tags and I know I don't need them. Anyways I finally got some code to work which does exactly what I want but the borders don't show up in IE, firefox you can see it fine. Here's the code I have and a link to my page so you can see it. Thanks for the help.

http://robsworld.comze.com/index.html

CSS Code for tables:

#table {
margin: 0;
padding: 0;
float: left;
width: 100px;
max-width: 100px;
min-height: 25px;
height: 25px;
border: solid #000000 thin;
vertical-align: bottom;
}
#table2 {
margin: 0;
padding: 0;
float: left;
width: 100px;
max-width: 100px;
min-height: 25px;
height: 25px;
border-right: solid #000000 thin;
border-bottom: solid #000000 thin;
border-top: solid #000000 thin;
vertical-align: bottom;
}
#table3 {
margin: 0;
padding: 0;
float: left;
width: 100px;
max-width: 100px;
min-height: 25px;
height: 25px;
border-right: solid #000000 thin;
border-bottom: solid #000000 thin;
border-left: solid #000000 thin;
vertical-align: bottom;
}
#table4 {
margin: 0;
padding: 0;
float: left;
width: 100px;
max-width: 100px;
min-height: 25px;
height: 25px;
border-right: solid #000000 thin;
border-bottom: solid #000000 thin;
vertical-align: bottom;
}


HTML code for tables

<div id="table">gfds </div>
<div id="table2"></div>
<div id="table2"></div>
<div id="table2"></div>
<div id="table2"></div>
<div id="table2"></div>
<div id="table2"></div>


<div id="table3">gfds </div>
<div id="table4"></div>
<div id="table4"></div>
<div id="table4"></div>

[robsworld]

Now I'm confused, it works fine my last reload but it didn't?? Anyways now there's another problem, why is the border different thicknesses in IE and firefox? I like the thinner line in firefox, anyway to have that look in IE?

Thanks!

[robsworld]

Well I'm an idiot, I wish I could delete this thread but maybe it will help someone because it all works great. I changed "thin" to "1px" and IE showed the thinner line. :)

[anna55]

One thing left, you have to use 'class' instead of 'id', if you want to use it more than one time. 'id' is only allowed once.

[robsworld]

thanks but that confuses me, its working fine with "id". I still use the "div" right?

[anna55]

thanks but that confuses me, its working fine with "id". I still use the "div" right?

<div id="table">gfds </div>
This is ok, only once in use, but:


<div id="table2"></div>


'table2' you use 6 times. So you write instead
<div class="table2"></div>


For the stylesheet you write '.table2' instead of '#table2'.

[robsworld]

Hi, I made the changes, are you able to explain why the . over the # and why class instead of id? I realize this may be the right way but if the other way worked and validated why can't it be used? Just trying to get a better understanding. Thanks for your help!

[anna55]

I realize this may be the right way but if the other way worked and validated why can't it be used?

NOPE You've got an validation service of your own? W3C Validator (http://validator.w3.org/) will always note it as wrong.

'id' is only once to be used - 'class' you can mention as often as you need. Here is the W3C document on the element identifiers:
http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2

When something works in one browser that doesn't mean, that other browsern will act the some way. Driving on the wrong side of a street may work but can cause a bad accident. So rules will help you to be on the safe side.