Chrome and firefox don't display it in the same way

pazherrero · Member · Apr 14, 2013 at 9:46 pm
Copy link

Add topic to favorites
Hi everyone,
I’ve been editing my CSS using the firebug of firefox and finally, it looks as I wanted. But it doesn’t look at all in the same way in google chrome. Why is this happening? Is there a way to fix it? I haven’t tried other browsers but I’m guessing that they are not going to show up properly either…
I would be very thankful with any suggestions… I couldn’t find anything that helps…

The blog I need help with is: (visible only to logged in users)
thistimethisspace · Member · Apr 14, 2013 at 9:48 pm
Copy link
I don’t help with CSS editing. Another Volunteer will help you when they can. But do take note of this:

May I remove credit links such as ‘Blog at WordPress.com’, theme, font, or toolbar links?
All WordPress.com bloggers are required to maintain the credit links, even our VIP bloggers. Please do not hide the footer credits or the toolbar with CSS after purchasing a Custom Design upgrade. http://en.support.wordpress.com/custom-design/#frequently-asked-questions
thesacredpath · Member · Apr 15, 2013 at 2:53 am
Copy link
@pasherrero, each browser will render things slightly differently, but there are also some CSS things that require browser specific declarations.

What isn’t looking right in Chrome?
pazherrero · Member · Apr 15, 2013 at 9:46 am
Copy link
Thanks for the quick answer! All of the pages of the menu at the top left in firefox show up in a line whereas in chrome, the long ones come in two different lines which make it very confusing…
thesacredpath · Member · Apr 15, 2013 at 6:20 pm
Copy link
Firefox is selectively ignoring things and leaving the menu items on a single line. The lines actually overflow outside of the theme wrapper and the div the menu items is in. This widens the menu area so stuff can stay on a single line and then also sets things so that there is no wrap on the lines. Give it a try and see how it works for you.
```
#header {
width: 495px;
}

#access, div.menu {
width: 305px
white-space: nowrap;
}
```
pazherrero · Member · Apr 15, 2013 at 10:57 pm
Copy link
Thank you very much! It did work! Now everything it’s on a line. But again, in firebox if I press any of the menu items I see them in a grey box whereas in chrome the box seems to have a fixed width and it’s not adapting to the length of the text itself…
And I’ve just realised that the submenu is aligned to the left when it should be align to the right….

#access ul ul a, div.menu ul ul a {
background: none repeat scroll 0 0 #FFFFFF;
direction: rtl;

when I change the “direction” in firefox it’s fine…Sorry for asking so much. It took me ages to get my head round with firebug but I don’t think I fully understood it…
thesacredpath · Member · Apr 15, 2013 at 11:44 pm
Copy link
See timethief’s response above about the footer credits. We are not allowed to remove those here at WordPress.com.

What you have right now looks the best to me given the long submenu labels you have. The menu on this theme just isn’t made for long menu or submenu labels.

If you increase the width of the submenu blocks to accommodate your long menu labels, they will end up overrunning the site title on some menu items.

My suggestion is to think about, and shorten your submenu labels since there really isn’t a clean way to have long submenu labels with the menu layout of this theme.
pazherrero · Member · Apr 16, 2013 at 9:30 pm
Copy link
Hi, I fixed the footer credits. Now it’s on display.
Thanks for the submenu suggestion. I’ll think of what I can do about it…
thesacredpath · Member · Apr 16, 2013 at 9:36 pm
Copy link
You are welcome.

No items found.