SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Northampton, UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE width and white-space issue

    Howdo Peoples,

    I am hoping some of you can enlighten me before I lose *ALL* of my hair. On my website I am trying to hightlight PHP and HTML codings that I include in articles within a yellow box, which I am creating via enclosing it within a <div id="codebox"> .... </div>.

    The CSS for this looks like

    Code:
    div#codebox {
      width: 500px;
      padding: 5px;
      border: solid 1px black;
      background-color: #f9fac9;
      font: normal 10px "Courier New", monospace;
      white-space: nowrap;
      overflow: auto;
      margin: 0px !important;
    }
    This looks exactly how I want it when viewed with Firefox.... however in IE it seems to push the fixed width design out to the right. From editing the CSS it seems to be the "width" element which is causing the problem, but I need this for the "white-space: nowrap" declaration to work properly.

    An example of the problem can be found here --> http://www.troozers.net/the_news/lat...live_bookmark/. Again, the problem only seems to be happening in IE, not in Firfox.

    Any help greatly appreciated.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this :

    Code:
    .contentpaneopen td { text-align:left;}

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Northampton, UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tried it.... no change

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I think its the width:100% that was in this td html that was causing it.
    Code:
    <td class="thought-box"><div id="thoughts">
    Try the above and see if it works without messing anything else up.

    Paul

  6. #6
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Northampton, UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah-HAH!! Good call Paul O'B,

    I have removed the 100% from the thought-box and that fixed it... now your REAL challenge.... WHY? (e.g. what was happening within the width definition of the codebox div that threw things out with the thoughtbox??

    In any case - much appreciation to both of you, BonRouge and Paul, for helping me with this.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Ie quite often has problems with widths and especially with table widths. IE made the td 100% to be 100% of the browsers window and not the width of its parent.

    This happens often with tables (which is why I don't use them anyway) and the usual solution involves wrapping the table in a a div that has an explicit width set. However it didn't seem to work in your case so I suspect that maybe if you set the td to the width of the table explicitly it would probably have worked also.

    If I had more time i would try and narrow it down to see the exact sequence of events that causes this but lifes too short

    I've given up trying to rationalise bugs too much I just remember them and move on to the next one

    Paul

  8. #8
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Northampton, UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate the time you did take to try and explain what the problem was... I too am trying to move the site to a pure CSS one, unfortunately a lack of skill gets in the way (as usual).

    Once again, many thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •