Cross-browser problem

**Mr.Joker** · Aug 12th, 2012, 06:16 PM

Code:

<!--Web sajt je vlasnistvo Visoke tehnicke skole strukovnih studija u Pozarevcu-->
<html>
<title>Visoka tehnicka skola strukovni studija Pozarevac</title>
<head>
<meta name="author" content="Aleksandar Arsic" />
	<meta name="description" content="Web sajt Visoke tehnicke skole strukovnih studija u Pozarevcu" />
		<meta name="keywords" content="Visoka skola, Tehicka skola, Strukovne studije, Pozarevac, Visoka tehnicka skola, Visoka tehnicka skola strukovnih studija u Pozarevcu" />
<style type="text/css">
body {
background-color:#f5f5f5;
font-family:"Trebuchet MS";
}
#main {
background-color:#ffffff;
width:1100px;
height:900px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
border: 1px solid #000000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-border-radius:10px;
}
#navigation {
border-bottom:1px solid #999999;
position:absolute;
width:1100px;
float:left;
margin: 0 0 0 0;
padding:0px;
list-style:none;
background-color:#cccccc;
margin-top:-9px;
}
#navigation li{
float:left; 
}
#navigation li a{
display: block;
padding: 4px 10px;
text-decoration:none;
color:#ffffff;
}
#navigation li a:hover{
background-color:#98b9df;
}
#img1 {
opacity:0.7;
margin-top:30px;
border:1px solid #000000;
margin-left:20px;
}
#img2 {
opacity:0.7;
margin-top:30px;
border:1px solid #000000;
}
#img3 {
opacity:0.7;
margin-top:30px;
border:1px solid #000000;
}
#img4 {
opacity:0.7;
margin-top:30px;
border:1px solid #000000;
}
#img5 {
opacity:0.7;
margin-top:30px;
border:1px solid #000000;
}
#img1:hover {
opacity:1;
}
#img2:hover {
opacity:1;
}
#img3:hover {
opacity:1;
}
#img4:hover {
opacity:1;
}
#img5:hover {
opacity:1;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="main">
<img style="margin-left:140px;" src="http://www.dodaj.rs/f/11/nx/4NlzHX9I/logo.png" border="0" title="logo"></img><hr />
<ul id="navigation">
	<li><a href="#">Pocetna strana</a></li>
	<li><a href="#">O Skoli</a></li>
	<li><a href="#">Pravna akta</a></li>
	<li><a href="#">Nastavni planovi</a></li>
	<li><a href="#">Zaposleni</a></li>
	<li><a href="#">Studije</a></li>
	<li><a href="#">Publikacije</a></li>
	<li><a href="#">Upis</a></li>
	<li><a href="#">Savez Studenata</a></li>
	<li><a href="#">Asocijacije</a></li>
	<li><a href="#">Korisni linkovi</a></li>
</ul>
<a href=""><img id="img1" src="http://www.vts-pozarevac.edu.rs/Pics/zupcanici.jpg"></img></a>
<a href=""><img id="img2" src="http://www.vts-pozarevac.edu.rs/Pics/electricity.jpg"></img></a>
<a href=""><img id="img3" src="http://www.vts-pozarevac.edu.rs/Pics/eco.jpg"></img></a>
<a href=""><img id="img4" src="http://www.vts-pozarevac.edu.rs/Pics/poljop.jpg"></img></a>
<a href=""><img id="img5" src="http://www.vts-pozarevac.edu.rs/Pics/Konz.gif"></img></a>
<a href=""><img id="img5" src="http://www.vts-pozarevac.edu.rs/Pics/manag.gif"></img></a>
</div>
</body>
</html>

So when I run this code on Chrome everything work good. But on Mozilla Firefox there is a problem that I can't solve. Navigation is not in one row, images is not displayed, main div border radius can't be loaded even I used right code.

**Nightwalker83** · Aug 13th, 2012, 05:57 AM

Try changing the positioning from absolute to relative.

html Code:

position: relative;

**Mr.Joker** · Aug 13th, 2012, 06:46 AM

Soo, I did this but I still have two row navigation for me. How you see it?

**coothead** · Aug 13th, 2012, 01:13 PM

Hi there Mr.Joker,

