homepage Welcome to WebmasterWorld Guest from 54.196.159.11
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css only works in safari
My website only seems to use the css file in safari
gbgamblers23




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

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.

 

gbgamblers23




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

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}

Moby_Dim




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

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

swa66




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

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.

g1smd




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved