Safari Hates Me

[amberfrances]

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.

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

[LeeU]

Looking at it with FF and Safari on Windows, there is no difference. You might try using this Web site (http://browsershots.org/).

[WebJoel]

Off-topic, -but "Safari on XP" is the bomb!! :D (Very nice!!!) -I installed the beta on the XP-HDD last night.

[amberfrances]

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

[WebJoel]

Or it could be invalid html(??):

<td style="width: 33%;"
<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>

<td style="width: 33%;"
<p> Right here are two "<td>" openers that are not properly 'closed' with the required ">"..

[amberfrances]

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 :)

[amberfrances]

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!!

[WebJoel]

That html/style comes from a cold fusion file and.... 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 &nbsp; 's with " | " and more &nbsp; '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 the images are not appearing, but 'fix everything' is a good mantra. :)

[amberfrances]

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;
}

[amberfrances]

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?

[WebJoel]

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? 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?

[amberfrances]

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