View Full Version : Firefox / IE 5.0 span problem

07-14-2005, 12:55 PM
I have a block of text containing several spans ( <span class="highlight"> ... </span> ). My problem comes when I resize the text in the block. While the font-size of the span also increases, with Firefox the width does not, which results in the enlarged text spilling out and overwriting the subsequent text.

Setting the width of the span to 100% seems to solve the problem. Trouble is, IE 5.0 interprets the 100% literally, and makes the span the same width as its parent. Other browsers (IE5.5+, Opera 7+, NN6+) treat width:100% the same as FF, so it seems to be an IE 5.0 problem.

Wondered if there was some other CSS value apart from width:100% that would work in ALL browsers!? :)

07-14-2005, 01:01 PM
Wait hold on, you are setting a width to an inline element? You can't do that well you shouldn't be doing that. If you are going to set a width and/or height to an inline element you need to make it display:block; in which point it would be useless to even use the inline element in the first place. Can you post your code or a link to your site please?

07-14-2005, 01:04 PM
When you want to increase the the width of a block when "zooming", use em or ex instead of px.

If you just want to hide thtext that floats over the line, you could apply overflow-x:hidden to the block level paerent element.

07-18-2005, 09:10 PM
First, many thanks for the prompt replies. Much appreciated!

After a great deal of head-scratching I think I've worked out what is going on. Not sure if it's a JavaScript or a CSS problem. Kind of both, I guess. Basically, I had a page which contained an inner div inside an outer. When I increased the font-size of the outer div, with Firefox the span in the inner div inherited the new size but didn't increase its width accordingly to accomodate the larger text. Which caused this effect (http://www.btinternet.com/~p_whittaker/test1.html ). Doesn't seem to happen in other browsers.

The remedy is: increase the font-size of the inner div instead of the outer. Problem solved (http://www.btinternet.com/~p_whittaker/test2.html ).

Unfortunately I deleted my original page (different layout to the examples above), but for some reason setting the width of the span to 100% DID actually cause the problem to go away when the page was viewed in Firefox. I've no idea why. It doesn't in the first example I've posted here, so I don't know what the difference was!

No, I don't make a habit of applying widths to inline elements! I only mentioned the 100% thing because in the case of Firefox it worked. I quite agree that it should NOT have done, but ....!

Anyway, thanks again guys!