HTML Forum

**Space Xscape** · 07-18-2007, 08:46 PM

I just added the IE6 Holy hack so my footer doesn't extend to the top of the page. However i am having problems. For some reason it is preventing my heading from appearing. It works with firefox and IE7 and 5.5 but IE6 has problems with my header.

Any Ideas?

Sincerely,

Michael

**frost** · 07-18-2007, 10:30 PM

Site link?

**Space Xscape** · 12:01 AM

Link: http://spacexscape.freepgs.com

Pages Effected:
All with the exception of:

http://spacexscape.freepgs.com/license.php

Which i suspect may have something to do with the fact the other pages are 2/3 page long and the licencing page is 3 pages long.

**Angelosanto** · 09:26 AM

Sorry, Ignore this post, I just typed something stupid

**LadynRed** · 07-19-2007, 03:02 PM

Looks like the Peekaboo Bug, since the heading shows up with a refresh:
http://www.positioniseverything.net/.../peekaboo.html

**Space Xscape** · 07-19-2007, 11:48 PM

How do i fix it?

**LadynRed** · 07-20-2007, 02:49 PM

Uhh.. read the article that I linked you to ??? It DOES list the solution.

**Space Xscape** · 07-20-2007, 07:59 PM

Added the fix and now the headrer still doesn't appear and my footer is messed up again. Here is my CSS:

Code:

html, body {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
font-size: small;
background: #fff
}
/* layout structure */
#wrap {
min-width: 500px;
max-width: 1400px;
background: url(images/wrap-bg.gif) repeat-y 70% 0;
}
/* header */
 
#header {
border-bottom: 3px solid #87B825;
background: #B4E637 url(images/header-bg.gif) repeat-x top left;
}
#header h1 {
margin: 0;
padding: 25px;
font-family: Georgia, serif;
font-size: 150%;
color: #374C0E;
}
/* tagline */
#tagline {
margin: 0;
padding: 10px;
font-size: 90%;
color: #cc9;
text-align: center;
background: #000000 url(images/tagline-bg.gif) repeat-x top left;
}
/* gutters */
#content .gutter {
padding: 25px;
}

#sidebar .gutter {
padding: 15px;
}
/* Content */
#content {
float: left;
width: 70%;
font-size: 95%;
line-height: 1.5em;
color: #333;
}
#content h2 {
margin: 0 0 1em 0;
padding: 0;
font-family: Georgia, serif;
font-size: 150%;
font-weight: normal;
color: #663;
}
/* sidebars */
#sidebar {
float: right;
width:30%
}
.box {
margin: 0 0 20px 0;
padding: 0 0 12px 0;
font-size: 85%;
line-height: 1.5em;
background: #fff;
}
.box h3 {
margin: 0;
padding: 12px;
font-family: Georgia, serif;
font-size: 140%;
font-weight: normal;
color: #693;
}
.box p, .box ul {
margin: 0;
padding: 0 12px;
}
.box ul li {
margin: 0 0 0 12px;
padding: 0 0 0 18px;
}

/* Hide from IE5/Mac \*/
* html .gainlayout #footer {
height: 1%;
}

/* End hide from IE5/Mac */
#footer {
clear: both;
background: #828377;
}
#footer p {
margin: 0;
padding: 15px;
font-size: 85%;
color: #333;
}

Any ideas?

**LadynRed** · 07-20-2007, 08:08 PM

A couple of things:
Use Conditional comments to target versions if IE for bug fixes. This means a separate CSS file that is called by the CC and ONLY contains the 'hacks' you need for IE.

- IE6 doesn't support min-width / max-width (or min/max height either)
- In order to invoke the hasLayout, give the footer and header a fixed height. - and that you put in the separate css file.

**Space Xscape** · 07-23-2007, 08:17 PM

How do i target IE6 conditionally?

**LadynRed** · 07-23-2007, 09:53 PM

Put these in the <head> of your documents along with your other stylesheet links:

Targets all versions below IE7


Targets all versions ABOVE IE 6 (7 now, 8 later etc.)

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!