CSS - Microsoft Word 2000 Not Liking My Css

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

Hello!

I have three a footer, with 3 nav word groupins..ie, join our newsletter, site map, about me....i need to space them evenly across the bottom of the footer - one on the left, one to the right and one in the center, using CSS. I'm a newbie to CSS. =) so bear with me.....i jsut don't know what piece of code i'm looking for! do i set a margin for the class style and on the middle word have it have so much of a margin to the left and right? or padding? or ....there's so much to choose from, i'm not quite sure what's the best (read easiest) solution to get them apart.

help?

thanks!

carrie

I have a div using width
Code:

			div.contain {
				width:200px;
				font-style:italic;
			}

Say, I have a long word such as:

Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu

If i have multiple words, they will break after 200px width.

Is there any CSS tag that will contain long words?

Can CSS select the first word in a Div? If so how?

Example: first word in a pharagraph.

how i do that again?

I was just wondering if there is an option in CSS to set a word limit?

-bpatrol

Ok, I thought this would be simple, but I was wrong. I have a simple <textarea>. In this textarea, I do not want to have the text wrap at the edge of the text box. Seems simple. Well, here's where the monkey **** starts to fly. It turns out that the w3c has deprecated the "wrap" attribute in XHTML 1.0 (which is the standard I use). Ok, there should be a CSS property to take care of this then, right? Wrong, as far as I can find anyway. I have found the white-space property and this sort of works in IE (but no horizontal scroll bar) and not at all in Firefox. Is there anything that I have missed that actually works correctly in multiple browsers, besides the "wrap" attribute (which, incidentally, works perfectly in both browsers)?

My advice to me is to start drinking heavily. cadrunk:

Is there a CSS quivalent to the Word Break <wbr> tag?

My Client wishes to save off html pages from my site to Microsft Word (in .doc format)

However the pages loose their CSS styling when you do a direct copy and paste. Possibly because Word does not support CSS properly.

Does anyone know of a convertor that could I could use?

Or even a Java API that allows this?

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>

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!

Is it possible to define a style (color) for all instances of a certain word, say " blue " by means of CSS only? That is, not defining anything in the HTML code.
If the above is not possible, how to highlight the word "blue" using the least amount of tags in the HTML code?

Hi

I am facing starnge issue in IE with word-wrap: break-word style.
When I set this to a p tag some times I see a word of that paragraph is displaying twice on IE though there is single instance in source.

I tried debugging and found by removing the word-wrap style it is displaying as in source.

But I have to wrap the word text to avoid crossing the p tag.

Please suggest....