Isn't Mozilla supposed to be CSS compliant? - Tilted Forum Project Discussion Community

Stompy · 06-02-2004, 08:23 AM

Mozilla has been giving me nothing but headaches when it comes to CSS. It's like whatever CSS styles I apply to HTML (and they're pretty basic), Mozilla pretty much just ignores them and does its own thing.

I designed this site around how it looks in IE, which really isn't a problem because half the CSS styles I apply to it are working exaclty how they should. I view the site in Mozilla.. and it's like amazing at how f'd up it is. The icing on the cake: I ran the CSS through the w3c.org validator and everything checked out perfectly!

Normally this is the type of crap you get with IE and I'm VERY surprised at this.

For example (shown in the code block below), "display: inline;" doesn't work properly. To get divs to line themselves up horizontally, you need to change it to "display: block; float: left;"

There's a laundry list of other things I've noticed that it just does NOT conform to (I don't have them readily available on this computer or I'd post them).

Are these actual bugs or is there a bit of CSS tricking Mozilla into overriding some of these settings? Does anyone else experience these problems?

I tried a Google search on Mozilla & CSS bugs, but I get nothing but a bunch of sites comparing IE and Mozilla and summarizing it with: "Once again, Mozilla comes out on top!"

Here's sample code to show what I'm talking about regarding the display: inline not working:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<style>
body{

	font-family: Arial;
	font-size: 11px;
	background-color: #eeeeee;
	margin: 0px;
}

.Title
{
	text-align: center;
	font-weight: bold;
	border-top: solid 1px #888899;
	border-right: solid 1px #000000;
	border-bottom: solid 1px #000000;
	border-left: solid 1px #888899;
	
	background-color: #555566;
	color: #ffffff;	
}

#BrowserSummary
{
	/*display: block;
	float: left;*/
	display: inline;
	width: 250px;
	padding: 0px;
	margin-top: 10px;
	margin-right: 10px; 
	vertical-align: top;
	border: solid 1px #333333;


}

#BrowserSummary div
{
	padding: 5px;
	border-bottom: solid 1px #cccccc;
}


#BrowserSummary .Browser
{
	float: left;
	width: 120px;
	border-right: dotted 1px #cccccc
}


.VisitorP, .VisitorT
{
	background-color: #dddddd;
}
.VisitorP
{
	float: left;
	width: 60px;
	text-align: right;
	border-right: dotted 1px #cccccc
}

.VisitorT
{
	width: auto;
	text-align: right;
}


		</style>
	</head>
	<body>
			<div id="BrowserSummary">
				<div class="Title">Browsers</div>
		
			<div class="Browser">IE 6.0</div>
			<div class="VisitorP">62.07 %</div>
			<div class="VisitorT">36</div>
		
			<div class="Browser">Netscape 5.0</div>

			<div class="VisitorP">37.93 %</div>
			<div class="VisitorT">22</div>
		
			</div>
		
			<div id="BrowserSummary">
				<div class="Title">Browsers</div>
		
			<div class="Browser">IE 6.0</div>
			<div class="VisitorP">62.07 %</div>
			<div class="VisitorT">36</div>
		
			<div class="Browser">Netscape 5.0</div>

			<div class="VisitorP">37.93 %</div>
			<div class="VisitorT">22</div>
		
			</div>
	</body>
</html>

Stompy · 06-02-2004, 09:24 AM

hahaha man, I really hate doing this stuff.

Now IE is completely ignoring a font style tag for a select object. The font reflects in the body, but NOT the select. Notice that there IS a select style specifier. There are even multiple declarations of it just to cover all ground.

The page (both HTML and CSS) validates perfectly fine on w3.org. This stuff is asinine. What's the point in making these specifications if the browser renderings are hit & miss?

The funny thing: another site I have that specifies a font on the select tag works just fine. Exact same code and all.

Oh, and looky that... specify a width CSS style ( width: 40px; ) in the select and the WIDTH is set fine, but no font! Interesting, huh?

Now, add a font-size. It magically works. Forget about inheriting the style from the body!!

I just want someone to look at this and verify that it's not me going crazy.

