Opera adds extra space below list when positioning
I'm working on a new project, and it appears that both opera and IE are giving me extra space to my li element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@import "stil.css";
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="reel.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Savic</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<p> Samostalna Zanatska Radnja</p>
<a id="logo" href="index.html">Savić</a>
<div id="darrow">
</div>
<div id="darrow2">
</div>
<ul id="nav">
<li><a class="link" style="background:url(images/activeb.jpg) repeat-x" href="#">Početna</a></li>
<li><a class="link" id="izb" href="#">Izrada</a></li>
<li><a class="link" id="ugb" href="#">Ugradnja</a></li>
<li><a class="link" href="#">Galerija</a></li>
<li><a class="link" href="#">Kontakt</a></li>
</ul>
<ul id="izd">
<li><a href="#">Ograda</a></li>
<li><a href="#">Kapija</a></li>
<li><a href="#">Gelendera</a></li>
<li><a href="#">Čelične konstrukcije</a></li>
<li><a href="#">Garažnih vrata</a></li>
</ul>
<ul id="ugd">
<li><a href="#">Kupatila</a></li>
<li><a href="#">Vodovoda</a></li>
<li><a href="#">Kanalizacije</a></li>
<li><a href="#">Grejanja</a></li>
<li><a href="#">Servis pumpi za vodu</a></li>
</ul>
</div>
</div>
<div id="body">
<!-- ALL STUFF GOES HERE -->
<div id="holder">
<!-- LEVI DIV -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="left">
<div id="portfolio_cycler" class="shadow roundbox">
<img class="active" src="images/reel1.jpg" />
</div>
<div id="circles"></div>
<img id="horg" src="images/horg.jpg" />
<div id="topt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque semper ligula at volutpat. In hac habitasse platea dictumst. Nam ultrices diam eu dolor cursus in semper ligula faucibus. Nulla mattis tortor vel nunc rutrum convallis. Maecenas egestas diam sit amet odio mattis sit amet pellentesque orci bibendum. Ut sodales fringilla sem, nec volutpat mi scelerisque non. Phasellus luctu开发者_如何学Cs laoreet nunc, eget tincidunt massa egestas vel. Phasellus id sapien ante. Fusce vulputate, urna quis condimentum molestie, erat sapien porttitor dui, eu pulvinar orci enim non massa. Mauris in cursus mauris. Sed tortor justo, placerat tristique blandit at, rutrum quis nisi.</p>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- LEVI DIV KRAJ -->
</div>
<!-- ALL STUFF ENDS HERE -->
</div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/*NEOPHODNO ZA FOOTER */
/*<div id="container">
<div id="header">
<div id="menu">
</div>
</div>
<div id="body">
Sve stavljati u body, kao i margin: 0 auto, ne treba wrap div
</div>
<div id="footer"></div>
</div>
*/
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:url(images/background.jpg) repeat-x;
height:100px;
}
#body {
width:980px;
margin:0 auto;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:25px; /* Height of the footer */
background:url(images/footer.jpg) repeat-x;
}
#wrap{
width:980px;
margin:0 auto;
background:#000;
height:100px;
}
/* FOOTER PODESAVANJA */
#menu{
width:980px;
margin:0 auto;
position:relative;
top:2px;
height:98px;
background:url(images/header2.jpg) 0px 0px;
}
#holder{
width:960px;
position:relative;
left:10px;
top:10px;
}
#menu p,a,li{
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-weight:bold;
position:relative;
}
#menu p{
font-size:12px;
left:55px;
top:10px;
width:200px;
}
#logo{
font-size:40px;
top:5px;
left:80px;
text-decoration:none;
}
#nav li{
font-size:12px;
display:inline;
}
#nav ul{
position:relative;
height:20px;
}
#nav{
position:relative;
top:10px;
left:0px;
}
#nav a{
font-size:12px;
padding-right:14px;
padding-left:14px;
}
.link{
padding-top:5px;
padding-bottom:5px;
text-decoration:none;
top:1px;
}
#portfolio_cycler{position:relative;}
#portfolio_cycler img{position:absolute;z-index:1}
#portfolio_cycler img.active{z-index:3}
#circles{
position:absolute;
z-index:7;
top:250px;
left:690px;
}
#izd{
width:130px;
background:#48a9c4;
position:absolute;
z-index:5;
font-size:12px;
text-align:center;
top:98px;
left:60px;
height:120px;
}
#ugd{
width:130px;
background:#48a9c4;
position:absolute;
z-index:5;
font-size:12px;
text-align:center;
top:98px;
left:146px;
height:120px;
}
#izd li, #ugd li{
list-style:none;
padding-top:3px;
padding-bottom:5px;
}
#izd a, #ugd a{
text-decoration:none;
display:block;
width:130px;
}
#izb{
visibility:visible;
}
#darrow{
position:absolute;
left:130px;
top:80px;
background:url(images/darrow.png) no-repeat;
width:10px;
height:12px;
z-index:5;
}
#darrow2{
position:absolute;
left:214px;
top:80px;
background:url(images/darrow.png) no-repeat;
width:10px;
height:12px;
z-index:5;
}
#horg{
position:relative;
top:277px;
}
#topt{
position:relative;
width:770px;
top:283px;
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
I don't want to create special css or use javascript to fix this, so can anyone tell me what's the problem. I assume that id nav causes the problem but I'm not sure.
The problem is with your CSS. Try adding these:
#nav {
margin: 0;
padding: 0;
}
#nav li {
/* use this instead of display:inline */
float: left;
display: block;
}
Those are just some fixes to the bugs that I can quickly spot. There might be more bugs. If you want to learn how to make a horizontal menu with CSS, check out my tutorial on Cramie.net - Create CSS Horizontal Menu
加载中,请稍侯......
精彩评论