Select + css

Nix, IE stödjer inte border på selectelement.

Testa detta:

<div style="border: 1px solid #000000;width:10px;">
  <select style="margin:-3px;" size="10" multiple>
    <option>Lura B.Gates 
	<option>Test
	<option>Test
	<option>Test
  </select>
</div>

Mjo, det funka faktiskt... men då blev det tokigt i mozilla istället... som inte verka tycka om det...
Selectboxen (har size=1) hamnar ju lite skevt eftersom det är margin -3px

Varför använda margin:-3px; ?

För att det blåa ska försvinna i selectboxen i ie...

Aahhh, ok, då blir det ju mer ett css-hack för IE... Då kan jag mycket väl tänka mig att det blir tokigt i Mozilla, Safari och Opera som har bra css-stöd

Du kan ju testa att lägga in lite CSS endast för IE också:

<!--[if IE]>

<style type="text/css">
#ieDiv {
border: 1px solid #000000;width:10px;
      } 
#idSel {
margin:-3px;
      }
</style>

<![endif]-->

<div id="ieDiv">
  <select  size="10" id="ieSel" multiple>
    <option>Lura B.Gates 
	<option>Test
	<option>Test
	<option>Test
  </select>
</div>

Nu väcker jag en gammal tråd här, kanske inte gör nått ;)

Hur som helst, jag använder Jesper T's exempel ovan, det funkar bra, ända tills jag ska validera sidan, som innan jag planterade in koden var godkänd.

Problemet är att <div id="ieDiv"> måste vara unikt, det får inte finnas flera på samma sida.
Det här finns på en webshop, vid varje vara, så det kan bli problem att lösa det här, tror jag, iom att jag inte kan ge varje rad ett unikt namn, då kommer ju inte css-snutten fungera.

Så, hur ska jag lösa det här?
Finns det kanske ett bättre sätt?

Tack!

<!--[if IE]>

<style type="text/css">
[b].ieDiv[/b] {
border: 1px solid #000000;width:10px;
      } 
[b].idSel[/b] {
margin:-3px;
      }
</style>

<![endif]-->

<div [b]class[/b]="ieDiv">
  <select  size="10" [b]class[/b]="ieSel" multiple>
    <option>Lura B.Gates 
	<option>Test
	<option>Test
	<option>Test
  </select>
</div>

Gör en class av det istället.

<!--[if IE]>

<style type="text/css">
.ieDiv {
border: 1px solid #000000;width:10px;
      } 
.idSel {
margin:-3px;
      }
</style>

<![endif]-->

<div class="ieDiv">
  <select  size="10" class="ieSel" multiple>
    <option>Lura B.Gates 
	<option>Test
	<option>Test
	<option>Test
  </select>
</div>

/red :bla på dig Peeer. :)

byt ut # mot . i css:n och id mot class i taggen

mv icaaq

Vad långsamma ni är ;)
... fast det är ju bra att ni gör det nogrannt :e

Många som kommer med heta tips här.
Rätt coolt att få tre exakt likadana svar samtidigt, inkl. lite tjafs därimellan vem som var första ;)

Men eftersom Peeer var först bestämmer jag att du vann!

:)