css header text problems in ie

header text displays differently in ie

[silentnetnz]

hi,ie is really annoying me why anyone still uses it i will never no but i need this to work for the poor souls who do.
When you load <my site> in ff and ie you will see my little problem. Basically the header text that reads 'upload,download,share,noworries is not displaying properly in ie (I am using the latest version) but it displays fine in ff. I wrote a css style sheet that ie is supposed to use but when i change the header hight it still dosn't move? I hope someone can help otherwise i might have to start from scratch because I need to get it working in both browsers.
this is the code for my ie style sheet:

.two_column #side {
width: 260px;
}

.one_column #content {
width: 720px;
}

#header h1 {
height: 0px;
}

And this is the code for the main style sheet:

/* General
-------------------------------------------------------*/

body {
background: url("../images/back.gif") 0 0 fixed;
font-family: Verdana, Arial, Sans-serif;
text-align: center;
margin: 0;
padding: 0;
font-size: 11px;
}

p {
line-height: 1.7em;
text-align: justify;
margin-bottom: 16px;
}

a:link,
a:visited {
text-decoration: none;
color: #570bc0;
}

a:active,
a:hover {
border-bottom: 1px solid #3b866b;
}

a img {
border: none;
}

h1,
h2,
h3 {
padding: 4px 0;
margin: 4px 0;
}

h1 {
color: #3d055a;
font-family: Tahoma, Verdana, Sans-serif;
border-bottom: solid 1px #B8E600;
font-weight: normal;
font-size: 1.7em;
letter-spacing: 0.08em;
clear: both;
}

h2 {
color: #045439;
font-weight: normal;
font-size: 1.5em;
border-bottom: 1px dotted #d6f1e8;
}

h3 {
color: #147794;
font-weight: normal;
font-size: 1.4em;
}

.print_only {
display: none;
}

/* Layout
-------------------------------------------------------*/

#wrapper {
background: url("../images/back_top.gif") 0 0 repeat-x fixed;
text-align: center;
width: 100%;
}

#main {
width: 740px;
padding: 20px 0;
margin: 0 auto;
}

#footer,
#sub_nav,
#top_nav {
margin-bottom: 1px;
text-align: left;
padding: 4px 16px;
color: #790;
}

#top_nav {
background: #CF0;
font-size: 1.4em;
}

#footer,
#sub_nav {
background: #E2FF70;
font-size: 1.2em;
padding: 5px 16px;
}

#top_nav a:link,
#top_nav a:visited {
color: #360;
}

#top_nav a:hover,
#top_nav a:active {
color: #000;
}

#sub_nav a:link,
#sub_nav a:visited {
color: #360;
}

#top_nav a:hover,
#top_nav a:active,
#sub_nav a:hover,
#sub_nav a:active {
color: #000;
border-bottom: 5px solid #3b866b
}

#header {
background: white url("../images/header1.jpg") no-repeat right top;
height: 69px;
text-align: left;
padding: 0 12px;
margin-bottom: 3px;
}

#header h1 {
margin: 0;
padding: 20px 0 0 0;
overflow: hidden;
background: no-repeat url("../images/logo.gif") 0 20px;
border: none;
height: 0;
}

#page {
background: white top repeat-x url("../images/content_bg.gif");
padding-top: 10px;
text-align: left;
}

#content {
padding-left: 16px;
float: left;
padding-top: 12px;
}

#content a:active,
#content a:hover {
color: #7009fd;
}

#side {
float: right;
background: #f3f8f4 url("../images/side_back.gif") top repeat-x;
padding: 16px;
color: #4d6b6c;
border-top: white solid 1px;
}

#footer {
font-size: 0.8em;
border-top: 1px solid #164579;
padding: 4px 16px;
clear: both;
}

#footer a:link,
#footer a:visited {
color: #389015;
}

/* One COlumn
-------------------------------------------------------*/

.one_column #content {
width: 708px;
float: none;
}

.one_column #side {
display: none;
}

/* Two Colums
-------------------------------------------------------*/

.two_column #content {
width: 460px;
}

.two_column #side {
width: 216px;
}

/* Side Menu
-------------------------------------------------------*/

.menu {
margin: 0 -16px;
padding: 0;
list-style: none;
border-top: 1px solid white;
display: block;
}

.menu ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}

.menu li {
margin: 0;
padding: 0;
border: none;
display: block;
}

.menu li a:link,
.menu li a:visited {
display: block;
padding : 8px 16px;
margin: 0;
color: #080;
font-weight: bold;
background: #D5ECF1;
border-bottom: 1px white solid! important;
letter-spacing: 0.12em;
font-size: 1.2em;
}

* html .menu a,
* html .menu li {
height: 1px; /* Holly Hack stops random padding. Seems to be OK in IE7 as well */
}

