I have applied the following style to the pre
element:
pre {
background-color: #FFFFCC;
border: 2px dashed #FF6666;
padding-top: 7px;
padding-bottom: 8px;
padding-left: 10px;
float: none;
padding-right: 10px;
margin: 10px;
}
The text overflows the box.
When I applied the float:right
property the box behaved as expected but in large screens the rest floated around the box naturally. Not happy. EDIT2 : I made it (but for ie6), using float + clear. I have posted another question on the new bugs
I am new to CSS and HTML - I am sure there is a simple solution. Please help. :(
EDIT : closer to the mark :
pre {
background-color: #FFFFCC;
border: 2px dashed #FF6666;
padding-top: 7px;
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
margin: 10px;
white-space: pre-wrap;
}
This one displays exactly as I want in ie6 - in ff 3.5 the text wraps - I know this is is the way it should be - but how can I carry the ie behavior to ff ?
Images for the styled pre tag with white-space: pre;
ie6 : https://i1032.photobucket.com/albums/a406/dardanov/ie6pre.jpg
ff 3.5 : https://i1032.photobucket.com/albums/a406/dardanov/ff35pre.jpg
for white-space: pre-wrap;
firefox wraps and ie stays the same. How can I get the ie behavior (autoexpanding of the code box) in ff ?
EDIT2 : see answer below
I made it (ff 3.5, opera 10, ie8 but not ie6 (ie7 not tested))
I wrapped the different sections in div tags styled as seen below -in ie6 the divs display with small width (when they include a h3 tag), the pre tag is not affected. In the other browsers the divs shrink with the page - while the pre tag is not affected also. Another small issue I'm having is the right margin not displaying in the pre tag. I have posted another question on these
So the structure of the html is :
<html>
<head></head>
<body>
<div>...</div> //this div is ok in ie
<div><h3>Title...</h3>...</div> //this div is shrunken
...
<div><h3>Title...</h3>...</div> //this div is shrunken
<pre></pre>
<div><h3>Title...</h3>...</div> //this div is shrunken
...
<div><h3>Title...</h3>...</div> //this div is shrunken
</body>
<html>
styled as :
pre {
background-color: #FFFFCC;
border: 2px dashed #FF6666;
padding-top: 7px;
padding-bottom: 8px;
padding-left: 10px;
margin: 10px;
float: left;
padding-right: 10px;
clear: both;
}
div {
float: left;
clear: both;
}