Na stronie jest sobie menu w css i w mozilli do 1.7.x wszystko wyświetla się poprawnie (Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.7.12) Gecko/20050920)
Natomiast już w SeaMonkey z nowym Gecko 'gubi' bordery ;o (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a1) Gecko/20060108 SeaMonkey/1.5a
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.1) Gecko/20060130 SeaMonkey/1.0)
Strona gdzie wrzuciłem okrojony plik css i html jest tu:
http://wwwtest.webpark.pl/sm/test.html
A teraz wyjaśnie co jest nie tak w nowym Gecko:
>> Menu po lewo
* klik na 'tekst 1' - nie pokazuje dolnego bordera po nad 'tekst 2' po 'tekst 1c'
* klik na 'tekst 2' - pokazuje dolny border pod 'tekst 2'
* klik na 'tekst 3' - pokazuje dolny border pod 'tekst 3', nie pokazuje górnego bordera nad 'tekst 4'
Poprawnie po kliku powinien znikać dolny border elementu klikniętego, a ostatni podelement [powinien się kończyć borderem dolnym, tak by następna pozycja miała border na górzer i dole.
W mozilli do 1.7.x wszystko wyświetla się poprawnie.
Czemu teraz są problemy?
Trzeba poprawić coś w kodzie?
Jak możecie to zerknijcie np spod Mozilla Suite i SeaMonkey na tą stronkę by zobaczyć różnice.
Z góry dzięki za wszelkie podpowiedzi
plik css:
- Kod: Zaznacz cały
body {
background: #99ff99
background-color: #99ff99;
color: #000000;
background-position: right top;
margin-right: 48px;
}
a {
color:#D81818;
background-color: transparent;
font-weight: bold;
font-size: 0.9em;
text-decoration: none;
}
a:link {color:#D81818;
background-color: transparent;}
a:visited {color:#D81818;
background-color: transparent;}
a:hover {color: #99ff99;
background-color: transparent;
}
.tresc table {
margin-left: auto;
margin-right: auto;
padding: 2px;
text-align: center;
}
.menu {
position:absolute;
float: left;
display: inline;
margin-top: 4.5em;
margin-left: 0.6em;
min-width: 10.5em;
background: #99ff99;
background-color: #99ff99;
padding: 0px;
border: none;
font-family: arial, sans-serif;
font-size: 0.9em;
color: #000000;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
border: 2px dotted #D81818;
background: #26c40c;
background-color: #26c40c;
}
.menu ul li {
padding: 4px;
margin: 0;
}
.menu ul > li {
padding: 0px;
margin: 0;
}
.menu ul > li > a {
display: block;
padding: 0.7em;
padding-left: 0.5em;
padding-right: 0.5em;
}
.menu ul li a.plink {
border:0;
}
.menu ul li a.olink {
border-top: 0.5px dashed #d81818;
border-bottom: 0px;
font-size: 0.85em;
}
.menu ul li a {
border: 3em;
padding: 0.7em;
border-top: 0.5px dashed #d81818;
border-bottom: 0.5px dashed #d81818;
}
.menu ul li a.mlink {
display: block;
border:4em;
padding: 0.4em;
border-bottom: 0px;
border-top: 0px;
font-size: 0.85em;
text-align: center;
}
.menu ul li a:hover {
background: #D81818;
color: #99ff99;
}
.menu ul li a.mlink:hover {
background: #99ff99;
color: #D81818;
}
.adres {
position:relative;
margin-top: 1.0em;
margin-left: 13.0em;
background: #26c40c;
background-color: #26c40c;
padding: 2px;
border: 2px dotted #D81818;
font-family: arial, sans-serif;
font-size: 1.0em;
color: #000000;
text-align: center;
}
.logo {
position:absolute;
float: left;
display: inline;
margin-top: -1.0em;
margin-left: -1.5em;
}
.info {
position:relative;
margin-top: 1.0em;
margin-left: 16.0em;
background: #26c40c;
background-color: #26c40c;
padding: 0px;
border: 1px dotted #D81818;
font-family: arial, sans-serif;
font-size: 0.8em;
text-align: center;
color: #000000;
}
.uwagi {
position:relative;
margin-top: 1.0em;
margin-left: 14.0em;
background: #D81818;
background-color: #D81818;
padding: 0px;
border: 1px dotted #26c40c;
font-family: arial, sans-serif;
font-size: 0.95em;
text-align: center;
color: #99ff99;
font-weight: bold;
text-decoration: blink;
}
plik html:
- Kod: Zaznacz cały
<?xml version="1.0" encoding="iso-8859-2" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" type="text/css" href="css/IEstyl.css" media="all" title="Podstawowy styl strony" />
<style type="text/css">
@import url("css/styl.css") screen,projection;
</style>
<title>...</title>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/menuover.js"></script>
</head>
<body>
<div class="logo"><img src="" alt=""></img></div><div class="adres"><h3>tekst1<br />
tekst2<br />
tekst3</h3>
</div><div class="menu">
<ul>
<li><a class="plink" href="test.html">Strona główna</a></li>
<li><a href="javascript:" onfocus="blur()" onclick="rozwin_zwin(0); return false">tekst 1</a></li>
<li> <div id="nr0_0" style="display: none;"><a class="mlink" href="i.html" onmouseover="changeimage(myimages[1],this.href)">tekst 1a</a></div></li>
<li class="mlink"> <div id="nr0_1" style="display: none;"><a class="mlink" href="f.html" onmouseover="changeimage(myimages[2],this.href)">tekst 1b</a></div></li>
<li class="mlink"> <div id="nr0_2" style="display: none;"><a class="mlink" href="t.html" onmouseover="changeimage(myimages[3],this.href)">tekst 1c</a></div>
<script type="text/javascript">
//<![CDATA[
<!--
ukryj(0);
//-->
//]]>
</script>
</li>
<li><a href="javascript:" onfocus="blur()" onclick="rozwin_zwin(1); return false">tekst 2</a></li>
<li><div id="nr1_0" style="display: none;"><a class="mlink" onmouseover="changeimage(myimages[4],this.href)" href="k.html">tekst 2a</a></div></li>
<li><div id="nr1_1" style="display: none;"><a class="mlink" onmouseover="changeimage(myimages[5],this.href)" href="c.html">tekst 2b</a></div>
<script type="text/javascript">
//<![CDATA[
<!--
ukryj(1);
//-->
//]]>
</script></li>
<li><a href="javascript:" onfocus="blur()" onclick="rozwin_zwin(2); return false">tekst 3</a></li>
<li><div id="nr2_0" style="display: none;"><a class="mlink" onmouseover="changeimage(myimages[6],this.href)" href="p.html">tekst 3a</a></div></li>
<li><div id="nr2_1" style="display: none;"><a class="mlink" onmouseover="changeimage(myimages[7],this.href)" href="r.html">tekst 3b</a></div></li>
<li><div id="nr2_2" style="display: none;"><a class="mlink" onmouseover="changeimage(myimages[8],this.href)" href="v.html">tekst 3c</a></div></li>
<li><div id="nr2_3" style="display: none;"><a class="mlink" onmouseover="changeimage(myimages[9],this.href)" href="d.html">tekst 3d</a></div></li>
<li><div id="nr2_4" style="display: none;"><a class="mlink" onmouseover="changeimage(myimages[10],this.href)" href="z.html">tekst 3e</a></div></li>
<li><div id="nr2_5" style="display: none;"><a class="mlink" onmouseover="changeimage(myimages[11],this.href)" href="b.html">tekst 3f</a></div></li>
<li><div id="nr2_6" style="display: none;"><a class="mlink" onmouseover="changeimage(myimages[12],this.href)" href="g.html">tekst 3g</a></div></li>
<li><div id="nr2_7" style="display: none;"><a class="mlink" onmouseover="changeimage(myimages[13],this.href)" href="t.html">tekst 3h</a></div>
<script type="text/javascript">
//<![CDATA[
<!--
ukryj(2);
//-->
//]]>
</script></li>
<li><a href="k.html">tekst 4</a></li>
<li><a class="olink" href="javascript:" onfocus="blur()" onclick="rozwin_zwin(3); return false">tekst 5</a></li>
<li><div id="nr3_0" style="display: none;"><a class="mlink" href="t.html">tekst 5a</a></div></li>
<li><div id="nr3_1" style="display: none;"><a class="mlink" href="#" onclick="addSidebar(this, '');">tekst 5b</a></div></li>
<li><div id="nr3_2" style="display: none;"><div class="center"> xxx:<br />
<img ></img></div></div>
<script type="text/javascript">
//<![CDATA[
<!--
ukryj(3);
//-->
//]]>
</script></li></ul>
</div>
<div class="tresc"><div style="text-align: center;">
<div style="margin: auto;">
<h4>bla bla bla bla<br />
bla bla bla bla<br />
bla bla bla bla<br />
bla bla bla bla</h4>
<h4><a href="javascript:warp()"><img src="m.jpg" id="targetimage" alt="Obrazek"></img></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></h4></div></div></div>
<div class="info"><a style="font-size: 0.9em;" href="">> >tekst <</a></div>
<script type="text/javascript" src="js/preloadover.js"></script>
</body>
</html>
plik menu.js:
- Kod: Zaznacz cały
// Autorem skryptu jest: SŁAWOMIR KOKŁOWSKI
// http://www.kurshtml.website.pl
// Jeœli chcesz wykorzystać ten skrypt na swojej stronie,
// nie usuwaj tego komentarza!
var karty = new Array(
////// Podaj iloœć pozycji w poszczególnych menu:
new karta(3),
new karta(2),
new karta(8),
new karta(3)
);
szybko = false;
czas = new Date();
function display(id, wartosc)
{
if (wartosc)
{
if (document.getElementById) document.getElementById(id).style.display = wartosc;
else if (document.all) document.all[id].style.display = wartosc;
else if (document.layers) document.layers[id].display = wartosc;
}
else
{
var wart = "";
if (document.getElementById) wart = document.getElementById(id).style.display;
else if (document.all) wart = document.all[id].style.display;
else if (document.layers) wart = document.layers[id].display;
return wart;
}
}
function ukryj(id)
{
for (var i = 0; i < karty[id].ilosc; i++) display("nr" + id + "_" + i, "none");
karty[id].rozwinieta = false;
}
id_rozwin_zwin = 0;
function rozwin_zwin(id, nr)
{
if (!nr)
{
var nr = 0;
if (!karty[id].rozwinieta) for (var i = 0; i < karty.length; i++) if (i != id) ukryj(i);
czas = new Date();
}
if (nr < karty[id].ilosc)
{
if (karty[id].rozwinieta)
{
if (szybko) display("nr" + id + "_" + nr++, "none");
if (nr < karty[id].ilosc) display("nr" + id + "_" + nr, "none");
}
else
{
if (szybko) display("nr" + id + "_" + nr++, "block");
if (nr < karty[id].ilosc) display("nr" + id + "_" + nr, "block");
}
}
nr++;
clearTimeout(id_rozwin_zwin);
if (nr < karty[id].ilosc) id_rozwin_zwin = setTimeout('rozwin_zwin(' + id + ',' + nr + ')', 10);
else
{
if (!szybko && new Date() - czas > karty[id].ilosc*25) szybko = true;
else if (szybko && new Date() - czas < karty[id].ilosc*12) szybko = false;
karty[id].rozwinieta = (karty[id].rozwinieta ? false : true);
}
}
function karta(il)
{
this.ilosc = il;
this.rozwinieta = true;
}
PS strona w całości
poprawnie przechodzi przez validator xhtml 1.1 i css.