i’ve just been fiddling with creating my own “user controls” that work in both IE and Moz (firefox), and (as usual) i’ve hit a small hump…
to start off with i built a listbox kind of control using a div as a container, and then a bunch of child div’s for each item that goes in the list… it’s all being generated using JS and the DOM, but the resultant HTML looks like any other, its all good.
the CSS i’m using for the container element has a width, height and border (lets say “width:180px; height:200px; border: 1px solid #ddd;”) and turns on “overflow-y: auto;” so that when there are a whole lot of items in the list, IE will render a vertical scrollbar. (in Moz you will get both scrollbars so you have to specify “overflow: -moz-scrollbars-vertical;”… moz/firefox doesn’t support the overflow-y property unless you’re running a nightly build, i think…)
this is all well and good when both browsers are running in quirks mode, except that IE’s box model will be different to Firefox’s and render the border inclusive of the width. i want both browsers to render it exactly the same (right now i only really care about IE 6 and Firefox 1.0). so i thought i’d set a standards compliant DOCTYPE at the top of my document and everything would be sweet… but not so. Firefox still renders the scrollbar as i had wanted it; inside the div. but IE now renders the scrollbar OUTSIDE the div, adding an extra 18 pixels to the width of the div!!! ARGHH!..
has anyone seen this behaviour before, or have any suggestions on how to fix it??
here’s some sample code where you can see the behaviour for yourself…
when the doctype is absent both browsers render the container div “roughly” the same width (due to the box model)
when the doctype is present Firefox still renders the same, however IE (although rendering the box model correctly) renders the scrollbar in ADDITION to the current width of the container div!.. thats the part that is driving me crazy
actually i can’t have any padding inside the containing div, because when i mark a row as selected (with a background color for the child div) it will show white gaps, not quite what i want.
also, that added a horizontal scrollbar to the div which i dont want…
its really gonna be painful if i have to have things running in quirks mode, considering this is the first control that i’ve tried to build, heh…
thanks, thats looking closer but i’ve left out the fact that i was using CSS to trim (hide) long lines in the list, sorry!
i think i’ve just realised where its going wrong…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>list sample</title>
</head>
<style>
div.list {
border: 1px solid #ddd;
overflow: auto; /* <---- THIS LINE... */
width: 180px;
height: 200px;
}
div.list div.item {
padding: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
</style>
<body>
<div class="list" id="selectlist">
<div class="item">this is an item</div>
<div class="item">another item</div>
<div class="item">more items</div>
<div class="item">tonnes of items</div>
<div class="item">items r0x0r!</div>
<div class="item">item++</div>
<div class="item">another item</div>
<div class="item">more items</div>
<div class="item">tonnes of items that are very long...</div>
<div class="item">items r0x0r!</div>
<div class="item">item++</div>
<div class="item">another item</div>
<div class="item">more items</div>
<div class="item">tonnes of items</div>
<div class="item">items r0x0r!</div>
<div class="item">item++</div>
</div>
</body>
</html>
if you change:
overflow: auto;
to:
overflow-y: auto;
the DIV grows wider…
i need vertical scrollbars only, not the ugly horizontal scrollbars but i still need the DIV to maintain it’s width. its looking like its a stupid IE bug at the moment… hehe…
interestingly a suitable workaround for this problem just came to mind, dunno why i didn’t think of it before
instead of “overflow-y: auto;” which produced the undesirable effect of having the scrollbar additional to the width of the container div, you can instead substitute it for “overflow: auto; overflow-x:hidden;” and the width of the div will now be inclusive of the scrollbar!
IE was chucking a fit if overflow: auto; was specified before overflow: -moz-scrollbars-vertical, it would lose the overflow setting, and of course if the order of those 2 was reversed then mozilla wouldn’t display the overflow using a scrollbar… luckily it still works with overflow-y: auto instead of overflow: auto;, and as long as the overflow-x: hidden; is specified then IE wont add the scollbar onto the outside of the div.
mozilla and IE are the only ones i’m concentrating on for the moment anyway so this will get me thru for now
man i can’t wait for CSS3, time can’t move quick enough
i’m building a web-app not just a public website, so i can dictate which browser people should use to a certain extent and as i dont have access to a Mac (and never will) but may have Mac using clients i’m hoping that firefox for Mac behaves exactly like it does on windows
as far as Opera goes, can you vouch for its XMLHTTP implementation? previously it has been buggy so i left it out of the loop for now… i haven’t tried v8 beta as yet
