Logo vertical positioning - help!

Hi,

I have a website here:

(username: paulhemmings password:check4houses)

The Logo is perfectly positioned on the index page, but if you click on any other page (e.g http://www.check4houses.co.uk/about.html) the logo is showing out of position and repeated!

It’s using the same CSS, so I’m a bit confused what is happening? Can any guru out there help?

Hi, that’s because on the about page you have a <div class=“frame”> element wrapping the page and as a result some new CSS can be used :slight_smile:

Aka on “.frame #header h1#logo a”

Set no-repeat for the background image on the logo anchor element :slight_smile:

Hi,

Many thanks - have done the no repeat and it is better! However, it seems that on every page apart from the front page, it needs to have a larger top-margin. Is there a way to specify this in CSS, other than having two different CSS files?

Again, that extra frame element is causing you trouble :). It allows for this CSS on ".frame #header h1#logo ". It gives an extra 27px padding ;). I don’t even see why you need that element. It seems to just be causing you issues, and nothings styled with it :slight_smile:

Hi Ryan/anyone,

I’m still struggling with this, think I must be missing something obvious! As you can see here:

it’s still not aligned correctly, need to be lower! The front index page, however, is fine.

I wonder: could you provide the actual CSS I need to type in to fix this?! Driving me nuts…

You need to pick, if you are going to not have the frame element in there then you need the 27px padding :). On the h1#logo just change the padding from 10px to 27 :slight_smile: (top padding)

Thank you for your continued help, I really appreciate it!

So if I don’t want to edit the HTML (therefore keeping the DIV), what would I put in the CSS?

Find your h1#logo{} rule.

Find the padding-top property, update the value to 27px :slight_smile: