Problema con negritas en Safari y Firefox para Mac
4 seguidores
Tengo un problema un tanto extraño, bueno, igual es muy normal pero como no me dedico a hacer webs lo ignoro :)
Estos días he estado renovándome el blog y resulta que en el Safari se ven todos los textos bien menos el del botón de submit del formulario de contacto que parece que está en negrita, aunque en realidad no está porque si lo pongo en negrita en el css se ve más... en negrita...
En la versión de Firefox para Mac me pasa algo similar, pero con más textos, todos los textos de las páginas y los formularios (contacto, buscar, enviar comentario) se ven como en negrita y con una especie de antialiasing de espanto ¿alguna idea?
Usuario desconocido
Bueno, lo de Safari lo he solucionado cambiando el código con el color, tamaño de texto y demás del botón submit que estaba en el stylesheet.css directamente al archivo submit.php. Lo del Firefox sigue siendo espantoso :_D
cloudstudio
Bueno asi a ojo, me voy a arriesgar a decirte ( sin ver la web ) que cada navegador interpreta por defecto algunos estilos, por eso siempre antes de empezar a maquetar, es recomendable hacer un reset, para que todos los navegadores "olviden" la interpretacion de esos estilos y seas tu el que se lo digas, un ejemplo
/* RESET CSS */
html, body, div, span, plet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, ction, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
Usuario desconocido
mmm, no tengo mucha idea, pero creo que no es un problema del css, ahora me he dado cuenta de que la versión de firefox para mac añade un suavizado espantoso a cualquier texto blanco o de un color muy claro que esté puesto sobre un fondo de color más oscuro.
abrandlincoln
_blank perdona que me escape del tema que te ocupa (uso ff y mac y no tengo ese problema, si subes el código le doy un vistazo) pero quería decirte que tu site es perturbador y fantástico a la vez (pretende ser un cumplido, hope succesfully).
apoyo a cuviline con el tema reset aunque yo uso otro.
Usuario desconocido
ah, pues se agradece mucho el cumplido :) y si sabes qué les pasa a las malditas letritas ya ni te digo!
el tema concretamente es que los menús de arriba que están sobre azul y los botoncillos del search y demás que son iguales los veo bien en firefox/explorer para PC y en safari para mac, pero en el firefox para mac veo un suavizado extraño y como si estuvieran medio en negrita, y me he dado cuenta que también aparece en otras webs cuando hay textos claros sobre colores oscuros, pero igual es que las otras webs tampoco tienen el reset ese... aparte de que en la página de info que hay unas líneas en plan ||||||||||||| que las veo bien en todos también menos en el ff para mac (que hasta parecen de colores, es para flipar, jajaja) en fin, pues pego el css tal cual, que no se asuste nadie que no soy programadora y lo he retocado rollo casero como buenamente he podido O_O
*/
html, body {
height: 100%;
margin: 0 0 1px;
padding: 0;
}
#header .logo a, #header #nav-main a, .more-link, #nav-sub ul li.current_page_item, .comments li.authorcomment cite,
.comments li.authorcomment cite a, #nav-sub li.current_page_item a, .comments li .commentcontent,
.nav-v.nav-etries li span,
.widget li.current-cat a, .widget li.current-cat, .pagetitle em, #header .logo, #content-sub h4 {
/* Theme color */
color: #0099ff; }
#footer .footer-info, .comments li .credits {
/* Theme color for border elements */
border-color: #0099ff; }
#header #nav-main a, .nav-entry-pages a:hover, #header .slogan em, .nav-entry-pages a {
/* Theme color for background */
background: #0099ff; }
#content-sub h4, .postinfo { background: #fff; }
/* The rest of CSS */
body { font: 69%/100% arial, sans-serif; color:#000000; margin:0; color:#000000; background: #fff; border-top:1.2em solid #fff; letter-spacing: 0px }
a { color:#0099FF; text-decoration:none; }
a:hover { background:#ffffff; color:#000000; text-decoration:none; }
h1, h2, h3, h4, h5, h6 { color:#000; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:#000; text-decoration:none; border-bottom:1px dotted #ddd; }
h5 { font-style:normal; }
hr { display:none; }
blockquote { margin:1em 0; padding-left:2.5em; background: url('images/quotes.png') no-repeat 0 0.5em; clear:both; }
#soul { width:86%; max-width:78.2em; margin:0 auto; position:relative; left:-3%; }
#soul-content { float:left; width:96%; clear:both; padding: 0 2.5em; background:#fff; }
#header { padding:0; margin:0 0 0.5em 0; }
#header .logo { font-size:2.2em; line-height:1.1em; margin:0.7em 0 0 0; float:left; clear:both; width:100%; }
#header .logo a { text-decoration:none; }
#header .logo a:hover { color:#000000; }
#header .slogan { color:#fff; font-size:0em; line-height:1.5em; clear:both; float:left; width:100%; margin:0.5em 0 0 0; }
#header .slogan em { padding:0.35em 0.8em; font-style:normal; }
#header #nav-main { width:38.8%; }
#header #nav-main ul { margin:2em 0 0 0; }
#header #nav-main li { font-size:1em; line-height:2em; margin-right:0; }
#header #nav-main a { padding:0.25em 0.8em 0.3em; color:#fff; text-decoration:none; }
#header #nav-main a:hover { background:#000000; }
#header #nav-main li.current_page_item a { color:#ffffff; background:#000000; text-decoration:none; font-weight:normal; }
#content-sub { margin:0.5em 0 3em 0; font-size:0.88em; line-height:1.5em; }
#content-sub h2, h3, h4 { font-size:1.16em; }
#content-sub img.klogo { margin: 0.4em 1em 1em -0.6em; }
#content-sub .feedlink img { float:none; margin:0; vertical-align:middle; text-decoration:none; }
#content-sub h4 { padding:0; margin-bottom:1.1em; font-size: 1em; }
#content-sub h4 span { background:#fff; padding:0.4em 0.7em 0.4em 0; }
#nav-sub { margin:0 0 2em; line-height:1.4em; font-size:1.06em; }
#nav-sub ul { color:#666; line-height:1.4em; margin:0 -1.2em 0 1.2em; position:relative; left:-1.2em; }
#nav-sub ul ul { font-size:0.88em; color:#666; padding-left:1.5em; margin:0.7em 0 1em 1em; }
#nav-sub li { margin:0.5em 0; }
#nav-sub a { padding:0.2em 0;}
#nav-sub li.current_page_item a { font-weight:normal; text-decoration:none; }
#nav-sub li.current_page_item a:hover { }
#nav-sub li.current_page_item li a { font-weight:normal; text-decoration:underline; color:#236B8E; }
#nav-sub li.current_page_item li a:hover { color:#000000; }
#footer { font-size:0.88em; line-height:1em; margin-top:6em; padding:0 0 3em; }
#footer a { color:#333; }
#footer input { font-size:1em; }
#footer #searchform { width=20; margin:0; padding: 1em 0 0 0; }
#footer #searchform fieldset { border:none; padding:0; margin:0; }
#footer .credits { padding:0 0 24em 0; }
#footer .footer-links { padding-top:1em; }
#footer .footer-info { padding-top:1em; border-top:1.3em solid #eee; position:relative; top:-1.3em; }
#searchform fieldset { border:none; margin:1em 0; padding:0; }
.post { clear:both; float:right; width:100%; }
.post h2 a, .post h1 a { border:none; display:block; padding-right:1em; }
.post h2 a:hover, .post h1 a:hover { background:transparent; text-decoration:none; }
.post h2 { font-size:1em; line-height:1.2em; margin-bottom: 0.2em; }
h1, .post h1 { font-size:1em; line-height:1.2em; margin:2em 0.5em 0.3em 0; }
.post img.img-def { padding:1px; border: 1px solid #ccc; }
.post p, .post ul, .post ol, .post dl { line-height:1.6em; }
.post .pages { border-top:1px solid #eee; border-bottom:1em solid #000000; padding:0.5em 0; margin-top:2em; }
.post .pages strong { margin-right:0.5em; }
.post .pages a { padding:0.1em 0.2em; }
.page h1 { margin-bottom:1em; }
div.image { margin:0.5em 0 1em 0; }
div.image p { width:90%; clear:both; margin:1em auto; font-size:0.88em; margin:0; }
div.image img { margin:1em 0; }
div.img-c { float:right; margin-left:1em; }
div.img-c p { text-align:right; float:right; }
div.img-c img { float:right; }
div.img-a { float:left; margin-right:1em; }
div.img-a p { text-align:left; float:left; }
div.img-a img { float:none; }
div.wide { margin:1em auto 1.5em; clear:both; width:100%; text-align:center; overflow:hidden; }
div.wide p { width:70%; margin-left:auto; margin-right:auto; }
div.wide img { float:none; padding:0; }
div.wide a:hover img { border-color:#ddd; background:#fff; }
div.withframe img { border:0.7em solid #eee; }
div.type1 img { padding:0.5em; border:1px solid #ccc; }
div.type2 img { padding:0.5em; border:3px double #ccc; }
.postinfo, .postmetadata { color:#0099ff; font-size:0.88em; line-height:1.4em; text-transform: lowercase; }
.postinfo { margin:0 0 1.5em 0; padding:0; }
.postinfo span { padding:0.3em 1em 0.3em 0; background:#fff; }
.postinfo a, .postmetadata a { color:#000000; }
.postinfo a:hover, .postmetadata a:hover { color:#000; background:transparent; }
.single .postinfo { margin:0.5em 0 2em; }
.postinfo .date { color:#000; font-style:normal; }
.postmetadata { color:#000; margin:2em 0; text-align:right; }
.postmetadata a { color:#000; }
.nav-v.nav-etries { font-size:1em; float:left; clear:both; width:100%; padding:0 0 1em 0; margin:0; }
.nav-v.nav-etries li { float:left; margin:0.1em 0; width:100%; clear:both; }
.nav-v.nav-etries li span { display:block; float:left; width:1.3em; position:relative; left:-1.3em; margin-right:-1.3em; }
.nav-v.nav-etries li a { padding:0.1em 0; float:left; }
.nav-entry-pages { margin:3em 0 0 0; margin-bottom:21px; float:right; clear:both; width:99.9%; }
.nav-entry-pages .next { text-align:right; }
.nav-entry-pages a { text-decoration:none; line-height:2em; padding:0.3em 0.6em; color:#fff; }
.nav-entry-pages a:hover { background:#000000; color:#fff; }
.search .post h4 { float:left; clear:both; width:100%; margin:1em 0 0.25em 0; }
.pagetitle em { font-style:normal; font-weight:normal; }
.pagetitle { margin:2em 0 0 0; font-size:1em; }
.sidebar-default { margin-top:2em; padding-bottom:1em; }
.bbin-c3 { margin-right:2em; }
ul.flat, ol.flat { margin-right: -2em; margin-bottom:1em; margin-top:1em; padding-left:2em; float:left; width:100%; clear:both; position:relative; left:-2em; }
ul.flat li, ol.flat li { margin-bottom:1em; }
.flat ul, .flat ol { padding: 0.5em 0 0 0; margin-left:1em; }
.flat ol { margin-left: 1.5em; }
.flat li li { margin-bottom:0.5em; }
ol.flat { list-style-type:decimal; }
.more-link { white-space:nowrap; }
.expandedlist { margin:1em 0; }
.expandedlist li { margin-bottom:0.5em; }
#wpstats { display:none; }
.wp-smiley { float:none; margin:auto; }
.ga-clear { float:left; clear:both; width:100%; }
.ga-mart1 { margin-top:1em; }
.ga-mart2 { margin-top:3em; }
.ga-mart3 { margin-top:5em; }
.ga-mart4 { margin-top:7em; }
.ga-marb1 { margin-bottom:1em; }
.ga-marb2 { margin-bottom:3em; }
.ga-marb3 { margin-bottom:5em; }
.ga-marb4 { margin-bottom:7em; }
.ga iframe { padding:1em 0; }
.ga-in-wide { width:468px; margin:2em auto; }
.ga-bt1 { border-top:1px solid #333; }
.ga-bt2 { border-top:1px dotted #666; }
.ga-bb1 { border-bottom:1px solid #333; }
.ga-bb2 { border-bottom:1px dotted #666; }
.ga-bt1l iframe { border-top:1px solid #333; }
.ga-bt2l iframe { border-top:1px dotted #666; }
.ga-bb1l iframe { border-bottom:1px dotted #666; }
.ga-bb2l iframe { border-bottom:1px solid #333; }
.ga-rel { position:relative; left:-3em; margin-right:-3em; }
h2#comments, h2#addcomment { float:left; clear:both; width:100%; }
.comments { margin:1.5em 0 0; padding:0; }
.comments li { display:block; list-style-type:none; margin:0; padding:1em 0 2em 0; float:left; width:100%; border-top:0.5em solid #eee; }
.comments li.alt { background:#f9f9f9; }
.comments li .commentcontent { margin-top:-0.8em; }
.comments li .commentcontent span { color:#333; }
.comments li .credits { position:relative; top:-1.5em; border-top-width:0.5em; border-top-style:solid; }
.comments li cite { color:#333; line-height:1.3em; margin:0 0 0.5em 0; padding-top:1.2em; display:block; font-style:normal; font-weight:bold; }
.comments li .credits a { color:#333; }
.comments li .date { font-size:0.88em; line-height:1.3em; font-style:normal; display:block; }
.comments li .date a { text-decoration:none; color:#666; }
#trackbacks { clear:both; float:left; width:100%; }
.trackbacks { margin-top:0; }
.trackbacks li { border:none; margin:1em 0 0.5em; padding:0; }
.trackbacks li .date { display:inline; font-size: 1em; }
#commentform label { display:block; width:100%; font-size:0.88em; line-height:1em; margin:0 0 0.5em 0; }
#commentform textarea { width:95%; }
#commentform .credits input { width:95%; }
#commentform .note { font-size:0.88em; line-height:1.4em; color:#666; }
#commentform .note code { font-size:1.4em; }
.widget { float:left; clear:both; width:100%; margin-bottom:1em; }
.widget ul { padding:0; margin:1em -1.2em 0 1em; position:relative; left:-1.2em; }
.widget li { padding-left:0; margin:0.3em ; }
.widget ul ul { padding-left:1.2em; margin:0 0 1em 1.1em; }
.widget li.current-cat a { text-decoration:none; }
.widget li.current-cat { font-weight:bold; }
.widget li.current-cat li { font-weight:normal; }
.widget li.current-cat li a { color:#000; text-decoration:underline; }
.widget li a { padding:0.1em 0; }
.widget_observer li { list-style-type:none; margin-bottom:1em; }
.widget_observer ul { margin-bottom:1.5em; }
@media print {
body { border:none; }
a { color:#000; }
#header #nav-main, #searchform { display:none; }
#soul { width:100%; margin:0; left:0; padding:0; }
#soul-content { padding:0; width:100%; }
}
abrandlincoln
_blank hola, no veo nada en el css que pudiera afectar a lo que dices :(
Usuario desconocido
Ya me imaginaba :) ya te digo que lo veo en otras webs así que más bien creo que es un tema de visualización de firefox o algo así... aceptaremos el caos!
cesarcab
Tenia ese problema y lo soluciones agregando al inicio de mis css este codigo.
http://csskarma.com/blog/reseting-browser-defaults-resetcss/
markosci
Hola @_blank yo en algunas webs también he tenido ese problema y usando este código
html,body{-webkit-text-size-adjust:100%;-webkit-font-smoothing: antialiased;}
he notado una leve mejoría en la representación de la fuente y siempre poniendo como principio de mi css un "reset" como el que te ha puesto @cloudstudioNo sé si te ayudará en algo. Saludos!