...

View Full Version : Nav out of place in IE 6 (not 5.5. or any other)



snowysweb
03-05-2009, 08:15 AM
Hi could any one see why this isn't quite working?

stylesheet1.css:


/* CSS Document */

body {
min-width: 800px;
margin:0;
padding: 10px 0;
text-align: center;
font-family: Verdana;
background: #404040 url(../images/for_web/backtop.jpg) repeat-x;
}

* {
margin:0 auto;
padding:0;
}
#corner_wrapper {
position:relative;
width: 810px;
border: 2px solid #404040;
}

#wrapper {
width:800px;
background-color:#FFFFFF;
border: 5px solid #fff;
}

#wrapper #navigation {
position: relative;
border-bottom: 2px solid #404040;
margin-bottom: 5px;
text-align: left;
padding-bottom: 3px;
height: 120px;
}
#wrapper #navigation img {
position:absolute;
}
#wrapper #main_right {
display:inline;
width: 240px;
float:left;
text-align:left;
}
#wrapper #main_right h2 {
padding-top:8px;
margin:0;
color: #eb4c07;
font-size: 18px;
padding-left: 10px;
}
#wrapper #main_right p {
margin: 10px auto 10px auto;
font-size: 14px;
padding-right:10px;
padding-left: 10px;
}


#wrapper #main {
display: inline;
width: 550px;
position:relative;
text-align:left;
border-top: 2px solid #404040;
padding: 5px 0;
margin-top:2px;
z-index:0;
float: left;
}
#wrapper #main h2 {
padding-top:8px;
margin:0;
color: #eb4c07;
font-size: 18px;
padding-left: 10px;
}
#wrapper #main #under {
position: relative;
top: -5px;
left: -3px;
color: #eb4c07;
font-size: 22px;
background:url(../images/for_web/bg_under_header.jpg) no-repeat;
padding: 0 140px 5px 10px;
font-weight: 500;
}
#wrapper #main p {
margin: 10px auto 10px auto;
font-size: 14px;
padding-right:10px;
padding-left: 10px;
}
#wrapper #main .bg_backing {
width: 170px;
height: 170px;
background:url(../images/for_web/170170_bg.jpg);
float: left;
margin: 10px;
}
#wrapper #main .bg_backing2 {
width: 170px;
height: 170px;
background:url(../images/for_web/170170_bg.jpg);
float: right;
margin: 10px;
}
#wrapper #main .bg_backing img {
margin: 10px;
}
#wrapper #main .bg_backing2 img {
margin: 10px;
}

#wrapper #footer p {
padding: 10px 0;
font-size: 10px;
}

.clear {
clear:both;
}


navigation.css:


/* CSS Document */

#menu {
position: absolute;
top:80px;
_top: 77px;
right:-160px;
margin: 0;
padding: 0;
list-style-type: none;
z-index: 30;
width: 600px;
}

#menu li {
margin: 6px 0px;
float:left;
}

#menu #left {
display: block;
padding:0;
width: 20px;
height: 40px;
background-image: url(../images/for_web/navigation/left.jpg);
background-repeat: no-repeat;
text-decoration: none;
text-align: center;
font-size: 14px;
color: #fff;
margin-left: 0;
}
#menu #right {
display: block;
padding:0;
width: 20px;
height: 40px;
background-image: url(../images/for_web/navigation/right.jpg);
background-repeat: no-repeat;
text-decoration: none;
text-align: center;
font-size: 14px;
color: #fff;
margin-left: 0;
}

#menu #home {
margin:0;
display: block;
padding: 0;
width: 100px;
height: 40px;
background-image: url(../images/for_web/navigation/home_1.jpg);
background-repeat: no-repeat;
text-decoration: none;
text-align: center;
font-size: 14px;
color: #fff;
margin-left: 0;
}

#menu #home:visited {
}

#menu #home:hover {
background-image: url(../images/for_web/navigation/home_2.jpg);
background-repeat: no-repeat;
}

#menu #stock {
display: block;
padding: 4px 0;
width: 100px;
height: 40px;
background-image: url(../images/for_web/navigation/stock_1.jpg);
background-repeat: no-repeat;
text-decoration: none;
text-align: center;
font-size: 14px;
color: #fff;
}

