Hi,

Can anyone help me resolve this display issue? I recently viewed this site in firefox and noticed that the top banner seems to have slipped down. It shows properly in IE7, but the issue also occurs in IE8.

I've checked through things, but I can't see what might be wrong.

Thanks

It's the default margin-top of the h4 tag. Browsers have different default margins or padding and in this case Firefox is applying the margin-top where there is no room which forces the image down.

 

Edit h4 style

h4 { margin-top: 0;

line-height: 1;

position: absolute;

top: 0;

left: 0;

font-size:12px;

}

 

but this will apply to all h4 tags so if you have other h4 tags I suggest you create a class just for this one.

Thanks for getting nack to me so quickly. Unfortunately that didn't sort it - infact the whole of the top banner disappeared. Now that I restored the CSS back to how it was, the whole of the main image is out of line.

oh no! Any ideas?

Thanks

That's bad. This is what I had:-

http://www.wickham43.com/forumposts/minnowdreamofthailand091001.html

CSS file:-

http://www.wickham43.com/forumposts/minnowstyle091001.css

 

and the only edit I made was what I said in my last post. I know I didn't download all your images, but it seems to be OK in Firefox and it's an effect that I've met before where a p tag or an h tag is right at the top and the margin-top forces the div or image down in Firefox.

 

The lower part of the page hasn't got the images so that's why Firefox has brought the purple Dream of Thailand: bar up. It should be the same as IE when the image loads.

Hi

 

Have you tried a simple reset in your css

 

* { margin:0;
padding:0;
}

 

Pat

Hi

 

Have you tried a simple reset in your css

 

* { margin:0;
padding:0;
}

 

Pat

 

Hi Pat, sorry to be dim,but where should I add this? To be honest I am in a bit of a panic about this.

thanks for helping.

That's bad. This is what I had:-

http://www.wickham43.com/forumposts/minnowdreamofthailand091001.html

CSS file:-

http://www.wickham43.com/forumposts/minnowstyle091001.css

 

and the only edit I made was what I said in my last post. I know I didn't download all your images, but it seems to be OK in Firefox and it's an effect that I've met before where a p tag or an h tag is right at the top and the margin-top forces the div or image down in Firefox.

 

The lower part of the page hasn't got the images so that's why Firefox has brought the purple Dream of Thailand: bar up. It should be the same as IE when the image loads.

 

Hi,

 

Thanks for confirming that - so the ony difference in the css was the "margin-top" bit? I really dont understand what has happened here, because after i saw what that change made when i uploaded the new css I undid my changes and re-uploaded. I know now I should have backed up the original. As I said to Pat, I am in a panic as this site is to be advertised in the broadsheets at the weekend and it has to be right.

Thanks for your help.

I've just added one more image to make Firefox look a bit better, but as I said, all I edited was the h4 tag so copy my css file (and my html file if you have edited that recently) and you should be OK. I changed the css filename in the head section link because I renamed your css file.

 

You may have edited something I didn't know about.

I've just added one more image to make Firefox look a bit better, but as I said, all I edited was the h4 tag so copy my css file (and my html file if you have edited that recently) and you should be OK. I changed the css filename in the head section link because I renamed your css file.

 

You may have edited something I didn't know about.

 

The only edit made yesterday was to try the new h4 code. Can you remember how the h4 code was beforehand? (my own fault for not doing a backup) Was the only change you made to add the "margin-top" line? or did you change any other values in the h4 section?

 

Cheers

You can see how it was before by looking at my files; I only added margin-top: 0; to the h4 style.

Hi Wickham,

 

Thanks for helping out there. You were right, I uploaded the whole of your CSS and now everything is fine. Not sure what happened first time round.

 

Phew!

 

Thank you! have a good weekend

Glad it worked out OK.

 

Back up, back up, back up all the time. Keep one version in a different filename while you work on the other.

I have just noticed a similar issue with this site. The banner is slipping down in firefox. Strangely it showed ok when I uploaded it to a test url. Can anyone see what is wrong here?

 

Thanks in advance

minnow

Add px after 90 in your stylesheet; it corrected Firefox in my test:-

#header {

width: 917px;

height: 90px; /*was 90;*/

margin: 0 auto;

background: url(images/img2.gif) repeat-x;

}

 

You have a </a> closing tag in here which shouldn't be there (no connection with the banner problem):-

<div id="splash"><img src="images/banner1.jpg" alt="IT services

cheshire" width="877" height="166" /></a></div>

 

should be:-

<div id="splash"><img src="images/banner1.jpg" alt="IT services

cheshire" width="877" height="166" /><!--</a>--></div>

Thanks Wickham! That sorted it