...

View Full Version : IE6 Navmenu float positioning issue.



minddesign
06-01-2009, 04:24 AM
I was hoping I might get a little help on a positioning problem I'm having with a simple navigation menu. I am trying to float right and have the links align horizontally. Instead they align left and align vertically. Here is my css and html for the ul list.

<div id="styletwo">
<ul>
<li><a href="" title="">Contact Us</a></li>
<li><a href="" title="">Donate</a></li>
<li><a href="" title="" class="current">Membership</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Home</a></li>
</ul>

</div>



#styletwo{
position:relative;
display:inherit;
height:21px;
font-size:11px;
font-weight:bold;
background:transparent url(images/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
width: 1000px;
margin: 0;
}
#styletwo ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
}
#styletwo ul li{
display:block;
float:right;
margin:0 1px 0 0;
}
#styletwo ul li a{
display:block;
float:inherit;
color:#034895;
text-decoration:none;
padding:3px 20px 0 20px;
height:18px;
}
#styletwo ul li a:hover {
color:#FF352E;
background:transparent url(images/bgON.gif) repeat-x top left;


If anyone has any ideas I would really appriciate it.

abduraooft
06-01-2009, 09:04 AM
If anyone has any ideas I would really appriciate it. Please post your complete code here (and use
][/COLOR] tags to wrap your code). Or a link to your page would be much better.

Excavator
06-01-2009, 04:13 PM
Hello minddesign,
Is this more what you had in mind?
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px Arial,Verdana,Helvitica,sans-serif;
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: none;
}
#styletwo{
font-weight: bold;
background: transparent url(images/bgOFF.gif) repeat-x top left;
width: 1000px;
}
#styletwo ul{
width: 200px;
float: right;
list-style-type:none;
}
#styletwo ul li{
display:block
}
#styletwo ul li a{
display: block;
color: #034895;
text-decoration: none;
padding: 3px 20px 0 20px;
height: 18px;
}
#styletwo ul li a:hover {
color: #FF352E;
background: transparent url(images/bgON.gif) repeat-x top left;
}
</style>
</head>
<body>
<div id="styletwo">
<ul>
<li><a href="" title="">Contact Us</a></li>
<li><a href="" title="">Donate</a></li>
<li><a href="" title="" class="current">Membership</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Home</a></li>
</ul>
</div>
</body>
</html>

minddesign
06-01-2009, 04:38 PM
Thanks for the help.

It's aligning vertically not horizontally though? I am going to tinker for a bit to see if I figure something out.

minddesign
06-01-2009, 04:49 PM
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hollidaysburg Area YMCA</title>
<style type="text/css">


body {
margin: 0;
padding: 0;
text-align: center;
color: #666666;
background-color: #034895;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
background-image: url(file:///D|/Documents%20and%20Settings/dude/Desktop/Sensory%20Sunshine/mainBG.jpg);
background-repeat: repeat-x;
}
#h1 {
color: #000033;
}
.twoColFixLtHdr #container {
width: 1024px;
margin: 0 auto;
border: 1px solid;
text-align: left;
border-color: #CCCCCC;
background-color: #FFFFFF;
background-position: bottom;
background-repeat: no-repeat;
}
.twoColFixLtHdr #header {
padding: 0px 0px 0px 8px;
margin: 0px 10px 18px 10px;
}
.twoColFixLtHdr #header h1 {
margin: 0;
padding: 10px 0;
margin-left: 100px;
color: #034895;
}
.twoColFixLtHdr #sidebar1 {
float: left;
width: 200px;
padding: 15px 10px 15px 20px;
}
.twoColFixLtHdr #mainContent {
margin: 0 50px 30px 270px;
padding: 10px 75px 20px 20px;
}
.twoColFixLtHdr #footer {
padding: 0 10px 0 20px;
}
.twoColFixLtHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}td img {display: block;}

</style>
<!--[if IE 5]>
<style type="text/css">
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
</style>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="styletop.css" rel="stylesheet" type="text/css" />
</head>

<body class="twoColFixLtHdr">

<div id="container">
<div id="header">

<div id="styletwo">
<ul>
<li><a href="" title="">Contact Us</a></li>
<li><a href="" title="">Donate</a></li>
<li><a href="" title="" class="current">Membership</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Home</a></li>
</ul>
</div>
<img align="" src="logo5.jpg" width="153" height="105" />
</div>

<img src="photobarblue.png" width="1024" height="252" />


<div id="sidebar1">
<h4 id="h1">Fun at the YMCA</h4>
<div id="styleone">
<ul>
<li><a href="" title="">Aquatics</a></li>
<li><a href="" title="">Wellness Center</a></li>
<li><a href="" title="" class="current">Land fitness</a></li>
<li><a href="" title="">Sports</a></li>
<li><a href="" title="">Race Series</a></li>
<li><a href="" title="">Child Care</a></li>

</ul>
<!-- end #sidebar1 -->
</div>

</div>

<div id="mainContent">
<h3 id="h1">Community Wellness Center</h3>

<p>Welcome to the Hollidaysburg Area YMCA website. We have recently updated out web presence to ensure the most pleasant online experience possible. While you are here please take the time to check out all that your local YMCA has to offer. </p>
<p>Whether you are looking for swimming lessons for the kids, personal fitness activities such as yoga or spinning or simply a day of fun with the family, the Hollidaysburg YMCA is the place to visit.</p>
It's Your YMCA</h4>
<p>We take pride in all that we have to offer here at the Y. We also love to hear what you, our members are interested in. Please feel free to take the time to contact us and let us know how we are doing. We are here for you and look forward to helping you and your family live a healthier, happier life.</p>
<!-- end #mainContent --></div>

<br class="clearfloat" />
<div id="footer">

<div><p>Hollidaysburg Area YMCA</p></div>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

minddesign
06-01-2009, 04:51 PM
This is the CSS for the menu in question.



* {
margin: 0;
padding: 0;
border: none;
}
#styletwo{
font-weight: bold;
background: transparent url(images/bgOFF.gif) repeat-x top left;
width: 1000px;
}
#styletwo ul{
width: 200px;
float: right;
list-style-type:none;
}
#styletwo ul li{
display:block;
}
#styletwo ul li a{
display: block;
color: #034895;
text-decoration: none;
padding: 3px 20px 0 20px;
height: 18px;
}
#styletwo ul li a:hover {
color: #FF352E;
background: transparent url(images/bgON.gif) repeat-x top left;
}

abduraooft
06-01-2009, 05:18 PM
If you are trying to make a 3 column fixed layout, take a look at good sample at http://bonrouge.com/3c-hf-fixed.php

minddesign
06-01-2009, 05:33 PM
Thanks for the link! I'm going to go ahead and update my code. It's really the main navmenu that is messing me up. It's seems simple enough. I want it to float top right, while aligning horizontally.


************* I just noticed an error on my first post!! **************

I was hoping I might get a little help on a positioning problem I'm having with a simple navigation menu. I am trying to float right and have the links align vertically. Instead they align left and align horizontally. Here is my css and html for the ul list.


I mixed up Horizontally and vertically... Silly... Sorry for the mix up.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum