Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: |Miguel| en 20 Octubre 2012, 17:26 pm


Título: Problema con estilos en distintos navegadores
Publicado por: |Miguel| en 20 Octubre 2012, 17:26 pm
Buenas, ¿qué tal?

Bueno, mi problema es que tengo un desplegable al que mediante css se le asigna un width de 175px, pero alguno de sus elementos ocupa un ancho mayor de eso y no se ve del todo bien porque el combo está hacia la parte derecha de la web.

El combo tiene que ir ahí, por temas de diseño... y además me piden que deje un pequeño espacio en blanco por la derecha y la izquierda de sus elementos.

he añadido a mi css esto:

Código
  1. option {
  2. 	margin-left:10px;
  3. 	padding-right:10px;
  4. }
y también:
Código
  1. .miClase{
  2. 	margin-left:10px;
  3. 	padding-right:10px;
  4. }

Y así intento usar la clase:
Código
  1. <option class="miClase" value="http://www.tecnipublicaciones.com/aral/default.asp">Alimentación | No Alimentación | Distribución</option>
Cuando uso lo otro, es lo mismo pero sin la clase, así para todos los option...
y el único explorador que me lo aplica es firefox...

¿alguna idea?
Gracias.

Título: Re: Problema con estilos en distintos navegadores
Publicado por: #!drvy en 22 Octubre 2012, 18:47 pm
Código
  1. option {
  2.  max-width:175px !important;
  3.  min-width:175px !important;
  4.  width:175px !important;
  5.  margin:0px 0px 0px 10px;
  6.  padding: 0px 10px 0px 0px;
  7. }

Prueba así.

Podrias mostrar el resto del CSS/HTML porque no podemos adivinar si hace conflicto con otros elementos/reglas css =).

Saludos

Título: Re: Problema con estilos en distintos navegadores
Publicado por: |Miguel| en 22 Octubre 2012, 20:14 pm
Gracias.

Eso tampoco funciona. Al final he acabado haciendo algo muy cutre, meter &nbsp;... XD

El CSS y el HTML son bastante largos... pero por la consola de IE, Chrome y Firefox veo que sí está cogiendo los estilos bien, pero solo los aplica Firefox...

Un saludo.

