|
CSS - Css Select Word Wrap For Ie
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! Similar Tutorialsis 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!! 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: 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;} 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; }
HTML Code: Original - HTML Code <div class="leftHand" id="leftHand"> </div> <div class="leftHand" id="leftHand"> </div> 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.... Two questions: 1, I tried using min-width and it doesnt work with block level elements unless I float them or use position: absolute. What is the correct way to set the width on a block level elements? 2, Now FF also implements: word-wrap: break-word, so thats very good news. However I cant get it to ignore a minimum width. Ie I dont want a div with a min-width containing text to expand when the word-wrap is set and the text is too long. I only want it to expand when other items that are larger then the min-width are put in the div not when text is put in the div. thanks Hi; Could anyone tell me How to make the words(Australia, lawer, other..and so on) bigger from the select boxs ? Thanks Code: <form name="search_form" id="sf" action="search_p1.php" method="get"> <div> <span class="search_form">Country:</span> <select name="country" id="country" onchange="setStates();"> <option value="Australia">Australia</option> </select> <span class="search_form">state:</span> <select name="province_state_territories" id="state" onchange="setCities();"> <option value="">Please select a area</option> </select> </div> <div> <span class="search_form">city:</span> <select name="city" id="city"> <option value="">please choose a city</option> </select> <span class="search_form">area:</span><input type="text" name="area" size="10"> <span class="search_form">business type:</span> <select name="business_type"> <option value="solicitor">lawer</option> <option value="other">other</option> </select> </div> <div> <input type="submit" id="search_submit" name="search_submit" value="submit"></div> </form> Hi guys, I normally just look at forums and lurk without joining however I've run into a problem in which case I have to ask. I apologize be for hand if this is in the incorrect place or if it sounds rude (from a person who just joined.) I'm having problems position my menu inside a wrap and to have it fully extend to the end (100%). I'm met with a couple of problems with everything I try. I would post a picture, however It wont let me as I just signed up. If needed I will reply with the link spacing out the url so its accepted, but thats if you require it. Here is the CSS code I use. #menuwrapper { /*holds menu*/ float:left; position:fixed; margin: 0; padding: 0; width: 900px; height: 2em; background-colorink; border: thin solid orange; } #iframe { width:900px; height:500px; border: 1px dashed purple; margin: 0; padding: 0; text-align:center; z-index: 1; } .logo { width:900px; z-index: -1; } /*nav*/ #nav { width: 100%; height:2em; font-size: 14px; color:green; z-index:3; position:absolute; } #nav ul { margin: 0; padding: 0; width:100%; list-style: none; overflow:hidden; } #nav a { text-decoration:none; color:green; } #nav li { position:relative; /*main*/ list-style:none; float:left; width: 8em; height:30px; line-height: 2em; background-color: #e3d0d3; } #nav li:hover { /*hover when mouse goes over - default*/ background-color: #c4c5c7; } #nav li:hover a { /*text hover - col etc*/ display:block; float:left; text-align:center; } #nav li ul { display:none; } #nav li:hover ul{ display:inline; float:left; height:auto; margin:0px; padding:0px; text-align:left; } #nav li:hover ul li { width:100%; height:2em; border:none; border-bottom: 1px dotted black; } Any help on this will be a huge help. Many thanks G. when text is displayed in a div.. it only goes 75% of the width of the div and then line breaks. I want it to go 100% of the div and then line break. How do i solve this. Here is the css for the div. Code:
.message {
float:left;
width:98%;
background-color:#EFEFEF;
border: 1px solid black;
padding:4px;
overflow:auto;
margin-left:3px;
min-height:120px;
}
i am making a web page using CSS. At the bottom of the page I have a box from left to right with thumbnails in it. I do not want these thumbnails to wrap. I tried whitespace:nowrap, but this makes the page really wide. The box the images are in has AUTO for the width. So if I re-size the window the width of the box re-sizes. Is there any way to add a link to a wrap image Under Page structure I have made 4 wraps (displaying the relevant one-..image path is made-up) Quote: blah blah... #wrap4 { background:url("http://www.ssswww.com/yyy.gif") no-repeat 95% 0.3%; padding:15px; width:100%; width/* */:/**/auto; width: /**/auto; } #content { max-width:890px; padding:0 30px 50px; ...blah blah And under Body: Quote: <!-- Begin wraps --> <div id="wrap"><div id="wrap2"><div id="wrap3"> <div id="wrap4"> All I want to do is attach a link to the #wrap4 image so that the whole image would be a one giant link. Does anyone know a way how to do it? Thanks! I'm creating a textbox that user text will be entered into. It has preset dementions, and I need to be able to scroll down when the text exeeds the height, but I need to be able to force the sides to wrap..... I was using this: <pre style="width:110px; height:130px; overflow:scroll"> but that let's them scroll to the side, too, I want to force a wrap on the sides, but still scroll vertically.... Hi, I have a site which, due to a lot of extraneous code from the CMS, essentially, looks like this: Code: <div id="wrapper"> <div id="header"></div> <div id="left-panel"> [content] </div> <div id="full-panel"> <div class="standard-article"></div> <div id="prices">[table goes here]</div> </div> <div class="clear"></div> </div> Basic CSS: Code: #wrapper {
width: 1007px;
}
#left-panel {
float: left;
width: 216px;
}
#full-panel {
width:735px;
}
The site is designed to be a fixed width of 1007px (and this is set in the CSS in various location: wrapper, header etc). My problem is that, within the 'prices' div, there is a table which can be many columns wide. At the moment, in IE6 (Firefox is fine), the full-panel div wraps down below the left-panel when I would actually prefer it to stretch outwith the boundary of the 1007px wide site. Is this possible? Can anyone assist? Thanks in advance. R Currently I have this: <div style="padding:5px; overflow:auto; border:1px solid #c0c0c0; font-size:13px; background: #EEE;"> mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd </div> I want to make it so that it will always stay on 1 line, and a horizontal scroll bar will appear if the window gets too narrow. How can I do this? edit: I can't use <pre> tags because the destroy the formatting in a more annoying way. Hi there! Okay, I'm working on some CSS for a page that is heavily javascript-based, it's a simple search-utility I'm fooling around with for university coursework and simply loads some amazon results, and finds related eBay results for each one. You can find the tool here (ignore any certificate warnings, I wouldn't recommend firing your credit-card details onto my site anyway =): https://devweb2008.cis.strath.ac.uk/~isimms/MashUp/ It currently only works properly in FireFox 3 or Safari 4 (preferred), and kind of in Google Chrome. I don't care much about this just now so use one of the first-two if you do visit the page! Now, once you enter a search (my typical one is "USB"), you'll get a list, on the left is the amazon image, and to the right of that is a "loading" div which will expand with some eBay results. Now, the problem I'm having is that if you shrink the window (or later on if more results are added) then the eBay box will wrap so that it is underneath the amazon image, before the results within the ebay box start wrapping. What I would like to do instead is have the eBay results wrap within their box, so the box stays to the right of the amazon image, while stretching downwards as required. I can't think of any way to do this though without specifying a width which of course isn't something I want to do as the amazon image is a fixed size (otherwise it won't remain square), while the rest of the page is variable-width. Anyone know what I'm getting at here and have any ideas how this could be done? Hi folks, Heres a basic layout I created that includes a transparent PNG file with text wrapping around the image pretty well. http://agogo.dnsdojo.com/img/png_test/1.html I would like the layout to look more like this though: http://agogo.dnsdojo.com/img/png_test/indesign.png With the text wrapping around the circle. Considering the PNG file has transparency is there a way to do this with CSS. Greetings, How do you make a paragraph wrap around an image that is floated to the right or left? And what I mean here is not placing the image in a specific place in the middle of the paragraph code and then floating it, but wrapping text that comes from a tag like <p>$paragraphContent$</p> around an image that is floated left or right. Like basically, you don't know what exactly the text of the paragraph is, but whatever the text will be like, you want it wrapped around the image, and the image to be nicely placed in the middle of that paragraph. And can you do this with a number of paragraphs inserted in a <div> tag for instance? I mean just one image for all those paragraphs, to be placed neatly in the middle? Thanks for anyone taking the time to help and give tips. I am working on this site design for a client: http://universalcorner.com/testsite/ In the center of the site, there is a text box with a dark blue square-shaped div inside of in it, positioned in the bottom right corner. CSS: Code:
#textbox {
width: 636px;
height: 292px;
float: left;
display: block;
border: solid #000027;
border-width: 0 12px 12px 0;
background: #C1BDFF;
margin: 0;
padding: 0;
}
#textbox p {
margin: 10px;
}
div.cube {
width: 150px;
height: 140px;
border: solid #000027;
margin: 0;
padding: 0;
}
HTML: Code: <div id="textbox"> <div style="background: #002455; float:right; border-width: 12px 0 0 12px; margin-top: 140px; margin-left: 10px" class="cube"></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p> </div> The client would like the text in this box to wrap around the top of the dark blue square-shaped div, filling in the empty space above it. My current code has the square div positioned correctly, but because of the margin-top, it only wraps around the left side of the div, leaving the space above it blank. I also tried setting the square div's position to relative and top: 140px. This positioned the div correctly, but it overlapped the text rather than letting it wrap. Still had the blank space above it, too. Is there a way to achieve what the client wants? I'm having a bit of trouble getting multiple <div> to wrap around a floated <div> in IE [tested in IE8]. Using "clear: all;" it looks fine in Chrome and Firefox, but I'd prefer it to validate properly, as well as getting it working in IE! Online example at http://www.afcwgb.co.uk/boxtest.php Any tips gratefully received Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Floating Boxes</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-color: #C8C8C8;
font-family: Verdana, helvetica, arial, Geneva, sans-serif;
font-size: 11px;
text-align:center;
}
#boxtest_container {
margin-right: auto;
margin-left: auto;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
background-color: #FFA;
border: 1px solid black;
width: 790px;
padding: 5px;
}
#boxtest_header {
padding: 10px;
border: 1px solid black;
border-bottom: 5px;
}
#boxtest_index {
padding: 10px;
border: 1px solid black;
}
#boxtest_footer {
padding: 10px;
border: 1px solid black;
}
#boxtest_rightbox {
width: 225px;
border: 1px solid black;
background-color: #00ff00;
float: right;
padding: 5px;
margin-left: 5px;
margin-bottom: 5px;
display: block;
}
.boxtest_post {
border: 1px solid black;
clear: all;
overflow: hidden;
margin-bottom: 5px;
}
#boxtest_mainbox {
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<div id="boxtest_container">
<div id="boxtest_header">Header</div>
<div id="boxtest_index">Index</div>
<div id="boxtest_mainbox">
<div id="boxtest_rightbox">
<div align="center">Rightbox</div>
<p>This box is "floated" to the right of the page.</p>
</div>
<div id="boxtest_leftbox">
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
</div>
</div>
<div id="boxtest_footer">
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10.gif" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> - <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</div>
</div>
</body>
</html>
|
|||||||