Search code examples
htmlcsstexttagspre

pre tag- text overflows the box


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


Solution

  • 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;
    }