07
11
06

“Ho perso lo sfondo”, disse Internet Explorer 7

23:48 Technocracy

Chiedo scusa per il tedio da tecnico, ma è pur sempre divulgazione utile (e utile nota per me). Dopo il sito GetSolution, anche il sito Nielsen Media Research ho scoperto che si visualizzava male sotto IE7. Peraltro prima che me lo facessero notare loro, così hanno il fix senza averlo richiesto. Ullallà.

Non stupisce troppo che sia un bug identico a quello che si ha su Internet Explorer 6 (fixxato con lo star hack), ma che dopo una mia ricerca in rete pare non abbia ancora nome. Sarebbe interessante cercare di ridurre dal CSS completo quale sia il problema, che sembrerebbe una variante del Peekaboo Bug.

Il problema in questione è che spariscono i background.

La soluzione è dire a IE che l’altezza minima del frame è 1%.

Soluzione sintetica:

* html #body div { height: 1%; } /* [IEfix] Peekaboo bug (contained float misbehaves w/o this) */

*:first-child+html #body div { min-height: 1%; } /* [IE7fix] wonder! IE7 still bugged */

Notare che su IE6- usiamo “height”, perché per un altro suo bug “height” è uguale a “min-height”.

Note di costume. Cercando ho trovato delle curiosità.
Una di queste segnala un bug su IE6 che fa sfarfallare le immagini. Su IE7 semplicemente quando ci passi sopra “sega” il margine inferiore, togliendo lo spazio. Curioso.
Per non citare poi i CSS applicati sull’elemento seguente, novità di IE7.

3 comments Add yours below

1

Simbul 2006 11 08 at 00:59

Vabbè, ormai non ci sono più parole... soprattutto una non c'è più: standard.
2

Folletto Malefico 2006 11 08 at 19:07

Parrebbe ci sia un bug da sistemare nel codice che ho proposto, appena ho due minuti vedo di indagare...
3

hibrix 2009 01 04 at 14:27

Ciao dall' Argentina,
ho lo stesso problema con IE7 sparisce il logo che dovrebbe essere a sinistra...

http://aisig.com


Il mio CSS è cosí:


html { font-size: 76%; }
body {
background-color: #eee;
font-family: Verdana, Helvetica, Tahoma, sans-serif;
font-size: 1.1em;
line-height: 1.5em;
color: #555;
margin: 0;
padding: 0 0 20px;
}

/* headers */
h2, h3, h4, h5, h6 {
color: #555;
margin: 0;
font-weight: normal;
font-family: Verdana, Helvetica, Tahoma, sans-serif;
line-height: 1.3em;
}
h2 { font-size: 1.4em; margin: 10px 0 10px; }
h3 { font-size: 1em; margin: 10px 0 10px; font-weight: bold; }
h4 { font-size: 1em; margin: 10px 0 10px; }
h5 { font-size: 1em; margin: 10px 0 10px; }
h6 { font-size: 1em; margin: 10px 0 10px; }

/* text */
p { margin: 15px 0; }
acronym { cursor: help; }
pre, code, blockquote {
margin: 15px 0;
border: 1px solid #ddd;
padding: 15px;
display: block;
background-color: #fff;
}
blockquote {
font-family: Verdana, Helvetica, Tahoma, sans-serif;
padding: 0;
background: url(../img/quote_left.png) no-repeat left top;
border: 0;
}
blockquote div {
background: url(../img/quote_right.png) no-repeat right bottom;
text-indent: 60px;
padding: 5px 15px 5px 0;
}

