HTML/CSS Help Needed: My Site Is Broken In Safari

[hdtvrev]

Hi everyone

Been Googling for a web development forum for Mac users, and stumbled upon this excellent one... quite a thriving community here.

I wrote the HTML/CSS codes for my website, which look ok in IE6/ Firefox, but somehow with Safari it's all messed up. The problem seems to be with table rendering... there seems to be too much white space making the cells exceeding the container border.

For example: have a look at http://www.hdtvtest.co.uk/Sharp-LC46XD1E/Calibration.php , with Safari the graphs and tables are just not in place, but it's fine with Firefox.

I've been tearing my hair out trying to solve this (validated the CSS and HTML), but to no avail. Could anyone give me a clue as to what potentially could be causing this? I can paste my CSS file here if that's needed.

Many thanks in advance for your help.

Warmest regards
Vincent

 

[a cat *miaow*]

Hi, if you take a look at the table 'Torture Test Scorecard' there's a style to make the TD a minimum width of 680x
"
http://www.hdtvtest.co.uk/hdtv1.css

td (line 7)

{

font-family: Arial,Helvetica,sans-serif;

min-width: 680px;

}"

I would have thought that would be causing problems in other browsers too..
but it looks like this table is being made really wide and the other table elements are just stretching to the same boundary as it

 

[hdtvrev]

Thank you thank you thank you thank you thank you!!!!! Removing that line did the trick.

One small question remains though... I wonder why my footer is still flushed to the left? I've tried using <div align="center"> , <table align="center"> , and "margin: 0px auto;" commands in HTML/CSS to try and centre it without success in Safari, but in IE/ Firefox it renders correctly.

Thanks again.

 

[elppa]

Change footer from

#footer{
	width=550px;

to

#footer{
	width: 550px;

It's OK to blame browser manufacturers when they have stuffed up, but in this case it is not a problem with Safari at all.

Maybe FF and IE are more forgiving to syntax errors like these, but in Safari's eyes: width = 550px is not valid CSS syntax, so it has moved on to the next line.

if you're working from a Mac, Try using a specialised tool such as CSSEdit 2.5 for picking up little mistakes like these. it also has validation built in. You can also use the W3C's validation service.

Here are the results for your site.

Along with the error with the footer, you can see straight away that you have a number of property names beginning with an underscore (_), which should be removed, a hex colour value (6E6E6E) that is not preceded by a hash (#) and another misspelled property (verticle-align instead of vertical-align).

I would fix all of these as soon as you can to ensure maximum compatibility with the widest number of devices.

 

[pengu]

Along with the error with the footer, you can see straight away that you have a number of property names beginning with an underscore (_), which should be removed

while there are better ways (such as specific CSS targeted using conditional comments) putting an underscore in front of a CSS property name is a common way of making IE do different things to more compliant browsers, usually to fix issues.

 

[elppa]

while there are better ways (such as specific CSS targeted using conditional comments) putting an underscore in front of a CSS property name is a common way of making IE do different things to more compliant browsers, usually to fix issues.

Sorry, I was unaware of this.

I do know the IE team recommend conditional comments, which is a sensible solution.

 

[hdtvrev]

Hi elppa

Thanks for the suggestion. I've corrected the width property in CSS but the problem persists (footer still flushed left).

Pengu hit it on the nail: as my knowledge of CSS is really limited, I grabbed the first code I could find for IE-specific design, which happens to be the underscore hack. However, even after validating the HTML & CSS errors (I've since reverted back to the original) the footer is still not centred.

Warmest regards
Vincent

 

[pengu]

i imagine the problem is because the #footer element is told to be 100%, and (from what i can tell) its parent is #content which has a width of 720pixels, and you've set the table to 540pixels.

simple solution is to remove the <div align="center"> around the table and add this definition to your css:

#footer table
{
margin: 0 auto 0 auto;
width: 540px;
}

 

[elppa]

Hi elppa

Thanks for the suggestion. I've corrected the width property in CSS but the problem persists (footer still flushed left).

Pengu hit it on the nail: as my knowledge of CSS is really limited, I grabbed the first code I could find for IE-specific design, which happens to be the underscore hack. However, even after validating the HTML & CSS errors (I've since reverted back to the original) the footer is still not centred.

Warmest regards
Vincent

With all respect, this will fix the problem (at least in Safari 3 Beta), as I carried out the changes and it centred the footer.

Maybe the old Style Sheet was cached and when you refreshed the old one (without the changes) was still applied.

 

[hdtvrev]

Hi pengu

Tried your suggestion but it didn't work.

@elppa: Strange, I have uploaded a validated copy of the page, refreshed my cache but the footer's still flushed left. Is it because I'm using Safari 3.0.2?

Warmest regards
Vincent

 

[angelwatt]

Centering footer fix

For centering the footer add the following style:

#footer table {
margin: 0 auto;
}

I tried it out in Firefox and worked like a charm.