Problema div annidati e firefox [Archivio]

Roran

30-10-2010, 21:10

Ho un problema per quanto riguarda la parte grafica del mio sito ( http://harad.altervista.org ),praticamente ho revisionato un pò il css e provando le modifiche con l'ultima versione di opera sembrava tutto ok,poi provando con firefox ho notato che il background del div contenitore centrale non viene visualizzato perchè contiene a sua volta altri div.Potete vedere con vostri occhi cliccando sul link che ho postato,inoltre posto una parte del css e del template in modo che mi possiate aiutare meglio.

Parte del css:

#maincol {
width: 760px;
background: url('../images/bg_parchment_fullwidth_720x167.gif') repeat-y top center;
color: #000;
padding: 0;
margin: 0 auto;
position: relative;
top: 0;
z-index: 10;
clear:both;
}
#topbanner {
clear:both;
padding: 0;
margin: 0 auto;
width: 760px;
height: 88px;
background:url('../images/scroll_header_760x88.gif') no-repeat top center;
position: relative;
}
#foot {
clear:both;
padding: 0;
margin: 0 auto;
width: 760px;
height: 83px;
background: url(../images/scroll_footer_760x83.gif) no-repeat;
background-position: top center;
position: relative;
}
#footext {
text-align: center;
padding: 27px 40px 0 40px;
color: #D7CAA9;
}

/* SIDECOL */
#sidecol {
width: 200px;
padding: 0;
margin: 150px 0 0 0;
float:left;
clear:left;
}
/* left margin for sidecolumn elements */
#sidecol h2,
#sidecol h3,
#sidecol ul,
#sidecol p {
margin-left: 60px;
}
#sidecol a.caption {
margin-left: 30px;
display: block;
padding: 4px 0 8px 0;
width: 160px;
text-align: center;

}

/* Wallpaper */
.screen,
.wallpaper {
padding: 0;
margin: 4px;
position: relative;
top:0;
z-index: 11;
}
.screen .thumb {
position: absolute;
top: 6px;
left: 6px;
z-index: -1;
margin: 0;
}
.wallpaper .thumb {
position: absolute;
top: 11px;
left: 11px;
z-index: -1;
margin: 0;
}
.thumbgallery {
clear: both;
/* margin-bottom: 100px;
border: 1px solid red;*/
}
.thumbgallery .screen,
.thumbgallery .wallpaper {
float: left;
margin: 18px 0;
padding: 0;
width: 150px;
}
.thumbgallery .screen p ,
.thumbgallery .wallpaper p {
margin: 0;
padding: 2px;
text-align: center;
font-size: 0.85em;
}
.thumbgallery .screen .thumb {
top: 6px;
left: 8px;
}
.thumbgallery .wallpaper .thumb {
top: 12px;
left: 12px;
}

/* Screenshots */

/* Sidebar Paper Column
e.g. used for forum topics
*/
#sidecol .papercol {
background: url(../images/sidebar_paper_tile_190x184.gif) repeat-y top left;
width: 190px;
position: relative; /* position for children */
top: 0;
margin: 125px 0 80px 0;
padding: 0;
/* border: 1px dotted green; */
}
#sidecol .papercol p {
margin: 4px 20px 4px 20px;
}
.papercol ol {
margin: 5px 10px 5px 25px;
padding: 15px 5px 2px 15px;
}
.papercol ol li {
margin-bottom: 0.5em;
}
.papercol img.paper-top {
position: absolute;
top: -72px;
left: 0;
margin: 0;
padding:0;
}
.papercol img.paper-endcap {
height: 60px;
position: absolute;
bottom: -60px;
left: 0;
}
#sidecol .papercol-bottom {
width: 190px;
position: relative;
top: 0;
left: 0;
background: url('../images/paper_bottom_bg_190x168.gif') repeat-y top left;
padding: 0;
margin: 0 0 80px 0;
/* border: 1px dotted red;*/
}
.papercol-bottom img.paper-endcap {
height: 60px;
position: absolute;
bottom: -60px;
left: 0;
}
.papercol-bottom .border-box {
width: 155px;
margin-left: 18px;
}
#midcol {
width: 450px;
margin: 0;
padding: 0;
float: left;
}
#navcol {
width: auto;
position: absolute;
right: -320px;
top: 8px;
/*margin: 0;*/
padding: 0;
}
/* "backtotop" bookmark links */
#navcol #btt-features {
position: absolute;
top: 303px;
}
#navcol #btt-awards {
position: absolute;
top: 870px;
}
#navcol #btt-gallery {
position: absolute;
top: 1500px;
}
/* navigation images */
#navcol img {
margin-top: 4px;
}
#content {
width: 450px;
padding: 130px 0 30px 0;
position: relative;
margin: 0;
}
#content p.copy {
margin: 1.5em 1.5em 2em 1.5em;
}