I guess this thread shoulda been called "why the hell can't browsers render CSS?"

[edit]
Scratch this example. My comp was being stupid. I rebooted and it shows the font just fine, however, the first example I posted is still not working

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<style type="text/css">
			body
			{

				font-family: Arial;
				font-size: 11px;
				background-color: #eeeeee;
			}

	
			select
			{
				font-family: Arial;
			}
		
			#DateRangeSelector 
			{
				padding: 5px;
				width: 225px;
			}
			#DateRangeSelector div
			{
				padding: 5px;
				height: auto;
			}
			#DateRangeSelector
			{
				border: solid 1px #000000;
			}

			#DateRangeSelector .label, #DateRangeSelector .Month, #DateRangeSelector .Day, #DateRangeSelector .Year
			{
				background-color: #cccccc;

			}
			#DateRangeSelector .label
			{
				float: left;
				text-align: right;
				width: 50px;
			}

			#DateRangeSelector .Month, #DateRangeSelector .Day
			{
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="DateRangeSelector">
			<div class="label">From:</div>
			<div class="Month">
				<select>
					<option>01</option>
					<option>02</option>
					<option>03</option>
					<option>04</option>
					<option>05</option>
					<option>06</option>
					<option>07</option>
					<option>08</option>

				</select>
			</div>
			<div class="Day">
				<select>
					<option>01</option>
					<option>02</option>
					<option>03</option>
					<option>04</option>
					<option>05</option>
					<option>06</option>
					<option>07</option>
					<option>08</option>

				</select>
			</div>
			<div class="Year">
				<select>
					<option>2001</option>
					<option>2002</option>
					<option>2003</option>
					<option>2004</option>
					<option>2005</option>
					<option>2006</option>

				</select>
			</div>

			<div class="label">Thru:</div>
			<div class="Month">
				<select>
					<option>01</option>
					<option>02</option>
					<option>03</option>
					<option>04</option>
					<option>05</option>
					<option>06</option>
					<option>07</option>
					<option>08</option>

				</select>
			</div>
			<div class="Day">
				<select>
					<option>01</option>
					<option>02</option>
					<option>03</option>
					<option>04</option>
					<option>05</option>
					<option>06</option>
					<option>07</option>
					<option>08</option>

				</select>
			</div>
			<div class="Year">
				<select>
					<option>2001</option>
					<option>2002</option>
					<option>2003</option>
					<option>2004</option>
					<option>2005</option>
					<option>2006</option>

				</select>
			</div>

		</div>
	</body>
</html>

RelaX · 06-02-2004, 01:38 PM

Check the first example again with the W3C validator.

IDs are supposed to be unique (see #BrowserSummary)

I have it working with Mozilla 1.6 on my server: www.relaxnow.nl/test/css.html

But tell me, where CSS is concerned, I am just a beginner and I can't seem to figure out how to get the "validated" icon beneath the other two things. Could you tell me how this is done?

Stompy · 06-02-2004, 07:34 PM

Thanks a ton for taking the time out to help!

To move the "validated" class under the other two divs, place "clear: left;" in the validated class description. What that does is places it on a new line if any elements are to the left. A more detailed description can be found here: http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control

I noticed for the two divs that you have float: left; with display: inline;

If you REMOVE that display: style completely (so that only float: left; is there) it still looks the same.. meaning, they're still aligned horizontally. That works great in this particular example, but if I'm not mistaken, floating a div (in some situations) will have a different effect from lining them up w/ a standalone inline display.

For a quick (and basic) example of what I'm talking about, remove "float: left;" from the BrowerSummary class description and view the page in IE (also make sure that display: inline; is there). You won't need to give the "validated" class a "clear: left;" style as the natural flow of the layout will take over and it will automatically be on the next line.

There's certain situations where there's a visual difference in using inline vs. floating the divs to the left and placing a "clear" style on surrounding elements.

Another thing that irks me is how each browser treats pixel sizes differently. I have a div that's 220 px wide and it has several floated divs inside of it. In IE, the width is just how I like it, but in Mozilla, it's a tad bit smaller.. just enough to take the divs inside and make them wrap to the 2nd line. Example code is below.

View one in IE and the other in Mozilla. You'll notice the Mozilla one fits PERFECTLY while IE makes it a bit wider. Now, I'm not 100% sure on which browser is the correct one, but like I said above, I made this site based off of how it looks in IE (considering 99% of our visitors have an IE of sorts).

In these examples, the differences aren't a big deal and seem pretty trivial, but in the grand scheme of things.. it make a huge difference. Once you have an entire site in divs and the stylesheet in place, it's VERY aggrivating to see it looks perfectly in one browser (IE) only to have half the stuff wrap and overflow in the other.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<style type="text/css">
			body
			{

				font-family: Arial;
				font-size: 11px;
				background-color: #eeeeee;
			}

			select
			{
				font-family: Arial;
				font-size: 10px;
			}
		
			#DateRangeSelector 
			{
				border: solid 1px #000000;
				width: 220px;
			}
			#DateRangeSelector div
			{
				padding: 5px;
			}


			#DateRangeSelector .label, #DateRangeSelector .Month, #DateRangeSelector .Day, #DateRangeSelector .Year
			{
				text-align: center;
				background-color: #cccccc;
				display: block;
				vertical-align: top;

			}
			
			#DateRangeSelector .label, #DateRangeSelector .Month, #DateRangeSelector .Day
			{
				float: left;
				
			}

			#DateRangeSelector .label
			{
				text-align: center;
				width: 45px;
			}
			#DateRangeSelector .Button
			{
				background-color: #cccccc;
				text-align: right;
			}
			
			#DateRangeSelector .Button input
			{
				
				width: 75px;
				cursor: hand;
			} 
		</style>
	</head>
	<body>
		<div id="DateRangeSelector">
		
			<div class="label">From:</div>
			<div class="Month">
				<select>
					<option>01</option>
					<option>02</option>
					<option>03</option>
					<option>04</option>
					<option>05</option>
					<option>06</option>
					<option>07</option>
					<option>08</option>

				</select>
			</div>
			<div class="Day">
				<select>
					<option>01</option>
					<option>02</option>
					<option>03</option>
					<option>04</option>
					<option>05</option>
					<option>06</option>
					<option>07</option>
					<option>08</option>

				</select>
			</div>
			<div class="Year">
				<select>
					<option>2001</option>
					<option>2002</option>
					<option>2003</option>
					<option>2004</option>
					<option>2005</option>
					<option>2006</option>

				</select>
			</div>

			<div class="label">Thru:</div>
			<div class="Month">
				<select>
					<option>01</option>
					<option>02</option>
					<option>03</option>
					<option>04</option>
					<option>05</option>
					<option>06</option>
					<option>07</option>
					<option>08</option>

				</select>
			</div>
			<div class="Day">
				<select>
					<option>01</option>
					<option>02</option>
					<option>03</option>
					<option>04</option>
					<option>05</option>
					<option>06</option>
					<option>07</option>
					<option>08</option>

				</select>
			</div>
			<div class="Year">
				<select>
					<option>2001</option>
					<option>2002</option>
					<option>2003</option>
					<option>2004</option>
					<option>2005</option>
					<option>2006</option>

				</select>
			</div>
			<div class="Button">
				<input type="button" value="test"/>
			</div>
		</div>
	</body>
</html>

SecretMethod70 · 06-04-2004, 09:51 PM

This honestly doesn't add any HELP to this thread, but nonetheless I think those of you attempting to code pages in CSS and make it work across various browsers will appreciate this:

http://www.stopdesign.com/log/2004/01/26/ie_factor.html

I got the link to that off another website ( http://www.rad-e8.com ) which had to temporarily disable style sheets for IE because it simply would not work right. So, for about a month, the site worked fine for everyone, except IE users who had a text based page.

ibis · 06-05-2004, 07:11 PM

Make sure your doctype is correct. If it's not it will throw the browser into "non-compliance mode" and not render your css correctly..

That might be why IE displays your code correctly and not mozilla.

Also, it might be that your code is invalid and mozilla is displaying it correctly and IE not.

SinisterMotives · 06-18-2004, 08:37 AM

I used to think that Mozilla wasn't rendering border and padding properties correctly myself, but upon reading the W3C spec, I found that it is Internet Explorer, not Mozilla, that implements them incorrectly. The border and padding dimensions are added to an element's width or height; they are not applied within the specified width or height. My workaround for this is to simply leave a DIV's padding at 0px and set its left and top properties to get the desired spacing between it and adjacent elements. This results in a layout that looks the same in both browsers.

DigitalD17 · 07-09-2004, 11:37 PM

to get it to display on it's own line for the should be to add:

display: block;

to your .validated class. But, since you're doing float: left; that will never work. You'll have to either break down and use a <br /> tag, or stop using float: left.

Just so you know, it is perfectly acceptable to use tables for this data, since it is technically tabular data.

SinisterMotives · 07-10-2004, 04:02 AM

To get DIVs to behave like table cells, you need to make sure that the total width of all the "cells" in a row, including borders and padding, is not greater than the width of the DIV representing the table row, and use the following display properties:

Code:

<div style="display: table-row;">
    <div style="display: table-cell;">Data 1</div>
    <div style="display: table-cell;">Data 2</div>
</div>

If the "cells" are wider than the "row" that contains them, the last cell in the row will be forced onto its own row in a very un-table-like manner.

vidocq · 07-22-2004, 05:46 PM

IE is a browser that instead of supporting standards, tries to define its own defacto standards by the idea that the grand majority of users use IE.

Mozilla and its derivatives support all current standards at the time of their release.

In other words, designing a site for IE will usually cause it to not work at all for anything else, but designing a site that uses standards properly will work in everything, with IE misfiring fairly often.

In the case of CSS, its sometimes useful to get the client's browser by some means (like phpsniff if you are doing php) and have different outputs for IE, and real browsers.

SinisterMotives · 07-22-2004, 08:40 PM

Quote:

Originally posted by vidocq
IE is a browser that instead of supporting standards, tries to define its own defacto standards by the idea that the grand majority of users use IE.

IE and Mozilla are very similar in their CSS support in most respects. The one exception that really gives me problems is the way IE handles element padding and borders, as noted above. I don't think they deliberately diverged from the standard in that particular case, as there would be no benefit in implementing it incorrectly. It seems more likely that they misinterpreted the standard.

As for the many extra features IE has, a lot of them are for Windows HTA Host (a platform for Windows applications written in HTML and VBScript or JavaScript) and not for standard HTML documents requested from an HTTP server.

06-02-2004, 08:23 AM	#1 (permalink)
Stompy Banned from being Banned Location: Donkey	Isn't Mozilla supposed to be CSS compliant? Mozilla has been giving me nothing but headaches when it comes to CSS. It's like whatever CSS styles I apply to HTML (and they're pretty basic), Mozilla pretty much just ignores them and does its own thing. I designed this site around how it looks in IE, which really isn't a problem because half the CSS styles I apply to it are working exaclty how they should. I view the site in Mozilla.. and it's like amazing at how f'd up it is. The icing on the cake: I ran the CSS through the w3c.org validator and everything checked out perfectly! Normally this is the type of crap you get with IE and I'm VERY surprised at this. For example (shown in the code block below), "display: inline;" doesn't work properly. To get divs to line themselves up horizontally, you need to change it to "display: block; float: left;" There's a laundry list of other things I've noticed that it just does NOT conform to (I don't have them readily available on this computer or I'd post them). Are these actual bugs or is there a bit of CSS tricking Mozilla into overriding some of these settings? Does anyone else experience these problems? I tried a Google search on Mozilla & CSS bugs, but I get nothing but a bunch of sites comparing IE and Mozilla and summarizing it with: "Once again, Mozilla comes out on top!" Here's sample code to show what I'm talking about regarding the display: inline not working: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style> body{ font-family: Arial; font-size: 11px; background-color: #eeeeee; margin: 0px; } .Title { text-align: center; font-weight: bold; border-top: solid 1px #888899; border-right: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #888899; background-color: #555566; color: #ffffff; } #BrowserSummary { /display: block; float: left;/ display: inline; width: 250px; padding: 0px; margin-top: 10px; margin-right: 10px; vertical-align: top; border: solid 1px #333333; } #BrowserSummary div { padding: 5px; border-bottom: solid 1px #cccccc; } #BrowserSummary .Browser { float: left; width: 120px; border-right: dotted 1px #cccccc } .VisitorP, .VisitorT { background-color: #dddddd; } .VisitorP { float: left; width: 60px; text-align: right; border-right: dotted 1px #cccccc } .VisitorT { width: auto; text-align: right; } </style> </head> <body> <div id="BrowserSummary"> <div class="Title">Browsers</div> <div class="Browser">IE 6.0</div> <div class="VisitorP">62.07 %</div> <div class="VisitorT">36</div> <div class="Browser">Netscape 5.0</div> <div class="VisitorP">37.93 %</div> <div class="VisitorT">22</div> </div> <div id="BrowserSummary"> <div class="Title">Browsers</div> <div class="Browser">IE 6.0</div> <div class="VisitorP">62.07 %</div> <div class="VisitorT">36</div> <div class="Browser">Netscape 5.0</div> <div class="VisitorP">37.93 %</div> <div class="VisitorT">22</div> </div> </body> </html> __________________ I love lamp.

06-02-2004, 01:38 PM	#3 (permalink)
RelaX Follower of Ner'Zhul Location: Netherlands	Check the first example again with the W3C validator. IDs are supposed to be unique (see #BrowserSummary) I have it working with Mozilla 1.6 on my server: www.relaxnow.nl/test/css.html But tell me, where CSS is concerned, I am just a beginner and I can't seem to figure out how to get the "validated" icon beneath the other two things. Could you tell me how this is done? __________________ The most likely way for the world to be destroyed, most experts agree, is by accident. That's where we come in; we're computer professionals. We cause accidents. - Nathaniel Borenstein Last edited by RelaX; 06-02-2004 at 02:08 PM..

06-02-2004, 07:34 PM	#4 (permalink)
Stompy Banned from being Banned Location: Donkey	Thanks a ton for taking the time out to help! To move the "validated" class under the other two divs, place "clear: left;" in the validated class description. What that does is places it on a new line if any elements are to the left. A more detailed description can be found here: http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control I noticed for the two divs that you have float: left; with display: inline; If you REMOVE that display: style completely (so that only float: left; is there) it still looks the same.. meaning, they're still aligned horizontally. That works great in this particular example, but if I'm not mistaken, floating a div (in some situations) will have a different effect from lining them up w/ a standalone inline display. For a quick (and basic) example of what I'm talking about, remove "float: left;" from the BrowerSummary class description and view the page in IE (also make sure that display: inline; is there). You won't need to give the "validated" class a "clear: left;" style as the natural flow of the layout will take over and it will automatically be on the next line. There's certain situations where there's a visual difference in using inline vs. floating the divs to the left and placing a "clear" style on surrounding elements. Another thing that irks me is how each browser treats pixel sizes differently. I have a div that's 220 px wide and it has several floated divs inside of it. In IE, the width is just how I like it, but in Mozilla, it's a tad bit smaller.. just enough to take the divs inside and make them wrap to the 2nd line. Example code is below. View one in IE and the other in Mozilla. You'll notice the Mozilla one fits PERFECTLY while IE makes it a bit wider. Now, I'm not 100% sure on which browser is the correct one, but like I said above, I made this site based off of how it looks in IE (considering 99% of our visitors have an IE of sorts). In these examples, the differences aren't a big deal and seem pretty trivial, but in the grand scheme of things.. it make a huge difference. Once you have an entire site in divs and the stylesheet in place, it's VERY aggrivating to see it looks perfectly in one browser (IE) only to have half the stuff wrap and overflow in the other. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> body { font-family: Arial; font-size: 11px; background-color: #eeeeee; } select { font-family: Arial; font-size: 10px; } #DateRangeSelector { border: solid 1px #000000; width: 220px; } #DateRangeSelector div { padding: 5px; } #DateRangeSelector .label, #DateRangeSelector .Month, #DateRangeSelector .Day, #DateRangeSelector .Year { text-align: center; background-color: #cccccc; display: block; vertical-align: top; } #DateRangeSelector .label, #DateRangeSelector .Month, #DateRangeSelector .Day { float: left; } #DateRangeSelector .label { text-align: center; width: 45px; } #DateRangeSelector .Button { background-color: #cccccc; text-align: right; } #DateRangeSelector .Button input { width: 75px; cursor: hand; } </style> </head> <body> <div id="DateRangeSelector"> <div class="label">From:</div> <div class="Month"> <select> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> </select> </div> <div class="Day"> <select> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> </select> </div> <div class="Year"> <select> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> <option>2006</option> </select> </div> <div class="label">Thru:</div> <div class="Month"> <select> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> </select> </div> <div class="Day"> <select> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> </select> </div> <div class="Year"> <select> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> <option>2006</option> </select> </div> <div class="Button"> <input type="button" value="test"/> </div> </div> </body> </html> __________________ I love lamp. Last edited by Stompy; 06-02-2004 at 07:48 PM..

06-04-2004, 09:51 PM	#5 (permalink)
SecretMethod70 Human Administrator Location: Chicago	This honestly doesn't add any HELP to this thread, but nonetheless I think those of you attempting to code pages in CSS and make it work across various browsers will appreciate this: http://www.stopdesign.com/log/2004/01/26/ie_factor.html I got the link to that off another website ( http://www.rad-e8.com ) which had to temporarily disable style sheets for IE because it simply would not work right. So, for about a month, the site worked fine for everyone, except IE users who had a text based page. __________________ Le temps détruit tout "Musicians are the carriers and communicators of spirit in the most immediate sense." - Kurt Elling

07-10-2004, 04:02 AM	#9 (permalink)
SinisterMotives Junkie	To get DIVs to behave like table cells, you need to make sure that the total width of all the "cells" in a row, including borders and padding, is not greater than the width of the DIV representing the table row, and use the following display properties: Code: <div style="display: table-row;"> <div style="display: table-cell;">Data 1</div> <div style="display: table-cell;">Data 2</div> </div> If the "cells" are wider than the "row" that contains them, the last cell in the row will be forced onto its own row in a very un-table-like manner.

06-05-2004, 07:11 PM	#6 (permalink)
ibis PIKE!	Make sure your doctype is correct. If it's not it will throw the browser into "non-compliance mode" and not render your css correctly.. That might be why IE displays your code correctly and not mozilla. Also, it might be that your code is invalid and mozilla is displaying it correctly and IE not.

06-18-2004, 08:37 AM	#7 (permalink)
SinisterMotives Junkie	I used to think that Mozilla wasn't rendering border and padding properties correctly myself, but upon reading the W3C spec, I found that it is Internet Explorer, not Mozilla, that implements them incorrectly. The border and padding dimensions are added to an element's width or height; they are not applied within the specified width or height. My workaround for this is to simply leave a DIV's padding at 0px and set its left and top properties to get the desired spacing between it and adjacent elements. This results in a layout that looks the same in both browsers.

07-09-2004, 11:37 PM	#8 (permalink)
DigitalD17 Upright	to get it to display on it's own line for the should be to add: display: block; to your .validated class. But, since you're doing float: left; that will never work. You'll have to either break down and use a <br /> tag, or stop using float: left. Just so you know, it is perfectly acceptable to use tables for this data, since it is technically tabular data.

07-22-2004, 05:46 PM	#10 (permalink)
vidocq Upright Location: Santa Monica - the festering wound called LA	IE is a browser that instead of supporting standards, tries to define its own defacto standards by the idea that the grand majority of users use IE. Mozilla and its derivatives support all current standards at the time of their release. In other words, designing a site for IE will usually cause it to not work at all for anything else, but designing a site that uses standards properly will work in everything, with IE misfiring fairly often. In the case of CSS, its sometimes useful to get the client's browser by some means (like phpsniff if you are doing php) and have different outputs for IE, and real browsers. __________________ "I want something good to die for To make it beautiful to live. I want a new mistake, lose is more than hesitate." ~Queens of the Stone Age - Go with the Flow