[RESOLVED] CSS Behavior between FF2/Safari1.2 and IE7/Opera9

**sevenhalo** · Feb 23rd, 2007, 11:03 AM

The following is a simplified example of a larger doc that I have.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html>
	<head>
		<title>Feedback Form - Widgets and What's its</title>
		<style type="text/css">
			.DivClass {
				font-size: 600px;
			}		
			.HClass {

			}		
		</style>
	</head>
	<body>
		<div id="MyDiv" class="DivClass">
			<h1 class="HClass">Some H1 Text</h1>
		</div>
	</body>
</html>

The behavior for IE7 and Opera 9 is that the font-size does not change. Safari 1.2 and Firefox 2 are inheriting from the div's class.

My question is, without having to specify a font-size for h1; is there a way to tell Safari and Firefox not to inherit from the parent?

I've attempted to use both classes and class selectors. Neither seem to work and I am only allowed to work with classes (I won't have information about the element's ID during the page's render; for unrelated reasons).

Any help is appreciated.

-Thanks.

**techgnome** · Feb 23rd, 2007, 11:57 AM

Code:

			.DivClass {
				font-size: 600px;
			}		
			.HClass {
				font-size: none;
			}

..I *think*....

-tg

**sevenhalo** · Feb 23rd, 2007, 12:25 PM

Thanks tg,

I gave it a shot:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html>
	<head>
		<title>Feedback Form - Widgets and What's its</title>
		<style type="text/css">
			div.DivClass {
				font-size: 600px;
			}		
			.HClass {
font-size: none;
			}			
</style>
	</head>
	<body>
		<div id="MyDiv" class="DivClass">
			<h1 class="HClass">Some H1 text</h1>
		</div>
	</body>
</html>

Firefox 2.0 and Safari still rendered it at 600px. Any other ideas? I'm really hard up on this one...

Edit:
--Hold on, I screwed up; style is outside of the brackets. Let me retry--

Edit:
Even after I fixed the above snippet so the styles were correct, Firefox and Safari still had the same behavior as I mentioned before.

**CornedBee** · Feb 23rd, 2007, 04:30 PM

I won't have information about the element's ID during the page's render; for unrelated reasons

Let me guess, it's .Net auto-generated.

Anyway, the answer is no. Unfortunately, both behaviours are perfectly within the specification: all browser override the font size of the h1 with the value from the HTML default style sheet. However, Safari and Firefox follow the (purely informative; it is not a violation of the spec not to do so) recommendation of the CSS specification and make the text size of h1 "2em", meaning twice the size of the parent element, whereas Opera and IE give it an absolute size.

So you either have to explicitly specify the font size or remove the specification on the div.

Which leads you to another problem: there is no way to specify the "browser default value" for the font size. Replace it once, and you have to replace it everywhere, or risk inconsistencies.

Which makes the best solution to not specify the size on the div.

Alternatively, you can force IE and Opera into the "more compliant" (i.e. following the recommendation of the spec) behaviour by explicitly forcing h1's font size to be 2em:

Code:

h1 { font-size: 2em; }

**Merri** · Feb 23rd, 2007, 11:27 PM

Generally speaking it is a good idea to "reset" styles when doing CSS to ensure better cross browser results. This is one example when "weird" things happen due to differences between browsers default settings. Of course the downside is that you just have to do more code, but when you do it a couple of times you end up with some general stuff you do every time, it gets into rather simple copy'n'paste line.

**sevenhalo** · Feb 24th, 2007, 01:37 PM

Originally Posted by CornedBee

Let me guess, it's .Net auto-generated.

Actually, no. We built our own framework and the pages are themeable (based on user). The problem is, the developer building the page with the framework doesn't necessarily have to specify an ID of every element (we'll generate a guid instead and the classes some from the controls they used). But since the elements are being grouped (Say one group is "button" but it also has a more defined group scope of "acceptbutton") I need to determine a way that if something has styles on the wrapping object, it doesn't follow that, but insteeads follows the classes.

I'm not sure how this will end up working. Thanks though.

**sevenhalo** · Feb 26th, 2007, 11:05 AM

I was a little on edge on Friday; making mountains, ect ect. After reading the responses again and starting with a fresh perspective, it looks like I can make this work. Regulating what you "can" and "can't" do style-wise is the next level up from where I am. I was attempting to put the logic in the most raw object I had.

Noob mistake.

Thanks again.

Thread: [RESOLVED] CSS Behavior between FF2/Safari1.2 and IE7/Opera9

Thread Tools

Display

[RESOLVED] CSS Behavior between FF2/Safari1.2 and IE7/Opera9

Re: CSS Behavior between FF2/Safari1.2 and IE7/Opera9

Re: CSS Behavior between FF2/Safari1.2 and IE7/Opera9

Re: CSS Behavior between FF2/Safari1.2 and IE7/Opera9

Re: CSS Behavior between FF2/Safari1.2 and IE7/Opera9

Re: CSS Behavior between FF2/Safari1.2 and IE7/Opera9

Re: CSS Behavior between FF2/Safari1.2 and IE7/Opera9

Posting Permissions