#menu #stock:visited {
}

#menu #stock:hover {
background-image: url(../images/for_web/navigation/stock_2.jpg);
background-repeat: no-repeat;
}


#menu #available {
display: block;
padding: 4px 0;
width: 100px;
height: 40px;
background-image: url(../images/for_web/navigation/available_1.jpg);
background-repeat: no-repeat;
text-decoration: none;
text-align: center;
font-size: 14px;
color: #fff;
}

#menu #available:visited {
}

#menu #available:hover {
background-image: url(../images/for_web/navigation/available_2.jpg);
background-repeat: no-repeat;
}

#menu #terms {
display: block;
padding: 4px 0;
width: 100px;
height: 40px;
background-image: url(../images/for_web/navigation/terms_1.jpg);
background-repeat: no-repeat;
text-decoration: none;
text-align: center;
font-size: 14px;
color: #fff;
}

#menu #terms:visited {
}

#menu #terms:hover {
background-image: url(../images/for_web/navigation/terms_2.jpg);
background-repeat: no-repeat;
}


index.php:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kvan</title>
<link href="stylesheets/stylesheet1.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/navigation.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/preload.js"></script>
</head>

<body>

<div id="corner_wrapper">

<div id="wrapper">

<div id="navigation">

<h1><img src="images/for_web/header2.jpg" width="450" height="120" alt="Kvan's Corn Snakes" /></h1>

<ul id="menu">

<li id="left"></li>
<li><a href="index.php?pg=1" id="home" tabindex="4">&nbsp;</a></li>
<li><a href="index.php?pg=2" id="stock" tabindex="5">&nbsp;</a></li>
<li><a href="index.php?pg=3" id="available" tabindex="6">&nbsp;</a></li>
<li><a href="index.php?pg=4" id="terms" tabindex="7">&nbsp;</a></li>
<li id="right"></li>

</ul>

</div>

<img src="images/for_web/header.jpg" width="800" height="278" alt="" />

<div id="main">

<h2 id="under">Welcome to Kvan's Cornsnakes.</h2>

<div class="bg_backing">

<img src="images/for_web/index/lexy.jpg" width="150" height="112" alt="Lexis" />

</div>

<h2>Phasellus et orci</h2>

<p>Pellentesque nulla. Phasellus et orci. Suspendisse tempor, urna vitae fermentum pellentesque, nibh est viverra orci, vitae elementum diam leo nec nibh. Nulla tortor elit, blandit in, dictum quis, tincidunt a, est. Praesent nec dui. Vestibulum erat neque, fermentum et, tempus vel, dapibus at, nisl. Sed accumsan. Curabitur sapien. Aliquam sed eros sit amet lacus ultrices egestas. Donec risus. Sed lobortis elementum urna. Phasellus mattis diam id ante. In sem.</p>

<div class="clear"></div>

<div class="bg_backing2">

<img src="images/for_web/index/Ian.jpg" width="150" height="112" alt="Lexis" />

</div>

<h2>Ut pharetra neque a mauris</h2>

<p>Mauris venenatis nisi eu purus. Nunc fringilla lectus non lorem. Fusce scelerisque felis sit amet pede. Vivamus gravida ipsum pharetra nisl. Etiam vitae pede vel dolor facilisis ornare. Pellentesque lacus. Morbi urna augue, iaculis et, rhoncus nec, faucibus ac, ipsum. Integer est dolor, posuere vitae, viverra at, commodo sit amet, leo. Phasellus lectus elit, varius nec, accumsan eu, blandit ut, nisl. Ut pharetra neque a mauris. Etiam in velit. Sed imperdiet tempor augue. Proin a urna. Phasellus consequat, mi in commodo molestie, sem mi aliquam sem, in convallis ante metus non sapien. Morbi vel massa nec magna tristique posuere. Cras ultrices urna sit amet urna. Quisque ut lectus eu est congue mollis.</p>

<h2>Turpis eros blandit leo, in mollis metus nisi ut odio.</h2>

