1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Overflowing on [code] tags

Discussion in 'Feedback' started by Carpetsmoker, Apr 29, 2011.

  1. Carpetsmoker

    Carpetsmoker Member

    Messages:
    931
    Likes Received:
    4
    This doesn't seem to work properly, I didn't investigate further ...

    Example page:
    http://forums.freebsd.org/showthread.php?t=22956

    Expected result:
    Horizontal scrollbar instead of stretching the entire page horizontally.

    I'm fairly sure this used to work ...

    Tested with Opera 11.10, Firefox 3, and IE9. Results are consistent...
     
  2. SirDice

    SirDice Moderator Staff Member Moderator

    Messages:
    17,392
    Likes Received:
    7
    It stretches the entire page on Firefox 4.0 and 4.0.1. No horizontal scrollbar.

    This has been the case since I joined this board.
     
  3. drhowarddrfine

    drhowarddrfine Member

    Messages:
    1,041
    Likes Received:
    4
    'overflow' is not what you want here and I'm not sure you need 'width:auto' either. Unfortunately, I'm going out of town right now till Monday and can't look into this. 'pre' is just a different animal and, when used within tables, can produce weird results.

    Did you try 'overflow:scroll'?
     
  4. Carpetsmoker

    Carpetsmoker Member

    Messages:
    931
    Likes Received:
    4
    overflow: auto should behave the same as overflow: scroll. The only difference is that overflow: scroll *always* shows a scrollbar and overflow: auto only when needed.

    This does work back at daemonforums by the way, I briefly compared the style sheets and they look the same at a glance :-/

    I'm at home with a cold and my eyes hurt if I look at a computer screen, which is why I haven't investigated :-/
     
  5. drhowarddrfine

    drhowarddrfine Member

    Messages:
    1,041
    Likes Received:
    4
    I'm back and was going to look at this but I'm confused. I get a scroll bar on that page but are you wanting the scroll bar just on that post?
     
  6. SirDice

    SirDice Moderator Staff Member Moderator

    Messages:
    17,392
    Likes Received:
    7
    And, more importantly, which scrollbar are we talking about?
    A scrollbar on the code segment or the scrollbar at the bottom of your browser?

    As far as I can remember there was never a horizontal scrollbar on the code segments, no matter how wide it got. There is a scrollbar at the bottom of the browser though.
     
  7. Carpetsmoker

    Carpetsmoker Member

    Messages:
    931
    Likes Received:
    4
    width is set to auto. It should be set to something like 75% ...

    I'm pretty sure it wasn't like this before, or I would have noticed.
     
  8. Carpetsmoker

    Carpetsmoker Member

    Messages:
    931
    Likes Received:
    4
    Did anyone look at this? IMHO this is very annoying.

    For example: http://forums.freebsd.org/showthread.php?t=26973

    It stretches the entire layout, and I have to use the horizontal scrollbar just to read the normal text in my browser. argh!

    I took a quick peek, and the CSS is the same for the code blocks as it is on the deamonforums (Where it does work as expected)

    Maybe it has something to do with the custom CSS in http://forums.freebsd.org/clientscript/vbulletin_css/style-770f249a-00003.css ?
     
  9. Carpetsmoker

    Carpetsmoker Member

    Messages:
    931
    Likes Received:
    4
    While we're on the subject of tags & CSS, the tag doesn't work correctly either, it enters a new line where it shoudn't.

    Example: # ls (This is all a single line, press quote to see).

    This makes no sense, how is this different from
    Code:
    ? The idea behind [cmd] was that you could easily highlight shell commands inline.
    
    Change the [b]display: inline-block;[/b] to [b]display: inline;[/b] and it should be fine.
     
  10. drhowarddrfine

    drhowarddrfine Member

    Messages:
    1,041
    Likes Received:
    4
    I did back in April. I've got some down time so I can look closer. I do remember the markup being a mess and hard to follow but I have more time now so let's see what tomorrow holds.

    EDIT: The table that holds the post inside the div is overflowing that div. The table width is set to 100% but of what? Blah. Never use tables for layout. They don't work like other block elements.
     
  11. drhowarddrfine

    drhowarddrfine Member

    Messages:
    1,041
    Likes Received:
    4
    To the table holding the post, in the CSS, add 'table-layout: fixed'.
     
  12. Carpetsmoker

    Carpetsmoker Member

    Messages:
    931
    Likes Received:
    4
    Thank you drhowarddrfine.

    The tables are from the default vB layout. IIRC vB4 doesn't use tables anymore.

    Until ~2005/2006 tables were the *only* method of attaining a complex layout and get them to work in all major browsers used back then. Even now it's a bit of a pain, CSS kinda sucks IMHO, and we *still* have to consider IE6 in many scenarios ... (yes ... I know your opinions on IE :) )

    Anyway: To the demi-gods running these forums, could you fix this please :) Beers will be owed :)
     
  13. drhowarddrfine

    drhowarddrfine Member

    Messages:
    1,041
    Likes Received:
    4
    Once you get the mindset from working with it every day it actually all makes sense and falls together.
    I have no opinions on IE. Only facts. IE is the worst browser on the planet. Known, provable and verifiable. NOBODY should use IE!
    I thought you handled that going by your previous posts.