Parte del Template:

<div id="maincol">

<center><img src="<?php get_theme_url(); ?>/themes/dragonage/default/images/bannerblacksmith.jpg"></center>
<div id="buttons"><a href="http://harad.altervista.org"><img src="<?php get_theme_url(); ?>/themes/dragonage/default/images/rnav_home_110x56.gif"></a></div>



<div id="sidecol">

<div class="papercol">
<img src="<?php get_theme_url(); ?>/themes/dragonage/default/images/sidebar_paper_top_latestforumtopics_190x72.gif" width="190" height="72" alt="" class="paper-top" />
<?php get_navigation(return_page_slug()); ?>

<img src="<?php get_theme_url(); ?>/themes/dragonage/default/images/paper_bottom_largeendcap_190x60.gif" width="190" height="60" alt="" class="paper-endcap" />
</div>

</div> 


<div id="midcol">

<div id="navcol">
<div id="count">


<script type="text/javascript" language="javascript">
var s_sid = 41895;var st_dominio = 4;
var cimg = 406;var cwi =165;var che =100;
</script>
<script type="text/javascript" language="javascript" src="http://s10.histats.com/js9.js"></script>
<noscript><a href="http://www.histats.com/it/" target="_blank">
<img src="http://s4.histats.com/stats/0.gif?41895&1" alt="javascript hit counter" border="0"></a>
</noscript>


<div id="firefox">

<a href='http://www.mozilla.com?from=sfx&uid=0&t=561'><img src='http://sfx-images.mozilla.org/firefox/3.6/125x125.png' alt='Spread Firefox Affiliate Button' border='0' /></a></div>

<div id="facebook"></div>

</div>
</div> 


<div id="content">
<?php
get_page_title();
get_page_content();
?>
</div>
</div>

</div>

in breve

maincol
|- sidecol
|- midcol
| |- navcol
| |-count
| |-firefox
| |-facebook
|-content

Roran

31-10-2010, 17:13

qualcuno mi aiuta?

anonimizzato

31-10-2010, 18:32

E' strano, la prima volta che ho raggiunto il tuo sito ho notato anch'io la mancanza dello sfondo, invece adesso mi si vede.

L'immagine di sfondo che non vedi in Firefox è questa? http://harad.altervista.org/theme/Harad/themes/dragonage/default/images/bg_parchment_fullwidth_720x167.gif

Prova a verificarne il percorso.

Ciao.

Roran

01-11-2010, 12:27

Credo di aver risolto,potete dirmi se visualizzate il sito correttamente anche voi?

Rsk

01-11-2010, 14:43

Lo visualizzo correttamente con firefox ;)

anonimizzato

01-11-2010, 14:44

Per me è ok con Firefox 3.6 su Ubuntu 10.04.

Qual'era il problema? :)

Roran

01-11-2010, 20:41

Per me è ok con Firefox 3.6 su Ubuntu 10.04.

Qual'era il problema? :)praticamente ho letto che firefox non interpretava bene i div interni al div contenitore se questi erano div principali o se contenevano dei float,alla fine ho riscritto tutto il css da capo utilizzando un div contenitore e tutti gli altri sotto div annidati,senza l'uso di float.

Solo con IE 8 mi si vede tutto male,però vabè...mi basta sapere che va sia con firefox,con opera e safari