SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with CSS on Safari (Mac)

    I'm working on a site that displays a bunch of thumbnail images in a table cell. The CSS for each image (which is linked to the bigger pic) is:
    Code:
    img {
    border : 0; 
    }
    #thumbnails a {
    float : left; 
    margin : 1px; 
    padding : 1px; 
    border : 1px solid #f2f1ef; 
    } 
    #thumbnails a:hover , #thumbnails a:active {
    border : 1px solid #666; 
    }
    where #thumbnails is the surrounding div. This works fine on PC, with all the thumbnails neatly lining up into rows and columns depending on how much space there is in the cell they are in, but on Mac they all pile up on top of each other. I've read some other threads about defining widths of floats for IE5 on Mac, but this is on Safari.

    Also, I'm using input textboxes to display text on the page - I've set them to the same color as the background so you can't see that they are input fields, using:
    Code:
    #productname {
    margin : 0; 
    padding : 0; 
    border-style : none; 
    background-color : #f2f1ef; 
    }
    but they are just showing up as normal (with borders and white backgrounds) - it doesn't seem to be taking any notice of my styling at all.

    Any ideas greatfully appreciated.

    Cross posted from Browser Issues forum, as nobody seems to go in there

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't have a mac to test on so all I can do is point you in the direction of some useful information.

    http://www.macedition.com/cb/resourc...surprises.html

    There is a list of problems that relate to safari that may solve your problem.

    The form controls are mostly controlled by safari so you won't be able to change them but you can read that in the link above.

    Floats should have a specified width or the results will be unreliable unless it's applied directly to an image when it will take its intrinsic width from the image.

    I just tried your thumbnails code out on a few images and used the mac capture site and they seemed to line up ok on safari 1.1.

    Sorry I can't offer anything else. (I will really have to buy a mac one day .

    Paul

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Safari supports the fieldset element, but doesn’t style it by default. This contrasts with the approach of Mozilla and IE, which is to draw a thin grey ridged border around it and add some padding. Be prepared to specify the styling of these elements fully if you want consistent presentation in multiple browsers.

    Like Opera, Safari does not style input elements like radio buttons and text input fields, instead using the default Aqua look and feel. Some people feel that this is a justifiable decision, while others disagree. Safari does style form items like label and (as previously mentioned) fieldset.
    Grrr...

    I'd buy a Mac if I had the desk space - hate using them, though - where's the other two mouse buttons..?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •