I am new to this forum. My issue is a firefox problem. I have a function to resize text based on percentage. in ie6,ie7, and opera the text is held firm by the 690px div. however, in Firefox 3 the text expands beyond the div and only wraps appropriately on reload. I prefer to avoid a reload. I have attempted overflow:hidden, overflow-x:hidden, text-overflow:ellipsis(only functional in IE7) and display block. can anybody suggest another tactic to cause the text to maintain within the fixed div boundaries. css for the div i am trying to stay within. *,body,html{padding:0;margin:0;} body{font-size:1em;} #mainContent { position:relative; float:left; border-right:solid 1px #00a5c1; width:690px; } #mainContent p { padding:10px 20px; text-indent:30px; font-size:80%; }
You don't show enough for us to help you. I would normally be able to tell you right away what the problem was but you said it's working in Opera, too, so now I'm not sure. Need a link or the complete markup.
Sorry about not including more, just trying to not use up too much space. i have included the html and the css. let me know if you need the javascript. the javascript is adding 10%or subtracting 10% from document.body.style.fontSize. i haev removed all nonworking script like the overflow none and the display block from the css. div markup; <body onload="loader()";> <div id="container"> <div id="wrapper"> <div id="bgWrapper"> <div id="bgleft"> <div id="bgright"> <div id="bodyWrapper"> <div id="header"> <div id="headGraphic"><img src="includes/images/headerLogo.png" width="210" height="145"/></div> <div id="globalNav"> <div id="gMenu"> <ul> <li><a href="javascript: void(0)" class="active">Home</a></li> <li><img src="includes/images/vertBar.png" width="1" height="30" /></li> <li><a href="javascript: void(0)">Services</a></li> <li><img src="includes/images/vertBar.png" width="1" height="30" /></li> <li><a href="javascript: void(0)">About Us</a></li> <li><img src="includes/images/vertBar.png" width="1" height="30" /></li> <li><a href="javascript: void(0)">Sign Up</a></li> </ul> </div> <div id="login"> <form action="javascript: void(0)" method="post" enctype="application/x-www-form-urlencoded" > <ul> <li> <label for="username">Username</label> </li> <li> <input name="username" type="text" size="15"/> </li> <li> <label for"password">Password</label> </li> <li> <input name="password" type="password" size="15" /> </li> <li> <div class="submit"> <input name="submit" type="image" id="submit" src="includes/images/enterArrow.png" alt="SUBMIT"/> </div> </li> </ul> </form> </div> </div> </div> <div id="bodContent"> <div id="bodLayout"> <div id="mainContent"> <div class="mainBodImage"><img src="includes/rotating/ist2_5969560-filling-prescription-online.jpg" /></div> <H3>Reminders Wherever You Are</H3> <hr /> <ul id="types"> <li><a href="javascript: void(0)"><img src="includes/images/sms.png" /></a></li> <li><a href="javascript: void(0)"><img src="includes/images/email.png" /></a></li> <li><a href="javascript: void(0)"><img src="includes/images/MMS.png" /></a></li> <li><a href="javascript: void(0)"><img src="includes/images/telephone.png" /></a></li> <li><a href="javascript: void(0)"><img src="includes/images/onstar.png" /></a></li> </ul> <p>Description </p> <H3>Our Mission</H3> <hr /> <p>Text shortened for post.</p> </div> <div id="sideBar"> <h3>Text Size</h3> <hr /> <p><a href="#" onClick="fSize('+10');">Higher</a></p> <p><a href="#" onClick="fSize('-10');">Lower</a></p> <p><a href="#" onClick="fSize('How much difference? E.g. +10 or -10');">Prompt</a></p> </H4> </p> <h3>Testimonials</h3> <hr /> <p class="indent">Text shortened for post<a href="javascript: void(0)">MORE</a></p> </div> <div class="clear"></div> <div id="footer"> <div id="footerBar"> <ul> <li><a href="javascript: void(0)">Home</a></li> <li><a href="javascript: void(0)">Privacy</a></li> <li><a href="javascript: void(0)">Contact Us</a></li> <li><a href="javascript: void(0)">Sign Up</a></li> <li>©2008 My Med Text, LLC.</li> </ul> </div> </div> </div> <div id="bgbottom"></div> </div> <div id="bgbottomrt"><img src="includes/images/bgrightcorner.png" /></div> </div> <div id="bgbottomlt"><img src="includes/images/botritcorner.png" /></div> </div> </div> </div> </div> </div> relavent css markup: *, body, html { padding:0; margin:0 } body { background:#838180; font-size:1em; font-family:Helvetica, Verdana; overflow:auto; } .clear { clear:both; } #container{ position:absolute; width:100%; } #wrapper{ position:relative; margin-left:50%; width:960px; left:-480px; } #globalNav { width:930px; height:30px; } #bodLayout { width:930px; } #bodContent { position:relative; height:100%; margin-top:30px; padding-top:30px; } #bodLayout { position:relative; } #mainContent { position:relative; float:left; border-right:solid 1px #00a5c1; width:690px; } #types{font-size:12px;} #types li img { border:none } #types li a { border:none } #types li a:hover { border:none; } #mainContent H3 { position:relative; left:15px; } #mainContent p { padding:10px 20px; text-indent:30px; font-size:80%; width:690px; } #types li { position:relative; border:none; text-decoration:none; list-style:none; display:inline; } .mainBodImage { float:left; padding-right:20px; padding-bottom:10px; padding-left:20px; width:24%; } .mainBodImage img { width:100%; } #sideBar { position:relative; width:200px; overflow:hidden; float:right; height:100%; width:235px; } #sideBar ul { position:relative; } #sideBar ul li { position:relative; border-bottom:solid #00a5c1 1px; margin-left:20px; list-style:none; font-weight:bold; font-size:14px; } #sideBar p { padding:10px 25px; font-size:12px; } #sideBar H3 { position:relative; left:30px; } #sideBar hr { margin-left:20px; }
So I figured it out. Rather than writing the document.body.style.fontStyle (which works on all browsers except ff3) i wrote a document.getElementById("myDiv").style.fontSize for each relevant div i needed resized. this still works in all other browsers but also works in FF3. the text now wraps appropriately.