Results 1 to 7 of 7

Thread: Cross-browser problem

  1. Aug 12th, 2012, 06:16 PM #1
    Mr.Joker
    Mr.Joker is offline
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 12
    Posts
    140

    Cross-browser problem

    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.
    Reply With Quote Reply With Quote
  2. Aug 13th, 2012, 05:57 AM #2
    Nightwalker83
    Nightwalker83 is offline
    Web developer Nightwalker83's Avatar
    Join Date
    Dec 01
    Location
    Adelaide, Australia
    Posts
    9,734

    Re: Cross-browser problem

    Try changing the positioning from absolute to relative.

    html Code:
    1. position: relative;
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    Please consider giving me some rep points if I help you a lot.
    DON'T BUMP YOUR POSTS!!! Links to my code examples can now be found on my website: My websites
    Please rate my post if you find it helpful!
    Technology is a dangerous thing in the hands of an idiot! I am that idiot.
    Reply With Quote Reply With Quote
  3. Aug 13th, 2012, 06:46 AM #3
    Mr.Joker
    Mr.Joker is offline
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 12
    Posts
    140

    Re: Cross-browser problem

    Soo, I did this but I still have two row navigation for me. How you see it?
    Reply With Quote Reply With Quote
  4. Aug 13th, 2012, 01:13 PM #4
    coothead
    coothead is offline
    Addicted Member coothead's Avatar
    Join Date
    Oct 07
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    216

    Re: Cross-browser problem

    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>
    Reply With Quote Reply With Quote
  5. Aug 13th, 2012, 02:44 PM #5
    Mr.Joker
    Mr.Joker is offline
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 12
    Posts
    140

    Re: Cross-browser problem

    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.
    Reply With Quote Reply With Quote
  6. Aug 14th, 2012, 12:10 AM #6
    Nightwalker83
    Nightwalker83 is offline
    Web developer Nightwalker83's Avatar
    Join Date
    Dec 01
    Location
    Adelaide, Australia
    Posts
    9,734

    Re: Cross-browser problem

    Quote Originally Posted by Mr.Joker View Post
    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?
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    Please consider giving me some rep points if I help you a lot.
    DON'T BUMP YOUR POSTS!!! Links to my code examples can now be found on my website: My websites
    Please rate my post if you find it helpful!
    Technology is a dangerous thing in the hands of an idiot! I am that idiot.
    Reply With Quote Reply With Quote
  7. Aug 14th, 2012, 05:41 AM #7
    Mr.Joker
    Mr.Joker is offline
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 12
    Posts
    140

    Re: Cross-browser problem

    Second one.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules