PDA

View Full Version : Font size 5px - Is it valid?


Corrosive
10-11-2008, 11:09 AM
Hi all

I've had to specify a 5px font size to get over an IE6 bug. There is no actual text, I have used it to get over a graphical break in my design. Do you think this will cause me any problems later?

d a v e
10-11-2008, 01:25 PM
probably ;)

why couldn't you control it with css via margins and padding on the surrounding elements?!

Corrosive
10-11-2008, 07:21 PM
probably ;)

why couldn't you control it with css via margins and padding on the surrounding elements?!

Basically I have a div with a small piece of background image to top off a box effect. The image I cut only 11px high. IE6 seems to want to leave enough room in the div for default text size so it makes the div higher than I want it. So it breaks the box. The hack I have used is to set the text size just on the .box_head class to 5px. It works so I think I'll leave it. Just wondered if anyone could see any potential hazards.

domedia
10-11-2008, 07:24 PM
Sounds weird... url?

Corrosive
10-11-2008, 07:29 PM
Sounds weird... url?

It's the one you looked at last night mate.

http://www.steelpress.net/projects/zebra_children/test_layout_one.htm

I pulled the files over to my IE6 machine and it was still broken. Googled it and found a few other cases of it happening. Figured out that this was probably best way to fix it.

d a v e
10-11-2008, 08:39 PM
how about setting a height of 5 px on the div?

domedia
10-11-2008, 08:57 PM
or line-height: 5px;

Corrosive
10-12-2008, 07:23 AM
or line-height: 5px;

Thanks guys but setting the div height to 5px will mean it is too short. It needs to be 11px to display the whole of the BG image. Might give line height a go and see what that does I suppose.

d a v e
10-12-2008, 07:36 AM
if there's no text can't you add it as an image (not background image?)

Corrosive
10-12-2008, 07:44 AM
if there's no text can't you add it as an image (not background image?)

I guess that then the div will have something in it so IE6 wouldn't default to thinking it has to provide enough room for any text (which is what it is doing at the moment).

Thanks Dave. I'll go and try these and see which works best.

Corrosive
10-12-2008, 08:09 AM
I guess that then the div will have something in it so IE6 wouldn't default to thinking it has to provide enough room for any text (which is what it is doing at the moment).

Thanks Dave. I'll go and try these and see which works best.

OK, just tried the ideas. Setting line height to 5px had no effect. Inserting the image rather than having it as a background did work. I have looked again at my hack and it will work ok with font size at 8px. Question is...is font-size: 8px; a problem?

d a v e
10-12-2008, 09:53 AM
without seeing the live url it's hard to say - but what happens for instance if your increase the text size in the browser??

Corrosive
10-12-2008, 09:58 AM
without seeing the live url it's hard to say - but what happens for instance if your increase the text size in the browser??

http://www.steelpress.net/projects/zebra_children/test_layout_one.htm

URL above mate. That was the one thought I had, will it break with x-large fonts set on browser? Will have to investigate what happens.

Corrosive
10-12-2008, 10:36 AM
without seeing the live url it's hard to say - but what happens for instance if your increase the text size in the browser??

You were right Dave. I set the accessibility options in IE6 to ignore all font styles/sizes and it broke again. I have changes it to your idea of just inserting the image in the Div. means I can take out the height altogether as well.

Thanks guys.