White thick border with IE & Chrome to fix

**nizamo** · 12-26-2012, 07:07 PM

With IE & Chrome my menu has white thick border. With FF & Opera there's no such border. How to fix it?

Picture of my menu:
http://6g6.eu/sih0-menu0.gif

Example url:
http://www.aymavisi.org/hikaye/Dostu...%20Cibran.html

Code:

<div style="border-style:solid; border-width:0; position: absolute; width: 98px; height: 21px; z-index: 9; left: 0px; top: 71px" id="layer105" align="left">
	<form action="../dummyvalue" style="border:0px solid #000000; padding:0; text-align: center; background-color:#444577
">
<select name="newurl" onchange="menu_goto(this.form)" style="border:1px solid #444577; color: #FFFFFF; text-decoration: none; font-family: Tahoma; font-weight: bold; text-align: center; padding: 0; background-color: #444577; font-size:9pt; width:130" size="1" id="menu">
<option>Menü</option>
<option value="index.html">Ana Sayfa</option>
<option value="8 Felsefe.htm">Felsefe</option>
<option value="9 Siir.htm">Şiir</option>
<option value="2 Makale.htm">Makale</option>
<option value="4 Hikaye.htm">Hikaye</option>
<option value="3 Psikoloji.htm">Psikoloji</option>
<option value="5 Guncel.htm">Güncel</option>
<option value="6 Kitap.htm">Kitap</option>
<option value="7 Muzik.htm">Müzik</option>
<option value="999 Benden.htm">Benden</option>
<option value="99 Egzersiz.htm">Egzersiz</option>
<option value="hata raporu.html">Hataları bildirin</option>
<option value="1 yeniler.html">Yeni eklenenler</option>
<option value="../ziyareci defteri/index.php?&amp;mots_search=&amp;lang=english&amp;skin">
Ziyaretçi defteri</option>
</select></form></div>

**Beverleyh** · 12-26-2012, 09:24 PM

It's notoriously difficult to style select and option elements consistently across browsers. You can try styling the option elements too (border:0; padding:0; margin:0; background:#000; ) but you probably won't get exactly the same thing across the board.

There's another technique where you style the select transparent but wrap it in a div that you then style instead - that might offer a more pleasing visual for you. More info here : http://dev.bergqvi.st/styling-a-select-box-with-css

**nizamo** · 12-27-2012, 11:43 AM

I added it to each line

Code:

border:0; padding:0; margin:0; background:#000;

but no help. How can I do this: select transparent but wrap it in a div? I inspected and tried to imply the code but nothing changed.

**Beverleyh** · 12-27-2012, 12:20 PM

Code:

 
select {  
    border: none;  
    background:  
    none; outline:  
    none; opacity: 0;  
    -webkit-appearance: none;  
    filter: alpha(opacity=0);  
}

It's covered in the tutorial (the code above is a bit neater and comes from the link at the end of this post) - give the select elements transparent styling to allow your custom styling of the surrounding div to show through. You would need to play around with the div styling (and possibly create an image) yourself though to get the look you want. I'm not at a computer so I can't test anything or elaborate further.

As I said before though, its notoriously difficult to get select dropdowns looking consistent across all browsers with CSS alone, and what works in one won't work in another because differing default browser styling takes over. If the styling is not absolutely critical it might just be easier to go with the flow and accept what you already have.

If you absolutely must make the select dropdowns look the same on all browsers, there are JavaScript and Flash alternatives out there but they are quite complicated and bloated. Here's an example of one of the more lightweight versions I've seen (if youre already using jQuery) but its still not 100% on all browsers and devices : http://thephuse.com/development/cust...-select-menus/

**Beverleyh** · 12-27-2012, 01:00 PM

Just something to add - remember that you have inline styling on your select element already so whatever you add to an external CSS file for the select element will be overridden by the inline style. You will need to remove the inline style or also add the transparent CSS references inline to make them effective.

BTW, is there a script on your page that is deactivating the right-click menu action? I'm on iPhone so I don't have a mouse as such, but I tried to view your source code with my usual code-viewing app and it wouldn't work - that usually happens with one of those right-click prevention scripts - can you temporarily disable that script while you're seeking help? It would just make things a heck of a lot easier for us and then you can apply it again, if you need to, afterwards.

**nizamo** · 12-27-2012, 01:01 PM

I added it to my styles also tried this:

Code:

 select {  
    border: 1px;  
background-color: #444577
    none; outline:  
    none; opacity: 0;  
    -webkit-appearance: none;  
    filter: alpha(opacity=0);  
}

But now it turned to completely black, no border no menü text nor drop down arrow.

**Beverleyh** · 12-27-2012, 01:13 PM

Well, with "background-color:transparent" in your CSS it would be transparent, but you've set it to "background:#444577", which is defeating the transparency and causing everything to go black(ish) - with this technique, the full transparency is what's supposed to happen

Now you would apply your styling and background image (that's where you'd recreate the downwards arrow) to the div that is surrounding the select. The custom div styling will show through the select because its 'invisible'.

**nizamo** · 12-27-2012, 02:48 PM

I tried your code now nasty white borders gone but Menü text & drop-down arrow is invisible. Very close to success one last touch needed.

Code:

select {  
    border: none;  
    background:  
    none; outline:  
    none; opacity: 0;  
    -webkit-appearance: none;  
    filter: alpha(opacity=0);  
}

**Beverleyh** · 12-27-2012, 03:09 PM

I don't think you're understanding the concept if the technique described in both tutorials - you need to wrap the now invisible select element in a div, which you will style to look like a dropdown menu again with the help of a background image that you create yourself (whatever look you want to achieve)

Please refer to both tutorials again so you understand what it is they're trying to accomplish.