Some browsers ignore my CSS

timsk · Member · Nov 11, 2011 at 9:46 pm
Copy link

Add topic to favorites
Can you tell me why some browsers seem to be ignoring my CSS while others take it into account?

To make a really obvious change, I’ve just made the text size 150%:
```
body {
   font-size:150%;
   font-family:Georgia, "Times New Roman", Times, Serif;
   line-height:2.2em;
   color:#333;
   background-color:#fff;
}
```
When I visit the blog:
http://ckbh.wordpress.com/
— in Firefox on my Mac, shift-cmd-R shows me the blog with huge text in a serif font, as expected
— in Safari on my Mac, the text is normal sized, and sans-serif, no matter how much I refresh the page
— Firefox on my Windows machine does the same as Safari above

Any suggestions as to what might be going on please? Thanks in advance.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 11, 2011 at 10:02 pm
Copy link
In Safari on the Mac and FF on the windows machines, clear the browser cache, restart the browser and then take another look.

The site linked to your username, http://timsk.wordpress.com/ , does not appear to have the CSS upgrade. What site are you talking about?
timsk · Member · Nov 11, 2011 at 10:25 pm
Copy link
Hi there, and thanks for your response.

I’ve cleared the caches and relaunched the browsers, but there’s no change — Firefox/Mac still reflects my CSS, while Safari/Mac and Firefox/Windows doesn’t.

You are correct that http://timsk.wordpress.com/ doesn’t have the CSS upgrade. My question is about http://ckbh.wordpress.com/ as linked in my post above.
thesacredpath · Member · Nov 11, 2011 at 11:12 pm
Copy link
On http://ckbh.wordpress.com/ :

Firefox 8 and Safari 5.1.1 and Opera something.something, on Mac: I see your custom CSS just fine as well as the custom fonts you are using.

This is the URL of your custom CSS file. See if you can access it from the browsers that you are not seeing the CSS changes on.

http://s1.wp.com/?custom-css=1&csblog=1Uqtj&cscache=5&csrev=15
timsk · Member · Nov 12, 2011 at 10:47 am
Copy link
To broaden things out, I’ve just tried the site on two more Macs, on FF and Safari on both, and *none* of the four browsers display the site with the custom CSS — they all show a sans serif font at normal size.

However, all of the browsers can see the custom CSS file at the URL you gave above.

<very_confused>
timsk · Member · Nov 12, 2011 at 10:58 am
Copy link
Ah, slight breakthrough: as well as body text size and font, I’ve also modified how the #nav menus look in my custom CSS, and all the browsers I’ve tested *do* reflect those changes*. So they are seeing the custom CSS file and are acting on part of it, but most still seem to be ignoring my font and text size instructions.

Now I’m really confused! Any and all suggestions most welcome.

*For info, by default the theme puts a purple over-line on any menu item when the mouse pointer hovers over it. I have removed this, made the text grey, and made the text turn black when hovering over it.
timsk · Member · Nov 12, 2011 at 1:07 pm
Copy link
Bit more info: it appears that only the font-family and font-size elements are being ignored. When I change the line-height, color or background-color, the changes are immediately reflected in all my browsers on refreshing the page.
```
body {
font-family:Georgia, "Times New Roman", Times, Serif;
font-size:15%;
line-height:2.2em;
color:#333;
background-color:#fff;
}
```
So my questions is: why would most of my browsers* be ignoring the font-family and font-size elements?
*including Safari on three different Macs, Firefox on two Macs and one Windows 7; but Firefox on one of my Macs does reflect changes in these elements.
thesacredpath · Member · Nov 12, 2011 at 6:06 pm
Copy link
You have custom fonts set and with those custom sizes. When you do that, there is a separate CSS file created for the custom font stuff and it is overriding the stuff in your custom CSS. Add the ” !important ” attribute to those items as below.
```
body {
color: #333333;
font-family: Georgia,"Times New Roman",Times,Serif !important;
font-size: 62.5% !important;
}
```
I’m kind of wondering though why you applied the custom fonts if you are now trying to override them?
timsk · Member · Nov 12, 2011 at 11:41 pm
Copy link
Good god, I’ve been such a numpty! Thank you so much for spotting that. I had clean forgotten that we had clicked some random fonts some time ago. Don’t know how long it would have taken me to finally spot it either.

Do you have a tip jar or a beer fund I can chip in to? I’d be happy to. :o)

Thanks very much for your time.

[I’m still a little puzzled about why the different browsers responded differently, but I think I’ll just have to be satisfied with the answer “because they do”.]
thesacredpath · Member · Nov 13, 2011 at 12:42 am
Copy link
You are welcome. I don’t have a tip jar, but several have asked about that. Perhaps I should think about it.

I’m kind of puzzled as to why some browsers honored the font settings and some did not. The custom font declarations and sizes are set in separate selectors that should always override the existing, and I would think they should always override the custom CSS as well.

What can I say? The web is fickle.
thesacredpath · Member · Nov 13, 2011 at 12:44 am
Copy link
And, not a numpty. Things did not work exactly as they should have in this. I should have spotted that the first time I looked, but I didn’t. So if you’re numpty, I’m numpty. I guess we run in good company.

:-)
timsk · Member · Dec 12, 2011 at 11:35 pm
Copy link
Ah, silly me — just spotted (a whole month later!) why my Firefox wasn’t showing the right fonts. I’ve got NoScript installed, and it was blocking typekit.net. D’uh!

I’ll post it here though in case someone else is bashing their head against the same problem some time.
timethief · Member · Dec 12, 2011 at 11:43 pm
Copy link
@thesacredpath
Yes! You do need a tip jar. IMHO WordPress.com ought to provide you with a free custom design upgrade too. That’s my 2 cents!

No items found.