CSS - Facing Issue With Word-wrap In Ie

Hi all,

How do you wrap text in a div from the x-coordinate but the y-coordinate must have a scroll bar.


CSS Code:
Original - CSS Code .leftHand { height:300px; overflow-y:scroll; position:relative; width:550px; background-color:#F7FAFC; word-wrap:break-word; display: block; }

  

  


 .leftHand


     {


         height:300px;


         overflow-y:scroll;


         position:relative;


         width:550px;


         background-color:#F7FAFC;


         word-wrap:break-word;


         display: block;


  


     } 

HTML Code:
Original - HTML Code <div class="leftHand" id="leftHand"> </div>

  

<div class="leftHand" id="leftHand">
</div>

is there another way to make text wrap and not expand the div? i.e a div 200px wide expands if too much text is put in the box. On other websites I have seen this happening and looked at the code but I couldn't see anything I wasn't doing? The only way I can fix it is by adding this to the css:

word-wrap: break-word;

surely there is another way???
This isn't a problem I just am interested to find out how else you can do it because I can't work out how else you can do it

thanks

Hey all! I'm having a major word-wrap issue in IE and it's driving me bonkers. I've tried to research it, but couldn't find anything. Most of the problems people have with word-wrap are in FF, but I'm having noooo problems with it FF.

I have a left nav for the site I'm building and I'm forcing a word break at 125px. In FF and IE, it forces the word break just fine. However, in IE, it also bumps out the width of the above div tag to what the width would be if the tag wasn't forced to break. It looks like all the div tags are the correct width, but the #col1 td tag won't allow a max-width. That's what I'm thinking anyway.

Here's how it is in IE (ignore the borders):
http://www.abellefeuille.com/mg/Untitled-3.gif

Here's how it's supposed to look (again, ignore the borders):
http://www.abellefeuille.com/mg/Untitled-3-FF.gif

Here's the code:

CSS:
Code:

#col1{width:148px;
      vertical-align:top;
      color:#666666;
      font-size:12px;
      padding-top:20px;
      padding-bottom:20px;
}

.view_ln{max-width:125px;color:#333333;font-size:11px;font-weight:bold;padding:2px 0px 2px 0px;}
.view_ln h1{word-wrap:break-word;}

HTML:
Code:

<td id="col1" style="border:1px solid green;">
                            <!-- viewing -->
                            <div id="view" style="border:1px solid blue;">
                                <div class="ln-title">Viewing</div>
                                <div id="ln_keyword" class="view_ln">
                                    <span class="line">Activity:</span><br/>
<h1>ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppa</h1> <a href="" class="x-search">(<span>x</span>)</a>
                                </div>
                                <div id="ln_brnd" class="view_ln">
                                    <span class="line">Brand:</span><br/>
                                    <h1>Marmot</h1> <a href="" class="x-search">(<span>x</span>)</a>
                                </div></td>

Any advice will be most appreciated. THANKS!!

I am trying to build a site with centered content that resizes with the browser window. Click here to see a test page of what I am doing.

Notice that this looks and functions beautifully in firefox/Opera. Notice that it functions semi-beautifully in IE. The fact that it even works in IE at all is a miracle because when I was searching for an answer to my problem I stumbled upon this:
PHP Code:
 width:expression(document.body.clientWidth > 800? "800px": "auto" ); 




which allowed me to specify the max-width for my content.

Now what I would like to happen is when the browser window is resized, I would like the text to wrap to fit the window within the center content div. To see what I mean, view the page in firefox and narrow the width of your browser window and then try the same thing in IE.

Is there a way to make IE behave like firefox?

Here is my markup:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nova Electronics Dat, Inc.</title>
<link rel="stylesheet" type="text/css" href="styles/main_style.css" />
<link rel="stylesheet" type="text/css" href="styles/drop_down.css" />
<script type="text/javascript" src="scripts/javascript.js"></script>
</head>

<body>
    <div id="drop_down">
        <ul id="nav">
            <li id="first">
                <div><a href="">Link</a></div>
                    <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li>
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li>
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li>
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li id="last">
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
        </ul>
    </div>    
<div id="content">
    blah blah blah blah
        blah blah blah blah
</div>

</body>
</html> 





and the relevant CSS (i left out the suckerfish menu CSS):
PHP Code:
 body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
 padding-top: 20px;
 margin: 0;
 color: #FFFFFF;
}

#content {
 max-width: 800px;
 background-color:#0099BB;
 border: 6px double #999999;
 padding: 0 1em;
 voice-family: "\"}\""; 
 voice-family:inherit;
 margin: auto;
 width:expression(document.body.clientWidth > 800? "800px": "auto" );
}

html > body #content{max-width: 800px;} 

Hello!

I have a little bit of a problem. I'm trying to create a drop down with a fixed width, but have the options be a flexible width (in other words, it flexes with the content. It works just fine in Firefox and Chrome, but surprise, surprise, IE cuts it off. Is there anyway to trigger word break or something in IE? I tried a line break and that didn't work either.

Thanks for any input!