<p>Donec laoreet blandit dui. Vestibulum in elit. Curabitur nulla neque, vestibulum quis, hendrerit ac, varius in, nunc. Vivamus et pede. Mauris rutrum tincidunt justo. Maecenas aliquet metus faucibus nunc. Vestibulum justo. Aenean condimentum nunc blandit eros. Donec ultricies rhoncus mi. Aliquam volutpat, turpis auctor porta accumsan, turpis eros blandit leo, in mollis metus nisi ut odio. Aenean aliquet elit commodo est. Sed convallis blandit turpis. Donec auctor quam ac mauris. Aenean ornare. Sed sagittis.</p>

</div>

<div id="main_right">

<h2>Turpis eros blandit.</h2>

<p>Donec laoreet blandit dui. Vestibulum in elit. Curabitur nulla neque, vestibulum quis, hendrerit ac, varius in, nunc. Vivamus et pede. Mauris rutrum tincidunt justo. Maecenas aliquet metus faucibus nunc. Vestibulum justo. Aenean condimentum nunc blandit eros. Donec ultricies rhoncus mi. Aliquam volutpat, turpis auctor porta accumsan, turpis eros blandit leo, in mollis metus nisi ut odio. Aenean aliquet elit commodo est. Sed convallis blandit turpis. Donec auctor quam ac mauris. Aenean ornare. Sed sagittis.</p>

<h2>Turpis eros blandit.</h2>

<p>Donec laoreet blandit dui. Vestibulum in elit. Curabitur nulla neque, vestibulum quis, hendrerit ac, varius in, nunc. Vivamus et pede. Mauris rutrum tincidunt justo. Maecenas aliquet metus faucibus nunc. Vestibulum justo. Aenean condimentum nunc blandit eros. Donec ultricies rhoncus mi. Aliquam volutpat, turpis auctor porta accumsan, turpis eros blandit leo, in mollis metus nisi ut odio. Aenean aliquet elit commodo est. Sed convallis blandit turpis. Donec auctor quam ac mauris. Aenean ornare. Sed sagittis.</p>

</div>

<div class="clear"></div>

<div id="footer">

<p>Created by <a href="http://www.snowyswebsolutions.co.uk">snowy'swebsolutions &copy; 2009</a></p>

</div>

</div>

</div>

</body>
</html>


www.snowyswebsolutions.co.uk/sites/kvan/

many thanks

abduraooft
03-05-2009, 09:30 AM
CSS is cascading style sheet and has immense power to inherit several properties.
Just have a try by replacing your current navigation.css (after taking a backup), with

/* CSS Document */

#menu {
position: absolute;
/*top:80px;
_top: 77px;
right:-160px;*/
bottom:0;
right:0;
list-style-type: none;
z-index: 30;
/*width: 600px; */
border:1px solid red;
}

#menu li {
/*margin: 6px 0px; */
float:left;

}
#menu li a{
float: left;
width: 100px;
height: 40px;
background-repeat: no-repeat;
text-decoration: none;
text-align: center;
font-size: 14px;
color: #fff;

}
#menu #left, #menu #right{
width: 20px;
height:40px;
}
#menu #left {
background-image: url(left.jpg);
}
#menu #right {
background-image: url(right.jpg);
}

#menu #home {
background-image: url(home_1.jpg);
}

#menu #home:visited {
}

#menu #home:hover {
background-image: url(home_2.jpg);
background-repeat: no-repeat;
}

#menu #stock {
background-image: url(stock_1.jpg);
}

#menu #stock:visited {
}

#menu #stock:hover {
background-image: url(stock_2.jpg);

}


#menu #available {

background-image: url(available_1.jpg);

}

#menu #available:visited {
}

#menu #available:hover {
background-image: url(available_2.jpg);

}

#menu #terms {

background-image: url(terms_1.jpg);

}

#menu #terms:visited {
}

#menu #terms:hover {
background-image: url(terms_2.jpg);

}
(You'd need to adjust the image paths)

snowysweb
03-05-2009, 10:02 AM
My problem now (after a few adjustments, probly why it isn't looking right, sorry) is that in 5.5 there is no border running along underneath the nav bar and that it seems to have a gap to the right of it. any ideas?

http://www.snowyswebsolutions.co.uk/sites/kvan/

snowysweb
03-05-2009, 10:09 AM
Ok sorted that, just the bottem-border not going all the way across.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum