HOME | SERVICES | CONTACT | PORTFOLIO | MUSIC

CSS - Long URL

I've been working on a webmail client and have been having a few design problems. Sometimes when you subscribe to a blog, forum or usergroup the e-mails from those respective subscriptions will include an "unsubscribe url". This Blog does. Now this URL can be really long and, in a normal email client (Outlook, Thunderbird etc) this is a non issue. But, writing a webmail client this became an issue.

In Firefox, if the url is longer than the width of the div area it would break my layout. In IE the long url would wrap to the next line as expected. The only Fix I could find for this was


#mail {
    letter-spacing: normal;
    vertical-align: top;
    word-spacing: normal;
    white-space: -moz-pre-wrap;
    overflow: hidden;
    word-wrap: break-word;
    width: 765px;
}

The "white-space: -moz-pre-wrap" setting behaves the same as "pre", with one exception, the line-wrapping control is returned to the browser when the browser needs it (such as the browser window boundary or something similar) Tabs, multiple spaces and existing line-feeds are also honored as well.

This didnt completly fix my problem, it did preserve my layout but now the url extends past the boundry across other content. So, I added the "overflow: hidden" This addition is as close as I can find to make this work, with that added into the css property now anything that extends past my div boundry is hidden but the entire hyperlink is preserved.

If anyone knows of a better fix for firefox please feel free to leave a comment and let me know.

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
I've had a similar issue with Blog CFC sidebar modules. In the Recent Comments include, someone left a long URL in their response. That's it just the URL. Firefox was nice enough to stretch the url past the boundaries of the div tag. It looked awkward, but nothing like IE. IE would take the URL and keep it withn the div tag. But it would push out the div to fit the URL. This in turn pushed out the column width and wrapped my whole right hand navigation below my content.

I had to go into one of the BlogCFC files and change a variable to make the display content wider. (can't remember which variable i changed)..but I documented this same comment in the Galleon Forums.
# Posted By Christopher Chin | 6/9/06 2:54 PM
Content Copyright © 2005 Owen Consulting - All Rights Reserved | This Blog Powered by BlogCFC version 5.9.1.002.