[thelist] CSS issues in Safari

[Barney Carroll]

Hey Nan,
Personally I find that tables are more trouble than they're worth and
despite what everyone says about them being simpler layout containers than
divs, I find they need a lot more code and weird specifications in markup
and style to make them behave just right.

If you get turn the table into a div, remove the row tags and replace your
table cell tags with divs (while keeping the class names), you can use the
following code to straighten everything out:

div.ourpeopletable div.ourpeopletable {
  clear: both;
  float: left;
  overflow: hidden;
  padding: 0 0 15px;
  width: 100%;
}

Example up here:
http://barneycarroll.com/nan.html


Regards,
Barney Carroll
Web designer & front-end developer

w: www.clickwork.net

t: +44 (0) 7594 506 381


2009/3/23 Nan Harbison <nan at nanharbison.com>

> Hi All,
>
> I have a webpage that lists the people that work in an organization, with
> photos, the name of the person and a blurb about them. The photos are all
> exactly the same size, although the blurbs are different lengths. I am
> using
> conditional CSS so it displays fine in FF and IE 6 and &, but in Safari,
> some of the photos are too close together, especially the second and third
> photo and the client I am doing this for is RIDICULOUSLY picky about stuff,
> so she wants the page to display properly in Safari as well as the rest. I
> don't have an answer for her! She is like a dog with a bone. Does anyone
> have suggestions for how this could be fixed, or a way of telling her that
> this is as good as it gets with web browsers (maybe that is wrong?).
> Usually FF and Safari display pages pretty much the same, but not in this
> case. BTW, the page validates, I just validated it and fixed stuff because
> I
> knew someone would remind me to do that!
>
> I resorted to putting this page in a table because there were fewer
> problems
> in the fight between displaying correctly in FF and IE.
> Here is the page:
> http://projecthealthychildren.org/our-people.php
>
> The pertinent CSS:
>
> .phcpeople {
>  padding-right:6px;
>  padding-bottom:6px;
> }
> em.peoplepage {
>  padding-bottom:10px;
>  padding-top:0px;
> }
> h2.peoplepage {
>  margin-top:0px;
>  padding-bottom:0px;
> }
> table.ourpeopletable {
>  padding-bottom:10px;
>  border-color:#e6e7e8;
> }
> td.ourpeopletable {
>  padding-bottom:15px;
> }
> p.pjustifypeople {
>  text-align:justify;
>  margin-top:0px;
>  padding-top:5px;
> }
>
> TIA,
> Nan
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>