Salve, voglio risolvere un brutto bug di IE con il mio sito(in xhtml e CSS). Allora il mio sito funziona alla perfezione ,con tutti i browser(testato online con oltre 72 versioni di browser diversi,con un sito che faceva 72 screenshots), solo che quando si aggiunge qualsiasi carattere (anche una lettera tipo "h") prima del
del mio codice il browser internet explorer taglia tutti gli angoli arrotondati fatti nel CSS e distorce molti dettagli grafici. Voi vi domanderete e perchè mai devi aggiungere un carattere prima dell' intestazione del sito? Semplicemente perchè chi mi fornisce il dominio di primo livello gratis aggiunge un banner di adsense(non controllato da me e obbligatoriamente imposto in quella posizione prima dell' head del mio sito). Ecco allora che si presenta il maledetto problema con internet explorer. Il mio file CSS è questoCodice PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head>
il sito è questo: ninphetamine.com (il sito è aperto da poco, non insultatelo perchè non c'è nienteCodice PHP:@charset "utf-8"; /* * Copyright 2008 Ninphetamine * Ninphetamine.com * No part of this file may be redistributed without written permission * Coded by djbooster */ body { color : #ffffff; margin : 0; padding : 0; background : #141414 url('images/body_bg.gif') repeat top left; font-family : 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif; font-size : 12px; margin : 0; text-align : center; } a, a:visited, img { border : 0; } .nofloat { float : none; } .inner img { float : left; } #outer { background : transparent url('images/wrapper_bg.gif') repeat-x top center; } #wrapper { width : 990px; margin : 0 auto; background : #ffffff; } #wrapper #header { background : #202020 url('images/header_bg.gif') repeat-x center center; height : 80px; width : 990px; } #wrapper #logo { background : #202020 url('images/logo.gif') no-repeat top left; float : left; height : 80px; width : 515px; } #logo h1 { text-indent : -1000em; } #wrapper #nav { background : #1b2c35 url('images/nav_bg.gif') no-repeat center center; height : 54px; width : 990px; } #wrapper #nav ul { width : 909px; list-style : none; margin : 0 auto; padding : 0; } #wrapper #nav li { text-align : center; float : left; } #wrapper #nav li a { color : #ffffff; text-decoration : none; display : block; height : 34px; width : 101px; padding-top : 20px; } #wrapper #nav li a:hover { background : #1b2c35 url('images/nav_over.gif') no-repeat top center; text-decoration : underline; } #wrapper #banner { margin : 0 auto; width : 984px; height : 228px; background : url('images/banner.gif'); clear : both; overflow : hidden; } #wrapper #content { margin : 0 3px; } #wrapper #content #left, #wrapper #content #right, #wrapper #content #middle { float : left; width : 228px; margin : 0 auto; } #content #left h2, #content #right h2 { width : 228px; height : 27px; background : #18316a url('images/side_h2_bg.gif') no-repeat center center; color : #bdd2f1; font-size : 12px; margin : 5px 0 0 0; padding : 18px 0 0 0; text-indent : 15px; } .cont { width : 228px; background-color : #193471; margin : 0 auto; padding : 0 0 2px 0; color : #18326d; } * html .inner { clear : both; margin : 0; padding : 0; } .inner { width : 220px; margin : 0 auto; background : #ffffff url('images/side_cont_bg.gif') repeat-y left center; padding : 0; overflow : hidden; clear : both; } .inner p { margin : 4px; padding : 0 5px; } .inner img { clear : both; } * html #left .inner p, * html #right .inner p { width : 200px; } .cont a { color : #18326d; } .cont a:hover { text-decoration : none; } .cont ul { clear : left; margin-top : 0; margin-bottom : 0; } .cont .match { margin : 0 0 0 2px; list-style : none; padding : 0; } .match li { background-color : #e6ebf7; margin : 4px auto 0 auto; padding : 2px 0; width : 218px; display : block; font-size : 11px; text-indent : 10px; overflow : hidden; } .match * { display : block; clear : none; float : left; } .match * a, .match * a:visited { border : 0; width : 100%; text-align : center; } .match .team { width : 75px; overflow : hidden; display : table-cell; } .match .score { width : 50px; text-align : center; } .match .won, .match .lost, .match .result { width : 70px; text-align : right; display : table-cell; font-weight : bold; } .match .won { color : #326d18; } .match .lost { color : #850009; } .match .result { font-weight : normal; } #wrapper #content #middle { width : 518px; margin : 0 4px 5px 4px; } #content #middle h2 { width : 519px; height : 27px; background : #404040 url('images/middle_h2_bg.gif') no-repeat center center; color : #ffffff; font-size : 12px; margin : 5px 0 0 0; padding : 18px 0 0 0; text-indent : 15px; } #middle .main { width : 513px; background-color : #454545; color : #454545; padding : 3px; } #middle .inner { width : 513px; background : #fffffd url('images/main_cont_bg.gif') repeat-y center center; } .main h3 { width : 511px; background-color : #e6ebf7; margin : 3px auto; color : #414141; font-size : 12px; padding : 3px 0; text-indent : 10px; } .main p { margin-left : 10px; margin-right : 10px; line-height : 125%; } #wrapper #footer { clear : left; background : #214595 url('images/footer_bg.gif') no-repeat center center; width : 984px; margin : 10px auto 0 auto; height : 57px; } #footer a, #footer a:link, #footer a:visited { color : #ffffff; } #footer a:hover { text-decoration : none; } #wrapper #footer #credits { float : left; margin : 20px 0 0 20px; } #wrapper #footer #copyright { float : right; margin : 20px 20px 0 0; }
). Apritelo con Un browser "normale" e poi con IE e noterete il problema. mi aiutate a trovare un metodo per risolvere il bug? Grazie a tutti
Rispondi quotando