Can you Help a Girl Out?

**camijona** · 09-12-2008, 02:36 AM

So I woke up one day and decided I wanted to learn CSS. I used my old school's site that I designed a few years ago and decided I would take it and revamp it for them a bit using CSS and JS and just have some fun and then give it to them as a little gift. I made the noob mistake of not checking it in all the browsers. I tested it in IE7, Firefox, Opera and Safari. Noob me, I didn't check IE6. I went to drop off the files today and found out, OMG, it doesn't work AT ALL in IE6.

Being the noob that I am, I kinda think I've sort of figured out why it's not working, but I have absolutely no idea how to fix it. You can take a look at the site at http://camilla.cravserv.com. If you need to see the code for any of the style sheets, just let me know.

THANKS!!!

Cammie

**magicyte** · 09-12-2008, 02:39 AM

Well, why do you think it isn't working??
I may know how to fix it.

-magicyte

**camijona** · 09-12-2008, 02:43 AM

Well, when I open it up in IE6, the header does not show up at all, the footer is only showing a tiny bit and there is a weird margin on the left. It looks fine in all the other browsers.

**magicyte** · 09-12-2008, 02:49 AM

This is w/ CSS, right? If it is, IE6 (as known to many programmers) does not support certain types of CSS code (which really stinks). Sadly, your CSS won't work with IE6. You may just have to provide a link that allows early users of IE6 to download IE7. That should work. But just reverting the CSS code to fit the IE6 browser is not feasible. But I am just saying that it MAY be CSS problems (I really do (as would other programmers) think it is a CSS problem). Sorry for the inconvenience, but you should provide a link to download IE7. Hope I helped.

-magicyte

P.S. If I did, please click the RED Thank user who made this post link.

**camijona** · 09-12-2008, 03:10 PM

Thanks magicyte. I was hoping for a different answer. I was sure there would be some magic hack that only master programmers would know.

**Twey** · 09-12-2008, 04:23 PM

It is almost certainly possible to make it work in IE6. I would debug it for you, if I had a copy of IE available in which to test. A good start might be to make it validate. There are also some resources on IE's common issues with CSS. While the list of problems on this site could be useful, and the solutions about right, you should use a separate IE stylesheet whose <link> is wrapped in conditional comments rather than the various CSS hacks presented there.

**camijona** · 09-12-2008, 04:38 PM

Thanks Twey. I will check those resources out tonight and this weekend and see if I can figure something out.

Cammie

**Medyman** · 09-12-2008, 05:00 PM

Hi Cammie...

What Twey says is certainly correct. Your page can certainly be made to work in IE6. IE6 doesn't have the level of CSS support that most of us would like. But, it certainly isn't prohibitive in accomplishing most things. Magictye's suggestion is a last ditch effort for lazy programmers. I can think of no instance when a webpage can't be made to work in IE6.

You're not using any unsupported CSS modules, so it's just a matter of dealing w/ IE's intricacies.

Twey linked you to some useful resources. They should get you in the right direction. I had a quick look at your CSS and can offer the following advice:

You're using a min-height style decleration for the header and footer. In IE, you also need to explicitly set a height.

Code:

div#header{
	position:relative;
	min-height:170px;
	height:170px;
	background-image:url(http://camilla.cravserv.com/images/topheader.jpg);
}

Code:

div#footer{
	background-image:url(http://camilla.cravserv.com/images/footerbanner.jpg);
	color: #005826;
	min-height:60px;
	height:60px;
	clear:left;
	width:100%;
}

**camijona** · 09-14-2008, 01:14 AM

Medyman,

I got my header and footer to show with those suggestions...thank you, thank you.

Just another little problem....now that my header is showing, it's not matching up with the middle section. The weird margin that I mentioned above on the left, is showing up on the right for the header. It wouldn't be a big deal really except that the waves kinda need to match up in order for it to look right.

Thanks again you all for your help. I really do appreciate it.

Cammie

**TheJoshMan** · 09-14-2008, 08:49 AM

Well, I was able to fix it... However, I adjusted so many different things in the process... I can't remember what all I edited. So, rather than me giving you a short list of things to change... Here is your new stylesheet for IE6.

