w ramach ćwiczeń tworzę prostą stronę o typowej strukturze (banner na górze, pod nim po lewej małe menu, a z prawej główny ekran) i napotkałem na następujący problem- menu i główny ekran w Firefoksie zachodzą na siebie w poziomie. W efekcie powoduje to przesunięcie ekranu pod menu. Po namyśle zauważyłem, że Firefox traktuje blok main w bardzo dziwny sposób:
- Kod: Zaznacz cały
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<META HTTP-EQUIV="Creation-date" CONTENT="2002.03.16">
<META HTTP-EQUIV="Reply-to" CONTENT="adres zwrotny">
<META NAME="Description" CONTENT="opis dokumentu">
<META NAME="Author" CONTENT="autor dokumentu">
<META NAME="Generator" CONTENT="Zajączek 3.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<center>
<div id="main"> [b]/*FF traktuje ten blok jakby zawierał tylko banner */[/b]
<div id="header">
<img src="grafika/img/system.png" style="width: 98%; height: 98%" />
</div>
<div id="menu">
<div class="headk">
<a class="catlink" href="indextabelka2.html"><b>Kategoria 1</b></a>
</div>
<a class="optlink" href="indextabelka2.html"><div class="opt">Opcja 1</div></a>
<a class="optlink" href="indextabelka2.html"><div class="optlast">Opcja 2</div></a>
</div>
<div id="screen" align="center">
<div id="scope">
screenscreenscreenscreenscreenscreen
screenscreenscreen screen screen screen
screen screen screen screen screen screen
</div>
</div>
</div>
</center>
</BODY>
</HTML>
Arkusz stylów:
- Kod: Zaznacz cały
body { font-family: Arial, Helvetica, Verdana, sans-serif }
p:first-letter {font-size: 150%}
a {text-decoration: none}
a.optlink:link {color: black}
a.optlink:visited {color: black}
a.optlink:hover {background-color: #000; color: #000}
a.optlink:active {font-weight: normal}
a.catlink:link {color: white}
a.catlink:visited {color: white}
a.catlink:hover {color: #C9D4DB}
a.catlink:active {font-weight: bold}
a.screenlink:link {color: black}
a.screenlink:link {color: black}
body {
background: url(grafika/img/tlo.png)
}
div#main {
color: red;
width: 65%;
border: medium solid red;
}
div#header {
background-color: #000000;
width: 100%;
height: 100px;
}
div#menu {
color: #FFFFFF;
padding: 0.5em;
background-color: #AACCCC;
width: 27%;
height: 83%;
display: inline;
overflow: auto;
border: medium solid black;
border-right: thin solid black;
float: left;
}
div#screen {
color: #000000;
background-color: #C9D4DB;
padding: 1em;
font-align: center;
float: right;
width: 73%;
height: 83%;
display: inline;
overflow: auto;
border: medium solid black;
border-left: thin solid black;
}
div#scope {
width: auto;
background-color: #FFF;
padding: 1em;
}
#menu .kat {
width: 100%;
border-bottom: medium double #FFFFFF;
background: transparent
}
#menu .headk {
font-transform: small-caps;
border-top: medium double #FFFFFF;
border-left: medium double #FFFFFF;
border-right: medium double #FFFFFF;
border-bottom: medium double #FFFFFF;
background-color: #335574;
}
#menu .opt, .optlast {
width: 93%;
background-color: #C9D4DB;
border-left: medium double #404040;
border-right: medium double #404040;
border-bottom: 1px solid #404040;
font-size: smaller;
color: #000000;
}
#menu .optlast {
border-bottom: medium double #404040;
}
IE 7 zarówno jak i Zajączek, w którym tą stronę napisałem interpretują wszystko składnie. Natomiast, jak napisałem w komentarzu do kodu, Firefox zamyka blok "main" tuż po bannerze. Po usunięciu bannera main zamyka się przed menu i screenem, a przecież powinien je zawierać. Konsekwencją tego jest ustalanie wartości width tych elementów w stosunku do ekranu a nie maina (tak myślę) i dlatego całość się rozjeżdża.
Jak to naprawić?
Pozdrawiam i przepraszam za rozwalone wcięcia (przy wysyłaniu posta się schrzaniły)