Table element's CSS properties that IE doesn't understand ??

You see, in the past few months I have beeing trying to "convert" as much of my HTML code as possible into the CSS ...


So for example in case of tables, I started to use a table class: "<table class="multi">" instead of the usual "<table cellspacing="2" cellpadding="4">" etc. (for instance), set in the external .css file with the following code: "table.multi { border-collapse: separate; border-spacing: 16px; }" ), however, this obviously messed-up the layout if viewing the site in IE, i.e. there is no spacing between cells etc. etc.


Therefore I am curious, is this because IE doesn't fully support CSS specification/standard (not completely sure which term is more appropriate), and AFAIK doesn't support CSS2 at all ??


P.S. -- I got these two types of CSS-properties and values in the CSS tutorial on W3Schools site, and that's pretty much all, i.e. there aren't many other properties for a table selector


tayiper

 

Try using <table cellspacing="0"> on the table itself. Otherwise you can end up with some strange looking results in IE.

 

If you wanna learn CSS properly you should not be using tables for layout really anyways as divs and CSS is the correct way to do layouts.

But as for your table issue year you have to have certain values in the table tag cell padding and cell spacing being two of them.

But be brave and learn how to do away with tables, tables are ment for displaying tabular data only not for full layouts.

 

Yes, but I thought that these two pieces od code (i.e. "border-collapse: separate" and "border-spacing: 16px") are somehow a CSS equivalent to HTML's "cellspacing" and "cellpadding" ...


P.S. -- And on the W3Schools site in that CSS tutorial that I read and where I got this code in the first place (properties/values), there really weren't many other possible properties for a table selector except these two particular types.


tayiper

 

Try what I said.

Tables are fine if you're using them to represent data, especially as CSS tables aren't supported well yet.

 

MSIE does not support the border-spacing property. For IE's sake, you must use the html attribute cellspacing. If a cellspacing value is set, it will override the css border-collapse: collapse; in IE.

IE6 has terrible support for css2. IE7 will be only marginally better.

cheers,

gary

 

if you need spacing for a specific table try

<table style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;">

this is just a sample that u can use for a td also

 

Ludwig, it's always best to seperate style from content as much as is possible, so for that unique table it would become:

<table id="mytable">

In style/CSS file

mytable {
padding: 10px;
}

 

AdamSee you are right,

I just wanted to make the example easy to understand

 

Well thanks both. Ehm, I really didn't know that I could use "padding" with CSS in such manner, i.e. as mentioned, in that CSS tutorial on the W3Schools site, there really weren't many other possible properties/values for a table selector except those two types that I posted in the original post.


P.S. -- And one more question. I am interested, is it possible to use a defined class and at the same time some additional attributes "in-line" on the same element ?? For instance consider this example below. I have the code below in my external .css file, and so when I "call" this class in a document, could I append some additional attributes just for this single element ??

This code is in my external .css file:

div.align {
    font-family: verdana, helvetica, sans-serif;
    text-align: center;
}

Code (markup):

and I would "call" it somehow like this:

<div class="align" style="width:760px;">the content of this particular div element</div>

Code (markup):

or maybe even like this (with HTML, not CSS):

<div class="align" font size="+2" color="#FF0000">the content of this particular div element</div>

Code (markup):

tayiper

 

Again if you wanted to use something unique, I'd keep the style in the CSS file. You could do it like that, but what would be better would be in the example below.

<div class="align" style="width:760px;">the content of this particular div element</div>

Becomes

<div class="align" id="sevensixty">the content of this particular div element</div>

#sevensixty { width: 768px; }

So instead you're using the ID to interact with the DIV. Remember IDs are for unique occurances only, so you should only use one ID with that name in the page, whereas class you can use tons of.

 

Hey tayiper,

I think you should do what AdamSee proposes... its easier

 

... it's already done, thanks guys; here's a link to my "style.css" file.


tayiper