4 replies [Last post]
millers
millers's picture
Offline
Enthusiast
Last seen: 15 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

I have a page that works fine in IE, FF, Opera etc but the links aren`t working in safari. There is a set of 5 images in the body of the page that have float: left applied to them to make sit side by side.

In safari the links don`t work, if I remove float: left then the links work. Here is the page

http://www.bow-boutique.co.uk/Boutique1/

the css is http://www.bow-boutique.co.uk/Boutique1/css/bow.css

and here is the html and css in question

<div class='boutiquecategory' style='margin-left: 80px'>
        <a href='/search/home_accessories/1/' title='Home accessories at Bow at the Printworks shop'><img src='/images/boutique_homeacc.jpg' alt='Home accessories at Bow at the Printworks shop' width='103' height='104' /></a>
          <h2 class='boutique-home'><a href='/search/home_accessories/1/' title='Home accessories at Bow at the Printworks shop'>Home accessories</a></h2>
        </div>
 
        <div class='boutiquecategory'>
        <a href='/search/jewellery/1/' title='Jewellery at Bow at the Printworks shop'><img src='/images/boutique_jewellery.jpg' alt='Jewellery at Bow at the Printworks shop' width='103' height='104' /></a>
          <h2 class='boutique-jewellery'><a href='/search/jewellery/1/' title='Jewellery at Bow at the Printworks shop'>Jewellery</a></h2>
        </div>
 
        <div class='boutiquecategory'>
        <a href='/search/living/1/' title='Living at Bow at the Printworks shop'><img src='/images/boutique_living.jpg' alt='Living at Bow at the Printworks shop' width='103' height='104' /></a>
          <h2 class='boutique-living'><a href='/search/living/1/' title='Living at Bow at the Printworks shop'>Living</a></h2>
        </div>
 
        <div class='boutiquecategory'>
        <a href='/search/vintage/1/' title='Vintage at Bow at the Printworks shop'><img src='/images/boutique_vintage.jpg' alt='Vintage at Bow at the Printworks shop' width='103' height='104' /></a>
          <h2 class='boutique-vintage'><a href='/search/vintage/1/' title='Vintage at Bow at the Printworks shop'>Vintage</a></h2>
        </div>
 
        <div class='boutiquecategory'>
        <a href='/search/original_artwork/1/' title='Original artwork at Bow at the Printworks shop'><img src='/images/boutique_artwork.jpg' alt='Original artwork at Bow at the Printworks shop' width='103' height='104' /></a>
          <h2 class='boutique-artwork'><a href='/search/original_artwork/1/' title='Original artwork at Bow at the Printworks shop'>Original artwork</a></h2>
        </div>

.boutiquecategory {float: left; display: inline; width: 110px; margin: 5px}
.boutiquecategory a img {border: 3px solid #6e6d6c}
.boutiquecategory a:hover img {border: 3px solid #cccccc}
.boutiquecategory span p {margin: 0px; font-size: 1.0em}

Can anyone see what is wrong? I have been messing with the css for this for ages now and cannot find whats wrong.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try floating the anchors as

Try floating the anchors as well.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

millers
millers's picture
Offline
Enthusiast
Last seen: 15 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

Nope doesn`t seem to make any

Nope doesn`t seem to make any difference floating anchors

millers
millers's picture
Offline
Enthusiast
Last seen: 15 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

Sorted it, there was a spare

Sorted it, there was a spare </p> after the float containers which for some reason safari didn`t like and broke the links on the page because of it.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

And that's why the forum

And that's why the forum rules ask you to validate your pages before posting questions.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference