Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox / IE 5.0 span problem

    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!?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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?

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    CATdude about IE6: "All your box-model are belong to us"

  • #4
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by phil_w; 07-18-2005 at 09:19 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •