Main Nav Menu pixel overlap under FF and IE, not Chrome

[jamesbuzzard]

Hi all,

I've built this website around the suffusion theme - http://blog.thepaperdoll.com.au/
The main nav menu overextends below the big black header 'box' by about a pixel, and I can't work out why. It doesn't do it in Chrome, and I've tried to find the particular either CSS reference for it to fix, or piece of code, to no avail.
Anyone have any suggestions of what i'm doing wrong?

Thanks Sayontan for a great theme!

[jamesbuzzard]

I've hacked a fix by putting a repeating background image (repeat horizontal) of the same colour as the header, but if you look at the source or use firebug, you'll see what I mean.

[sayontan]

Try making the bottom border of your navigation bar transparent

[Jerboa]

Hi Sayontan,

I have the same issue - The transparent border trick fixed the alignment but does not work if I want to have a border of a different colour.

Any suggestions on how to make it work to have a bottom border to match my top one? See the attached picture.

Oddly enough, I used to have this issue only in IE and FF but not in Chrome. Chrome is now exhibiting the same issue...

Thanks, Sayontan!

Jerome

[design_studio]

I have found that there is margin of -1px at the bottom for #nav ul element which somehow makes the menu to overlap the container.
The solution I have is working so far (I haven't found any errors resulting from that change), so anybody can try it.
Here it is:
Under the Suffusion Options>>Back-end>>Custom Includes>>Custom Styles Section add the following:

Code: Select all

#nav ul {
margin: 0px;
}


and save it.
If it doesn't work or makes a mess simply remove that lines of code and save the changes again.
This is tested and works prior to version 4.0.7.