Why IE not adhere to CSS - yet Firefox does
newbie
Location: Melbourne, Australia.
Posted: Thu, 2007-04-19 12:08
Hope someone can help. First time posting here.
In my CSS for my blog I have this snippet relating to tables:
.stats-left {
background-color: #eee;
float: left;
font-size: 80%;
width: 130px;
margin-right: 10px;
margin-left:10px;
margin-top: 5px;
margin-bottom: 5px"
}
.stats-right {
background-color: #eee;
float: right;
font-size: 80%;
width: 130px;
margin-right: 10px;
margin-left:10px;
margin-top: 5px;
margin-bottom: 5px"
}In my post the HTML is similar to this:-
<div style="overflow:hidden">
<table class="stats-right" border="1">
<tbody>
<tr align="center">
<td colspan="2"><b>Stat's : 19 Apr 2007</b></td>
</tr>My question is: When I use the class="stats-right" Firefox correctly positions the table to the right and text correctly flows around it on the left. In IE that doesn't occur, the text commences at the bottom, there is no formatting and background colour non-existent. A sample of a right-align table can be found here.
When I use class="stats-left" both Firefox and IE correctly display the table on the left and text correctly flows around it on the right-hand side. A sample of a left-aligned table can be found here.
I suppose the big question is, why is IE not playing the game?
Any advice appreciated
Steve Taylor
Steve's Stuff
newbie
Posts: 5
Joined: 2007-03-28
Location: Melbourne, Australia.
Interesting discovery
Posted: Sun, 2007-04-22 04:10
It's been pointed out to me, over at my site, that when the class names are reversed in order in the CSS file that the problem remains but reversed. That is, making the 'stats-right' come before 'stats-left' that within IE the right-aligned table is correctly positioned and the left-aligned table is not accounted for.
I haven't checked any further but I've got a feeling that it may be the use of a hyphen in the class name that is causing the problem.
newbie
Posts: 5
Joined: 2007-03-28
Location: Melbourne, Australia.
I've fiddled with this
Posted: Sun, 2007-04-22 11:38
I've fiddled with this problem a little further but I'm still none the wiser.
I changed the class name to 'stats_right' and 'stats_left' and had the same effect. Then changed the class name to 'statsright' and 'statsleft' and still the same problem.
I've since reverted the class names back to 'stats_right' and 'stats_left'.
Any clues.
Guru
Posts: 2983
Joined: 2004-09-01
Location: MA, USA
IE is correctly reading the
Posted: Sun, 2007-04-22 12:50
IE is correctly reading the class name - no need to chase that. But it's not seeing the css. I'm not sure why just yet. Try moving the two styles in question to another stylesheet to see if the problem lies in styles.css.
newbie
Posts: 5
Joined: 2007-03-28
Location: Melbourne, Australia.
Thanks for the advice. I'll
Posted: Mon, 2007-04-23 13:34
Thanks for the advice. I'll now try and figure out which other style sheet to mess with, can't do it tonight, but will give it a go.
Guru
Posts: 2964
Joined: 2004-02-05
Location: A hilly place, UK
The first thing I can see is
Posted: Mon, 2007-04-23 14:02
The first thing I can see is the quote mark at the end of theach block of css:
.stats-left {
background-color: #eee;
float: left;
font-size: 80%;
width: 130px;
margin-right: 10px;
margin-left:10px;
margin-top: 5px;
margin-bottom: 5px"
}
.stats-right {
background-color: #eee;
float: right;
font-size: 80%;
width: 130px;
margin-right: 10px;
margin-left:10px;
margin-top: 5px;
margin-bottom: 5px"
}
That will right royally cock things up, as the browser may then ignore the css file from then onwards.
Give your site a valid doctype | Uncollapsing Margins
newbie
Posts: 5
Joined: 2007-03-28
Location: Melbourne, Australia.
Spot on
Posted: Tue, 2007-04-24 12:39
Thanks ClevaTreva, you're spot on. I changed those offending double quotes to semi-colons and now IE is correctly positioning both tables (left or right).
Thanks to all the others for assisting as well.
One slight, little, niggling thing is that in my post I set the border = "1". Firefox displays borders and yet IE doesn't.
Any clues please.
Guru
Posts: 2964
Joined: 2004-02-05
Location: A hilly place, UK
That is old style inline
Posted: Tue, 2007-04-24 17:15
That is old style inline styling. Remove that border="1" and put border:1px solid black; (or whatever color) in the css for that style.
Give your site a valid doctype | Uncollapsing Margins