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