Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Please help with table appearance in safari

L

lb12345

macrumors newbie
Original poster
Jan 29, 2008
5
0
Hi!

I have a website that looks fine in IE and firefox, but I can't figure out why the background of a nested table in Safari doesn't fill the full table. Below is an abbreviated version of the code. The website is http://buildcambodia.org/ and the problem shows up on the home page in Safari. Any help you can give would be greatly appreciated.

Thanks in advance for your help!
Laurie


code:
<table STYLE="table-layout:fixed" width=900 bgcolor="FFFFCD" cellpadding=0 cellspacing=0>
<COL WIDTH=230><COL WIDTH=100><COL WIDTH=560><COL WIDTH=10>

<tr><td valign="top"> Code for menu is here
</td>

<td style="border-style: solid; border-width: 1.5pt; border-color: 88A343; padding: 20pt" colspan=2 bgcolor="white">

<table STYLE="table-layout:fixed" width=660 cellpadding=8 cellspacing=0>
<COL WIDTH=420><COL WIDTH=240>

This is where my content is.

</table>
</td>

<td></td>
</tr>

</table>
 
probably because the code is not great.

First off, enclose your code in
Code: 
 tags.

Secondly.  You don't use double quotes where you should be using them, e.g. width="600"

You need "#" before hex colors in CSS.

The site layout is not complicated. If you built it to standards, it'd be much easier to solve such a problem.

Why do you have "table-layout: fixed"?
 
Your nested table is supposed to have two columns (based on the COL tags) but "This is where my content is." isn't inside any TD tags. Maybe start there?

It might be a good idea to run your pages through the W3C HTML Validator.
 
jng said:
probably because the code is not great.

First off, enclose your code in
Code: 
 tags.

Secondly.  You don't use double quotes where you should be using them, e.g. width="600"

You need "#" before hex colors in CSS.

The site layout is not complicated. If you built it to standards, it'd be much easier to solve such a problem.

Why do you have "table-layout: fixed"?[/QUOTE]

I'll try putting things in quotes to see if that helps.  As you can see, I am an amatuer coder.  I have my table layout fixed because I want fixed widths for my columns.  This code works fine in other browsers, but just not safari. My text is the right width, but the background colors don't match up.

Thanks for any other advice.
Click to expand...
 
dejo said:
Your nested table is supposed to have two columns (based on the COL tags) but "This is where my content is." isn't inside any TD tags. Maybe start there?

It might be a good idea to run your pages through the W3C HTML Validator.
Click to expand...

I took out the text of my code to show a simplified version, but here is the full version. There are 2 <td> tags in there.

<html>
<head>
<title>BuildCambodia.org | About Cambodia</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="bc.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="oodomimagerollover.js">

/***********************************************
* DOM Image Rollover II- By Adam Smith (http://www.codevendor.com)
* Script featured on and available at Dynamic Drive (http://www.dynamicdrive.com)
* Keep this notice intact for usage please
***********************************************/

</script>
</head>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1356753-1";
urchinTracker();
</script>

<body bgcolor="4E2D0C">

<table STYLE="table-layout:fixed" width=900 bgcolor="FFFFCD" cellpadding=0 cellspacing=0>
<COL WIDTH=230><COL WIDTH=100><COL WIDTH=560><COL WIDTH=10>

<tr HEIGHT=5 bgcolor="753F00"><td colspan=4></td></tr>

<tr HEIGHT=10 bgcolor="FFFFCD"><td colspan=4></td></tr>

<tr><td valign="top">
<a href="index.html"><img src="images/logo.jpg" border="0"></img></a><br><br>

<a href="index.html"><img src="images/buildcambodia.jpg" srcover="images/buildcambodia_roll.jpg" border="0"></img></a>

<a href="cambodia.html"><img src="images/cambodia_focus.jpg" srcover="images/cambodia_roll.jpg" border="0"></img></a>

<a href="helping.html"><img src="images/helping.jpg" srcover="images/helping_roll.jpg" border="0"></img></a>

<a href="trips.html"><img src="images/trips.jpg" srcover="images/trips_roll.jpg" border="0"></img></a>

<a href="participants.html"><img src="images/participants.jpg" srcover="images/participants_roll.jpg" border="0"></img></a>