You will have to use this with a "conditional statement" in your html. I will post it as one. (has to be in the head of your page between <head> and </head>)

Code:

<head>
<!--[if IE 6]>
<style type='text/css">
/* CSS Document */

div#container {
	width:950px;
	margin:0 auto;
	border-style:ridge;
	border-color:#DFE000;
	background-color:#DFE000;
	}

div#header{
	position:relative;
	min-height:170px;
	height:170px;
	background-image:url('../images/topheader.jpg');
	width:950px;
	}

div#navigation{
	background-image:url('../images/leftcolumn.jpg');
	background-repeat:repeat-y;
	float:left;
	width:240px;
	margin-left:-961px;
	padding-left:2px;
	padding-bottom:15px;
	min-height:400px;
	height:400px;
	}

div#extra{
	background-image:url('../images/rightcolumn.jpg');
	background-repeat:repeat-y;
	text-align:right;
	float:left;
	width:229px;
	margin-left:-230px;
	padding-bottom:15px;
	min-height:400px;
	height:400px;
	}

div#footer{
	background-image:url('../images/footerbanner.jpg');
	color: #005826;
	min-height:60px;
	height:60px;
	clear:left;
	width:100%;
	}

div#wrapper{
	float:left;
	width:950px;
	}

div#content{
	padding-top:10px;
	margin: 0 240px;
	width:471px;
	min-height:400px;
	height:400px;
	}

div#smallcontenta{
	width:100px;
	height:300px;
	background-color:#DFE000;
	font-family:Tahoma, Helvetica, Arial;
	font-size:12px;
	margin-left:10px;
	color:#32004B;
	padding-top:15px;
	}
	
div#smallcontentb{
	width:100px;
	background-color:#DFE000;
	font-family:Tahoma, Helvetica, Arial;
	font-size:12px;
	margin-left:-349px;
	color:#32004B;
	padding-top:50px;
		}
		
div#table{
	table-layout:fixed;
	width:450px;
	border:solid;
	border-color:#32004B;
	border-width:medium;	
	}

div#table2{
	table-layout:fixed;
	width:410px;
	border:solid;
	border-color:#32004B;
	border-width:medium;	
	}

div#cellleft{
	height:24px;
	width:195px;
	border:solid;
	border-color:#32004B;
	border-width:thin;
	font-family:Tahoma, Helvetica, Arial;
	}
	
div#cellmiddle{
	height:24px;
	width:195px;
	border:solid;
	border-color:#32004B;
	border-width:thin;
	font-family:Tahoma, Helvetica, Arial;
	}

div#cellright{
	height:24px;
	width:35px;
	border:solid;
	border-color:#32004B;
	border-width:thin;
	font-family:Tahoma, Helvetica, Arial;
	text-align:center;
	}

body{
	background-image:url('../images/background.jpg');
	background-repeat:repeat;
	}
	
h1{
	color:#32004B;
	font-family:Tahoma, Helvetica, Arial;
	font-size:175%;
	font-weight:bolder;
	margin-left:10px;
	text-decoration:underline;
	}
	
h2{
	color:#32004B;
	font-family:Tahoma, Helvetica, Arial;
	font-size:125%;
	font-weight:bolder;
	margin-left:10px;
	}
	
h3{
	color:#32004B;
	font-family:Tahoma, Helvetica, Arial;
	font-size:105%;
	font-weight:bolder;
	margin-left:10px;
	}

h4{
	color:#32004B;
	font-family:Tahoma, Helvetica, Arial;
	font-size:12px;
	text-align:right;
	margin-left:60px;
	}
	
p{
	color:#32004B;
	font-family:Tahoma, Helvetica, Arial;
	font-size:14px;
	margin-left:10px;
	text-align:left;
	}
	
ul.square {
	list-style-type:square;
	color:#34004B;
	font-family:Tahoma, Helvetica, Arial;
	font-size:14px;
	}

ul.circle {
	list-style-type:circle;
	color:#34004B;
	font-family:Tahoma, Helvetica, Arial;
	font-size:12px;
	font-style:italic
	}

table.one {
	table-layout:fixed;
	border:thin;
	border-color:#DFE000;
	width:150px;
	padding-left:10px;
	}
</style>
<![endif]-->
</head>