Call for Help - Formatting IE v's Firefox
Another 'Call for Help' post. This is following on from my previous 'Call for Help' post. I've also posted this question at the forum at CSS Creator but to date no responses.
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 and what can I do to rectify it?
- Steve's blog
- Add new comment
- 730 reads
- Email this page
Tables and css
Steve, that's an interesting problem. I noticed that if you reverse the sequence of .stats-left and .stats-right, only the first one displays correctly.
Do you have software to validate your css and html?
One way of rectifying the problem is is to use inline style for that table instead of .stats-right -
<table style="etc etcFormatting IE v Firefox
Thanks Ewen, very good pick-up. I've just reversed the order of 'stats-left' and 'stats-right' in the CSS file and within IE it behaves as you pointed out. Within Firefox everything is normal, as it should be.
I'll check further but it looks like the use of a hyphen in a class name is causing the problem. Again, thanks for pointing it out.
IE behaving badly
I've just fiddled with the CSS file, changing the class names by initially replacing the hyphen with an underscore, yet the problem persisted. Then removed the hyphen/underscore in the class name completely and still the problem persists.
I've got no idea what's going on.
My obvious answer is because
My obvious answer is because IE is crap but I know IE uses an alternate set of rules for CSS (only Microsoft!!!) and it doesn't read table rules properly..... so I think you'd need to send IE a set of CSS rules that will override the stuff related to tables. eg -[if IE]
Odd IE
There are quite a few formatting differences with the different browsers (if you want to see something strange, take a look at 'web TV'). Also, line breaks, horizontal rules, background colours.
IE is still probably used by 90% of readers, so it's probably a good idea to get it working in that, and make sure Firefox is at least useable.
You could have different css documents and detect the browser and have it use the relevant css, but that's tough work. Probably best to compromise and keep things simple.
I agree
I agree with you Ewen, that unfortunately most users use IE and therefore it has to work first time every time. I've checked my stats and it works out that 67% of my traffic users are using IE, I suppose it's a fact of life. This problem has since been solved but it's taught me one thing, even though I prefer Firefox I must make the effort to check things out in IE before changing anything.
Solved : IE & CSS
Problem solved, thanks to ClevaTreva over at CSS Creator.
In a nutshell, ClevaTreva pointed out that I had double quotes on the last line of both my class names. IE detected that and ignored everything thereafter.
I mentioned in a previous comment above, that IE was behaving badly. I think I have to eat those words, it was me behaving badly.
That's right!
Just had another look at the 'bad' css. Simple enough mistake. It'd be better if IE didn't overlook so many mistakes and not others. It's funny how you can look and not see something. Stand alone validating software would be handy. I know W3C has online validation, but it's cumbersome if there are many mistakes.