<a href="friends.html"><img src="images/friends.jpg" srcover="images/friends_roll.jpg" border="0"></img></a>

<a href="events.html"><img src="images/events.jpg" srcover="images/events_roll.jpg" border="0"></img></a>

<a href="reports.html"><img src="images/reports.jpg" srcover="images/reports_roll.jpg" border="0"></img></a>

<a href="contact.html"><img src="images/contact.jpg" srcover="images/contact_roll.jpg" border="0"></img></a>
</td>


<td style="border-style: solid; border-width: 1.5pt; border-color: 88A343; padding: 20pt" colspan=2 bgcolor="white">

<table STYLE="table-layout:fixed" width=660 cellpadding=8 cellspacing=0>
<COL WIDTH=420><COL WIDTH=240>
<tr>
<td colspan=2><img src="images/cambodia_head.jpg"></img><br>
<img border="0" src="images/map.jpg">
</tr>
<tr>
<td>
<div class="main">
<p>Cambodia is a country of 12 million people located in the heart of Southeast Asia, sandwiched between a powerful Vietnam and a prosperous Thailand. Today it is a peaceful country however, in the late 1970s Cambodia was the site of one of the world's most destructive episodes of genocide. This quiet Kingdom was destabilized by the fighting in neighboring Vietnam in the late 1960s, leading to the emergence of the ruthless Khmer Rouge in 1975. In the following three years the Khmer Rouge caused the death of nearly two million Cambodians through torture, execution, forced starvation and disease. It took twenty-years and a major United Nations peace effort for the country to return to some semblance of stability. Having lost the most educated and capable citizens to genocide, Cambodia remains the poorest nation in Southeast Asia, and is handicapped by a lack of the human capacity required to function as a civil society.</p>
</div>

<hr noshade size="1" color="753F00"><br>

<div class="main">
<p><h3>Cambodia Today</h3>

To an average tourist Cambodia is a peaceful, but undeveloped country with pleasant people, comfortable accommodations and majestic ancient temples. Beneath this veneer is a society plagued by debilitating poverty, malnutrition, diseases long banished elsewhere in the world, sex trafficking, the highest HIV/AIDS infection rate in Asia, and widespread corruption. Cambodians struggle for survival every day against seemingly insurmountable odds.<br><br>

While the government has failed to meet the needs of the people and the international community has long since forgotten the "crisis in Cambodia," a few individuals, both Cambodians and foreigners have stepped forward to initiate projects, both large and small, that are starting to make the difference between life and death and hope and despair for Cambodians. They are Building Cambodia one life at a time.</p>
</div>

<hr noshade size="1" color="753F00"><br>

<div class="main">
<p><h3>Recommended Reading</h3>
<a href="http://www.amazon.com/Cambodia-Report-Stricken-Henry-Kamm/dp/1559705078/">Cambodia: A Report From a Stricken Land by Henry Kamm</a><br><br>
<a href="http://www.amazon.com/When-War-Was-over-Revolution/dp/1891620002/">When the War Was Over: Cambodia and the Khmer Rouge Revolution by Elizabeth Becker</a><br><br>
<a href="http://www.amazon.com/Sideshow-Revised-Kissinger-Destruction-Cambodia/dp/081541224X/">Sideshow: Kissinger, Nixon, and the Destruction of Cambodia by William Shawcross</a><br><br>
<a href="http://www.amazon.com/When-Broken-Glass-Floats-Growing/dp/0393322106/">When Broken Glass Floats: Growing Up Under the Khmer Rouge by Chanrithy Him</a><br><br>
<a href="http://www.amazon.com/First-They-Killed-Father-Remembers/dp/0060856262/">First They Killed My Father: A Daughter of Cambodia Remembers by Loung Ung</a><br><br>
<a href="http://www.amazon.com/Gate-Francois-Bizot/dp/0099449196/">The Gate by Francois Bizot</a><br><br>
<a href="http://www.amazon.com/Pol-Pot-Nightmare-Philip-Short/dp/0805080066/">Pol Pot: Anatomy of a Nightmare by Philip Short</a></p>
</div>

<hr noshade size="1" color="753F00"><br>

