Different appearance in safari and firefox
-
hi everyone!
i have problems with the appearance of my blog http://dailyimpulse.wordpress.com/
In firefox and IE, everything is fine (tested with different pcs and different display resolutions), but in safari, the last category (imprint) in the black box on the top, switches into the second row. when i make it fit in safari, theres to much space in firefox and so on…can please anybody tell me what to change in my css stylesheet settings to make the navigation in the black box fitting in one row in every browser? i have only custom css….thanks in advance ;)The blog I need help with is: (visible only to logged in users)
-
update: forget the problem with safari: blog looks also already different when i try it on pc (firefox) and on mac (also firefox!). don’t understand it at all….
-
i think the problem is the font. i have arial but at the mac, its bolder than on pc. and that seams to be the reason why it switches to the second row…but why is it bolder?!?!
-
this is how it looks on pc (and how i want it to be): http://dailyimpulse.files.wordpress.com/2010/12/03-12.png
and this is how it looks on a mac: http://dailyimpulse.files.wordpress.com/2010/12/bild-2.png -
can anyone tell me why the same font (arial!) looks different on pc and on mac (both with firefox, please have a look at the pictures above), please? try for days to find a solution, but without any success…:(
-
Hi. If you take a look at the CSS stylesheet for that theme, you will notice that the font family for each element that appears to be Arial is actually:
font-family:”Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L”
This means that if the computer has Helvetica Neue (Helvetica New) installed, like most Macs, that font will be chosen first. If it’s not available, as it is the case for many PC computers, it will choose Arial.
That’s how that theme is built and the only way to change it would be to either choose a Typekit font to override that, or to buy the CSS upgrade option.
I hope that answers your question :-)
-
hi, thanks for your answer. thats the problem – i already HAVE the css upgrade and i changed all helvetica fonts to arial – there is no helvetica at all at my stylesheet…
-
just tested it: the font seams to be arial (on mac and on pc), BUT: on pc its arial bold and on mac its arial black!! now i have to find out which settings in css are acquired to make it fit on both systems…
-
This may be helpful if you happen to be pasting the WHOLE theme’s CSS code in the CSS Editor read this > http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/
If that’s not the case – excuse me.
-
oh ok, thanks – seams i am a part of the 98% of users doing that mistake :) i will change it, but don’t think this will solve my problem…but thanks anyway!
-
If that doesn’t solve the problem, then wait for one of the few volunteers that are CSS proficient.
-
Every browser renders slightly differently due to the way they interpret the CSS, and this is especially true when going from Mac to Windows.
In Safar 5.0.3 and Firefox 3.6.12, both on Mac, they render virtually identically with “imprint” being on the second row in the navigation.
You can get it all on one line by changing the left and right padding for the menu items to 10px instead of 13px as follows
#access a {padding: 13px 10px; }This is all well and good until someone goes to your page and increases their zoom level because they want the text bigger and then all of a sudden imprint moves to the second line again. In other words, the above fix breaks.
This will also be a problem if the visitor has set their browser minimum font size to something other than the standard 16pt. If they set it to 18 or 20, the above fix breaks.
There is only so much control you can have over the way a site looks, because there is too many things out of your control.
-
ok thanks…i already tried with 10 px, but then it looked finde on mac, but on pc was to much space on the right side. (couldn’t yet find out how to set the navigation text-line in the center of the black box) – is it possible?
-
I think you are going to have to do something in here
#access libut I don’t know what at this point. I haven’t had any coffee yet this morning. I’ll play with it.
-
Try this to center the menu when you reduce the padding. You can change the 10 pixel left and right padding to whatever you think looks good.
#access a {padding:13px 10px!important;} #container {overflow:hidden;} #menu-mainmenu {float:left; position:relative; left:50%;} #menu-mainmenu li {position:relative; right:50%;} #menu-mainmenu ul {position:absolute; left:0;} #menu-mainmenu ul li {left:0;} -
-
yes it works, thanks a lot!!! i also solved the problem with the font-weight: arial is to different on mac and on windows, thats why i chose lucida sans unicode/lucida grande. now it works..but theres already a new question:
is it possible to make various spaces between the categories in the navigation bar? i would like to have more space between “interior” and “sharokina” because i would like to avoid the “|” – sign (i made it to separate the last three words from the other categories but prefer to avoid it by enlarging the distance between interior and sharokina)…do you know what i mean? -
-
-
next problem: now that i changed the font, the subcategorie-bar doesn’t fit in the container:
http://dailyimpulse.files.wordpress.com/2010/12/05-12.png
any idea what i can change to make it overlap the border?
- The topic ‘Different appearance in safari and firefox’ is closed to new replies.
WordPress.com Forums 
