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:-
Stat's : 19 Apr 2007
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
Sun, 2007-04-22 04:10
#1
Interesting discovery
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.
Sun, 2007-04-22 11:38
#2
I've fiddled with this
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.
Sun, 2007-04-22 12:50
#3
IE is correctly reading the
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.
Mon, 2007-04-23 13:34
#4
Thanks for the advice. I'll
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.
Mon, 2007-04-23 14:02
#5
The first thing I can see is
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.
Tue, 2007-04-24 12:39
#6
Spot on
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.
Tue, 2007-04-24 17:15
#7
That is old style inline
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.