Hi,
In Firefox, div is not fitting to its text contents.
There is requirement that on selection of fontsize from dropdown, div contents font size changes accordingly. Font Size DropDown values ranges from 5-95.
When contents font size is increased, text contents
are overflowing.
To solve this, i defined div mihheight as 20px and height as auto. but still not working.
Please let me know if any one has any idea on this.
Thanks in advance
Perhaps for each incremet, increase the width and height accordingly by x amount.
Sunilsinha,
After a quick play, this is about as good as I could get it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.test { width:400px; height:400px; padding:10px; font-family:arial; border:1px solid #000000; overflow:hidden; }
</style>
<script>
function fontSize(s, id){
var d = (document.getElementById) ? document.getElementById(id) : document.all[id];
var val = s.options[s.selectedIndex].value;
d.style.fontSize = val;
}
onload = function(){
var s = (document.getElementById) ? document.getElementById('fontSizer') : document.all['fontSizer'];
s.options.selectedIndex = 1;
fontSize(s, 'test');
}
</script>
</head>
<body>
<select id="fontSizer" onchange="fontSize(this, 'test');">
<option value="5pt">5</option>
<option value="12pt">12</option>
<option value="25pt">25</option>
<option value="50pt">50</option>
<option value="75pt">75</option>
<option value="95pt">95</option>
</select>
<div id="test" class="test">
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
<p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p>
</div>
</body>
</html>Unless you set a width, IE6 still insists on pushing out the div width for long words, despite overflow:hidden . overflow:scroll and overflow:auto are no better but play around with these overflow settings to see which is best for your content.
Airshow
Thank you for your reply. But by doing so, all contents are not visible at the same time. I want all contents to be visible through out
Any other solution?
Thanks in advance
Sunilsinha,
After a quick play, this is about as good as I could get it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Airshow :: Untitled</title> <style type="text/css"> .test { width:400px; height:400px; padding:10px; font-family:arial; border:1px solid #000000; overflow:hidden; } </style> <script> function fontSize(s, id){ var d = (document.getElementById) ? document.getElementById(id) : document.all[id]; var val = s.options[s.selectedIndex].value; d.style.fontSize = val; } onload = function(){ var s = (document.getElementById) ? document.getElementById('fontSizer') : document.all['fontSizer']; s.options.selectedIndex = 1; fontSize(s, 'test'); } </script> </head> <body> <select id="fontSizer" onchange="fontSize(this, 'test');"> <option value="5pt">5</option> <option value="12pt">12</option> <option value="25pt">25</option> <option value="50pt">50</option> <option value="75pt">75</option> <option value="95pt">95</option> </select> <div id="test" class="test"> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> <p>erter jh yuiyuud sdfzc vgngh szdfzsd ghutyj dzsfs hf zsda dr vxdwe a\d afgdfhfg fczs dhfctyuityxuiopswafd.</p> </div> </body> </html>Unless you set a width, IE6 still insists on pushing out the div width for long words, despite
overflow:hidden.overflow:scrollandoverflow:autoare no better but play around with these overflow settings to see which is best for your content.Airshow
There is no escape....unless.....you use a TextArea Object.
<TextArea>Here is your Text</TextArea>Otherwise, is there a way to set the vertical scroller but NOT include the Horizontal?
Also, can you set it to WordWrap?"
=========================================
"I use Ajax to clean the floors".
Just a note - A div Tag is used to hold something, like an object eg a paragraph or an image or option buttons etc. The div tag allows the user to put an object anywhere on the web page
The extra Div elements will not work in all browsers. Just use the Div Tags as a container for other elements.
<div id="layer2" style="position:absolute; background-color:#C2DADA; left: 338px; top: 64px;"><Textarea Height=100> Here is your text</TextArea></div>The div tag allows the user to put an object anywhere on the web page
Not actually wrong but possibly misleading. <div> is a general purpose HTML block-level element in the same way that <span> is a general purpose inline element.
Block-level elements can be used as containers for data, inline elements and further block-level elements.
Generally, inline elements may contain only data and other inline elements.
Both block-level and inline elements are neutrally styled by default and can be styled using CSS. By judicious use of CSS selectors, styles can be applied not only to an element itself but also to its contained elements, and their contents, and so on. Unstyled divs are often used to delineate a section of a document, the contents of which need their own styles.
Many elements, block-level and inline, can be styled with CSS to postition them absolutely with respect to the window or a containing element. Absolute positioning takes elements out of the normal document flow. Similarly, relative positioning adjusts an element's position with respect to where the normal flow would put it. <div> is one of several elements that can be absolutely or relatively positioned.
Some further reading :
http://www.w3.org/TR/REC-html40/struct/global.html
Particularly sections 7.5.3 and 7.5.4 .
AirShow - Sure, Div on its own but it rarely is used on its own because it is a layer that you can move or hide under another "layer". It usually contains Text, or an object. To stop overflow, use <BlockQuote> to wrap the text.
=====================================
If any Teachers are reading this -
"This assignment will have no bearing on future, or current, web development. Try teaching your students on proper web designs features that are actually implemented into web pages."
==============================================
If anyone wants to see a web page where you can change the Font color and Background color then see this web page (there are no adverts or popups) -
http://www.geocities.com/excelmarksway
I mention this because if you are required to change the fontcolor or background color, it is better to use RGB(x,y,z).
If you use the RGB(x,y,z) where x, y, & z are numbers between 0 and 255. you can create a name id for x, y, and z. When you want to change a color of , say, the fontocolor, create a name id for the text. Reference the function that changes colors to the text Name Id.
=====================================
'If at first you don't succeed, read the question properly."
Jupiter,
AirShow - Sure, Div on its own but it rarely is used on its own because it is a layer that you can move or hide under another "layer". It usually contains Text, or an object.
I don't know what you mean by a div being used "on its own".
Yes, you can move a div but only when its CSS position attribute is set to absolute or relative. With absolute positioning, you can also completely hide a div. These capabilities are not unique to divs and are not their default behaviours.
To stop overflow, use <BlockQuote> to wrap the text.
This is incorrect.
<blockquote> is a block-level element. Its ability to control overflow is no greater and no less than other block-level elements. In standards-compliant browsers, overflow will be displayed outside the element's boundaries. I tried it before posting.
I suggest you read my post again, and the suggested further reading.
Airshow
AirShow - You do realise this is a school project, probably a Diploma Level question. I Tried your sample code and it didn't give any scroll bars. a textarea gives you scroll bars. The project requires the user to have a transparent box in which a background image can be seen. The text is required to wrap into a box of which must be able to scroll. The test size must be changeable as well as be able to fade into a transparency. The box opacity must be changeable. Fro all the questions i've "answered" so far, require these things.
To the person who asked this question -
Is It So? Or am I wrong (as usual!)
I know only what the original poster asked. I understand it to be a question about overflow when using a large font-size. Neither scroll bars, background image nor fading text was mentioned.
My code above will not show scroll bars because the CSS specified overflow:hidden . At the bottom of my post you will see that I suggest trying overflow:scroll or overflow:auto . Both of these will provide scrollbars.
You can indeed try textarea, which appears initially to behave very much like a div with overflow:scroll . But there are cross-browser differences - notably IE6 word-wraps, whilst FF 3.0.10 provides a horizontal scroll bar. Meanwhile, Opera 9.01 won't play ball - it refuses to change font-size in a textarea, though it does increase line height. For me Opera's behaviour would rule out textarea, however it does depend on one's need for a cross-browser solution. Textarea behaviour in other browsers may be acceptable for the original poster's needs.
For me, textarea is no better in IE6 and FF 3.0.10 than a div with overflow:scroll or overflow:auto . The Opera issue makes it worse.
Until CSS3 becomes widely supported, long word overflow will remain an intractible issue. CSS3 makes provision for word-wrap:normal|break-word .
Airshow
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.