/* links */
a { text-decoration: underline; outline: none; color: #555; }
a:hover { text-decoration: none; }

/* images */
img { border: 1px solid #ccc; padding: 2px; }
a img { }
a:hover img { border-color: #aaa; }
img.right { margin: 0 0 20px 30px; }
img.left { margin: 0 30px 20px 0; }

/* lists */
ul, ol, dl { margin: 15px 0 15px 15px; padding: 0; }
ul { list-style-type: disc; }
ul ul, ol ol { margin-top: 0; margin-bottom: 0; }
ol { margin-left: 25px; }
dl { margin-left: 0; }
dl dt { font-weight: bold; margin-top: 15px; }
dl dd { margin: 0; }
dl dt, li { color: #97BD1B; }
li span { color: #555; }

/* tables */
table { margin: 15px 0; border-collapse: collapse; }
table th,
table td { padding: 10px 15px; text-align: left; }
table thead th {
font-family: Verdana, Helvetica, Tahoma, sans-serif;
background-color: #95B81B;
color: #fff;
font-size: 1.1em;
font-weight: bold;
font-size: 1.1em;
}
table tbody th { background-color: #eee; }
table tbody th,
table tbody td { border-bottom: 1px solid #ddd; }
table tfoot { display: none; }

/* forms */
form {
padding: 0 20px;
margin: 25px 0;
border: 1px solid #ddd;
background-color: #fff;
}
form fieldset { border: 0; padding: 10px 25px 10px 0; margin: 0; }
form fieldset legend { display: none; }
form p { height: 1%; }
form p:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
form p label {
font-size: 1em;
font-weight: bold;
color: #555;
float: left;
display: block;
width: 29%;
margin-right: 20px;
font-family: Verdana, Helvetica, Tahoma, sans-serif;
}
form p input,
form p select,
form p textarea {
font-size: 1em;
color: #555;
border: 1px solid #ccc;
padding: 6px;
background-color: #fff;
width: 55%;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
form p select { width: 57.5%; }
form ul.fieldlist { margin: -30px 0 10px 33%; padding: 0; list-style-type: none; }
form ul.fieldlist li { color: #555; padding: 0 30px 5px 0; white-space: nowrap; }
form button {
width: auto !important;
overflow: visible !important;
cursor: pointer;
line-height: 1.2em;
vertical-align: middle;
background: url(../img/button_right.png) no-repeat right center;
padding: 0 2px 0 0 !important;
border: 0;
font-size: 1em;
}
* html form button {
position: relative;
}
form button span {
background: url(../img/button_left.png) no-repeat left center;
padding: 6px 6px 6px 10px;
display: block;
}

/* horizontal rule */
hr { clear: both; border: 0; height: 1px; background-color: #ddd; color: #ddd; margin: 0; }

/* classes */
.left { float: left; }
.right {float: right; }
.hide { display: none; }
.highlight1 { color: #CC6600; }
.highlight2 { color: #3267D4; }
.highlight3 { color: #CC0099; }

/* image list */
ul.images { list-style-type: none; width: 104%; margin-left: -15px; margin-bottom: 0; }
ul.images:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }
ul.images li { float: left; padding: 0 0 15px 15px; position: relative; }
ul.images li a { text-decoration: none; }
ul.images li img { vertical-align: bottom; }

/* columns */
ul.cols { margin: 15px 0 25px -50px; padding: 0; list-style-type: none; width: 105%; height: 1%; }
ul.cols:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; }
ul.cols li { padding-left: 50px; float: left; color: #555; }
ul.two li { width: 42%; }
ul.three li { width: 25%; }

ul.cols li li { float: none; width: auto; padding-left: 0; color: #97BD1B; }

/*------------------------------------------------------------*
** Header
**------------------------------------------------------------*/
#header { background: #97BD1B url(../img/header_.png) repeat-x; }
#header div { background: url(../img/header__.png) no-repeat; border-bottom: 10px solid #95B81B; }
#header div div {
background-image: none;
width: 900px;
margin-left: 50px;
border: 0;
padding-top: 1px;
margin-top: -11px;
position: relative;
}
#header div div:after {
content: ".";
clear: both;
display: block;
height: 0;
font-size: 0;
visibility: hidden;
}
#header div div div {
width: 50px;
margin: 0;
position: absolute;
top: 0;
left: -50px;
border-right: 10px solid #95B81B;
border-bottom: 10px solid #95B81B;
background-color: #9FC522;
height: 23em;
padding: 0;
}

/* Logo */
#header h1 {
background: #fff url(../img/logo.jpg) no-repeat 50% 2em;
border-left: 10px solid #95B81B;
border-right: 10px solid #95B81B;
font-family: Verdana, Helvetica, Tahoma, sans-serif;
font-size: 2.5em;
font-weight: normal;
line-height: 1em;
color: #555;
margin: 0;
bottom: -10px;
position: relative;
letter-spacing: -2px;
float: left;
min-height: 245px;
}
* html #header h1 { height: 245px; width: 208px; }
#header h1 a {
text-decoration: none;
color: #FFFFFF;
display: block;
padding: 4.7em 112px 1.7em;
}
* html #header h1 a { position: relative; }
#header h1 a:hover { text-decoration: none; }

#header p {
color: #fff;
font-size: 1.3em;
text-align: right;
margin: 85px 0 0;
}

/*------------------------------------------------------------*
** Navigation
**------------------------------------------------------------*/
#header ul {
margin: 0;
padding: 0;
list-style-type: none;
position: absolute;
bottom: -10px;
right: 0;
}
#header ul li {
float: left;
margin: 0 0 0 5px;
}
#header ul li a {
display: block;
text-decoration: none;
font-weight: bold;
background: url(../img/nav_right.png) no-repeat right top;
padding-right: 5px;
font-size: 0.9em;
}
* html #header ul li a { position: relative; }
#header ul li a span {
padding: 10px 15px 9px 20px;
background: url(../img/nav_left.png) no-repeat;
color: #555;
display: block;
}

#header ul li a:hover,
#header ul li.on a { background-image: url(../img/nav_on_right.png); }
#header ul li a:hover span,
#header ul li.on a span { background-image: url(../img/nav_on_left.png); }
#header ul li.on a:hover { text-decoration: none; }

/*------------------------------------------------------------*
** Body
**------------------------------------------------------------*/
#body {
border-left: 10px solid #e4e4e4;
border-right: 10px solid #e4e4e4;
background-color: #fff;
margin-left: 50px;
width: 830px;
padding: 20px 30px;
}
#body:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
font-size: 0;
height: 0;
}

/* login */
#clientLogin {
border: 0;
border-bottom: 1px solid #ddd;
margin: -10px 0 5px;
height: 1%;
padding: 0 0 5px;
}
#clientLogin:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
#clientLogin fieldset {
float: right;
padding-right: 0;
}
#clientLogin p {
float: left;
white-space: nowrap;
margin: 0 0 0 30px;
min-width: 17.5em;
}
#clientLogin p label { width: 3em; padding: 3px 0; }
#clientLogin p input { width: 160px; }
#clientLogin span button { margin-left: 10px; float: left; }

/* content */
#content { float: left; width: 600px; }
#home #content { float: right; }

/* sub-content */
#sub-content { float: right; width: 190px; }
#home #sub-content { float: left; }

/*------------------------------------------------------------*
** Footer
**------------------------------------------------------------*/
#footer {
background-color: #e4e4e4;
width: 870px;
padding: 1px 20px 0 20px;
margin-left: 50px;
}
#footer:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0;
font-size: 0;
}#sub-content2 {
float: left; width: 190px;
}


Qualcuno mi da una mano?

Grazie

Leave your Comment

required

required, hidden, never shared

Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post ~ Subscribe to the comments via RSS Feed