Ciao a tutti.
Sono un novizio con i CSS e in questo forum.
Prima di postare ho girato in tutto il forum alla disperata ricerca di trovare un thread simile al mio problema, ma senza grossi risultati.
Sto testando un piccolo sito ad altezza fissa che ho realizzato per un'amica fotografa.
Con i browser IE7, Firefox e Safari tutto ok, ma IE6 non riconosce la posizione relative del menu posizionato in basso a sinistra, perciò il risultato finale è come se il div principale non riuscisse a trattenere nel suo spazio verticale disponibile, il menu in basso. Giocoforza, anche il menu contestuale in posizione: absolute, collegato al menu principale, risulta spostato più in basso, e non più allineato con il margine in basso della foto a destra
Posto uno screenshot per spiegarmi meglio:
Inserisco anche il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Valentina Brunello Photography Portfolio - Art Book</title>
<script type="text/javascript" src="gallery.js"></script>
<script type="text/javascript" src="selection.js"></script>
<link href="VB2.css" rel="stylesheet" type="text/css" />
</head>
<body onload="SetFirstSelection()">
<div id="main">
<div id="colonna_sx">
<div id="head">
</div>
<hr>
<div id="menu">
<ul>
[*]<span class="selected">ART BOOK</span> |
<div id="m_portfolio">
<ul>
[*]FRAMMENTI URBANI
[*]SEGNI URBANI
[*]INTERNO DI FAMIGLIA
[*]VOLTI (TRACCE)
[*]TEMPO
[*]GLI OCCHI DI CHIARA
[*]PAESAGGI
[*]STREET PHOTO
[/list]
</div>
<li class="vert_border">AD BOOK |
<li class="vert_border"> BIO |
[*] CONTACT |
<li class="vert_border">NEWS |
[*] LINKS
[/list]
<hr>
</div>
</div>
<div id="colonna_dx">
<div id="box_change">[img]img/frammenti_urbani/01_roma.jpg[/img]
<div>
<p id="desc">Roma, 2004</p>
</div>
</div>
<div id="foto">
<ul class="textDefault">
[*]1
[*]2
[*]3
[*]4
[*]5
[*]6
[*]7
[*]8
[*]9
[*]10
[*]11
[*]12
[*]13
[/list]
</div>
</div>
<div class="blocco">[img]img/spacer.gif[/img]</div>
</div>
</body>
</html>
ed il CSS:
html, body,p, h1, h2, h3 {
margin:0;
padding:0;
font-size:10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-align:left;
line-height: 14px;
letter-spacing: 0px;
}
.blocco {
margin: 0px;
padding: 0px;
}
#main {
width: 705px;
min-height: 410px;
height: auto !important;
height: 410px;
padding: 0px;
margin: 110px auto auto;
}
#main li {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#menu {
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
top: -14px;
}
h2 {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #000000;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
font-style: normal;
font-weight: normal;
}
#menu ul {
margin: 0px;
padding: 0px;
}
.selected {
text-decoration: underline;
}
.textDefault {
text-decoration: none;
}
#foto ul {
display: inline;
margin: 0px;
padding: 0px;
}
#foto li {
display: inline;
}
#menu li {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#m_portfolio {
position: absolute;
float: left;
width: 100%;
margin: 0px;
top: -250px;
left: 0px;
padding: 0px;
}
#m_portfolio li {
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
line-height: 16px;
}
#colonna_sx {
float: left;
width: 355px !important;
width /**/: 355px;
margin: 0px;
padding: 0px;
}
h1 {
display: none;
}
#head {
float: left;
width: 355px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 310px;
margin-left: 0px;
height: 100px;
padding: 0px;
}
#legal {
margin: 0px;
padding: 0px;
}
.italic {
font-style: oblique;
}
#box_change {
float: left;
width: 100%;
height: 273px;
margin: 0px 0px 123px;
}
#foto {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
width: 350px;
padding: 0px;
}
.p_15 {
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
hr {
display: none;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
color: #000000;
text-decoration: underline;
}
#menu {
float: left;
width: 100%;
margin: 0px;
padding: 0px;
position: relative;
bottom: 0px;
}
#desc {
display: inline;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.visible {
text-decoration: none;
}
.hidden {
display: none;
}
#colonna_dx {
margin: 0px;
padding: 0px;
float: right;
width: 350px !important;
width /**/: 350px;
}
Ho pensato che dichiarando l'altezza delle due colonne che compongono il layout con "!important" avrei risolto, ma non ha funzionato. Anche cambiando Doctype da Transitional a Strict non cambia granchè, ma non so se francamente questo aspetto influisca sulla vera natura del mio problema.
Qualcuno di voi si è mai trovato nella mia stessa situazione così mi potrebbe dare un aiuto?
Grazie comunque in anticipo per l'attenzione.
Ciao
Rispondi quotando