Welcome to WebmasterWorld Guest from 54.166.224.46

Forum Moderators: not2easy

Message Too Old, No Replies

css only works in safari

My website only seems to use the css file in safari

     
4:11 pm on Jan 30, 2009 (gmt 0)

5+ Year Member



The problem seems to be related to my CSS document being read in IE, firefox, opera....

but when it's viewed in safari it works just fine. I have two CSS documents and the one for the sites structure works fine in all the browsers but my css document that formats the text doesn't work in any browser other than safari.

I'm looking for a missing div or something but it all looks fine. Any help would be appreciated, im sorry i can't explain it any better and i can't post an url so it know it's tough to make a diagnosis but if anyone could think of something i might of overlooked that'de be great.

7:00 pm on Jan 30, 2009 (gmt 0)

5+ Year Member



I narrowed it down to the css not working on only one part of the html document :

<div class="main-content">

<h1 class="pagetitle">Text text text text text </h1>

<div class="column1-unit">

<h2>text text text text text </h2>

<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>

</div>
</div>

This is the CSS code that corresponds with this html

.column1-unit {width:440px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}

.main-content {display:inline; /*Fix IE floating margin bug*/; float:left; width:440px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; font-family:Verdana, Arial, Helvetica, sans-serif}

7:28 pm on Jan 30, 2009 (gmt 0)

10+ Year Member



Have no idea what do you mean,but why do you use too complex css? And some details which makes life easier are missing at the same time imho.

Look here, please, and consider something like this:

body {font-size : 62.5%; font-family:Verdana, Arial, Helvetica, sans-serif;} /*font-size is important to compare*/

* { margin : 0; padding : 0;}

div {width:440px; border : 1px solid red;}/*borders are for "debugging" purposes */

.main-content { margin:0 0 0 30px; font-size : 1.5em;}

.column1-unit { margin-bottom:10px;}

7:31 pm on Jan 30, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Plugging the code given above in a document framework show it's working fine in e.g. FF3.

I guess it's something beyond this code fragment.
A few tips:
- make sure your code validates
- I'd rigorously filter out any IE workarounds into one or more conditional comment.

10:21 pm on Jan 30, 2009 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



I find the Firebug extension for Firefox to be invaluable here.

Select the HTML tab and then "drill down" through the tag structure to see exactly which bits of the CSS directly apply to an element and which are inherited from parent elements.

It can help you to very quickly locate problems such as this one.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month