Template style conflict in Firefox and Chrome
Permalink Browser Info Environment
Hi
Hoping somebody can help.
I'm using the Greek Yogurt theme which has a sitewide header nav area. If I put my menu in there it doesn't have the background colour for the bar when viewed in Firefox and Chrome, but it's more or less right in IE8 (minus the curvy edges, which is fine).
The menu displays fine in a normal block.
I've hunted high and low but can't find which of the template styles is causing the problem.
I'd like to continue using this template if possible as I've tweaked other elements.
So, my plea is: can anyone either help me find out how/where to amend the css or help me amend the template so I could position a normal block where the sitewide header nav block is?
The site is under construction here:
http://www.jellypod.net/conc/
Thanks
Debs
Hoping somebody can help.
I'm using the Greek Yogurt theme which has a sitewide header nav area. If I put my menu in there it doesn't have the background colour for the bar when viewed in Firefox and Chrome, but it's more or less right in IE8 (minus the curvy edges, which is fine).
The menu displays fine in a normal block.
I've hunted high and low but can't find which of the template styles is causing the problem.
I'd like to continue using this template if possible as I've tweaked other elements.
So, my plea is: can anyone either help me find out how/where to amend the css or help me amend the template so I could position a normal block where the sitewide header nav block is?
The site is under construction here:
http://www.jellypod.net/conc/
Thanks
Debs
| Type: | Discussion |
|---|---|
| Status: | New |
Hi again!
It because in your template in header nav area UL lists floats right.
You need to clear float after menu.
Two ways to do it:
1. In typography.css inside Greek Yogurt theme folder on line 159 remove float: right;
The code must look like:
2. Create custom template for Amiant CSS3 Menu or change your current template in view.css file and add after line 29:
So code must look like:
Also you need to change other styles or add "!important" to several lines because in Header Nav area in Geek Yogurt some padding/margins may be incorrect.
It because in your template in header nav area UL lists floats right.
You need to clear float after menu.
Two ways to do it:
1. In typography.css inside Greek Yogurt theme folder on line 159 remove float: right;
The code must look like:
div#main-container #header ul { /*float: right;*/ list-style-type: none; margin-top: 14px; margin-bottom: 0; margin-right: 45px; }
2. Create custom template for Amiant CSS3 Menu or change your current template in view.css file and add after line 29:
float: none !important;
So code must look like:
.amiant-css3-menu-navigation-bar .navigation-menu { margin: 0px !important; padding: 0px !important; display: block; float: none !important; }
Also you need to change other styles or add "!important" to several lines because in Header Nav area in Geek Yogurt some padding/margins may be incorrect.
It because Greek Yogurt theme provide it's own CSS styles for UL tags in header nav area.