<H3> links in Firefox

[Michael7]

Hi everyone,

With all the trouble I have concerning simple things with CSS (still learning), I think I am getting it now, but have stumbled upon a relatively NOT simple problem.

I've looked all over to see if anyone else has such a problem, but not much luck. My problem actually lies with Firefox!

In my website's menu, I use a few <h3> tags as links. I never had access to Firefox before, but as I'm redoing my website with CSS, I am using it to help out.

Now, when I looked at my menu in Firefox, I noticed something that made me wince . . . my <h3> links were horrendous! They were bigger than in IE . . . which is a problem I can deal with. BUT . . . the underline for it was huge and ugly, making the words appear even bigger and bulkier!

I was wondering if there was a way to specify the "thickness" of that underline, so that it doesn't appear so huge in Firefox. I like the very thin, almost discreet underline that is shown in IE, because it makes it fit in a bit more with the rest of the menu.

I found this page about creating custom underlines via an image:
A List Apart

But is there a simpler way, just to adjust the size of the underline or something? I mean I could make a 1 pixel image and do like the website above but . . .

Not sure if it's needed, but my original page is:
http://www.workmenforChrist.org
The test page, as I'm redoing it so far, is:
http://www.workmenforChrist.org/testindex.html

All help is appreciated, thank you so much for the help!

~Michael

EDITED: I hope it's not a problem, but can I also ask this? . . . I want the menu links to have the list bullets, but not the indent that comes with lists. In my old site, I was bad and simply left out the <ul> tag to not have it indent. But there has to be a right way to do it (besides, that doesn't work in Firefox =~) ). I tried, in the css file, things like "ul li {indent: 0px;}" and even "align: left" but those don't work. Is it possible to do this (again, without resorting to images)?

[booneyHill]

To my knowledge, you can't exactly change the size of the underline. You can however get rid of the underline and use a bottom border instead which allows you to change the size.

And as far as the font size goes, you can use css to set the size of the font so it will be fairly (but not exactly) consistent across most browsers.

[Michael7]

To my knowledge, you can't exactly change the size of the underline. You can however get rid of the underline and use a bottom border instead which allows you to change the size.

And as far as the font size goes, you can use css to set the size of the font so it will be fairly (but not exactly) consistent across most browsers.

Thanks, I may have to do something along those lines. The problem would be though, if the links span multiple lines . . . it would only cause the bottom to be underlined, right? I try to have it on one line, but it might not always work that way. If I could get something that would work whether or not on the same line, then that'd be great.

I may very well adjust the size, but I fear if I adjust the size, taking Firefox into Consideration, it will of course adjust it in other browsers, perhaps for the bad.

However, if I could find out how the H3 tag is sized in relation to regular text in IE (which size I like), then I could perhaps use that and it wouldn't affect the IE rendering, but would only affect those browsers who render it differently? Does that make any sense? In Other words:
If IE defaultly renders the <h3> tag with something like 1.5em (or something like that), then if I put in the CSS to render <h3> the same way, shouldn't it therefore look the same relative size in all browsers?

Continuing to look for help on all this, and I do appreciate it!

As for the list situation, I think I might've solved that. I tried putting the <ul> to have a padding and margin of 0px but realized it made the bullets disappear. So I pulled a number out of the air, and put the margin as 16px and it seems to position the exact way as I explained in my original post to how I wanted it (even zoomed in and they lined up the same way). Doe anyone see a problem with doing that, will that cause a problem anyone can foresee?

~Michael

[booneyHill]

You're right about the border bottom: the line will only be under the last line of text. However that only applies to block elements (e.g. h1, p, etc.). It works with inline elements (span, a, etc.)... well partially, IE doesn't care to give the last line a bottom border.

The thing with the bullets is kinda funky. You could instead set the margins to 0 like you had before and use the HTML entity &bull; which, as the name suggests, creates a bullet. Use &bull; for each list item. But that may be doing too much.

Another solution is to give the list items enough negative margin-left so as to make it appear as if there is no indent at all.

If the solution you came up with works in all popular browsers then go ahead and use that. I have no idea how that worked for you.