PD: El CSS lo dejo ahí abajo, en el HTML no se define ningún estilo:
Código
  1. /******************************************  
  2.  
  3.  CUSTOM STYLESHEET
  4.  
  5. *******************************************/
  6.  
  7.  
  8.  
  9. /*
  10.  
  11. * You can place your custom CSS statements in this file, after this message.
  12.  
  13. * It is better to write everything custom here
  14.  
  15. * because this file won't be replaced during updates.
  16.  
  17. * 
  18.  
  19. * Simply copy an existing style from style.css to this file, 
  20.  
  21. * and modify it to your liking.
  22.  
  23. */
  24. option {
  25. 	max-width:175px !important;
  26. 	min-width:175px !important;
  27. 	width:175px !important;
  28. 	margin:0px 0px 0px 10px;
  29. 	padding: 0px 10px 0px 0px;
  30. }
  31.  
  32. .busca{
  33. 	font-size: 20px;
  34. 	font-family: Tahoma;
  35. 	font-weight: bold;
  36. }
  37.  
  38.  
  39.  
  40. /**** ESTILOS CAMBIADOS ****/
  41.  
  42. * {
  43. 	margin: 0;
  44. 	padding: 0;
  45. 	/*font-size: inherit;*/
  46. 	font-family: Tahoma;
  47. }
  48.  
  49. #header #fondo{
  50. 	margin: -19px 0px -28px;
  51. 	float: left;
  52. 	position: relative;
  53. 	height: 105px;
  54. 	width: 980px;
  55. 	-webkit-border-radius: 5px;
  56. 	-moz-border-radius: 5px;
  57. 	border-radius: 5px; 
  58. 	background-image: url('images/fnd_log.png');
  59. }
  60.  
  61.  
  62.  
  63. #header #logo {
  64. 	margin:15px;
  65. 	float:left;
  66. 	position:relative;
  67. }
  68.  
  69. #featured .rounded li h2 a { font-size: 16px; color:#005689; line-height: 15px; font-family: Georgia;}
  70.  
  71. #featured .rounded li h2 i { font-size: 14px; }
  72.  
  73. #featured .rounded li h2 u { font-size: 14px; }
  74.  
  75. #featured .rounded .slide h2 a { font-size: 22px; color:#005689; font-family: Georgia; width: 320px; margin-right: 5px;}
  76.  
  77. .slide p { font-size: 11px; }
  78.  
  79. ul.tabs li.active a, ul.tabs li.active a:hover { font-size: 14px; }
  80.  
  81. ul.tabs li a, ul.tabs li a:hover { font-size: 14px; }
  82.  
  83.  
  84. .archiveposts .rounded h2 a { font-size: 18px; line-height:20px;}
  85.  
  86. .archiveposts .rounded h2 i { font-size: 18px; }
  87.  
  88. .archiveposts .rounded h2 u { font-size: 18px; }
  89.  
  90. .archiveposts .post h2 a, #featured h2 a, .post h1 a {color:#005689; font-family: Georgia;}
  91.  
  92.  
  93. .post .entry p { font-size: 13px; line-height: 16px;}
  94.  
  95.  
  96. .tab_content li a { font-weight: bold; font-size: 1.2em; color:#005689; font-family: Georgia;}
  97.  
  98. .tab_content li .meta a { font-weight: normal; font-size: 10px; color: #27A0C6; font-family: Tahoma;}
  99.  
  100.  
  101. .tab_content { padding: 15px; font-size: 0.2em; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
  102.  
  103.  
  104. /*Inicio estilos noticias ON-WAYS, SL 2011*/
  105.  
  106. #featured .meta, .archiveposts .meta { margin: 2px 0 10px; font-size: 11px; color: #A9A9A9; width: 515px; float: right;}
  107.  
  108. #featured .meta a, .archiveposts .meta a {text-decoration: underline; color: #27A0C6;}
  109.  
  110.  
  111.  
  112. #featured .mslide, .archiveposts .meta { margin: 2px 0 10px; width: 315px; font-size: 11px; color: #A9A9A9; }
  113.  
  114. #featured .mslide a, .archiveposts .meta a{ text-decoration: underline; color: #27A0C6;}
  115.  
  116. #featured .slide h2 { line-height: 27px; display: inline; margin: 5px 0 0;}
  117.  
  118. .slide { float: left; width: 625px; overflow: hidden; border-bottom: 1px solid #EFEFEF;}
  119.  
  120. .slide p { font-size: 13px; line-height: 16px; width: auto;}
  121.  
  122.  
  123.  
  124. #featured img { margin-bottom: 11px;}
  125.  
  126. /*.slide img {float: right;}*/
  127.  
  128.  
  129.  
  130. #featured .headings h2 { font-size: 18px; line-height: 20px; display: inline; margin: 0 0 0; width: 515px; float: right;}
  131.  
  132. .headings { width: 625px; }
  133.  
  134. .headings p { font-size: 13px; line-height: 16px; width: 515px; float: right;}
  135.  
  136. .headings img { float: left; margin-top: 5px;}
  137.  
  138. .headings li { border-bottom: 1px solid #EFEFEF; padding: 7px 0 0 0; float: left; width: 100%; clear: both; list-style-type: none; }
  139.  
  140. .headings li:last-child { border-bottom: none; }
  141.  
  142.  
  143. .archiveposts .post .fecha {color:#27A0C6;} 
  144.  
  145. /*Fin estilos noticias ON-WAYS, SL 2011*/
  146.  
  147. #footer_wrap #pie { 
  148. 	margin: 0 auto;
  149. 	width: 940px; 
  150. 	padding-top:10px;
  151. 	text-align:left; 
  152. 	height:175px;
  153. }
  154.  
  155. #footer_wrap #link{
  156. 	width: 703px; 
  157. 	float: right;
  158. 	height:90px;
  159. 	position: relative;
  160. 	margin-top: -60px;
  161. }
  162.  
  163. #footer_wrap #grup1{
  164. 	 float: left;
  165. 	 width: 153px;
  166. 	 font-size:10px;
  167. 	 color:#b7b7b7;
  168. }
  169.  
  170. #footer_wrap #grup2{
  171. 	 float: left;
  172. 	 width: 172px;
  173. 	 font-size:10px;
  174. 	 color:#b7b7b7; 
  175. }
  176.  
  177. #footer_wrap #grup3{
  178.  	 float: left;
  179. 	 width: 175px;
  180. 	 font-size:10px;
  181. 	 color:#b7b7b7;
  182. }
  183.  
  184.  
  185.  
  186. #carousel { width: 650px; position: relative; float: left; background: #fff url(images/bg_topbar.png) repeat-x bottom; margin: 0 0 20px; padding: 10px 0 0 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-bottom: 1px solid #d7d7d7; line-height: 1.1; height: 85px; overflow: hidden; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px;}
  187.  
  188. #carousel li a { color: #27a0c6; font-size: 11px; font-weight: normal; color:black; font-family: Georgia;}
  189.  
  190. #carousel li { 
  191. 	padding-right: 1px;
  192. 	margin-left: 7px;
  193. 	margin-right: 3px;
  194. 	height: 70px;
  195. 	border-right: 1px #d7d7d7 solid;
  196. }
  197.  
  198.  
  199.  
  200. #pixel{
  201. 	border-bottom: 3px solid #EEE; 
  202. 	padding-top: 7px; 
  203. 	padding-bottom: 7px;
  204. }
  205.  
  206. /* Links */
  207. a { color: #00A0C6; text-decoration: none; font-size: inherit;}
  208.  
  209. html ul.tabs li.active, html ul.tabs li.active a:hover {
  210. 	font-size: 14px;
  211. }
  212.  
  213. /*Pestañas de categorias*/
  214.  
  215. ul.tabs li a { text-decoration: none; color: #555555; display: block; font-size: 1.2em; padding: 0 6px; outline: none; font-size: 14px; }
  216.  
  217.  
  218.  
  219. #sidebar .widget {
  220. 	margin: 0 0 10px;
  221. }
  222.  
  223.  
  224. #sidebar .widget_adrotate_widgets {
  225. 	background: transparent;
  226. 	margin: 0 0 0 0;
  227. 	-webkit-border-radius: 0px;
  228. 	-moz-border-radius: 0px;
  229. 	border-radius: 0px;
  230. 	border-bottom: 0;
  231. 	text-align: center;
  232. }
  233.  
  234.  
  235.  
  236. .widget_adrotate_widgets .padder {
  237. 	padding: 0px;
  238. 	margin: 0 5px 0 7px;
  239. 	width: 100%;
  240. }
  241.  
  242. .post .entry {
  243. 	float: left;
  244. 	width: 100%;
  245. 	overflow: hidden;
  246. 	clear: both;
  247. 	font-family: Tahoma;
  248. 	font-size: 11px;
  249. 	line-height: 1.2;
  250. 	margin-top: 10px;
  251. }
  252.  
  253. .post h1 a{
  254. 	float:left;
  255. 	font-size: 30px;
  256. 	line-height: 30px;
  257. 	font-weight:normal;
  258. 	width: 100%;
  259. 	clear: both;
  260. 	font-size: 30px;
  261. 	margin-bottom: 10px;
  262. }
  263.  
  264.  
  265.  
  266. .after-meta .share_box {
  267. 	float: right;
  268. 	display: inline;
  269. 	margin-top: 20px;
  270. }
  271.  
  272.  
  273.  
  274. input[type="text"],
  275.  
  276. input[type="password"] {
  277. 	height:21px;
  278. }
  279.  
  280.  
  281.  
  282. input[type="submit"],
  283.  
  284. input[type="reset"] {
  285. 	width:74px;
  286. 	border:1px solid #aeb2ba;
  287. 	background:#f2f2f3 url(images/input.gr.png) repeat-x 0 -49px;
  288. 	color:#6a6a6a;
  289. 	font-weight:bold;
  290. 	font-size:12px;
  291. 	padding:4px 0;
  292. 	height:28px;
  293. 	vertical-align:middle;
  294. 	cursor:pointer;
  295. 	border-radius:2px;
  296. 	-webkit-border-radius:2px;
  297. 	-moz-border-radius:2px;
  298. 	box-shadow:0 0 1px #e1e2e1;
  299. 	-webkit-box-shadow:0 0 1px #d1d2d1;
  300. 	-moz-box-shadow:0 0 1px #e1e2e1;
  301. }
  302.  
  303. @-moz-document url-prefix() {
  304. 	input[type="submit"],
  305. 	input[type="reset"] {
  306. 		padding-top:0;
  307. 	}
  308. 	input[type="text"],
  309.  
  310. 	input[type="password"] {
  311. 		padding-top:3px;
  312. 		padding-bottom:3px;
  313. 	}

Título: Re: Problema con estilos en distintos navegadores
Publicado por: WHK en 22 Octubre 2012, 20:45 pm
Hola, poner estilos a las opciones no es un estandard, que firefox te deje es un tema pero los demás no tienen porqué tomarlo.

Chrome e IE no interpreta estilos sobre selectores, inputs de tipo file ni checkboxes, se despliegan combobox por defecto del sistema, en cambio firefox utiliza una UI propia y por eso puede jugar mejor con los estilos.

Te recomiendo que utilices divisiones simulando un selector porque asi solo no se puede.

Título: Re: Problema con estilos en distintos navegadores
Publicado por: |Miguel| en 22 Octubre 2012, 21:04 pm
Vale, no sabía eso.... Muchas gracias WHK.

Viendo lo visto, lo dejaré cutre con los &nbsp; xD aunque sí, la otra opción que se me ocurrió fue hacer una especie de menú desplegable a base de divs, pero para una cosa tan sencilla es perder mucho tiempo, creo.

Gracias a los dos.

Título: Re: Problema con estilos en distintos navegadores
Publicado por: WHK en 22 Octubre 2012, 21:10 pm
Mira, acá hay un ejemplo con divisiones:
http://jsfiddle.net/Etr4F/

Fuente: http://stackoverflow.com/questions/8430279/how-to-style-the-option-with-only-css

Título: Re: Problema con estilos en distintos navegadores
Publicado por: |Miguel| en 22 Octubre 2012, 21:16 pm
Sí, ese ejemplo ya lo había visto, pero no he sido capaz de hacer q no me desplace una capa q ponga a continuación y como me vale con lo otro lo dejé así...


Gracias!


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines