If you view this code in Internet Explorer, it looks perfect with a neat 'n clean Table.
If you view it in Firefox, it looks horrible. What is the CSS missing?
<style type="text/css">
/* over-ride all defaults */
span,table,caption,tr,th,td{margin:none; padding:none; font-weight: none; border: none; text-decoration: none;}
table{display: inline}
caption{background-color: darkblue; color: white; font-weight: bold; font-size: 100%; display: inline;}
tr, td, th {background-color: lightblue; color: darkblue; font-size: 90%; display: inline;}
</style>
<span style="border: 1px solid darkblue;">
<table cellspacing=0 cellpadding=0>
<caption>Televisions</caption>
<tr><th width=190></th></tr>
<tr><th width=190>TV Repairs</th></tr>
<tr><th width=190><br></th></tr>
<tr><th width=190>TV Rentals</th></tr>
<tr><th width=190><br></th></tr>
<tr><th>TV Sales</th></tr>
</table>
</span>
I tried everything from display:inline to clear:both ...
I'm stumped
Edit: resolvedTry deleting the table{display: inline} entry. A table should not be an inline element, it is a table element.Thanks for the fast reply felgall.
I did that but no improvement. What else is wrong with the CSS?margin:none; padding:none;
should that be
margin:0; padding:0;
maybe also the other display:inline references for the table contentThanks for the help felgall! You pointed me in the right direction.
padding: none; wasn't the same as padding: 0px 0px 0px 0px; nor margin.
That is news to me.
However, table{display: block;} wasn't the major change needed, but I did it anyways.
The major issue was I had to add a width defination.
Here's my code that works in both FF and IE:
<style type="text/css">
/* over-ride all defaults */
span,table,caption,tr,th,td{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-weight: none; border: none; text-decoration: none;}
caption{background-color: darkblue; color: white; font-weight: bold; font-size: 100%; display: block;}
tr, td, th {background-color: lightblue; color: darkblue; font-size: 90%; display: block;}
table{display: block}
span{display: block}
</style>
<span style="border: 1px solid darkblue; width:190px">
<table cellspacing=0 cellpadding=0 width=190>
<caption>Televisions</caption>
<tr><th width=190></th></tr>
<tr><th width=190>TV Repairs</th></tr>
<tr><th width=190><br></th></tr>
<tr><th width=190>TV Rentals</th></tr>
<tr><th width=190><br></th></tr>
<tr><th>TV Sales</th></tr>
</table>
</span>span{display: block}Now this is ridiculous. The REASON for a span is to be inline. If you need a generic block element that's called a div.Hmm... so the SPAN tag is an inline element, and the DIV tag is a block element.
That's some new information to me ray326, thank you for that!
Does Netscape support both -- the DIV tag as well as the SPAN tag?
I know that early Netscape didn't support the SPAN tag nor DIV tag but rather the LAYER tag.
I haven't used any recent Netscape browsers...
The only browsers I got are Firefox and Internet Explorer.Netscape has used the Gecko HTML engine since 6.0 and it's about as compliant as the ambiguities in the spec allow. You can now forget <layer>, <center>, <font> and a whole host of dead and proprietary tags.
Re span and div. The whole purpose of span and div are to give you semantically neutral inline and block tags through which you can do presentational things. You should always first try to apply styles to semantically meaningful tags and then use span and div when nothing else will do.Yay! I can forget about the LAYER tag for compability with later Netscape Versions!
That clears things up for me perfectly, thanks again ray326, you sure seem quite the expert with compatibility.you sure seem quite the expert with compatibilityNo no no. I learn things daily from the real experts that frequent this forum.Now this is ridiculous. The REASON for a span is to be inline. If you need a generic block element that's called a div.
Ray, I thought you might appreciate this. Read how Dave Shea (of CSS Zen Garden) builds these Date Boxes on the Mezzoblue site:
<!-- m --><a class="postlink" href="http://www.mezzoblue.com/archives/2005/06/10/dating_reque/">http://www.mezzoblue.com/archives/2005/ ... ing_reque/</a><!-- m -->
Get him!!Hehe, agreed!
<span class="calPage">
Jun
<span class="day">8</span>
</span>
.calPage {
display: block;
...
}
.calPage .day {
display: block;
...
}
Get him! lol
That's interesting. One of these days if I'm extremely bored I may fiddle with those by making them divs and removing the display:block to see what the difference is. Note comments 10 and 14. I don't particularly agree with that guy's reasoning since the two tags have no semantic meaning (by design) but it's a reasonable explaination.you can tidy up the css by changing
margin: 0px 0px 0px 0px;
to
margin: 0;
do the same with padding. these are not any major probelms by themselves but if you do this in enough places you will bog down the browser with needless info. one of the greatest parts of css is the short-hand. use it to your advantage. plus, it's a lot less typingThat's interesting. One of these days if I'm extremely bored I may fiddle with those by making them divs and removing the display:block to see what the difference is. Note comments 10 and 14. I don't particularly agree with that guy's reasoning since the two tags have no semantic meaning (by design) but it's a reasonable explaination.
just wondering if it was my info you are not in agreance with. if so, why not? i am under the impression that these little shorthand definitions are what really exercises css's capability to save bandwidth.Among everything else that has been said here...
* none is not a font-weight value
* darkblue is not a color value
* lightblue is not a color value
You could have found and fixed so many errors on your own had you simply tried to validate your CSS.
Your HTML is a bit weird also. Why do you have whole table rows with nothing but a line break???
Here's a page I threw together. Appears to do the same as what you had, but is much simplier and renders identically in both browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
table.televisions { background-color: rgb(173,216,230); border-collapse: collapse; width: 190px }
table.televisions th { background-color: rgb(0,0,139); color: white }
table.televisions td { color: rgb(0,0,139); font-size: 90%; font-weight: bold; text-align: center }
table.televisions td.spacer-above { padding-top: 1em }
</style>
</head>
<body>
<table class="televisions">
<tr><th>Televisions</th></tr>
<tr><td>TV Repairs</td></tr>
<tr><td class="spacer-above">TV Rentals</td></tr>
<tr><td class="spacer-above">TV Sales</td></tr>
</table>
</body>
</html>just wondering if it was my info you are not in agreance with. if so, why not? i am under the impression that these little shorthand definitions are what really exercises css's capability to save bandwidth.
Jersey, I believe that he was talking about comments 10 and 14 from the link to Mezzoblue in my earlier post. (That's my impression)just wondering if it was my info you are not in agreance with.Only if you're Dave Shea in disguise.Jeff Mott, you are a savior!I'd hate to bother you again, but I can't get
<table class="televisions">
<tr><th>Televisions</th></tr>
<tr><td>TV Repairs</td></tr>
<tr><td class="spacer-above">TV Rentals</td></tr>
<tr><td class="spacer-above">TV Sales</td></tr>
</table>
<table class="televisions">
<tr><th>Televisions</th></tr>
<tr><td>TV Repairs</td></tr>
<tr><td class="spacer-above">TV Rentals</td></tr>
<tr><td class="spacer-above">TV Sales</td></tr>
</table>
to be on the same line. Only if the NOBR tag was cross-browser...I'd hate to bother you again, but I can't get ... to be on the same line. Only if the NOBR tag was cross-browserOk, first off as far as I can tell NOBR is cross browser (despite not being part of the spec). But the way you're trying to use it is simply not how it works.
Secondly, you want the two tables side by side? Did you ever consider just adding another column to the first table?Another Column! I can't believe I didn't think of that...
Jeff Mott, you've been a big help.
~out
If you view it in Firefox, it looks horrible. What is the CSS missing?
<style type="text/css">
/* over-ride all defaults */
span,table,caption,tr,th,td{margin:none; padding:none; font-weight: none; border: none; text-decoration: none;}
table{display: inline}
caption{background-color: darkblue; color: white; font-weight: bold; font-size: 100%; display: inline;}
tr, td, th {background-color: lightblue; color: darkblue; font-size: 90%; display: inline;}
</style>
<span style="border: 1px solid darkblue;">
<table cellspacing=0 cellpadding=0>
<caption>Televisions</caption>
<tr><th width=190></th></tr>
<tr><th width=190>TV Repairs</th></tr>
<tr><th width=190><br></th></tr>
<tr><th width=190>TV Rentals</th></tr>
<tr><th width=190><br></th></tr>
<tr><th>TV Sales</th></tr>
</table>
</span>
I tried everything from display:inline to clear:both ...
I'm stumped
Edit: resolvedTry deleting the table{display: inline} entry. A table should not be an inline element, it is a table element.Thanks for the fast reply felgall.
I did that but no improvement. What else is wrong with the CSS?margin:none; padding:none;
should that be
margin:0; padding:0;
maybe also the other display:inline references for the table contentThanks for the help felgall! You pointed me in the right direction.
padding: none; wasn't the same as padding: 0px 0px 0px 0px; nor margin.
That is news to me.
However, table{display: block;} wasn't the major change needed, but I did it anyways.
The major issue was I had to add a width defination.
Here's my code that works in both FF and IE:
<style type="text/css">
/* over-ride all defaults */
span,table,caption,tr,th,td{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-weight: none; border: none; text-decoration: none;}
caption{background-color: darkblue; color: white; font-weight: bold; font-size: 100%; display: block;}
tr, td, th {background-color: lightblue; color: darkblue; font-size: 90%; display: block;}
table{display: block}
span{display: block}
</style>
<span style="border: 1px solid darkblue; width:190px">
<table cellspacing=0 cellpadding=0 width=190>
<caption>Televisions</caption>
<tr><th width=190></th></tr>
<tr><th width=190>TV Repairs</th></tr>
<tr><th width=190><br></th></tr>
<tr><th width=190>TV Rentals</th></tr>
<tr><th width=190><br></th></tr>
<tr><th>TV Sales</th></tr>
</table>
</span>span{display: block}Now this is ridiculous. The REASON for a span is to be inline. If you need a generic block element that's called a div.Hmm... so the SPAN tag is an inline element, and the DIV tag is a block element.
That's some new information to me ray326, thank you for that!
Does Netscape support both -- the DIV tag as well as the SPAN tag?
I know that early Netscape didn't support the SPAN tag nor DIV tag but rather the LAYER tag.
I haven't used any recent Netscape browsers...
The only browsers I got are Firefox and Internet Explorer.Netscape has used the Gecko HTML engine since 6.0 and it's about as compliant as the ambiguities in the spec allow. You can now forget <layer>, <center>, <font> and a whole host of dead and proprietary tags.
Re span and div. The whole purpose of span and div are to give you semantically neutral inline and block tags through which you can do presentational things. You should always first try to apply styles to semantically meaningful tags and then use span and div when nothing else will do.Yay! I can forget about the LAYER tag for compability with later Netscape Versions!
That clears things up for me perfectly, thanks again ray326, you sure seem quite the expert with compatibility.
you sure seem quite the expert with compatibilityNo no no. I learn things daily from the real experts that frequent this forum.Now this is ridiculous. The REASON for a span is to be inline. If you need a generic block element that's called a div.Ray, I thought you might appreciate this. Read how Dave Shea (of CSS Zen Garden) builds these Date Boxes on the Mezzoblue site:
<!-- m --><a class="postlink" href="http://www.mezzoblue.com/archives/2005/06/10/dating_reque/">http://www.mezzoblue.com/archives/2005/ ... ing_reque/</a><!-- m -->
Get him!!Hehe, agreed!
<span class="calPage">
Jun
<span class="day">8</span>
</span>
.calPage {
display: block;
...
}
.calPage .day {
display: block;
...
}
Get him! lol
That's interesting. One of these days if I'm extremely bored I may fiddle with those by making them divs and removing the display:block to see what the difference is. Note comments 10 and 14. I don't particularly agree with that guy's reasoning since the two tags have no semantic meaning (by design) but it's a reasonable explaination.you can tidy up the css by changingmargin: 0px 0px 0px 0px;
to
margin: 0;
do the same with padding. these are not any major probelms by themselves but if you do this in enough places you will bog down the browser with needless info. one of the greatest parts of css is the short-hand. use it to your advantage. plus, it's a lot less typing
That's interesting. One of these days if I'm extremely bored I may fiddle with those by making them divs and removing the display:block to see what the difference is. Note comments 10 and 14. I don't particularly agree with that guy's reasoning since the two tags have no semantic meaning (by design) but it's a reasonable explaination.just wondering if it was my info you are not in agreance with. if so, why not? i am under the impression that these little shorthand definitions are what really exercises css's capability to save bandwidth.Among everything else that has been said here...
* none is not a font-weight value
* darkblue is not a color value
* lightblue is not a color value
You could have found and fixed so many errors on your own had you simply tried to validate your CSS.
Your HTML is a bit weird also. Why do you have whole table rows with nothing but a line break???
Here's a page I threw together. Appears to do the same as what you had, but is much simplier and renders identically in both browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
table.televisions { background-color: rgb(173,216,230); border-collapse: collapse; width: 190px }
table.televisions th { background-color: rgb(0,0,139); color: white }
table.televisions td { color: rgb(0,0,139); font-size: 90%; font-weight: bold; text-align: center }
table.televisions td.spacer-above { padding-top: 1em }
</style>
</head>
<body>
<table class="televisions">
<tr><th>Televisions</th></tr>
<tr><td>TV Repairs</td></tr>
<tr><td class="spacer-above">TV Rentals</td></tr>
<tr><td class="spacer-above">TV Sales</td></tr>
</table>
</body>
</html>just wondering if it was my info you are not in agreance with. if so, why not? i am under the impression that these little shorthand definitions are what really exercises css's capability to save bandwidth.
Jersey, I believe that he was talking about comments 10 and 14 from the link to Mezzoblue in my earlier post. (That's my impression)just wondering if it was my info you are not in agreance with.Only if you're Dave Shea in disguise.Jeff Mott, you are a savior!I'd hate to bother you again, but I can't get
<table class="televisions">
<tr><th>Televisions</th></tr>
<tr><td>TV Repairs</td></tr>
<tr><td class="spacer-above">TV Rentals</td></tr>
<tr><td class="spacer-above">TV Sales</td></tr>
</table>
<table class="televisions">
<tr><th>Televisions</th></tr>
<tr><td>TV Repairs</td></tr>
<tr><td class="spacer-above">TV Rentals</td></tr>
<tr><td class="spacer-above">TV Sales</td></tr>
</table>
to be on the same line. Only if the NOBR tag was cross-browser...I'd hate to bother you again, but I can't get ... to be on the same line. Only if the NOBR tag was cross-browserOk, first off as far as I can tell NOBR is cross browser (despite not being part of the spec). But the way you're trying to use it is simply not how it works.
Secondly, you want the two tables side by side? Did you ever consider just adding another column to the first table?Another Column! I can't believe I didn't think of that...
Jeff Mott, you've been a big help.
~out