Fix header css in Blue Grace WP theme to display correctly in Safari and Chrome

I love the Blue Grace WordPress theme designed by Vladimir Prelovac. The theme has a really smooth look to it and is easy to modify. Of course I say this because the theme of My Webmaster Tips uses the Blue Grace theme.

The only problem I have with the theme is that the top navigation and the rotating image css is a little bit wacky in Safari and Google Chrome. Don’t worry, if you are having the same problem as me, you might not because the theme designer might have fixed the problem in a newer version of the theme, I have a solution for you.

There are only a few things you’ll need to change in your theme’s css file. If you don’t know where to find your theme’s css file, after you log in, go to Appearance, Editor, then you should see style.css on the right hand side.

In your style sheet, look for:

#portrait-bg
{
position:absolute;
width:319px;
height:221px;
right:0;
top:0;
}

Just change 221px to 220px, this should fix the image from hovering over the top of the second column.

Next find:

#menu
{
position:absolute;
width:690px;
margin:0;
padding:0;
overflow: hidden;
}

Remove

overflow: hidden;

if it is present.

Finally, find:

#menu li a
{
color:#fff;
margin-left:.5em;
padding:.6em .6em .3em;
}

Add

display:inline-block;
height:31px;

This is so when the link is hovered over the image will get that extra 1 pixel it needs to make up for the difference in height in Safari and Google Chrome. I used display:inline-block to make sure it works in Internet Explorer 6.

That should do it. Now all you have to do is update your css file and your Blue Grace theme should look the same throughout all the browsers.

Tags: Blue Grace Theme, CSS, Google Chrome, Image, Internet Explorer 6, My Webmaster Tips, Problem, Safari, Top Navigation, Vladimir Prelovac, Wordpress, WP