<div class="main">
<p><h3>Recommended Films</h3>
<a href="http://movies.nytimes.com/movie/27323/The-Killing-Fields/overview">The Killing Fields</a><br><br>
<a href="http://movies.nytimes.com/movie/287997/S21-The-Khmer-Rouge-Killing-Machine/overview">S21 The Khmer Rouge Killing Machine</a><br><br>
<a href="http://www.newyearbaby.net/">New Year Baby</a><br><br>
<a href="http://movies.nytimes.com/movie/134203/Rice-People/overview">Rice People</a></p>
</div>

</td>

<td valign="top" style="padding-right: 20pt" width=240><hr noshade size="1" color="88A343" width=100%>
<span class="foot">
<i><b>Learn more about Cambodia</b></i><br><br>
<a href="http://groups.google.com/group/camnews">CAMNEWS</a><br><br>
<a href="https://www.cia.gov/library/publications/the-world-factbook/geos/cb.html">CIA World Factbook</a><br><br>
<a href="http://news.bbc.co.uk/1/hi/world/asia-pacific/country_profiles/1243892.stm">BBC News Country Profile</a><br><br>
<a href="http://www.cambodiadaily.com/">The Cambodian Daily</a><br><br>
<a href="http://www.cambodian-association.org/">Cambodian Association of Illinois</a><br><br>
<a href="http://tonlesap.typepad.com/cambochicago/">Cambodia in Chicago</a><br>
</span>
</td>
</tr>

</table>


</td>

<td></td>

</tr>

<tr HEIGHT=10 bgcolor="FFFFCD"><td colspan=4></td></tr>

<tr HEIGHT=14 bgcolor="753F00" class="tail">
<td></td>
<td colspan=2>
<table STYLE="table-layout:fixed" width=660 cellpadding=0 cellspacing=0><tr>
<td><h5><a href="index.html"> Home</a> | <a href="contact.html">Contact Us</a></h5></td>
<td align="right"><h5>Copyright © 2007. Last updated August 27, 2007</h5></td>
</tr></table>
</td>
<td></td>
</tr>

</table>

</body>
</html>
 
There could be some quirky-ness being caused by invalid HTML. Run a validator on the page to find the problems such as not using a closing tag on images (there's no </img>), and you have a part with width=100%> and not having the 100% quoted can cause problems because %> can have other meanings on its own.

Safari tends to be less forgiving with invalid code, which I consider to be a good thing because it motivates people to write valid code. I know you said you're new, but now is the time to learn. Browsers can't be blamed for not displaying invalid code the way you want, even if other browsers look fine.
 
Try replacing
<td style="border-style: solid; border-width: 1.5pt; border-color: 88A343; padding: 20pt" colspan=2 bgcolor="white">

<table STYLE="table-layout:fixed" width=660 cellpadding=8 cellspacing=0>
Click to expand...
with
<td colspan=2>

<table STYLE="table-layout:fixed; border-style: solid; border-width: 1.5pt; border-color: 88A343; padding: 20pt" width=660 cellpadding=8 cellspacing=0 bgcolor="white">
Click to expand...
Seems Safari doesn't like applying the style and bgcolor to the second column of the colspan=2.

Also, as others seconded, and I'll say it again: run your HTML through the W3C Validator. There is a bunch of other invalidities in the file, including no character-encoding, no DOC-TYPE....
 
Thanks to everyone for your help. I am going through the process of cleaning up my code and putting in doc-types. Lots of dotting i's and crossing t's, but it probably long overdue.

Unfortunately, it still doesn't fix my table appearance. Dejo, I really appreciate your suggestion. If I put the style elements in my nested table, it fixes the appearance in safari, but screws up the parent table in Firefox and IE for some reason. Is there some standardized method for putting style elements in tables that I'm missing?

Thanks for bearing with me,
Laurie
 
The best standard method for ensuring cross-browser rendering is, in my opinion, to switch to XHTML strict, and learn how to use CSS to stylize your HTML working with div's and span's, and only using tables for tabular data.

This forces you to do it right, believe me.

Aside from that, I think you should re-post the validated code so we can take a look at it that way.

-jim
 
Thanks to everyone for your help. I combed through my code and got it all up to speed and validated. My table now stretches the entire width of the screen in Safari, but it looks much better and I'm inclined to leave good enough alone.

Thanks again!
Laurie
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back