Layout busted in Safari

[slobjones]

This three-column layout is busted in Safari. It's built with a fixed-width container, with three percentage-based columns inside.

http://tinyurl.com/uw8mc

The box-model hack is present to ensure that the columns display correctly in IE.

It works fine in Firefox and IE, but Safari appears to take the layout apart. Since I work on a PC, the only way for me to test the site is with iCapture.

Can anyone provide suggestions on how to make this site work with Safari?

Thanks.

[drhowarddrfine]

You have 333 HTML errors in your code. Once you fix those, then come back.

[slobjones]

Yes, and most of those "errors" are for tags that are supposedly omitted, but are in fact present.

I leave my original request open for anyone who would like to provide actual assistance, as opposed to unwelcome lectures.

[bradvanwick]

Hey,

I'd love to help.

If you posted (or linked to) files containing only the rules for structure, then I could most likely fix it fairly quickly.

I just can't be bothered to dig through all of the "non-problem" code.

[slobjones]

Here's the relevant CSS that defines the site structure. It includes an 800px "content" div that contains a header (topheadline), footer and three columns (navlink, leftcolumn and rightcolumn).

The content displays in the "leftcolumn " div.

#content {
background-color: rgb(237,237,237);
border-left:1px solid #ddd;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
margin:auto;
padding: 1%;
width: 800px;
/* position: absolute; */
/* Start Commented Backslash Hack \*/
* html #content {height: 1%;}
/* Close Commented Backslash Hack */
}

#topheadline {
font: normal normal normal 41px Sans-Serif;
margin: 0% 0% 1% 0%;
padding: 4% 0% 1.5% 1%;
color:#F8F8FF;
width: auto%;
background: rgb(48,48,48);
background-image: url(images/smallerbannerborder.jpg);
background-repeat: no-repeat; 
background-position: right center; 
background-position: 99% 50%;
voice-family: "\"}\"";
voice-family: inherit;
width: auto;
/* Start Commented Backslash Hack \*/
* html #topheadline {height: 1%;}
/* Close Commented Backslash Hack */
}

#navlink {
float: left;
width: 19%;
margin: 0% 0% 3% 0%;
text-align: justify;
voice-family: "\"}\"";
voice-family: inherit;
width: 19%;
/* Start Commented Backslash Hack \*/
* html #navlink {height: 1%;}
/* Close Commented Backslash Hack */
}

#leftcolumn {
background: #F8F8FF;
float: left;
width: 46%;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
margin: 0% 0% 3% 1%;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
width: 45%;
/* Start Commented Backslash Hack \*/
* html #leftcolumn {height: 1%;}
/* Close Commented Backslash Hack */
}

#rightcolumn {
float: left;
width: 32%;
margin: 0% 0% 3% 1%;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
width: 31%;
/* Start Commented Backslash Hack \*/
* html #rightcolumn {height: 1%;}
/* Close Commented Backslash Hack */
}

#footer {
clear: both;
text-align: center;
width: auto;
font-size: 11px; 
voice-family: "\"}\"";
voice-family: inherit;
width: auto;
/* Start Commented Backslash Hack \*/
* html #footer {height: 1%;}
/* Close Commented Backslash Hack */
}

[bradvanwick]

Here's the relevant CSS that defines the site structure. It includes...

Ok great. I took a quick look at it.

You'll want to move all the "Backslash Hacks" outside of the curly braces.

Example:

CSS as it is:

#rightcolumn {
float: left;
width: 32%;
margin: 0% 0% 3% 1%;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
width: 31%;
/* Start Commented Backslash Hack \*/
* html #rightcolumn {height: 1%;}
/* Close Commented Backslash Hack */
}

After the fix:

#rightcolumn {
float: left;
width: 32%;
margin: 0% 0% 3% 1%;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
width: 31%;
}

/* Start Commented Backslash Hack \*/
* html #rightcolumn {height: 1%;}
/* Close Commented Backslash Hack */

This doesn't mean it will look right (I didn't check -- I don't have time tonight). But it does fix the layout problem.

Hope this clears it up. Just reply if it doesn't.

[drhowarddrfine]

Why we won't help you.

[slobjones]

Thanks for the suggestion, Brad. The Commented Backslash Hack is the problem, as I can see by checking the result in iCapture.

It doesn't help matters that at this point, I can't remember why I used the hack. I've killed every instance of it, except in the middle column (the div labeled "leftcolumn ").

Unfortunately, though, when I remove the hack from inside the curly brackets in the leftcolumn div, the layout breaks in IE and Firefox. Again, I don't know why this occurs.

Do you see anything else I can change in this layout to prevent it from breaking?

[bradvanwick]

I won't be able to check it out until after Thanksgiving.

In the meantime, you may want to consider eliminating all hacks from the CSS -- it may not be needed...just a thought.

Happy holidays and I'll follow up on this in two days.

Cheers.

[steven]

I completely agree with drhowarddrfine (nice article by the way).

You can't expect help when your code is a complete shambles. 300+ errors is madness!! Trying to debug that code and find your problem could be a mammoth task, with so many issues that need resolving first. As the article that was posted above states, it's only fair that you should be considerate enough to at least code properly before asking for help. If your code is completely invalid, then of course you will run into problems. Sigh....

[bradvanwick]

This is not a <rant>, but more like a <rave>: Validations really does help everything.

[slobjones]

This is not a <rant>, but more like a <rave>: Validations really does help everything.

I would be happy to validate if the validation procedure gave me anything more than nonsensical "errors" such as missing quote marks, characters and end carats that are in fact there.

I can hardly believe that any of these so-called "errors" have anything to do with the CSS question I posed. It's a matter of making the layout work.

[drhowarddrfine]

CSS makes the layout work. If there are errors in the CSS, it affects the layout.
Just like math. If there are errors in the formula, you don't get the right answer.

Because the validator is a program, it can get fooled by misplaced punctuation and elements and point to the wrong place. However, it means there may be something just before the pointed to location causing the confusion.

You should validate continuously as you are writing the code, to catch the little errors here and there so you don't wind up with hundreds as you do now. Then it's harder to pick through it all as you fix errors one by one; even as fixing one error generates another.

Then, again, sometimes fixing one error, fixes several others. Start with the easy ones. It says you have too many values on a margin. Just scanning through your code I found it in two seconds. But you have many more html errors than css errors.

[slobjones]

Thanks to all for your help. I clearly have tons to learn regarding such esoteric subjects as doctypes and validation and unfortunately, there isn't much clearly written documentation available. (I did follow dhdf's suggestion, found in another thread, to switch to html 4.01 strict).

However, Brad's advice to remove all hacks did the trick. The layout now appears to work in FF 2.0, IE 6 and Safari. I haven't seen it in IE 5 or 7.

[bradvanwick]

Glad to hear that it's working for you.
If this particular layout works in IE6, it should be fine in IE7.
Good luck with your writing and your music.
Cheers.