<pre> with overflow:scroll without IE hacks?
Is there a way to create automatically scrollable <pre> elements without them requiring CSS hacks to size correctly in IE? I am using these elements for code samples in my SiteSurgeon > Articles > What is HTML? article and in many tutorials in my Project Cerbera > Texts area.
Using these elements makes presenting code and data file contents a lot more reliable. I don't have to worry about new lines being introduced which would crash people's programs, invalidated their code or corrupt their data.
| Code: |
| <div id="container">
<div id="content"> <p>Preceeding paragraph:</p> <pre>Code sample.</pre> <p>Proceeding paragraph</p> </div> </div> |
| Code: |
| pre {
margin: -1em 0 1em 1em; padding: 1em; font: 90% "Lucida Console", monospace; overflow: auto; } /* IE Fixes */ * html body pre { width: 95%; height: 100%; overflow: scroll; } |
It is valid CSS but the hack relies on a parsing peculiarity of IE to fix the rendering bugs and relies on other devices rejecting the ruleset due to the strange selector. I don't want to use conditional comments in the markup to link a different stylesheet to IE but I definitely don't want to use hacks in my CSS for the long term.
I'm also using one for the navigation list because I can't figure out unhacked CSS which will work in IE and everything else.
Is there a way to provide scrolled overflow without hacks? It seems that IE only scrolls its input when explicity dimensions are used while other browsers can apply overflow with automatic dimensions. IE measures the element diffferently (wrongly?) to other browsers, so I can't figure out an unhacked CSS which would keep them all happy and get the <pre> boxes lined up with the paragraphs.
Any ideas?
_________________
My CV type thing and my Life of Ben (Blog). Nigel Peck's Accessify Forum Requirements.
Share: 
I'm not really sure, but I think you need to explicitly set a width on <pre>, along with overflow:auto. Otherwise you're leaving it up to the browser to decide what the block's width should be. I suppose IE is expanding the width of the <pre> element to contain the text, rather than inheriting width from the containing <div>._________________
Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens
Share:
Its not the solution you want however virtually its just as good (no hacks)….you would write the IE hack in another CSS file and call on it server side but only for IE...
| Code: |
|
If InStr(1, Request.ServerVariables("HTTP_USER_AGENT"), "; MSIE ") > 0 Then Response.Write "<link rel=""StyleSheet"" href=""/css/ie.css"">" Else Response.Write " " End If |
_________________
Johan De Silva / Portfolio | Place of Work @Flipside | Read my movie reviews punk!
Share:
Some user agents identify themselves as IE when they are not. This is to counteract proprietary shutouts which would prevent them from access a page if they identified themselves honestly.
If at all possible, I want to avoid doing any coding which is based on any specific product. If that isn't possible, the next best thing is using a method which is absolutely certain to only target IE, such as conditional comments.
Doing things server-side would be a lot more efficient but this method doesn't seem reliable at targetting IE only. Is that VBScript, btw?
On the sizing issue, when I use an specific size (such as 100%) IE measures it incorrectly. I am using a complete DOCTYPE declaration, so it should be in Strict Mode, yet doesn't seem to be measuring with the correct box type. It sets the width of the <pre> element to match the width of the <div id="content" container without taking margins and padding into account.
_________________
My CV type thing and my Life of Ben (Blog). Nigel Peck's Accessify Forum Requirements.
Last edited by Ben Millard on 03 Nov 2005 09:31 pm; edited 1 time in total
Share:
Yes it’s VBScript because classic ASP is the only language I really know however its easy enough to convert to PHP. It’s strange they would want to identify themselves as IE if they don’t behave in that way._________________
Johan De Silva / Portfolio | Place of Work @Flipside | Read my movie reviews punk!
Share:
Opera allows the user to make it identify itself as various other browsers to get past software which would block it from specific functions or entire websites. More obscure browsers often identify themselves as MSIE so that a website which is set up to block everything except MSIE can still be accessed. It is a counter-measure to purposely inaccessible websites. This makes the user agent identifier very unreliable and is partly why MSIE still appears to be extremely common.
The non-hacked CSS works perfectly in Firefox Opera 8.5 and Netscape 7.2 but IE behave strangely. If I set the box to have width: 100% then browsers treat that as meaning the entire width of the container div - not just its content area. Using margins and padding on the <pre> has unpredictable (and very strange) effects on the page layout.
| Code: |
| pre {
margin: -1em 0 1.0em 0; padding: 1em 0; left: 1em; width: 97%; font: 1em "Lucida Console", monospace; overflow: scroll; position: relative; } |
I cannot find a way to move the right edge back to the left by 1em, so I reduced the width by 3% which seems to work out fairly well for browsers between 800 and 1280 pixels wide. If I could find a way to bring the right edge back to the left by 1em without the whole box shifting or the page exploding in IE, this would be a hackless, scrolling overflow <pre> box. And pigs might fly, too!
If you go to the What is HTML? article and use CTRL+F5 you'll get the new CSS which uses this.
_________________
My CV type thing and my Life of Ben (Blog). Nigel Peck's Accessify Forum Requirements.
Share:
I decided to remove the indentation of content elements to see if that made the <pre> boxes easier to handle. It did! The absence of horizontal margins and padding has meant I can use hackless CSS to give them scrolling overflow now.
| Code: |
| pre {
margin: -0.8em 0 1.0em 0; padding: 1em 0; width: 99.8%; font: 1em "Lucida Console", monospace; overflow: scroll; } |
Anyway, it works pretty nicely in modern browsers without needing any hacks.
_________________
My CV type thing and my Life of Ben (Blog). Nigel Peck's Accessify Forum Requirements.
Share:
Page 1 of 1
All times are GMT
You cannot post new topics in this forumYou cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum