K-dot2011 Posted February 15, 2011 Share Posted February 15, 2011 could someone help me solve this problem?here is the code: .nwProductInfo .product-nw {display:block;height:30px;overflow:hidden;white-space:normal; /* fix for word wrapping in IE */width:125px;word-wrap:break-word;/* break-word:break-all; */float:left;text-align:left;background:none;font-size:12px;font-weight:300;} It wraps fine in FF 3.6, but it does not work in IE7Thanks Link to comment Share on other sites More sharing options...
ShadowMage Posted February 15, 2011 Share Posted February 15, 2011 That's because word-wrap is a CSS3 property. CSS3 support is sketchy at best. IE8 and below support very few (if any) CSS3 properties. Link to comment Share on other sites More sharing options...
K-dot2011 Posted February 18, 2011 Author Share Posted February 18, 2011 Thanks.I'm using overflow:scroll now. However, I'm only getting a vertical scroll bar, not horizontal and vertical. The text extends outside the box horizontally. I think this may be happening due to hierarchy, but I'm not sure. Would I be correct to assume that? Link to comment Share on other sites More sharing options...
ShadowMage Posted February 18, 2011 Share Posted February 18, 2011 I'm using overflow:scroll now. However, I'm only getting a vertical scroll bar, not horizontal and vertical. The text extends outside the box horizontally. I think this may be happening due to hierarchy, but I'm not sure. Would I be correct to assume that?I'm not sure what you mean by "hierarchy". Can you post your relevant HTML and CSS? Link to comment Share on other sites More sharing options...
K-dot2011 Posted February 18, 2011 Author Share Posted February 18, 2011 Sorry, hierarchy = nodes (parent, child) The css I have may not help since I am working in an iframe (overlay) and don't have access to the full page code. So I'm not sure if maybe there is an overflow property set in a parent node that is over-riding my code in the .history-I class. I checked the .shortDescription class, but there was no overflow property listed. The overlay is written in javascript. I don't know if this will help ....CSS: (.history-I) .shortDescrptn .history-I{ background: none repeat scroll 0 0 transparent; display: block; float: left; font-size: 12px; font-weight: 300; height: 50px; overflow: scroll; /* tried 'overflow:auto', 'overflow-y:auto' nothing has worked to create the correct scroll for IE8 */ text-align: left; white-space: normal; width: 125px; HTML snippet: <!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=utf-8" /><title>History I Required Materials</title></head><body><div id="historyIShortDescription"> <form name="rqItems" id="formRqdItems" class="rqdItems"> <div id="displayRqdItems"> <script language="JavaScript" type="text/javascript"> var value = {"RequiredItemGroups":[{"catGroupId":901,"productDetails":[{"CatEntryId":"936","ItemImage":"images/155088.jpg","ProductName":"Introduction to World History","Description":"Hard Cover, 482 pages","Price":{"ListPrice":"59.97"},"Productavailability":["Online Only"]},{"CatEntryId":"767","ItemImage":"images/1550878.jpg","ProductName":"Introduction to Ancient Religion and Cultural Beliefs","Description":"Hard Cover, 386 pages","Price":{},"Productavailability":[]},{"CatEntryId":"653","ItemImage":"images/155088.jpg","ProductName":"Creating Maps I","Description":"Soft Cover, 59 pages","Price":{},"Productavailability":[]}]}]}; parseRequiredItemResponse(); </script> </div> </form></div></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted February 18, 2011 Share Posted February 18, 2011 Try adding !important to your overflow. Like this:overflow: scroll !important;That will override any other overflow settings the element may have. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.