Can you Help a Girl Out?

[camijona]

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]

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

-magicyte

[camijona]

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]

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]

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]

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 (http://validator.w3.org/check?uri=http%3a%2f%2fcamilla.cravserv.com%2f). There are also some resources on IE's common issues with CSS (http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml). 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 (http://www.quirksmode.org/css/condcom.html) rather than the various CSS hacks presented there.

[camijona]

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

Cammie

[Medyman]

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.


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


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

[camijona]

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]

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>)



<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>

[Medyman]

FYI...

It's not recommended that you rewrite all of the styles in your IE6 specific stylesheet. Rather, you should only write the styles which are different from your default stylesheet.

I'm not convinced that an IE6-specific stylesheet is even required in this situation, however.

[TheJoshMan]

@medyman:

If you had read my post in it's entirety, you would have seen that I forewarned her that this was not the "optimal" idea. However, I goofed and forgot exactly which things I had edited to get the desired outcome.

I know that IE 6 was showing padding and margin differently than the others (as usual), but there were a few other things that had to be tweaked in order for things to line up correctly. This is the ONLY reason I just placed EVERYTHING inside of the conditional statement, otherwise I would have only placed the items needed (if I had remembered what they were)

[camijona]

Thank you to all of you for your help. I put the changes to the css code into a new CSS doc and named it mainstyleie6.css and then called it in the conditional statement. It worked great. I had to make another conditional one for the calendar. It was still looking a little buggy. I think it still has a little bugginess to it, but the waves line up and that's what matters to me most.

I was able to look at the changes that were made and I learned a lot from that. I just had no idea where to even begin. I had read about how you could put conditional statements in to get things to work with IE6 and before, but that was about all I knew.

I can't wait to get this over to the school. Thanks again!!

Cammie

[TheJoshMan]

no problem, but keep in mind as I and medyman both pointed out... This is not the optimal/preferred method of using conditional statements to fix IE6.

The only reason that I posted it as a completely separate stylesheet is because I couldn't remember specifically which elements I had to edit to fix it.

[Twey]

diff (http://linux.die.net/man/1/diff)(1) loves you.