Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

trying to float menu and its not working in ie or chrome

Status
Not open for further replies.
csphard

csphard

Programmer
Apr 5, 2002
194
US
what is wrong with the cartinfo rule. In firefox it floats right and everything looks fine. In ie and chrome they stair step. Can anyone tell me what I missed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {font-size: .75em; font-family: tahoma; background:url(../images/21.gif);}
body,h1,h2,ul,li {margin:0;padding:0;}
#container {width: 900px;height: auto; margin:0 auto;background-color: white;}
#header {height: 100px;}
#header h1 {background:url(../images/3logo.png) center no-repeat; height: 100px; width: 900px;}
span {display:none;}

#cartinfo ul {background-color:black;height: 50PX;float: right; width: 900px;line-height: 30px;}
#cartinfo li a:link,
a:visited,
a:active {list-style:none;float: right;color:white;text-decoration:none;width: 100px;text-align:center;text-transform:capitalize; border:1px solid white; margin-left:3px;}
#cartinfo li a:hover {color: #990000;}
</style>
</head>

<body>
<div id="container">
<div id="header"><h1><span>header</span></h1>
<div id="cartinfo"><ul><li><a href="#">checkout</a></li><li><a href="#">shopping bag (O)</a></li><li><a href="#">Contact Us</a></li></ul></div>

</div>
<div id="content">


<div id="col1"><h2><span>test</span></h2><!--
<p>
Our name describes the fine experience we have in manufacturing
beautiful, elegant and yet affordable linens. We take pride in our
business history and having 3 generations of experience, we know what
it takes to make an event most memorable. We have the finest customer
service available to you when we offer one-one FREE consultation; we
take your ideas and thoughts and transform them into a magical dream.
</p>

<p>We strive to carry the most popular inventory and a variety of
fabrics, such as, Satin, Silk, Shimmer Crush, Crush Taffeta, Pintuck,
Imperial Stripe, Organza, Polyester , Fur Spandex etc.
</p>
<p>Our extensive line of chair covers, can cover most type of chairs,
banquet, folding and chiavari. There is no chair we could leave
uncover, we can accommodate to different budgets and can manufacture
any style needed for your event, we take pride in manufacturing all our
products here in the USA and our turnaround time is very competitive.
We thank you for considering and trusting 3-generations as your
business partner and your linen expert... </p> -->

</div>

</div>

<div id="footer">footer</div></div>

</body>
</html>

howard
 
Sort by date Sort by votes
This line in CSS
Code: 
#cartinfo li a:link,
a:visited,
a:active {list-style:none;float: right;color:white;text-decoration:none;width: 100px;text-align:center;text-transform:capitalize; border:1px solid white; margin-left:3px;}
will refer to three element states:

any normal link within #cartinfo li object
any visited link anywhere
any active link anywhere

Since links never have any list style, the first declaration of list style is pretty much useless. That also means that you never actually turn of list style for the actual list. Furthermore, you actually do not define any special behavior to list item element (li), which is why rendering differs across the browsers.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
So should this have been

#cartinfo li {list-style:none;float:right;}
#cartinfo a:link,
a:visited,
a:active {color:white;text-decoration:none;width: 100px;text-align:center;text-transform:capitalize; border:1px solid white; margin-left:3px;}


or


#cartinfo li {list-style:none;float:right;}
#cartinfo a:link {color:white;text-decoration:none;width: 100px;text-align:center;text-transform:capitalize; border:1px solid white; margin-left:3px;}

#cartinfo a:visited {color:white;text-decoration:none;width: 100px;text-align:center;text-transform:capitalize; border:1px solid white; margin-left:3px;}

#cartinfo a:active {color:white;text-decoration:none;width: 100px;text-align:center;text-transform:capitalize; border:1px solid white; margin-left:3px;}
 