this is how I would code it...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="author" content="Aleksandar Arsic">
<meta name="description" content="Web sajt Visoke tehnicke skole strukovnih studija u Pozarevcu">
<meta name="keywords" content="Visoka skola, Tehicka skola, Strukovne studije, Pozarevac, 
Visoka tehnicka skola, Visoka tehnicka skola strukovnih studija u Pozarevcu">

<title>Visoka tehnicka skola strukovni studija Pozarevac</title>

<style type="text/css">
body {
    background-color:#f5f5f5;
    font-family:'trebuchet ms',sans-serif;
 }
#main {
    width:1100px;
    height:742px;
    padding-top:158px;
    margin:30px auto;
    border:1px solid #000;
    border-radius:10px;
    box-shadow:0 0 20px #666;
    background-color:#fff;
    background-image:url(http://www.dodaj.rs/f/11/nx/4NlzHX9I/logo.png);
    background-repeat:no-repeat;
    background-position:140px 0;
 }
#navigation {
    border-top:1px solid #999;
    border-bottom:1px solid #999;
    margin:0 0 20px;
    padding:0;
    list-style:none;
    background-color:#ccc;
    text-align:center;
 }
#navigation li {
    display:inline-block; 
 }
#navigation a {
    display:inline-block; 
    padding:4px 7px;
    text-decoration:none;
    color:#fff;
 }
#navigation a:hover{
    background-color:#98b9df;
 }
#navigation2 {
    width:1056px;
    height:130px;
    margin:0 auto;
    padding:0;
    list-style:none;
 }
#navigation2 li {
    float:left;
    padding:0 2px;
 }
#navigation2 a {
    display:block;
    width:172px;
 }
#navigation2 img {
    display:block;
    width:170px;
    height:128px;
    border:1px solid #000;
    opacity:0.7;  
 }
#navigation2 img:hover {
    opacity:1.0;  
 }
</style>

</head>
<body>

<div id="main">

<ul id="navigation">
 <li><a href="#">Pocetna strana</a></li>
 <li><a href="#">O Skoli</a></li>
 <li><a href="#">Pravna akta</a></li>
 <li><a href="#">Nastavni planovi</a></li>
 <li><a href="#">Zaposleni</a></li>
 <li><a href="#">Studije</a></li>
 <li><a href="#">Publikacije</a></li>
 <li><a href="#">Upis</a></li>
 <li><a href="#">Savez Studenata</a></li>
 <li><a href="#">Asocijacije</a></li>
 <li><a href="#">Korisni linkovi</a></li>
</ul>

<ul id="navigation2">
 <li><a href=""><img src="http://www.vts-pozarevac.edu.rs/Pics/zupcanici.jpg" alt="zupcanici"></a></li>
 <li><a href=""><img src="http://www.vts-pozarevac.edu.rs/Pics/electricity.jpg" alt="electricity"></a></li>
 <li><a href=""><img src="http://www.vts-pozarevac.edu.rs/Pics/eco.jpg" alt="eco"></a></li>
 <li><a href=""><img src="http://www.vts-pozarevac.edu.rs/Pics/poljop.jpg" alt="poljop"></a></li>
 <li><a href=""><img src="http://www.vts-pozarevac.edu.rs/Pics/Konz.gif" alt="Konz"></a></li>
 <li><a href=""><img src="http://www.vts-pozarevac.edu.rs/Pics/manag.gif" alt="manag"></a></li>
</ul>

</div>

</body>
</html>

**Mr.Joker** · Aug 13th, 2012, 02:44 PM

This look great. Can you tell me the little seacrets you used? Like what you used where and why you did that. I see the code work fine everywhere, but I need to learn to do it alone next time. Can't get all from code.

**Nightwalker83** · Aug 14th, 2012, 12:10 AM

Originally Posted by Mr.Joker

Soo, I did this but I still have two row navigation for me. How you see it?

Are you referring to the double spaced line that is between the pictures and the navigation bar when viewing the page in fire-fox?

**Mr.Joker** · Aug 14th, 2012, 05:41 AM

Second one.

Thread: Cross-browser problem

Thread Tools

Display

Cross-browser problem

Re: Cross-browser problem

Re: Cross-browser problem

Re: Cross-browser problem

Re: Cross-browser problem

Re: Cross-browser problem

Re: Cross-browser problem

Posting Permissions