Can't get border to work in IE

Hi to all, I have this css code for an option box

option {
	display: block;
	background:#dcf4f8;
	border: 1px solid #85cfff;
	margin: 1px 0;
	font-weight: bold;
	padding: 3px 0px 3px 3px;
	color: #000;
	
	}

Code (markup):

It works right in FF by give me a nice border around the url, however, in IE the border does not show...anyone kind enough to tell me what I need to add to get it to work?

URL is here My Site -- List

 

http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/

 

Thanks Stomme, but can't find the answer there either

 

Weird ! If I copy your CSS code to an empty html file, border shows up on all browsers, but when I open your site, it disappears

 

I reckon you try to include the border properties in the parent element, i.e. .proxies (don't put .proxies option)

Try it out and let me know.

 

Thanks for the suggestion, tried to no avail.
I am not sure if perhaps the problem is the way the code (smarty) is written in the file.

 <select size="55" class="proxies" onclick="window.location.href=this[this.selectedIndex].value;">

Code (markup):

 

alright, have you tried excluding the parent element now? Try putting only .option and not .proxies option

Else, place a table on the whole.

 

Its because its CSS.

I used to develop in nothing but tables until getting harped on by other developers. Then I tried to do it all in CSS which is a much more powerful way to develop, but also more of a pain in the ass for real!!!

Spacing issues in CSS between IE and FF without having to implement a stupid IE hack in the CSS is always going to be an issue.

Why not tables? It works for all browsers all of the time!!! It does not matter what you may think of FF or IE, its about what your users are using. And most people do use IE so the shit has to look good in IE and FF, no spacing issues and the same... So I now use CSS elements...

Its like Flash... All developers harp on Flash because of the non SEO friendly approach it gives... So, only use flash as elements like headers and such...

I found that using tables with CSS elements takes half the time to develop and you will save yourself a lot of frustration...

Suggestion, place a wrapper or container, then a table inside that, put a boarder on your table and I bet you will be able to see that boarder in FF and IE and Safari and whatever browser your cousin, granddaddy, or uncle may be using...

I know there will be people to disagree with me but to each there own. This is what I have found to work best for me. This may not be applicable to all development styles...

 

gskesavan : yes I removed the proxies.option (I tried it on a different site, but not also tried it on the one in my OP).

BoomBoom, I do not think I can use a table for this layout.

 

Why not? You already have one:

<table style="background-color: #fff; padding: 5px;" cellspacing=0>
  <tr><td>
  <img src="http://groups.google.com/groups/img/3nb/groups_bar.gif"
         height=26 width=132 alt="Google Groups">
  </td></tr>

  <tr><td style="padding-left: 5px;font-size: 125%">
  <b>Proxy Promoter</b>
  </td></tr>
  <tr><td style="padding-left: 5px">
  <a href="http://groups.google.com/group/proxy-promoter">Visit this group</a>
  </td></tr>
</table>

Code (markup):

Its better to use tables to contain loads of data anyway... And I am not saying use one big table for everything. Use tables and div's together. You can place div's inside of tables and vice verse...

 

Boom boom, that is just google code that they give to place the box on the site, the rest of the site does not use table.

The area in questions is is a select/option, and because it is is smarty and there is not a way for it to be in a table.

 

Why don't you try checking out the javascript file? For different browsers different settings are given, especially IE 6 and 7.

If that's not working, why don't you try span?

Hope it works.

 

Thanks for your input gskesavan, I will have to have someone look at it, as all that is not something I know how to attempt.

Also, I noticed this weekend, that not onlyl does it not work on IE, but also not Safari or Chrome!

 

The point of my link was more to show that styling form controls (and option is most definitely a form control) is iffy at best. The browsers themselves determine most of how a form control looks-- much the way Safari makes your forms look like a candy-coated aqua-coloured Sailor Moon episode no matter what you do : (

 

Thanks to all for the help/input.
I have had someone recode the section to not use the actual form and it works great now