Upvote 0 Downvote
I think you would want the margin and most likely the border on the li as well. Alternatively, you might want it only on a. It depends per your desires, however, you cannot let both of them have default styles. Something like this, perhaps:
Code: 
#cartinfo li { list-style: none; float: right; width: 100px; border: 1px solid white; margin-left:3px; }
#cartinfo a { color: white; text-decoration: none; text-align: center; text-transform: capitalize; display: block; width: 100px; }
You don't really need to specify all three states, since they are all the same. If you still wish to, you would need to stack them like this:
Code: 
#cartinfo a:link,
#cartinfo a:visited,
#cartinfo a:active { ... }

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Another example. Everything works correct except the sidemenu stair steps in ie. In firefox it is fine.
Please look at sidemenu rules. I think they are correct. I still do not get it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>


<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title></title>
<style>
body {margin:0;padding:0; font-family: tahoma;background-color: gray;text-align:center;}
h1 {margin:0;padding:0; color: white;font-size: 100px; text-transform:capitalize;}
h2 {margin:0;padding:0; font-size: 30px; text-transform:capitalize;}

#header {background-color: black; height: 100px;position:relative;}
#container {width: 900px; margin:0 auto;background-color:white; border: 5px solid black;text-align:left;}
#navcontainer ul
{
positioN:absolute;
right:0;
bottom: -0;
margin: 0;
padding: 0;
list-style-type: none;
float: right;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color:white;font-weight: bold;

}

#navcontainer ul li a:hover
{
color: #990000;

}
#content {margin-top: 20px;}
#footer {clear: both; background-color: black;height: 100px;}

#col1 {float: right; width: 700px; }

#sidemenu ul
{

float:left;
margin: 0;
padding: 0;
list-style-type: none;
margin-left:10px;
}

#sidemenu li { margin: 0; }

#sidemenu a
{
display: block;
color: black;
font-size: 12px;
text-transform:capitalize;
/* background-color: #036; */
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#sidemenu a:hover
{
/* background-color: #369; */
color: #990000;
}

#sidemenu li li a
{
display: block;
color: #666666;
/* background-color: #69C; */

width: 9em;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#goods {line-height: 25px; text-align:justify;padding:5px;}
#goods ul {list-style:none;}
#goods li { width: 130px; height: 130px; border: 1px solid #cccccc; text-align:center;float: right; margin: 10px;padding-top: 10px;}
</style>
</head><body>
<div id="container">
<div id="header"><h1><span>test</span></h1><div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="sidemenu">
<ul>
<li><a href="#">beef</a>
<ul>
<li><a href="#">hamburger</a></li>
<li><a href="#">beef ribs</a></li>
</ul>
</li>
<li><a href="#">Chicken</a>
<ul>
<li><a href="#">Free-range</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><a href="#">Fish</a>
<ul>
<li><a href="#">Cat Fish</a></li>
<li><a href="#">Tilapia</a></li>
</ul>
</li>
</ul>
</div>
<div id="col1">
<div id="goods">
<h2>testing</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan
odio non lorem mattis aliquet eget ornare ligula. Sed non faucibus
augue. Duis eu nisl non tellus auctor interdum quis ac nisl. Praesent
vitae eros a nibh posuere laoreet. Integer vitae risus sed elit
suscipit aliquet et nec quam. Nullam lobortis mauris vitae augue
euismod condimentum. Aliquam lorem turpis, dignissim non porta nec,
varius at est. Sed et lectus pretium enim suscipit varius. Etiam eget
imperdiet lacus. Ut sit amet consequat nulla. Integer bibendum auctor
enim,
<ul><li><img src="1.png"></li><li><img src="1.png"><br>sssssss</li><li><img src="1.png"></li><li><img src="1.png"></li><li><img src="1.png"></li><li><img src="1.png"></li><li><img src="1.png"></li>
<li><img src="1.png"></li><li><img src="1.png"></li>
<li><img src="1.png"></li><li><img src="1.png"></li><li><img src="1.png"></li>


</ul></div>
</div></div>
<div id="footer">footer</div>
</div></body></html>
 
Upvote 0 Downvote
You might want to add [tt]padding: 0;[/tt] to your #sidemenu li, but it is hard to tell. I suggest you obtain some tools, such as IE developer toolbar for IE and Firebug for Firefox to see which default css styles affect each element. That will make searching for these kind of errors much simpler.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
696
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
658
pmonett
pmonett
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
628
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
537
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top