CODEWITHSUNDEEP
htmlcssresize
fibbers
fibbers

Reputation: 137

Select element scales cross-browser, except for IE8

I'm trying to scale a select-element with the window-size (on resizing). This goes well for FF3.6, Chrome 10, IE6 (!!) and IE7, however... not for IE8.

A demonstration of the particular code-fragment can be found on http://jsfiddle.net/yKVbr/5/.
That is:
HTML:

<div id="wrap">
    <select>
        <option value='field1'>Datum gereed</option>
        <option value='field2'>Korte omschrijving</option>
        <option value='field3'>Taak Code</option>
        <option value='field4'>Project omschrijving</option>
  </select>
</div>

CSS:

div {
    position: absolute;
    left: 10px;
    right: 96px;
    width: auto;
    width: -moz-availble;
    width: expression(document.body.clientWidth-(10+96));
    top: 134px;
    height: 18px;
    background-color: yellow;
}

select {
    position: absolute;
    left: 25px;
    right: 90px;
    width: auto;
    width: -moz-available;
    width: expression(wrap.style.pixelWidth-(25+90)););
    top: -2px;
    height: 16px;
}

When IE8 renders in Quirksmode (i.e. without a DOCTYPE), it goes well because then it behaves like IE7. However, this is not a satisfiable solution :-)

I've searched through the forum, however I didn't find a similar problem. I've also tried working with the CSS3-property resize (resize:both; overflow:auto) to no avail.

Who can help pointing me in the right direction so that all browsers still scale it correcly including IE8?

Upvotes: 1

Views: 2126

Answers (3)

paddotk
paddotk

Reputation: 1440

With left and right positioning, do you mean you want it centered? In that case i would try one of the following:

div#wrap { /* or innerwrap, whatever suits you best */
   margin: auto;
}

or

div#wrap {
   margin: x%; /* where the x is to be replaced by a number that's dependable on the width of the elements*/
}

Also, you might have to state the property

position:relative;

since this seems to be neccesary sometimes (kindof a weird thing in css if you ask me).

Hope this helped, if you meant something else just say so ;)

Upvotes: 0

fibbers
fibbers

Reputation: 137

poepje pointed me in the right direction. The only thing that was missing was to keep the same amount of left and right position (because of the width-%).
Wrapping the select with another div, shows the intended result. IE8 does render div elements correctly concerning its left and right properties, so that most of the select style can be moved to the surrounding div and only setting width:100% for the select.

The new demo can be found on http://jsfiddle.net/yKVbr/8/, i.e.:
HTML:

<div id="wrap">
  **<div id="innerwrap">**
        <select>
            <option value='field1'>Datum gereed</option>
            <option value='field2'>Korte omschrijving</option>
            <option value='field3'>Taak Code</option>
            <option value='field4'>Project omschrijving</option>
        </select>
  **</div>**
</div>

CSS:

div#wrap {..same as before..}
div#innerwrap {
    position: absolute;
    left: 25px;
    right: 90px;
    width: auto;
    width: -moz-available;
    width: expression(wrap.style.pixelWidth-(25+90)););
    top: -2px;    
}

select {
    position: absolute;
    height: 16px;
    width: 100%;
}

Upvotes: 1

paddotk
paddotk

Reputation: 1440

This works:

div {
    position: absolute;
    left: 10px;
    right: 96px;
    width: auto;
    width: -moz-availble;
    width: expression(document.body.clientWidth-(10+96));
    top: 134px;
    background-color: yellow;
    width:80%;
    height:20px;
}

select {
    position: absolute;
    left: 25px;
    right: 90px;
    width: auto;
    width: -moz-available;
    width: expression(wrap.style.pixelWidth-(25+90)););
    top: -2px;
    width: 100%;
}

What i did here is use a percentage for the width. But keep in mind that only the width property can make use of the percentage element.

Upvotes: 2

Related Questions