ciao a tutti,ho un problema di differente interpretazione con IE7.
il problema riguarda in particolare un bordo inserito come immagine in un div posizionato assolutamente.
con ff e IE fino al 6 tutto ok.
il problema sorge con IE7,ma è un grande problema perchè non visualizzandolo correttamente sballa tutta la struttura.
questo è quanto si vede con ff e ie:
questo invece è quanto si vede con ie7
posto il codice xhtml:
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>contenuti</title>
<link rel="stylesheet" type="text/css" media="screen" href="contenutifloat.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iecontenuti.css">
<![endif]-->
</head>
<body>
<div id="container">
<div id="subcontainer">
<div id="header">[img]img/logo.gif[/img]</div>
<div id="menu">
<ul>
[*]link[*]contatti[*]link[*]prodotti[*]servizi[*]home[/list]
</div>
<div id="bordo">[img]img/container-contenuti.gif[/img]</div>
<div id="contenuti">
<div class="containingbox">
<div class="floatleft">
<h1>sviluppo software</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsaem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula </p>
</div>
<div class="floatleft"><h1>temi d'intervento</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. FuLorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aeneanem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligu</p>
</div>
<div class="floatleft"><h1>metodologie</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. FusceLorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enimgilla at, lacinia ut, augue. Nullam nunc.em ipsum dolor sit amet, consectetuer adipiscing elit. Duis lig</p>
</div>
<div class="floatleft"><h1>consulting </h1>
Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lpendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequaem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aeneanconse</p>
</div>
<div class="floatleft"><h1>consulenza alle pubbliche amministrazioni </h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in coem ipsum dolor sit amet, consectetuer adi</p>
</div>
<div class="floatleft"><h1>consulenza alle imprese </h1>
Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condienatis enim nec quam. Cras faucibus,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aeneem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligu</p>
</div>
</div>
<div id="footer">
[img]img/icone/icon_home.gif[/img]home|
[img]img/icone/page_text.gif[/img]servizi |
[img]img/icone/page_text.gif[/img]prodotti |
[img]img/icone/list_links.gif[/img]link|
[img]img/icone/icon_user.gif[/img]login|
[img]img/icone/icon_mail.gif[/img]contatti|
[img]img/icone/sitemap_color.png[/img]sitemap</div>
</div>
</div>
</div>
<div id="bottom"></div>
</body>
</html>
</code>
questo è il css:
<code>
* {
padding : 0;
margin : 0;
}
p{
color:#000000;
}
.containingbox
{
width: 800px;
height: 700;
background-color: #e1e9ec;
margin-top: 20px;
margin-right:20px;
margin-left:20px;
background-image: url(img/img_sfondocontenuti.gif);
background-repeat: no-repeat;
background-position: 50% 15%;
margin-bottom:40px;
}
.floatleft
{
float: left;
width: 250px;
height: 300px;
margin: 5px;
}
body{
font-family: arial,sans-serif;
font-size: 76%;
text-align:center; /*centra in IE 5.x*/
margin:0;
padding:0;
background-repeat: repeat-x;
background-position: left top;
background-attachment: scroll;
background-image: url(img/profondita.gif);
background-color: #cddeeb;
}
#menu a#current{color: #004c75;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #004c75;}
#menu a#current li:hover, a#current li:hover a {color: #004c75;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #004c75;}
/* Struttura */
#header{
width:820px;
margin-top: 0px;
}
#container{
width:821px;
text-align:left;
margin: 0px auto;
margin-top: 20px;
}
#container #contenuti{
margin-top: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #034e75;
background-color: #e1e9ec;
width: 821px;
filter:alpha(opacity=50); /*trasparenza*/
-moz-opacity: 0.5;
opacity:0.5;
}
#subcontainer{
text-align: left;
}
/* Navigazione */
#menu {
height:10px;
list-style:none;
width: 100%;
margin-bottom: 50px;
}
#menu ul
{
margin: 0px;
list-style-type: None;
}
#menu li
{
display: Inline;
float: right;
width: 50px;
padding: 1px;
font-family: Verdana;
font-size: 0.9em;
}
#menu a {
line-height:50px;
text-align:center;
text-decoration: none;
color: #333333;
}
#menu a:hover {
color: #004c75;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #004c75;}
#menu .active {
color: #004c75;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #004c75;
}
#container #contenuti #footer a {
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
color:#336698
}
#container #footer {
border-top-width: thin;
border-top-style: dotted;
border-top-color: #000033;
height: 50px;
width: 820px;
clear: both;
margin-top: 20px;
padding-top: 10px;
}
#subcontainer #bordo {
width: 850px;
height: 3px;
margin-bottom: 30px;
margin-left: -12px;
margin-right: -20px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
margin-top: -22px;
}
#bottom{
background-image: url(img/ombrasotto.gif);
background-repeat: no-repeat;
height: 128px;
background-color: #cddeeb;
width: 100%;
background-position: center top;
margin-top: 20px;
}
#container #subcontainer #contenuti #footer img {
padding-right: 5px;
padding-top: 2px;
}
#container #subcontainer #contenuti .containingbox .floatleft h1 {
padding: 20px;
font-size: 1.2em;
font-family : verdana;
font-weight: bold;
padding-bottom: 10px;
}
#container #subcontainer #contenuti .containingbox .floatleft p {
text-align:justify;
font-size:1em;
color:#000000;
padding: 20px;
}
#container #subcontainer #contenuti .containingbox .floatleft a {
color: #004c75;
text-decoration: none;
}
</code>
e questo il css per IE:
<code>
#menu{
margin-bottom:40px;
}
#subcontainer #bordo {
width: 840px;
height: 3px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
position:absolute;
top:193px;
}
#container{
width:801px;
text-align:left;
margin: 0px auto;
margin-top: 20px; /* per i browser moderni */
/* per i browser moderni */
}
#container #contenuti{
margin-top: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #034e75;
background-color: #e1e9ec;
width: 800px;
filter:alpha(opacity=50); /*trasparenza*/
-moz-opacity: 0.5;
opacity:0.5;
margin-right:-20px;
}
.containingbox
{
width: 800px;
height: 600px;
background-color: #e1e9ec;
}
.floatleft
{
float: left;
width: 250px;
height: 300px;
margin: 5px;
}
#container #footer {
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #000033;
height: 50px;
width: 820px;
clear: both;
margin-top: 20px;
}
</code>
ringrazio tutti e sopratutto chi riesce a risolvere questa gravosa e dannata questione.
Rispondi quotando