|
CSS - Word-wrap Using Max-width And Ie6
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;} Similar TutorialsTwo 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 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!! 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 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: 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! 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.... right now i have a div that is floated left. in Firefox, the width of the box depends on the contents. however, in IE, the width is 100% of the parent element. how can i make IE act like firefox in this situation? Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window. I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left. Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands. Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background. Full width: |---------------------------------------| |AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA| |---------------------------------------| Shrunk width: ------- |------------------------| -------- AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA ------- |------------------------| -------- Grey bit outside window edge. | Window side A Arms H Hands B Banner I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks. I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6. Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further. Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size. Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
<form id="frmMain" runat="server">
<div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">
<div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
<asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
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. 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.... 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. |
|||||||