CSS font-size puzzler

Gr8Writer · 01-31-2007, 03:37 PM

I'm trying to use CSS to reduce the font-size for a new website I created: http://www.e-tungsten.com. However, any font size attributes that I use in CSS, whether they're size-related (medium, large, etc.), or fixed sizes (e.g. 12pt), only work in Firefox, and not in IE 6. Does IE 6 not support this CSS tag? I looked on the w3schools.com site and they claim that IE has supported this CSS tag since version 3. So I'm confused.

Anyone know why the tag would work in Firefox, but not in IE?

FYI, the URL for the css file is http://www.e-tungsten.com/styles.css.

Thanks for any help I can get with this.

Gil Sery

Tomassi · 02-01-2007, 07:15 AM

quick fix is to put this in your css file:

p {
font-size:12px;
}

all your tekst is in <p> tags

Gr8Writer · 02-01-2007, 11:39 AM

Quote:

Originally Posted by cashcannon

quick fix is to put this in your css file:

p {
font-size:12px;
}

all your tekst is in <p> tags

Thanks, I never thought of that. But since all the <p> tags are within the <body> tag and the body tag is the one that contains the font-size CSS, I'm puzzled as to why there is a difference between using a <body> tag and using a <p> tag.

Gr8Writer · 02-01-2007, 12:18 PM

Ok, well I changed the font-size to percentage and that seems to work best so far. The size is still bigger in IE 6 than in Firefox, but I guess I'll have to live with it.

Taltos · 02-01-2007, 02:40 PM

You just discovered the problem with any of the relative font size attributes. IE6 and earlier display a larger size than the standards compliant browsers. The only thing I found you can do is specify it in pixels. That is an absolute. It takes away some of the users choice but it works.

Gr8Writer · 02-01-2007, 03:20 PM

Thanks. It kind of sucks. I've changed to percentage font-size (90%) and will leave it at that since it looks good in both IE 6 and Firefox.

Now if I can just figure out why the right column pushes left and overlaps the left column when I open a sidebar (like Favorites or History), I'll be all set...

Taltos · 02-01-2007, 04:27 PM

LOL, that sounds kinda strange!! Got a URL I can look at? And what browsers does it do that with???

IslaScotts · 02-01-2007, 04:31 PM

I have had the same problem too, so now I use percentage as a rule of thumb.

Gr8Writer · 02-01-2007, 04:31 PM

It happens on every URL on the same site (http://www.e-tungsten.com) in both IE 6 and Firefox 2.

Thanks.

Arenlor · 02-01-2007, 05:42 PM

Hmm, well in minimode (opera function for PDAs and mobiles) it reveals that your buttons, the left part, are actually placed beneath your right column, that may have something to do with it. In Lynx, they also appear beneath it, but in links, a sort of optimized text browser, they are on the left, but on the second page the links at the bottom of the right column get selected before the left, proving that it truely is screwed up somehow.

Gr8Writer · 02-01-2007, 09:25 PM

I used the table trick in order to put the text before the navbar. So that's probably why you're seeing the navbar under the right column in those browsers.

Arenlor · 02-01-2007, 09:34 PM

Cool, I do that too, but it could be the ordering like that that's messing with your page. I can't seem to duplicate it myself.

Taltos · 02-02-2007, 08:35 AM

The problem is that both columns are set to a percentage. You can cause the same problem by using any browser in a windowed mode instead of full screen and resizing the window to a thinner size. 18% of a window that is only 5 inches wide will overlap the background you created for the navigation column.

I use CSS fluid layouts a lot and make my left column a fixed width if it is a navigation area. You should be able to do the same on your table layout.

Another option would be to use the background only for the left column table cell rather than for the entire body as you have done.

Hope some of this helps.

Gr8Writer · 02-02-2007, 11:58 AM

Quote:

Originally Posted by Taltos

The problem is that both columns are set to a percentage. You can cause the same problem by using any browser in a windowed mode instead of full screen and resizing the window to a thinner size. 18% of a window that is only 5 inches wide will overlap the background you created for the navigation column.

I tried dividing the background into the name logo and the left navbar background (since I wanted to extend the black area to go all the way down the page so it's flush with the text, and doesn't end above it), but I ended up with all sorts of weird table configurations that didn't work out for some reason. In fact it looked a lot like the Lynx version when I did that (navbar under right column), so I just gave up on that.

Quote:

Originally Posted by Taltos

I use CSS fluid layouts a lot and make my left column a fixed width if it is a navigation area. You should be able to do the same on your table layout.

Pardon my ignorance, but what are "fluid layouts"? I've never heard that term before.

Gr8Writer · 02-02-2007, 06:03 PM

I finally got the problem solved. I adjusted the <style="padding-right: 2%"> to 5%. Although this creates a pretty big gap when no sidebar is open, at least when a sidebar is open the columns don't overlap now.

My next problem to fix is how to extend the navbar's background so it goes to the end of the page. I can't repeat vertically, because the background is all one picture. As I mentioned above, I tried to separate the two into logo and navbar and got weirdly horrible results.

Anyone have any ideas?

exam · 02-04-2007, 01:40 PM

Quote:

Originally Posted by Gr8Writer

Pardon my ignorance, but what are "fluid layouts"? I've never heard that term before.

A fluid layout is usually a design that uses all available screen real estate. IE instead of having a fixed width of 800px you use the full width of the user's screen.

Taltos · 02-05-2007, 01:13 PM

Actually, Gr8Writer, your site is a fluid layout. As exam said, it just means that your site adjusts nicely and fluidly to the width of the browser window. If you resize the browser window's width, the site adjusts itself to the new width.

Just out of curiosity, can you do something like:

<TR>
<TD width="150px"><IMG SRC="spacer.gif" width="2" height="2" alt=" "></TD>
<TD width="100%"><IMG SRC="spacer.gif" width="2" height="80" alt=" "></TD>
</TR>

All I have done is change your 18% to a fixed width and your 82% to 100%. I haven't played with a table-based layout in a while but I don't remember there being any problem with something like that. That way, your navigation area is always the same size but the rest of your layout will flow as it does right now.

Have fun!

P.S. You have 2 sets of the HTML shown above. You should probably just be using one. One has some more style items than the one I copied and modified. They should be combined.

Gr8Writer · 02-05-2007, 05:01 PM

Thanks for your explanations, exam and Taltos. And thanks to everyone else for all your help. I finally managed to sort things out. I even managed to add that extra piece of background under the left column navbar.

Thanks again everyone.

Gr8Writer · 02-05-2007, 05:05 PM

Oh, as for combining the two TD cells, the 82% TD can technically be removed, but the page still validates with it included.