CSS - Long Text Is Getting Too Wide! Wider Then The Table.

Hello,
I posted this in the HTML forum too but didnt get any replies so maybe people in here know it.

When you have a table cell with a width of 20%, and you put a very long string in it. Let's say 255 chars long, without spaces in between. The cell will then expand beyond the 20% that was specified. How can you prevent this and make sure the string is broken down and goes further on a next line in the cell when the 20% width is reached?

thanks in advance

I have a script that shows the latest lines from my chat. sometimes people will post a super long url or another super long thing without periods

ie

testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something

how can I make css break that up so the browser window won't scroll vertically?

Anybody know how to force a long string of text that doesn't contain any spaces to wrap inside its containing div, and not just sprawl outside of the entire page?

I've done some searching and can't seem to find a lot of discussion about this particular problem. If the content contained enough spaces, then the overflow would wrap nicely, but there aren't any.

What am I missing here?

Thanks

Hello,


I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length.

Instead the text just covers and hides the footer.


I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique.



If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed.


As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy.

-------

Here's a link to the page thats having issues with the footer...

*** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........

infoheaven.bravepages.com/Testamonials/Testimonials.htm



The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above.


I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message.



Sorry for the inconvenience....




Dan -

Hi!

Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit.

Basicly, this sums up the issue:
(sorry for the pure-text link, it didn't allow me to put up a propper one... >.<)
http://img205.imageshack.us/my.php?image=cssiebug.png

So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that.

Here is the code that should be of interest in this issue:
Code:

        <div id="bannerContent">
        <!--{{{-->
           <div id="logo">
                <a href="<?PHP echo $home ?>" target="_self"></a>
            </div>
                
            <div id="search">
                <form>
                    <input type="text" class="searchField" name="uSearchQuery">
                    <input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
               </form>
            </div>
        <!--}}}-->
        </div>

Code:

        #bannerContent
        /*{{{*/
            {
            width: 800px;
            height: 158px;
            }
            #logo
            /*{{{*/
                {
                background: url("../images/layout/logo.png") no-repeat;
                
                width: 394px;
                height: 56px;

                position: relative;
                top: 51px;
                left: 24px;

                float: left;
                }
            /*}}}*/
            #search
            /*{{{*/
                {
                width: 331px;
                height: 32px;

                position: relative;
                top: 62px;
                left: 58px;

                display: inline;

                float: left;
                }
                .searchField
                    {
                    background: url("../images/layout/search_field_bg.png") no-repeat;
                    
                    width: 266px;
                    height: 32px;
                    
                    border: none;
                    outline: none;

                    float: left;

                    <?PHP
                    if (!$agentIE && !$agentFF)
                        echo 'padding-left: 10px;' . "\n";
                    else
                        echo 'padding: 8px 0 0 10px;' . "\n";
                    ?>
                    }
                .searchSubmit
                    {
                    background: url("../images/layout/search_button.png") no-repeat;

                    width: 55px;
                    height: 32px;

                    margin-left: -10px;

                    border: none;
                    outline: none;

                    cursor: pointer;

                    float: left;
                    }
            /*}}}*/
        /*}}}*/

Thanks a bunch in advance!

I've just stripped a design, due to PNG 24 transparency rendering issues in IE ~ and now have a brand new IE related problem.

In order to make the page readable prior to design elements loading, the container div has a different background color to the dark body background. In IE only [up to & inc. version 6], once the page is fully loaded, the background of that div is wider than the elements it contains, leading to an ugly white strip down the right edge of it. This is only happening in IE. Does anyone know how I can get rid of the white strip?

Thank you

I could use some help testing out a css box that's been breaking on large screen res's.

Its a sliding door effect as the page gets wider made with 800px wide images.

I added max-width: 1600px to my container I'm hoping that fixed it.

Quote:
#container{ width: 100%; margin-left: auto; margin-right: auto; margin-top: 100px; max-width: 1600px; }

The main body text in IE stays within the width I gave it, but in Firefox, it just goes off the div, its all not showing becasue I have the containing div overflow:hidden, but why won't it stay in the fixed width div, 603px, in Firefox like it does in IE?

mediacontour.com/TCS/frequently-asked-questions.php

For some reason, FF is displaying the web pages bigger than chrome or IE. I'm reviewing the site CSS with firebug on both FF and chrome but can't seem to find why its pages are different sizes on different browsers. It seems the seems either FF is scaling it up or IE and Chrome are scaling it done.

The other question is, which browser(s) are displaying the real size of the webpage?

Any help would be greatly appreciated!

http://50.116.66.243/~ab27853/

Thanks.

Has anyone else experienced this? I have a div with a specified width of 503px. If I fill it with text, after about a screens worth it's physically 506px in IE (it's fine in every other browser).

Anyone any ideas what could be causing this, or a solution to this problem?

Many thanks

I have a problem with this site - shop dot meenola dot com (Sorry - i am a new member and therefore cannot post a proper URL) - In FF the page is always scrollable to the right although there is nothing there and as far as i can tell the HTML ends in the initially viewable area.
Not usually a problem for most - but using a macbook scrollpad, you tend to fly "offscreen" rather easily.
Have tested in Chrome, IE, Opera and Safari - all of which display correctly (The page ends when the HTML does).

Any ideas?
Thanks
/Adam

hi.
I built a flash website with a resolution of 1920x1200.
The background of this web is 1920x1200 and my actual website with menu and stuff is in the middle of it with a resolution of 1024x768.
How can i upload this website and in the browser to shown always the middle of the flash?
I hope this is possible.
thanks!

I have a textarea in a <td>which asks for users for some description.

If users enter text and don't use any space or enter, the
width of the table gets bigger and bigger and damages the pages
design.


What can I add (to td.fixed_width css for example )to make the line
break after the width of the table is reached???


There is a solution that I put a div in td and then
Code:

#desc {
	width:"100%";
	width::fixed;
	overflow:scroll;}

but it is not exactly what I want

**** EDIT PROBLEM FIXED

Hey guys I'm turning a psd I got from a designer into an html template, but I'm having a little trouble with ie7. It's giving me a ton of space on the right side. I also have a body background set to center and with the space on the right, it's not lining up right.

I've spent way too much time trying to figure out what it is, any help would be awesome.

http://www.bryanlbuchanan.com/sierra/

css: http://www.bryanlbuchanan.com/sierra/includes/style.css


**** EDIT Problem fixed. I had a div nested inside another div that had a defined width. I thought div's inherited the width of it's parent when there was no width defined, but apparently ie7 was rendering the nested div 100% of the screen width while it was offset to the right by about 600px by it's parent. I defined the nested div's width and it all seems to be working fine now.

Hi,

I'm trying to set a box to be offset over a table that contains a jpg. My code is:

Code:

.holder {
    position: relative;
}


.offset {
	position: absolute;
    top: 60px;
    left: 50px;
	height: 140px;
	width: 203px;
	padding: 8px;
	background-color: #FE9900;
	color: #003366;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 9px;
}



<div class="holder">
			
				<table align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
				<tr>
					<td><img src="images/homepage_flyerdeals_pic.jpg" alt="" width="71" height="71" border="0"></td>
					<td><img src="images/homepage_flyerdeals_header.gif" alt="" width="127" height="31" border="0"></td>
				</tr>
				</table>
		
				<div class="offset">
				text here				</div>
			
			</div>

My problem is, the offset box is too high and wide in Netscape. It looks fine and lines up perfectly in IE. How can I get it to look the same in Netscape??