|
Convenient web based access to our favorite web design Usenet groups
|
 |
This is Interesting: Free Magazines for Graphics designers and webmasters
| Author |
| Thread |
 |
|
|
|
|
|
|
|
 |
Works in IE but not in Netscape7 |
 |
|
 |
|
|
|
 06-22-04 - 04:15 AM 
|
Hi!
I just have a following CSS which works perfect in IE but not in NS7:
- #global (and the rest)is not centered in the window
- #moj does not position as I expect on the left side of #cont1
CSS:
<STYLE TYPE="text/css">
<!--
body{
background-color:#816C4F;
text-align:center;
}
#global{
width:800px;
height: 600px;
background-color:#8ddC4F;
text-align:left;
}
#cont {
text-align:left;
padding:0px 2px 0px 2px;
width: 800px;
border-style:solid;
border-width:1px 1px;
background-color:#452700;
border-color:#A35100;
margin-bottom: 0px;
margin-left:5px;
margin-top:2px;
}
#cont1 {
float:left;
padding:0px 2px 2px 2px;
width: 160px;
border-style:solid;
border-width:1px 1px;
background-color:#452700;
border-color:#A35100;
margin-bottom: 0px;
margin-left:5px;
margin-top:25px;
}
#moj {
margin-left:10px;
padding-left: 20px;
padding-top: 10px;
}
#Header {
top:2px;
left:2px;
width:800px;
bottom:2px;
padding:0px 0px 0px 0px;
border-style:solid;
border-width:0px 0px;
background-color:#816C4F;
margin-top:2px;
margin-bottom:2px;
}
#Menu {
text-align: center;
width:160px;
margin-top:2px;
padding:2px 0px 2px 0px;
background-color:#816C4F;
float:left;
margin-left: 0px;
}
#Footer {
top:840px;
left:5px;
width:800px;
margin:0;
background-color: #452700;
color: #00B300;
border-top: 1px solid #A35100;
font-size: 11px;
font-weight:bold;
text-align: right;
padding: 5px 5px 5px 5px;
}
#text {position: absolute;
color: white;
top: 180px;
font: 11px arial;
font-weight: 900;
text-align: right;
left:620px;
}
#time {position: absolute;
color: #D50000;
top: 160px;
left: 500px;
font: 11px arial;
font-weight: 900;
text-align: right;
}
#titel {position: absolute;
color: #008000;
top:50px;
left: 355px;
font: 36px arial;
font-weight: 900;
text-align: center;
}
#frugo{
padding:10px;
text-align:left;
}
#ayers{
position: absolute;
top:5px;
left:580px;
padding:20px;
text-align:right;
}
div.middle {
width: 600px;
background-image: url(middle1.jpg);
background-repeat: repeat-y;
}
div.top {
background-image: url(top1.jpg);
background-position: top left;
background-repeat: no-repeat;
}
div.bottom {
background-image: url(bottom.jpg);
background-position: bottom left;
background-repeat: no-repeat;
padding: 30px 10px 40px 20px;
text-align:center;
}
-->
</STYLE>
Thanks in advance.
Krzysztof
Here goes the whole HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
function removeText(obj)
{
document.getElementById(obj).innerHTML = ' ';
}
function addText(obj,text)
{
document.getElementById(obj).innerHTML = text;
}
function addFil(fil)
{
}
function addFile(obj,fil)
{
document.getElementById('temp').src=fil;
if (document.all) {
contents=window.frames.temp.document.body.innerHTML;}
document.getElementById(obj).innerHTML=contents;
}
function GetDay(intDay){
var DayArray = new Array("niedziela", "poniedzialek", "wtorek",
"sroda",
"czwartek", "piatek", "sobota")
return DayArray[intDay]
}
function GetMonth(intMonth){
var MonthArray = new Array("Stycznia", "Lutego", "Marca",
"Kwietnia", "Maja", "Czerwca",
"Lipca", "Sierpnia", "Wrzesnia",
"Pazdziernika", "Listopada", "Grudnia")
return MonthArray[intMonth]
}
function zegar() {
teraz=new Date();
godzina=teraz.getHours();
minuta=teraz.getMinutes();
sekunda=teraz.getSeconds();
dzien=teraz.getDate();
rok=teraz.getYear();
if(teraz.getYear()<1000)
rok+=1900;
data=dzien+" "+GetMonth(teraz.getMonth())+" "+rok;
czas="Jest "+GetDay(teraz.getDay())+" "+data+" - godzina : "
+godzina+":"+minuta+":"+sekunda;
if (document.all) {
document.all.time.innerHTML = czas;
}
else if (document.getElementById) {
document.getElementById("time").innerHTML = czas;
}
setTimeout("zegar()",1000);} // po sekundzie wywołaj ponownie funkcję
// -->
</script>
<style type="text/css">
.menuOut {cursor:pointer; margin:5px; background-color:#00A100;
color:#000000; width:145px; border:1px solid #000000; padding:2px;
text-align:center; font-weight:bold;}
.menuOver {cursor:pointer; margin:5px; background-color:#007300;
color:#FFFF07; width:145px; border:1px solid #00000a; padding:2px 1px
2px 2px; text-align:center; font-weight:bold;}
.submenu {width:140px; font-family:Verdana; font-size:11px;
padding-left:10px;text-align:left;}
.submenu a {color:#D1D100; text-decoration:none; font-weight:bold;}
.submenu a:hover {color:#ff0000; text-decoration:none;
font-style:oblique; font-weight:bold;}
</style>
<script type="text/javascript">
/*
Script made by Martial Boissonneault © 2001-2003
http://getElementById.com/
This script may be used and changed freely as long as this msg is
intact
Visit http://getElementById.com/ for more free scripts and tutorials.
*/
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("Menu").getElementsByTagName("DIV");
if(el.style.display == "none"){
for (var i=0; i<ar.length; i++){
if(ar[i].style.display == "none")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function ChangeClass(menu, newClass, submenu) {
if (document.getElementById) {
document.getElementById(menu).className = newClass;
}
}
document.onselectstart = new Function("return false");
</script>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-2" />
<STYLE TYPE="text/css">
<!--
body{
background-color:#816C4F;
text-align:center;
}
#global{
width:800px;
height: 600px;
background-color:#8ddC4F;
text-align:left;
}
#cont {
text-align:left;
padding:0px 2px 0px 2px;
width: 800px;
border-style:solid;
border-width:1px 1px;
background-color:#452700;
border-color:#A35100;
margin-bottom: 0px;
margin-left:5px;
margin-top:2px;
}
#cont1 {
float:left;
padding:0px 2px 2px 2px;
width: 160px;
border-style:solid;
border-width:1px 1px;
background-color:#452700;
border-color:#A35100;
margin-bottom: 0px;
margin-left:5px;
margin-top:25px;
}
#moj {
margin-left:10px;
padding-left: 20px;
padding-top: 10px;
}
#Header {
top:2px;
left:2px;
width:800px;
bottom:2px;
padding:0px 0px 0px 0px;
border-style:solid;
border-width:0px 0px;
background-color:#816C4F;
margin-top:2px;
margin-bottom:2px;
}
#Menu {
text-align: center;
width:160px;
margin-top:2px;
padding:2px 0px 2px 0px;
background-color:#816C4F;
float:left;
margin-left: 0px;
}
#Footer {
top:840px;
left:5px;
width:800px;
margin:0;
background-color: #452700;
color: #00B300;
border-top: 1px solid #A35100;
font-size: 11px;
font-weight:bold;
text-align: right;
padding: 5px 5px 5px 5px;
}
#text {position: absolute;
color: white;
top: 180px;
font: 11px arial;
font-weight: 900;
text-align: right;
left:620px;
}
#time {position: absolute;
color: #D50000;
top: 160px;
left: 500px;
font: 11px arial;
font-weight: 900;
text-align: right;
}
#titel {position: absolute;
color: #008000;
top:50px;
left: 355px;
font: 36px arial;
font-weight: 900;
text-align: center;
}
#frugo{
padding:10px;
text-align:left;
}
#ayers{
position: absolute;
top:5px;
left:580px;
padding:20px;
text-align:right;
}
div.middle {
width: 600px;
background-image: url(middle1.jpg);
background-repeat: repeat-y;
}
div.top {
background-image: url(top1.jpg);
background-position: top left;
background-repeat: no-repeat;
}
div.bottom {
background-image: url(bottom.jpg);
background-position: bottom left;
background-repeat: no-repeat;
padding: 30px 10px 40px 20px;
text-align:center;
}
-->
</STYLE>
</head>
<body onLoad="zegar()" overflow:hidden>
<div id="global" >
<div id="cont">
<div id="Header">
<div id="frugo"><img src="fruwau1.jpg" border="0" alt="Rozmiar:
9444 bajtów" /></div>
<div id="ayers"><img src="ayers-rock.jpg" border="0" alt="Rozmiar:
9444 bajtów" /></div>
<div ID="titel">
LAKOWKI <br />(Neophemae)
</div>
<div ID="time"></div>
<div ID="text">
<script language="JavaScript" type="text/javascript">
<!--
var modDate = new Date(document.lastModified)
var modYear = modDate.getYear()
if(modYear<1000) modYear+=1900
document.write("Ostatnia modyfikacja : " + (modDate.getMonth()+1)
+ "/" +
modDate.getDate() + "/" + modYear+"<br />")
document.write("Webmaster: <a
href=\"mailto:marta.busse@imbim.uu.se\">Marta Busse</a>");
// -->
</script>
</div>
</div>
</div>
<div id="cont1">
<div id="Menu">
<p id="menu1" class="menuOut" onclick="SwitchMenu('sub1')"
onmouseover="ChangeClass('menu1','menuOver','sub1')"
onmouseout="ChangeClass('menu1','menuOut','sub1')">Lakowki</p>
<div class="submenu" id="sub1" style="display:none;">
<a href="java script:addFile('temp', 'ogolnie.html')"
title="Scrolling Text">Informaje ogolne</a><br/>
<a href="java script:addFile('temp', 'wnaturze.html')"
title="Scrolling Text">Lakowki w naturze</a><br/>
<a href="java script:addFile('temp','wniewoli.html')"
title="Scrolling Text">Lakowki w niewoli</a><br/>
</div>
<p id="menu2" class="menuOut" onclick="SwitchMenu('sub2')"
onmouseover="ChangeClass('menu2','menuOver','sub2')"
onmouseout="ChangeClass('menu2','menuOut','sub2')">Hodowla lakowek</p>
<div class="submenu" id="sub2" style="display:none;">
<a href="java script:addFile('temp','opieka.html')"
title="InnerHTML">Opieka nad Lakowkami</a><br/>
<a href="java script:addFile('temp','dieta.html')" title="Document
Size">Dieta</a><br/>
<a href="java script:addFile('temp','zabawa.html')" title="Document
Size">Zabawa</a>
</div>
<p id="menu3" class="menuOut" onclick="SwitchMenu('sub3')"
onmouseover="ChangeClass('menu3','menuOver','sub3')"
onmouseout="ChangeClass('menu3','menuOut','sub3')">Galerie</p>
<div class="submenu" id="sub3" style="display:none;">
<a href="#" title="Javascript">Javascript</a><br/>
<a href="#" title="DHTML">DHTML</a><br/>
<a href="#" title="Off-topic">Off-topic</a>
</div>
<p id="menu4" class="menuOut" onclick="SwitchMenu('sub4')"
onmouseover="ChangeClass('menu4','menuOver','sub4')"
onmouseout="ChangeClass('menu4','menuOut','sub4')">Fakne Linki</p>
<div class="submenu" id="sub4" style="display:none;">
<a href="#" title="Google">Google</a><br/>
<a href="#" title="Altavista">Altavista</a><br/>
<a href="#" title="Yahoo">Yahoo</a><br/>
<a href="http://www.papuzki.webd.pl/forum/"><img
src="logo_phpbb1.jpg" border="0" alt="Forum o papuzkach" height=100%
width=100%/></a>
<a href="#" title="Lycos">Lycos</a>
</div>
<p id="menu5" class="menuOut" onclick="SwitchMenu('sub5')"
onmouseover="ChangeClass('menu5','menuOver','sub5')"
onmouseout="ChangeClass('menu5','menuOut','sub5')">Contact Us</p>
<div class="submenu" id="sub5" style="display:none;">
<a href="#" title="Email">Email</a><br/>
<a href="#" title="Location">Location</a><br/>
</div>
</div>
</div>
<div id="moj">
<div class="middle">
<div class="top">
<div class="bottom">
<iframe id="temp" src="powitalna.html" frameborder="0"
width=500px height=500px>
</iframe>
</div>
</div>
</div>
</div>
<div id="Footer">
Strona wykonana przez <a
href="mailto:krzysztof.wicher@imbim.uu.se">XY$'a</a>
</div>
</div>
</body>
</html>
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
|
|
|
|
|
Re: Works in IE but not in Netscape7 |
|
|
|
|
|
|
|
06-22-04 - 09:15 AM
|
Krzysztof wrote:
> Hi!
>
> I just have a following CSS which works perfect in IE but not in NS7:
Have you validated your CSS code? What matters for cross-browser code is
that it validates. IE is not dictating web standards; W3C is.
http://jigsaw.w3.org/css-validator/
> - #global (and the rest)is not centered in the window
> - #moj does not position as I expect on the left side of #cont1
>
> CSS:
> <STYLE TYPE="text/css">
> <!--
> body{
> background-color:#816C4F;
> text-align:center;
> }
>
> #global{
> width:800px;
> height: 600px;
> background-color:#8ddC4F;
> text-align:left;
> }
> #cont {
> text-align:left;
> padding:0px 2px 0px 2px;
> width: 800px;
> border-style:solid;
> border-width:1px 1px;
> background-color:#452700;
> border-color:#A35100;
> margin-bottom: 0px;
> margin-left:5px;
> margin-top:2px;
>
> }
> #cont1 {
> float:left;
> padding:0px 2px 2px 2px;
> width: 160px;
> border-style:solid;
> border-width:1px 1px;
> background-color:#452700;
> border-color:#A35100;
> margin-bottom: 0px;
> margin-left:5px;
> margin-top:25px;
>
> }
> #moj {
> margin-left:10px;
> padding-left: 20px;
> padding-top: 10px;
> }
>
> #Header {
> top:2px;
> left:2px;
> width:800px;
> bottom:2px;
> padding:0px 0px 0px 0px;
> border-style:solid;
> border-width:0px 0px;
> background-color:#816C4F;
> margin-top:2px;
> margin-bottom:2px;
> }
> #Menu {
> text-align: center;
> width:160px;
> margin-top:2px;
> padding:2px 0px 2px 0px;
> background-color:#816C4F;
> float:left;
> margin-left: 0px;
> }
>
> #Footer {
> top:840px;
> left:5px;
> width:800px;
> margin:0;
> background-color: #452700;
> color: #00B300;
> border-top: 1px solid #A35100;
> font-size: 11px;
Whenever you set font-size with absolute lenght values, you prevent MSIE
5.x and MSIE 6 users from increasing or decreasing font sizes. For
general accessibility purposes, it is much better to base your design on
a scalable basis, not on a rigid basis.
W3C Quality Assurance tip for webmasters
Care With Font Size
Recommended Practices
"# Do not specify the font-size in pt, or other absolute length units.
They render inconsistently across platforms and can't be resized by the
User Agent (e.g browser).
# Use relative length units such as percent or (better) em, or, even
better, set a base font-size for the document and use absolute size ([
xx-small | x-small | small | medium | large | x-large | xx-large ]) or
relative size ([ larger | smaller ]) when defining the font size for a
particular element within the document."
http://www.w3.org/QA/Tips/font-size
> font-weight:bold;
> text-align: right;
> padding: 5px 5px 5px 5px;
>
> }
> #text {position: absolute;
> color: white;
> top: 180px;
> font: 11px arial;
Same thing here. Along with a generic font family as a fallback font.
> font-weight: 900;
> text-align: right;
> left:620px;
> }
>
> #time {position: absolute;
> color: #D50000;
> top: 160px;
> left: 500px;
> font: 11px arial;
> font-weight: 900;
> text-align: right;
> }
> #titel {position: absolute;
> color: #008000;
> top:50px;
> left: 355px;
> font: 36px arial;
> font-weight: 900;
> text-align: center;
>
> }
> #frugo{
> padding:10px;
> text-align:left;
> }
> #ayers{
> position: absolute;
> top:5px;
> left:580px;
> padding:20px;
> text-align:right;
> }
> div.middle {
> width: 600px;
> background-image: url(middle1.jpg);
> background-repeat: repeat-y;
> }
> div.top {
> background-image: url(top1.jpg);
> background-position: top left;
> background-repeat: no-repeat;
> }
> div.bottom {
> background-image: url(bottom.jpg);
> background-position: bottom left;
> background-repeat: no-repeat;
> padding: 30px 10px 40px 20px;
> text-align:center;
> }
>
>
>
> -->
> </STYLE>
>
> Thanks in advance.
>
> Krzysztof
>
>
> Here goes the whole HTML file:
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
> <html>
> <head>
>
>
> <script language="JavaScript">
> <!--
>
> function SymError()
> {
> return true;
> }
> window.onerror = SymError;
There is no onerror event in NS 7.x as far as I can say.
> //-->
> </script>
> <script language="JavaScript" type="text/javascript">
> <!--
> function removeText(obj)
> {
> document.getElementById(obj).innerHTML = ' ';
> }
>
> function addText(obj,text)
> {
> document.getElementById(obj).innerHTML = text;
> }
>
> function addFil(fil)
> {
>
> }
> function addFile(obj,fil)
> {
> document.getElementById('temp').src=fil;
> if (document.all) {
NS 7.x, Mozilla-based browsers and a number of W3C web browsers do not
support document.all. here, what was decisive to verify was if browsers
support innerHTML.
> contents=window.frames.temp.document.body.innerHTML;}
> document.getElementById(obj).innerHTML=contents;
> }
> function GetDay(intDay){
> var DayArray = new Array("niedziela", "poniedzialek", "wtorek",
> "sroda",
> "czwartek", "piatek", "sobota")
> return DayArray[intDay]
> }
> function GetMonth(intMonth){
> var MonthArray = new Array("Stycznia", "Lutego", "Marca",
> "Kwietnia", "Maja", "Czerwca",
> "Lipca", "Sierpnia", "Wrzesnia",
> "Pazdziernika", "Listopada", "Grudnia")
> return MonthArray[intMonth]
> }
> function zegar() {
> teraz=new Date();
> godzina=teraz.getHours();
> minuta=teraz.getMinutes();
> sekunda=teraz.getSeconds();
> dzien=teraz.getDate();
> rok=teraz.getYear();
> if(teraz.getYear()<1000)
> rok+=1900;
> data=dzien+" "+GetMonth(teraz.getMonth())+" "+rok;
> czas="Jest "+GetDay(teraz.getDay())+" "+data+" - godzina : "
> +godzina+":"+minuta+":"+sekunda;
> if (document.all) {
> document.all.time.innerHTML = czas;
Again, that document.all.time reference can not and will not be executed
in NS 7.x and other DOM 2 compliant browsers. There is no need to resort
to document.all once MSIE 5.x and MSIE 6 started to support DOM 2
attributes and methods. The code, here, is old, outdated.
> }
> else if (document.getElementById) {
> document.getElementById("time").innerHTML = czas;
> }
>
> setTimeout("zegar()",1000);} // po sekundzie wywołaj ponownie funkcję
>
Recursive call here. I wonder why your code resort to this.
>
> // -->
> </script>
> <style type="text/css">
> .menuOut {cursor:pointer; margin:5px; background-color:#00A100;
> color:#000000; width:145px; border:1px solid #000000; padding:2px;
> text-align:center; font-weight:bold;}
> .menuOver {cursor:pointer; margin:5px; background-color:#007300;
> color:#FFFF07; width:145px; border:1px solid #00000a; padding:2px 1px
> 2px 2px; text-align:center; font-weight:bold;}
> .submenu {width:140px; font-family:Verdana; font-size:11px;
> padding-left:10px;text-align:left;}
> .submenu a {color:#D1D100; text-decoration:none; font-weight:bold;}
> .submenu a:hover {color:#ff0000; text-decoration:none;
> font-style:oblique; font-weight:bold;}
> </style>
> <script type="text/javascript">
> /*
> Script made by Martial Boissonneault © 2001-2003
> http://getElementById.com/
> This script may be used and changed freely as long as this msg is
> intact
> Visit http://getElementById.com/ for more free scripts and tutorials.
> */
> function SwitchMenu(obj){
> if(document.getElementById){
> var el = document.getElementById(obj);
> var ar = document.getElementById("Menu").getElementsByTagName("DIV");
> if(el.style.display == "none"){
> for (var i=0; i<ar.length; i++){
> if(ar[i].style.display == "none")
> ar[i].style.display = "none";
> }
> el.style.display = "block";
> }else{
> el.style.display = "none";
> }
> }
> }
> function ChangeClass(menu, newClass, submenu) {
> if (document.getElementById) {
> document.getElementById(menu).className = newClass;
> }
> }
> document.onselectstart = new Function("return false");
document.onselectstart is not supported by NS 7.x and other W3C DOM 2
compliant browsers. If the purpose of that instruction was to prevent
text highlighting/selection, then resorting to preventDefault() method
will work in DOM 2 compliant browsers.
> </script>
> <meta http-equiv="Content-type" content="text/html;
> charset=iso-8859-2" />
> <STYLE TYPE="text/css">
> <!--
> body{
> background-color:#816C4F;
> text-align:center;
> }
>
> #global{
> width:800px;
> height: 600px;
> background-color:#8ddC4F;
> text-align:left;
> }
> #cont {
> text-align:left;
> padding:0px 2px 0px 2px;
> width: 800px;
> border-style:solid;
> border-width:1px 1px;
> background-color:#452700;
> border-color:#A35100;
> margin-bottom: 0px;
> margin-left:5px;
> margin-top:2px;
>
> }
> #cont1 {
> float:left;
> padding:0px 2px 2px 2px;
> width: 160px;
> border-style:solid;
> border-width:1px 1px;
> background-color:#452700;
> border-color:#A35100;
> margin-bottom: 0px;
> margin-left:5px;
> margin-top:25px;
>
> }
> #moj {
> margin-left:10px;
> padding-left: 20px;
> padding-top: 10px;
> }
>
> #Header {
> top:2px;
> left:2px;
> width:800px;
> bottom:2px;
> padding:0px 0px 0px 0px;
> border-style:solid;
> border-width:0px 0px;
> background-color:#816C4F;
> margin-top:2px;
> margin-bottom:2px;
> }
> #Menu {
> text-align: center;
> width:160px;
> margin-top:2px;
> padding:2px 0px 2px 0px;
> background-color:#816C4F;
> float:left;
> margin-left: 0px;
> }
>
> #Footer {
> top:840px;
> left:5px;
> width:800px;
> margin:0;
> background-color: #452700;
> color: #00B300;
> border-top: 1px solid #A35100;
> font-size: 11px;
> font-weight:bold;
> text-align: right;
> padding: 5px 5px 5px 5px;
>
> }
> #text {position: absolute;
> color: white;
> top: 180px;
> font: 11px arial;
> font-weight: 900;
> text-align: right;
> left:620px;
> }
>
> #time {position: absolute;
> color: #D50000;
> top: 160px;
> left: 500px;
> font: 11px arial;
> font-weight: 900;
> text-align: right;
> }
> #titel {position: absolute;
> color: #008000;
> top:50px;
> left: 355px;
> font: 36px arial;
> font-weight: 900;
> text-align: center;
>
> }
> #frugo{
> padding:10px;
> text-align:left;
> }
> #ayers{
> position: absolute;
> top:5px;
> left:580px;
> padding:20px;
> text-align:right;
> }
> div.middle {
> width: 600px;
> background-image: url(middle1.jpg);
> background-repeat: repeat-y;
> }
> div.top {
> background-image: url(top1.jpg);
> background-position: top left;
> background-repeat: no-repeat;
> }
> div.bottom {
> background-image: url(bottom.jpg);
> background-position: bottom left;
> background-repeat: no-repeat;
> padding: 30px 10px 40px 20px;
> text-align:center;
> }
>
>
One thing is for sure: your CSS code is redundant, not optimized and
probably over-doing the styling. You need to use the inheritance, to
combine and compress declarations if you want your CSS code to be as
efficient as possible.
>
> -->
> </STYLE>
> </head>
> <body onLoad="zegar()" overflow:hidden>
> <div id="global" >
> <div id="cont">
> <div id="Header">
> <div id="frugo"><img src="fruwau1.jpg" border="0" alt="Rozmiar:
> 9444 bajtów" />
If you want your code to be downloaded and to be parsed (and rendered)
as fast and efficiently as possible, then defining width and height
attributes and attribute values for images is best.
If you want your code to be parsed and rendered as efficiently as
possible, then minimizing the number of nested elements (or reducing
them to the strict necessary number) is also very important; this
reduces also web page complexity, web page maintenance efforts, ease
reviewing by others, updating, etc.
Finally, validate your markup code: here, you're using XHTML closing tag
and I'm not even sure you're declaring and resorting to XHTML doctype decl.
</div>
> <div id="ayers"><img src="ayers-rock.jpg" border="0" alt="Rozmiar:
> 9444 bajtów" /></div>
> <div ID="titel">
> LAKOWKI <br />(Neophemae)
> </div>
> <div ID="time"></div>
> <div ID="text">
> <script language="JavaScript" type="text/javascript">
> <!--
> var modDate = new Date(document.lastModified)
> var modYear = modDate.getYear()
> if(modYear<1000) modYear+=1900
> document.write("Ostatnia modyfikacja : " + (modDate.getMonth()+1)
> + "/" +
> modDate.getDate() + "/" + modYear+"<br />")
> document.write("Webmaster: <a
> href=\"mailto:marta.busse@imbim.uu.se\">Marta Busse</a>");
> // -->
> </script>
> </div>
> </div>
> </div>
> <div id="cont1">
> <div id="Menu">
> <p id="menu1" class="menuOut" onclick="SwitchMenu('sub1')"
> onmouseover="ChangeClass('menu1','menuOver','sub1')"
> onmouseout="ChangeClass('menu1','menuOut','sub1')">Lakowki</p>
> <div class="submenu" id="sub1" style="display:none;">
> <a href="java script:addFile('temp', 'ogolnie.html')"
> title="Scrolling Text">Informaje ogolne</a><br/>
Absolutely avoid "java script:" pseudo-protocol links: it's wrong and
you'll just create problems on all kinds with this.
Top Ten Web-Design Mistakes of 2002
6. JavaScript in Links
http://www.useit.com/alertbox/20021223.html
http://jibbering.com/faq/#FAQ4_24
http://www.panix.com/~aahz/javascript.html#remove
> <a href="java script:addFile('temp', 'wnaturze.html')"
> title="Scrolling Text">Lakowki w naturze</a><br/>
> <a href="java script:addFile('temp','wniewoli.html')"
> title="Scrolling Text">Lakowki w niewoli</a><br/>
> </div>
>
> <p id="menu2" class="menuOut" onclick="SwitchMenu('sub2')"
> onmouseover="ChangeClass('menu2','menuOver','sub2')"
> onmouseout="ChangeClass('menu2','menuOut','sub2')">Hodowla lakowek</p>
> <div class="submenu" id="sub2" style="display:none;">
> <a href="java script:addFile('temp','opieka.html')"
> title="InnerHTML">Opieka nad Lakowkami</a><br/>
> <a href="java script:addFile('temp','dieta.html')" title="Document
> Size">Dieta</a><br/>
Javascript links here too.
> <a href="java script:addFile('temp','zabawa.html')" title="Document
> Size">Zabawa</a>
> </div>
>
> <p id="menu3" class="menuOut" onclick="SwitchMenu('sub3')"
> onmouseover="ChangeClass('menu3','menuOver','sub3')"
> onmouseout="ChangeClass('menu3','menuOut','sub3')">Galerie</p>
> <div class="submenu" id="sub3" style="display:none;">
> <a href="#" title="Javascript">Javascript</a><br/>
> <a href="#" title="DHTML">DHTML</a><br/>
> <a href="#" title="Off-topic">Off-topic</a>
>
> </div>
>
> <p id="menu4" class="menuOut" onclick="SwitchMenu('sub4')"
> onmouseover="ChangeClass('menu4','menuOver','sub4')"
> onmouseout="ChangeClass('menu4','menuOut','sub4')">Fakne Linki</p>
> <div class="submenu" id="sub4" style="display:none;">
> <a href="#" title="Google">Google</a><br/>
> <a href="#" title="Altavista">Altavista</a><br/>
> <a href="#" title="Yahoo">Yahoo</a><br/>
> <a href="http://www.papuzki.webd.pl/forum/"><img
> src="logo_phpbb1.jpg" border="0" alt="Forum o papuzkach" height=100%
> width=100%/></a>
> <a href="#" title="Lycos">Lycos</a>
> </div>
>
> <p id="menu5" class="menuOut" onclick="SwitchMenu('sub5')"
> onmouseover="ChangeClass('menu5','menuOver','sub5')"
> onmouseout="ChangeClass('menu5','menuOut','sub5')">Contact Us</p>
> <div class="submenu" id="sub5" style="display:none;">
> <a href="#" title="Email">Email</a><br/>
> <a href="#" title="Location">Location</a><br/>
>
>
> </div>
> </div>
>
> </div>
>
> <div id="moj">
> <div class="middle">
> <div class="top">
> <div class="bottom">
>
> <iframe id="temp" src="powitalna.html" frameborder="0"
> width=500px height=500px>
width="500" height="500"
>
> </iframe>
>
> </div>
> </div>
> </div>
> </div>
>
> <div id="Footer">
> Strona wykonana przez <a
> href="mailto:krzysztof.wicher@imbim.uu.se">XY$'a</a>
> </div>
> </div>
>
>
> </body>
> </html>
Next time,
- validate your markup code
- validate your CSS code
- and please just post an url
Hundreds of line of code is NOT suitable in a post.
DU
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
|
|
|
|
|
Re: Works in IE but not in Netscape7 |
|
|
|
|
|
|
|
| All times are GMT. The time now is 04:16 AM. |
|
|
|
|
|
| |
|