.menu li li a:link,
.menu li li a:visited {
background: #EFF5F6;
color: #040;
font-weight: normal;
letter-spacing: 0.04em;
font-size: 1em;
}

.menu a:link,
.menu a:visited,
.menu a:hover {
text-decoration:none! important;
}

.menu li li a:hover {
background-color: #E2FF70!important;
}

/* Extras
-------------------------------------------------------*/

.side_decor {
margin: 12px 16px 12px 0;
float: left;
}

/* Column clearing
-------------------------------------------------------*/

#page:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#page {
display: table; /* Was inline-table in original tutorial, changed due validation error */
}

/* Hides from IE-mac \*/
html #page {
height: 1%;
}

#page {
display: block;
}
/* End hide from IE-mac */

[edited by: encyclo at 6:14 pm (utc) on Jan. 3, 2007]
[edit reason] no links to personal sites please, see forum charter [/edit]

[penders]

...but when i change the header hight it still dosn't move?

But... I notice in your HTML source (the URL hasn't been removed yet), that you have an inline style (height) set on the H1 element which will override any style set in your stylesheet. Perhaps move the 'width' to your stylesheet also.

<div id="header"> 
<h1 style="WIDTH: 714px; HEIGHT: 85px"> 
<p><em>Upload, Download,  
Share, Noworries!  
</em> 
<p><em></em> 
<p></p> 
 </h1> 
</div>

You also have some superfluous mark-up... <em></em><p></p> which should be gotten rid of - it can only space things out a bit. And the two preceeding <p> tags (NB: no closing </p> tag) should be removed also (you will need to adjust the padding) - this *could* cause your spacing problems. Maybe even remove the surrounding <em>..</em> as well and move the styling to the CSS. Since you don't really need to 'emphasis' an H1 tag - you just want it italic I guess? I would vertically centre the text using just padding or line-height in the CSS.

Hope that helps.

[silentnetnz]

ok thanks for the help penders. I deleted all of the useless <em></em> code but my page still display exactly the same in ff and ie so no change.
I have got an if statement for internet explorer in my html script which is like this:
<!--[if IE 5]>
<link rel="stylesheet" media="screen, projection" type="text/css" href="./stylesheets/ie5.css" />
<![endif]-->
Then i have the relevatant ie5.css in the stylesheets folder, but i realised that when i change the px values (like for the header hieght) in ie5.css there is no change. Could it be that i need to create if statements and separate .css files for every version of ie for it too work, for example if IE 5,if IE 5.5,if IE 6,if IE 7. Or does the if IE 5 statement work in all versions of ie above version 5? I am using version 7 u see so thats what makes me think why the IE5.css dosn't work for me.

[penders]

<!--[if IE 5]>

Yeah, as you've possibly guessed... this targets IE Version 5 only (not V5.5 or 6 or 7 etc.). If you want to target all versions of IE greater than or equal to version 5 then you need to:

<!--[if gte IE 5]>

So long as IE8 doesn't come out for a fair while (which fixes the workarounds you are having to peform for lesser browsers), then you should be safe for a bit (several years probably)...!

Or you could simply do...

<!--[if IE ]>

to target all versions of IE, but that maybe a tad too risky!?

For a great article on conditional comments, check out...
[quirksmode.org...]

[silentnetnz]

woooohoooo! Its fixed now so the header looks great in ff and ie.
I didn't know about the 'gte' code but that explains why it wans't working for me. So i just added that into my html code then I had to add a line of code in the ie5.css file to make that line of text in the header to display how i want it to in ie:-
#header h1 {
added this line-->padding: 40px 0 0 0;
height: 51px;

the padding code above for ff is this padding: 20px 0 0 0;
so ie is 20px out for some reason. All that trouble for 20px :/
anyway its all fixed now so im happy. All I need to do now is add the 'gte' code into all the other pages for this site and upload. Thanks very, very much penders for the time and effort you put in to help me. Very much appreciated! :D

[penders]

On the face of it, it's not clear why IE6+ and FF would be different in this respect (IE5 yes - traditional box model), but as I remember you were using what seemed to be a valid DOCTYPE, so the two should be using the same box model. Default padding/margins on another element/style perhaps?! Anyway, no worries, glad you got it sorted! :)

[cmarshall]

hi,ie is really annoying me why anyone still uses it i will never no but i need this to work for the poor souls who do.

I completely sympathize, but have had to accept the fact that, according to my usage stats, IE makes up about 75% of my visitors. That's a lot of poor souls.

IE is a nasty, 800-lb gorilla that doesn't play well with others, but it is, nonetheless, an 800-lb gorilla, and I need to make it work for IE, even if it is ridiculously inconsistent and standards-disrespectful.

I have found that I seldom need to put in special code for IE, but I definitely need to test against it, and play with my CSS to come up with solutions that work for all browsers.