Safari Hates Me

@amberfrancesJul 19.2007

Can somebody please look at my site through firefox and then through safari and tell me why the CSS is so messed. everybody says i should trudge through and try to make the css work for both, but i really just want to use a separate stylesheet. if you have ANY suggestions, i would greatly appreciated them. this is a product detail page. browse the site a bit, but not all the links are set up yet. thanks again.

~~[url]~~http://www.lonepineprairiepillows.com/cart/Details.cfm?ProdID=55&category=8[/url]

to post a comment

CSS

11 Comments(s) _↴

@LeeUJul 19.2007 — #Looking at it with FF and Safari on Windows, there is no difference. You might try using this Web site.

@WebJoelJul 19.2007 — #Off-topic, -but "Safari on XP" is [I]the bomb[/I]!! ? (Very nice!!!) -I installed the [I]beta[/I] on the XP-HDD last night.

@amberfrancesauthorJul 19.2007 — #safari won't display the images, i'm not sure where, but i think my styles must be overlapping somewhere. some huge white space is overlapping my result images and they are clickable but i can't see them. try this link in firefox and safari (preferably on a mac)

http://lonepineprairiepillows.com/cart/Results.cfm?category=2

@WebJoelJul 19.2007 — #Or it could be invalid html(??):

[B]<td style="width: 33%;"[/B]

<p>

 <a href="http://www.lonepineprairiepillows.com/cart/Details.cfm?ProdID=39&amp;category=2"><img src="cw3/Assets/product_thumb/k_canyon_sunset_16.5_SP_thumb.jpg" alt="Canyon Sunset" border="0"></a><br />
   <span class="product_name">Canyon Sunset</span>
   with sueded piping.  16.5" 
   <!-- PRICE ON PRODUCT PAGE OR NOT

-->

 <!--show/not show more info between a tags--><a href="http://www.lonepineprairiepillows.com/cart/Details.cfm?ProdID=39&amp;category=2"></a></p></td>
 
   [B]<td  style="width: 33%;"[/B]
   <p>[/QUOTE] Right here are two "<td>" openers that are not properly 'closed' with the required "[B]>[/B]"..

@amberfrancesauthorJul 19.2007 — #that html/style comes from a cold fusion file and that closing tag is omitted. i am using 'cartweaver' and that's how the source came, and it seems to be working for everyone else, so i don't THINK that's the major problem with my display issues, but good eye ?

@amberfrancesauthorJul 21.2007 — #I am having some serious issues with safari. Refreshing the page moves the content, refreshing again moves it back, and it's inconsistent!!! what is the cause for this?! My search results don't even show, but when you hover you can tell there are links, they are just covered by some big white space, what causes this?!?! help me please!!

@WebJoelJul 21.2007 — #That html/style comes from a cold fusion file and....[/QUOTE] Oh okay then. I know nothing about ColdFusion, so will accept your definition of the tag's purpose.

---

Something I did notice is that your links are a string of text with "<span></span>" containing the hyperlinks and after, -strings of   's with " | " and more   's, etc etc.... this is unweildy and possibly some of the reason I see different things. In Firefox, your top-navigation incorrectly protrudes beyond the right-edge of the bounding box (causing that ugly horizontal ruler to appear), and navigation on the bottom 'wraps' to another line (rather unattractively so).

As a 'list of links', these could be made into an <ul> displayed inline ("horizontally"), whereby as a UL & li they could be styled more efficiently and possibly, more cross-browser as well. You could define the width of the UL and of the LI, and using the border property create the seperators " | " using "border-right:2px solid gray;" which would look better than the ascii character " | ". This 'stick-figure method' probably makes a screen-reader 'stutter'... :eek:

I'm using the Linux tools today and still learning, later when I switch over to XP I will examine this closer with my more familiar diagnostic tools.

This may not be why [I]the images[/I] are not appearing, but 'fix everything' is a good mantra. ?

@amberfrancesauthorJul 21.2007 — #thanks for the advice, i am trying now to do it in the <ul> format, but one thing is that between the border-right and the next list item is about a 2px white gap that looks like some cell spacing or something, is there a way to eliminate this? i have this CSS attached to my list:

#navlist li {

font-size: 12px;

font-family: Helvetica, Times, serif;

display: inline;

list-style-type: none;

padding-right: 10px;

padding-left: 10px;

border-right: 1px solid black;

background-color: #D5DED9;

}

@amberfrancesauthorJul 21.2007 — #okay, i got the whitespace thing handled, but i have a question re: the border-right, when i add padding, the border, of course, extends to the top and bottom, with the "|" it did not. How can i fix this?

@WebJoelJul 21.2007 — #okay, i got the whitespace thing handled, but i have a question re: the border-right, when i add padding, the border, of course, extends to the top and bottom, with the "|" it did not. How can i fix this?[/QUOTE] that, you cannot. The ascii character " | " is constrained to the 'line-height' of the text it is inline with. The "border-right" is the right-hand border of the <li>, so unless you make the <li> the same height as the text, this won't happen.

-Is the height of the 'divider' objectionable to you? To me, the difference in height between the the text and the 'divider line' helps me to not try to 'read' this as the letter "l" ("el") or "I"("eye)", or the number "1". -It is an Accessibility thing.

Also, -see image: -the navigation wraps in Firefox. -Is this a problem?

[upl-file uuid=53e2ea48-7bfc-4862-a3ad-c1ab968f3f9b size=51kB]Lonepine Prairie Pillows_1185047352052.png[/upl-file]

@amberfrancesauthorJul 21.2007 — #well i have a background color, and i don't like the line stretching from the top of it to the bottom. basically i just made it a background image and i think i've got that part going. i also surrounded the <ul> with a <div> to position it, which i think works across all browsers. thanks

Also in #CSS _↴

Formatting my web site Margin: Auto;Managing page layout: Style sheet vs Tables

Success!

Help @amberfrances spread the word by sharing this article on Twitter...

Tweet This

Safari Hates Me

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Safari Hates Me

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