Back to the font size: setting the font size in CSS will produce near consistent font sizes in all browsers. IE renders the h3 with a font size of 18px. Em sizes will vary depending on the font size of the tag the h3 is embedded in.

[Michael7]

You're right about the border bottom: the line will only be under the last line of text. However that only applies to block elements (e.g. h1, p, etc.). It works with inline elements (span, a, etc.)... well partially, IE doesn't care to give the last line a bottom border.

The thing with the bullets is kinda funky. You could instead set the margins to 0 like you had before and use the HTML entity &bull; which, as the name suggests, creates a bullet. Use &bull; for each list item. But that may be doing too much.

Another solution is to give the list items enough negative margin-left so as to make it appear as if there is no indent at all.

If the solution you came up with works in all popular browsers then go ahead and use that. I have no idea how that worked for you.

Back to the font size: setting the font size in CSS will produce near consistent font sizes in all browsers. IE renders the h3 with a font size of 18px. Em sizes will vary depending on the font size of the tag the h3 is embedded in.

Thanks, :)

So it seems the thing with the bullets would work with what I did? I only have Internet Explorer, Firefox, and Opera to test it out. But as far as you can tell, nothing is wrong with the code that would mess things up elsewhere?

Thanks for the size in IE! I'm wanting to avoid using px though, even if it looks the way I want to originally, if my users adjust their font size through the browser, that will adjust the font of everything but the h3. Which isn't something I would want, I am wanting it to look great in relation to the rest of the menu text. So to make sure it all looks unified, I would have to use something like em, right (and being that it's all in the same <div> tags, it should go in relation with the rest of the menu text, right)?

~Michael

Edited: Strike that, I see any % or em placed on the h3, will size it in relation to the normal h3 size instead of the surrounding text size. Any way to adjust size without resorting to px? I suppose I could just make it regular text, but if I can, I'd like to keep them as h3 headers.

[drhowarddrfine]

Now Michael. How many times have I told you not to use IE as your reference browser? ;)

I'll get back to you on this later tonight.

[Michael7]

Now Michael. How many times have I told you not to use IE as your reference browser? ;)

I'll get back to you on this later tonight.

Haha, Yeah I know :) I'm ashamed (especially reading all those articles about the browsers)! At least now I'm using Firefox and Opera though!

Thanks, I'll be looking forward to your post!

[drhowarddrfine]

Regarding the font-size difference with <h3>. It's not a size difference but the fact that Firefox uses CSS to style the <h3> element while IE does not. I assume it's because IE is part of Windows Explorer and the OS and all intertwined with Office eventually. But by using CSS, the whole contents get bolded.

The way around it is to just change the css to what you want, such as:
h3{
font-weight:inherit;
}
or
h3{
font-weight:normal;
}

That, at least, keeps all browser in the same area.

[Michael7]

Regarding the font-size difference with <h3>. It's not a size difference but the fact that Firefox uses CSS to style the <h3> element while IE does not. I assume it's because IE is part of Windows Explorer and the OS and all intertwined with Office eventually. But by using CSS, the whole contents get bolded.

The way around it is to just change the css to what you want, such as:
h3{
font-weight:inherit;
}
or
h3{
font-weight:normal;
}

That, at least, keeps all browser in the same area.

Sorry for the late reply!

Wow, thanks that explains things! I put it as normal, and noticed the text was pretty much just a bit larger, which was alright. I was seeing about making it just a bit darker too, to set it apart as headers, and so tried the numbers for font-weight. Seems those numbers really don't work, do they? Haha, just another way of putting the words, because it seems it jumps from normal, to bold, without increments. But anyway, I would rather it be normal weight, than be way too thick for some users. The size will set it apart enough, I would think (unless there is a way to increment the weight?)

I was wondering though . . . what exactly does the "inherit" do? I searched and found pretty much that IE had a bug about it or something, and then others would get errors using it. Should I instead use "normal" for the font-weight?

Thanks Again!

[drhowarddrfine]

what exactly does the "inherit" do?

[Michael7]

Oops, sorry about that. I guess I didn't look in the right place! Thanks for the link!

And thanks very much for the help!