Hi

I don't know much when it comes to HTML, normally use an editor but would like some help with something please.

I am having probs (What I think is a prob) with the size of my H1/H2 tags.

In IE it looks fine and is quite big but in FF the text size is smaller and I was wondering if that was still right.

If you have IE and FF pls look at it in both browsers, the url is

www.discusssport.com/test/test.html

In IE it looks fine but in FF its much smaller and wondering as I say if thats still ok.

I use a stylesheet for it, the url of that is www.discusssport.com/test/stylesheet.css

Is it ok that the size isn't the same in both browsers? Will it still be read as a H1 tag for search engine bots for example? Or have I done something wrong and the size should be the same in both?

One other thing I noticed and have noticed this before when I have done it is there is always a space between the text and the top of the image it is on in Firefox but in IE there is no space? Is that just way Firefox is or again have I done something wrong?

Thanks for your time and help.

You should specify font sizes for each of the H tags you use...

h1 {font-size: 18px; color: #000000}
h2 {font-size: 16px; color: #000000}
h3 {font-size: 14px; color: #000000}

etc etc.

same goes for the space. IE handles different padding and margins than FF does. By telling both browsers trough CSS what they exactly should render (fontsize and margins and padding) you'll end up with the headings looking the same in both browsers

Originally Posted by blue-dreamer

You should specify font sizes for each of the H tags you use...

h1 {font-size: 18px; color: #000000}
h2 {font-size: 16px; color: #000000}
h3 {font-size: 14px; color: #000000}

etc etc.

Thanks

Those sizes you put in, 18px, 16px etc, are they the right sizes and ones you would recommend for those tags?

same goes for the space. IE handles different padding and margins than FF does. By telling both browsers trough CSS what they exactly should render (fontsize and margins and padding) you'll end up with the headings looking the same in both browsers

How would I do that, pls? Could you write up what I need to put in?

Thanks for your help.

You'd code it like this;

h1 {
margin: 0px;
padding: 0px;
}

This way there's no padding or margins on the h1. Say you'd like a little space on the bottom you could say:

h1 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 15px;
padding: 0px;
}

Originally Posted by whateverandeve

Thanks

Those sizes you put in, 18px, 16px etc, are they the right sizes and ones you would recommend for those tags?

Size depends on how big or small you want to make the headings compared to the other text on the site. Using pixels (px) is only one size type of many you can use.