Css handling in IE6

kd_jm · 01-28-2008

I'm as green as green can be when it comes to css and browser compatability.

Below is a css file, and a html file. I tried to make it as simple as possible, so I stripped away as much headers as well.
I also attached the output when showing the html file in Opera and IE. No need to say, I like Opera's output better.

But of course the code should work with IE6 too...
What is it that IE6 (or perhaps Opera) is doing wrong in this small example? I also hope to get some kind of a rule, so that I know what to do to prevent this and other look-a-like problems

template.css

Code:

body {
	line-height: 1.3em;
}

h1 {
	width: 100%;
	font-size: 5em;
}

index.html

Code:

<head>
<link rel="stylesheet" href="template.css" type="text/css" />

</head>
<body>
	<h1>AbCdEfGhIjK lMnOpQr</h1>
</body>
</html>

Tx!

*notjustgraphics* · 01-28-2008

I think this is an example that would benefit from a global reset...

We discussed the global reset here: http://forums.biorust.com/html-php-a...-explorer.html (Firefox Vs. Internet Explorer)

But i put it below again as well.

Place this code at the top of your CSS file. It resets all units to 0 to interrupt any preconfigured defaults various browsers might have.

Then you can set your css to what you want... kind of like ensuring you have a clean slate to start with.

Cheers.

Code:

@charset "utf-8";
/* CSS Document */
/*------------------------------ GLOBAL RESET SETTINGS--------------------------- */

* {
margin: 0; padding: 0;
text-decoration: none;
font-size: 100%;
outline: none;
font-family:Arial, Helvetica, sans-serif;
}

code, kbd, samp, pre, tt, var, textarea, input, select, isindex { 
font: inherit;
font-size: 13px; 
}

dfn, i, cite, var, address, em {
font-style: normal;
}

th, b, strong, h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}

a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet {
border: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

caption, th, td, center {
text-align: left;
vertical-align: top;
}

body {
line-height: 1em;
}

q {
quotes: "" "";
}
ul, ol, dir, menu {
list-style: none;
}

sub, sup {
vertical-align: baseline;
}

a {
color: inherit;
}

/* --------------------------END GLOBAL RESET ------------------*/

kd_jm · 01-28-2008

Thanks a lot for your post. I'll surely read the topic you referred too.
But alas.. I tried it out, and it does have its effect in the exact placement, but the text output itself is still broken in IE6.

agentxi · 01-28-2008

I would specify a width value for whatever your H1 is in... right now it's body and your body tag needs to have a set width: 100%; for it to fit your text.... unless you want the h1 to wrap, then you can specify white-space: wrap;

now you have an issue of the text getting cut off, that is because you specified a line-height: of 1.3em for the body tag, you need one set for your h1 tag, because ie has issues of inheritance...

if you want your 5em text to fit, i would also specify a line-height: 1.3em; to your h1 tag. Now in this case, if you add line-height: 1.3em to your h1 tag, that does mean it is 1.3em like your body tag cuz the scaling rules have changed.

the 1.3em in the body tag will refer to the browser default, which is usually 16px.

but the 1.3em inside the h1 tag will now refer to it's parent which is 5em. lol this is why i hate using em's but yeah...

wow i just reread my post and it might be confusing, to recap,

add body {width: 100%;}

add h1 {line-height: 1.3em;}

kd_jm · 01-29-2008

You're right, it is confusing. But also helpful.
At least my small example showed up ok when adding line-height: 1.3em; to the h1 tag.

There was another issue with my original code: it appears that Opera does not wrap by default; IE6 does wrap by default. Also fixed - by making a div container to the right ofmy text a bit smaller.

Thanks a lot!

About your remark about em: I wasn't even aware of its relativeness. I still have a lot to learn, I guess.