Compatability problem, though not sure how it arises because I'm not using anything proprietary as far as I can tell...
I use DIVs with specified dimensions, border and shading for text navigation links. So far so good. I use SPANs similarly as a simple way of laying out a small table, by just repeating a few lines of content with style info in a cell class. It works fine with the DIVs, but in Moz when using the SPANs the size of the cell collapses to fit around the text content. Doesn't happen in either IE6, Opera7.
This is the class definition:
.tablecell {
position: relative;
height: 20px;
width: 100px;
border: 1px solid #ffffff;
background-color: #eeeeee;
font-size: 10pt;
text-align: right;
padding-right: 5px;
vertical-align: middle;
}
Which is used so:
<span class="tablecell">€</span>
<span class="tablecell">low season</span>
<span class="tablecell">high season</span><br>
<span class="tablecell">room I</span>
<span class="tablecell">100</span>
<span class="tablecell">115</span><br>
You can see it in action at:
<!-- m --><a class="postlink" href="http://www.escondrijo.com/home.htm">http://www.escondrijo.com/home.htm</a><!-- m -->
(Click through to bookings section for prices table.)
As always, any help gratefully guzzled up...That's almost all tabular data. Just use tables to present it and be done with it.errmm, thanks. Any more constructive comments?
It should work with SPANs and I've used it because it is far simpler and uses less code than tables.
Is there something I need to tweak to get Mozilla to display correctly...?
I'm curious to know if the code is valid and the fault lies with Mozilla.You are specifying dimentions for inline elements which you can't (shoun't be able to) do. IE will allow you to do this if you are in quirks mode.
I assume that you either don't have a DOCTYPE or you are using an XHTML DOCTYPE and have used <?xml version="1.0"?> which throws IE back into quirks mode.
You should be using tables for tabular data though as ray326 said, it's semantically correct to use tables in this case.Originally posted by terraling
errmm, thanks. Any more constructive comments?
It should work with SPANs and I've used it because it is far simpler and uses less code than tables.
Is there something I need to tweak to get Mozilla to display correctly...?
I'm curious to know if the code is valid and the fault lies with Mozilla.
How can I be any more constructive than to recommend you use the right markup for your content? In this case spans are not only wrong for the content, they are *not* simpler than markup that fits the content.
You can generally bet that the Gecko rendering is the correct one and the fault lies with IE. That's why you should work first with Gecko then check with IE.oops, stand corrected. Although I can't locate it now I've seen an example of this from a CSS tips website somewhere, and I hadn't expected a CSS forum to be telling me to use tables...
Thanks for the feedbackOriginally posted by terraling
oops, stand corrected. Although I can't locate it now I've seen an example of this from a CSS tips website somewhereAn example of what?
Always use the correct tag for the content it contains.
I use DIVs with specified dimensions, border and shading for text navigation links. So far so good. I use SPANs similarly as a simple way of laying out a small table, by just repeating a few lines of content with style info in a cell class. It works fine with the DIVs, but in Moz when using the SPANs the size of the cell collapses to fit around the text content. Doesn't happen in either IE6, Opera7.
This is the class definition:
.tablecell {
position: relative;
height: 20px;
width: 100px;
border: 1px solid #ffffff;
background-color: #eeeeee;
font-size: 10pt;
text-align: right;
padding-right: 5px;
vertical-align: middle;
}
Which is used so:
<span class="tablecell">€</span>
<span class="tablecell">low season</span>
<span class="tablecell">high season</span><br>
<span class="tablecell">room I</span>
<span class="tablecell">100</span>
<span class="tablecell">115</span><br>
You can see it in action at:
<!-- m --><a class="postlink" href="http://www.escondrijo.com/home.htm">http://www.escondrijo.com/home.htm</a><!-- m -->
(Click through to bookings section for prices table.)
As always, any help gratefully guzzled up...That's almost all tabular data. Just use tables to present it and be done with it.errmm, thanks. Any more constructive comments?
It should work with SPANs and I've used it because it is far simpler and uses less code than tables.
Is there something I need to tweak to get Mozilla to display correctly...?
I'm curious to know if the code is valid and the fault lies with Mozilla.You are specifying dimentions for inline elements which you can't (shoun't be able to) do. IE will allow you to do this if you are in quirks mode.
I assume that you either don't have a DOCTYPE or you are using an XHTML DOCTYPE and have used <?xml version="1.0"?> which throws IE back into quirks mode.
You should be using tables for tabular data though as ray326 said, it's semantically correct to use tables in this case.Originally posted by terraling
errmm, thanks. Any more constructive comments?
It should work with SPANs and I've used it because it is far simpler and uses less code than tables.
Is there something I need to tweak to get Mozilla to display correctly...?
I'm curious to know if the code is valid and the fault lies with Mozilla.
How can I be any more constructive than to recommend you use the right markup for your content? In this case spans are not only wrong for the content, they are *not* simpler than markup that fits the content.
You can generally bet that the Gecko rendering is the correct one and the fault lies with IE. That's why you should work first with Gecko then check with IE.oops, stand corrected. Although I can't locate it now I've seen an example of this from a CSS tips website somewhere, and I hadn't expected a CSS forum to be telling me to use tables...
Thanks for the feedbackOriginally posted by terraling
oops, stand corrected. Although I can't locate it now I've seen an example of this from a CSS tips website somewhereAn example of what?
Always use the correct tag for the content it contains.