473,372 Members | 1,471 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

<H3> links in Firefox

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)?
Sep 21 '07 #1
10 5351
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.
Sep 21 '07 #2
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
Sep 22 '07 #3
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.
Sep 22 '07 #4
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.
Sep 22 '07 #5
drhowarddrfine
7,435 Expert 4TB
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.
Sep 22 '07 #6
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!
Sep 22 '07 #7
drhowarddrfine
7,435 Expert 4TB
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.
Sep 23 '07 #8
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!
Sep 24 '07 #9
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!
Sep 24 '07 #11

Sign in to post your reply or Sign up for a free account.

Similar topics

10
by: Harlan Messinger | last post by:
Different pages on a web site can vary in the level of header to which they descend. One short page may have only <h1>, or <h1> and <h2>. Another, detailed page, might get all the way down to <h6>....
2
by: Danny | last post by:
Is there a way I can get rid of a blank like under an <h3></h3> tag? without using css Thanks in advance
1
by: Speedy | last post by:
I have the following html body implemented in a site. But as soon as I added the <div> tag the <a> is not function any longer... Can someone tell me why this is not working ? Cheers Speedy ...
1
by: John Rowe | last post by:
I run the web site for a University department. A few of my authors will carefully write: <h3>Title</h3> <p>Some text here.</p> <p>Second paragraph.</p> Most of us can't be bothered(!): ...
1
by: Jim Storey | last post by:
Hi, I'm trying to compress my text vertically. After every <H3> there is a double line space before my <UL> begins. I want the <UL> right below the <H3>. My output text looks like: <H3> <UL> ...
4
by: Alan Silver | last post by:
Hello, Please pardon what is probably a dumb question, but if I have HTML like this... <div> <h3>Ferrets</h3> </div> and CSS like this...
4
by: Christofer Dutz | last post by:
Hi, I am having a small problem, that is driving me nuts. My application reads some Xml and runs 2 Xsl Transformations to generate HTML. As soon as my second XSL introduces some <br/tags, the...
14
by: Linda Jimerson | last post by:
Hi - I'm using xhtml 1.0 and css 2.0 to code my website. I've run into an odd problem. I have a simple <h3> element (centered) under my photo, but as you can see Iin FIREFOX, Opera and Netscape)...
1
by: poojak | last post by:
Hello Everyone, In my css I have defined h3 tag as h3 { font-size:23px; } This works fine in IE and Mozila but in Opera whereevr I used <h3> a gray background color is coming and text is...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.