PDA

View Full Version : header displaying wrong in firefox


themadmann
01-12-2008, 11:15 PM
When I installed images in my header it messed up the spacing for my header. Every thing appears fine in IE. I took the imaged out but that did not fix it. I deleted the CSS for it but that did not fix it either. The problem is my header is 100 pixels in firefox it looks more like 600 pixels. I think the problem maybe in my html. I looked at my html but do not see anything out of the ordinary, but I am not that experienced in html. I do use a templet for my site if that helps. If anyone has any suggestions that they think would help I would appreciate it.

Thanks

Cary
01-13-2008, 07:11 AM
Do you have a URL for us to look at?

themadmann
01-14-2008, 01:33 AM
www.surveytogetpaid.com (http://www.surveytogetpaid.com)

Cary
01-14-2008, 06:43 AM
You need to remove some of the default margins on p.header and p.nav.

p.nav {
font-family: "Times New Roman", Times, serif;
font-size: 23px;
font-weight: bold;
margin-bottom: 0;
margin-top: 0;
}
p.heading {
font-family: "Times New Roman", Times, serif;
font-size: 56px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}

hmobley
01-15-2008, 02:26 AM
will this have any effect on text, flash buttons set in layers, they show fine in IE, but not in firefox

themadmann
01-15-2008, 02:57 AM
Thanks a lot that fixed the problem.

Cary
01-15-2008, 06:18 AM
will this have any effect on text, flash buttons set in layers, they show fine in IE, but not in firefox

Different browsers have different default margins for various elements, so explicitly defining the margins in the style sheet can make a difference. However, the differences you're seeing may be do to something else.

hmobley
01-15-2008, 06:46 AM
would you mind looking at this in IE then Firefox, see what I mean , any suggestions would be be of great value to me, thanks

www.hughmobley.com

Cary
01-16-2008, 12:08 AM
would you mind looking at this in IE then Firefox, see what I mean , any suggestions would be be of great value to me, thanks

Normally, if you're going to be using layers for everything, you will want to remove the default margins on the body. This way all browsers will display what you have pretty much the same. As you progress you may find the default margins on another element causing problems and you will need to set the margins of that element to zero as well.

You would add "margin:0" to your body styling like this:

body {
background-color: #8D8B72;
margin: 0;
}

In the case of your page, doing this now would mean having to reposition all your flash buttons and everything else. So use this styling instead:

body {
background-color: #8D8B72;
margin: 16px 0 0 10px; /* 16px top margin, 10px left margin */
}

Now your flash buttons should be positioned okay. Just tweak the 1st and 4th pixel values above if needed. When the flash buttons are where you want them to be you can adjust the positions of other layers that aren't right.

It's best to avoid using layers when possible. Layer-based layouts usually don't handle font resizing too well, so the layout may break when viewed in a browser with a different default font size or a browser on a computer that doesn't have the specified font.

Your page is missing the opening html tag. You should have this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

hmobley
01-25-2008, 06:39 AM
Thank you very much, just tried this, appreciate the help