|
CSS - Problem Aligning List
I have put together a page with a left floating text box that text wraps around the top, right and bottom. It was going pretty well, thanks to some help I have already received, but I am having a problem with a bulleted list alignment. Please take a look at the test page below.
TEST PAGE The relevant style code follows: Code:
.textboxleft
{
background: #3E5C92;
font: normal 0.8em/140% arial, helvetica, sans-serif;
margin: 10px;
width: 160px;
border: 1px solid #E4E7F5;
float: left;
overflow: hidden;
padding: 0.5em;
}
.textboxleft p
{
color: #000000;
}
ul li
{
color: #E0E0F6;
font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}
Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information. If there is something I can alter in the CSS or HTML to prevent the list bullets from bumping into the text box, please let me know. I am very new at this and have only gotten this far with the help of people like you. Thank you, Grump PS: you will also notice another thread concerning the width of the text box. It does not render at 160px in Firefox, but does in IE. Similar TutorialsCode: <ul> <li>Some text<div class="right">right</div></li> <li>Some text<div class="right">right</div></li> <li>Some text<div class="right">right</div></li> </ul> I would like to alight the above divs to the right. I tried to do something like: .right { float:right; width: 48%; } But that makes them seem to fall down one line and the stack funny. I also tried to do something line: Code: <ul> <li><div class="left">left</div><div class="right">right</div></li> <li><div class="left">left</div><div class="right">right</div></li> <li><div class="left">left</div><div class="right">right</div></li> </ul> And Code: .left
{
float:left;
width:48%;
}
.right
{
float:right;
width: 48%;
}
But they all sorta did wierd things I didn't understand. Then I thought perhaps the LI weren't block elements and so that's why they were getting screwed up. So i wrapped a div around both right and left, but that didn't seem to work either. TIA, Mark Hi: I need a simple code for displaying two things side by side. I want to attach an image of what I need to do, but I can't figure out how to attach images. Basically, to describe the image, I need to have an unordered list on the left and a graphic on the right. These need to be between to blocks of text (above and below). I would prefer not to use tables. I am assuming there is a simple way to do that using <div> and <span> and floats, but I can't figure it out. Can someone please help. Thanks. Hi, I am using linked-in stylesheets for my webpage and have an unordered list, which is inside a div, for the phone number and email address (which is an email link) which are in the top right corner of the page. The whole page is in a container div. I am trying to 'text-align' these two <li> elements to the right, the phone number does this but the email link just won't move to the right and is staying on the left! I have put the 'text-align: right' attribute for the 'ul' and the 'li' and the 'a' but to no avail. The weird thing is, I also have an undordered list for my navigation which is also on the same page, running horizontal on the left side of the page, but these seem to work fine for the alignment (each link is centered nicely in their boxes). Why won't the email link align right?! My stylesheet code: #garden-designer-contactbar ul { display: block; position:absolute; text-align: right; font-size: 20px; font-family: verdana, arial, helvetica, sans-serif; color: #666666; left:541px; top:0px; width:179px; height:51px; margin: 0; padding: 0; list-style-type: none; z-index:6; } #garden-designer-contactbar li { display: block; text-align: right; } #garden-designer-contactbar a { display: block; position:absolute; text-align: right; font-size: 12px; font-family: verdana, arial, helvetica, sans-serif; color: #666666; font-weight: normal; } My page code: <div id="garden-designer-contactbar"> <ul> <li>020 0000 000</li> <li><a href="mailto:email@email.co.uk?subject=Garden Design" title="email Garden Design" align="right">email@email.co.uk</a></li> </ul> </div> Does anyone know what might be going on? My container div for the whole page is set to 'text-align: left' but I tried removing that attribute and it just made other text on the page that wasn't specifically aligned, centre. And the email link seemed to stay where it was. Any help much appreciated! I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty. I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line. For the offending code, please see: http://www.forma3.com/stuff/css/top_menu_v1.html http://www.forma3.com/stuff/css/css/right_menu_v1.css Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed. For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas? Code: input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}
ok... im making a site with CSS... this is my css code - Quote: a:link {color:white} a:visited {color:white} a:hover {color:black} a:active {color:white} body {background-color: #666666} #head{ position: relative; top: 7px; left: 140px; width: 707px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #content { position: relative; top: 7px; left: 140px; width: 697px; font-family: verdana; font-size: 12px; text-align: justify; color:white; background-color: #666666; background-image: url(image/back.jpg); padding: 5px; } #foot{ position: relative; left: 140px; width: 707px; font-family: verdana; font-size: 9px; text-align: center; color:white; background-color: 666666; background-image: url(wavy.jpg); } and this is my code for my PHP page, which reads the css - Quote: <html> <head> <link rel="stylesheet" type="text/css" href="fula.css" /> </head> <body> <div id="head"><img src="image/head.jpg"></div> <div id="content"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div> <br> <div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div> </body> </html> ok... now, if you look at it in firefox... everything aligns just fine but if you look at it in I.E its out of place... any help would b greatly appreciated! to view the page this problems on - http://www.outlawz.frihost.net/fula/test2.php The site is located at: http://68.41.210.39:8081/empcoBeta/index.html Why is it that the site displays fine in safari, netscape, mozilla/firefox etc, but is totally screwed in windowze IE? The css is as follows: #under { width:84%; height:1%; background-color:#1E77D3; position:absolute; top:5%; left:16%; } #mainleft { width:35%; background-color:white; vertical-align:top; position:absolute; top:10%; left:22% } #mainright { width:40%; background-color:white; vertical-align:top; position:absolute; top:10%; right:2% } body { font-family: sans-serif; font-size: 12px; } .indented1 { padding-left: 5pt; padding-right: 5pt; font-size: 12px; font-family: sans-serif; } .indented2 { padding-left: 10pt; padding-right: 5pt; font-size: 12px; font-family: sans-serif; } a:link {color: #17507e; font-size: 2; text-decoration: none; } a:active {color: blue; font-size: 2; text-decoration: none;} a:visited {color: #17507e; font-size: 2; text-decoration: none;} a:hover {color: blue; font-size: 4; font-weight: bold; text-decoration: none;} #column { width:1%; height:81%; background-color:#B4CCEB; position:absolute; top:0%; left:15%; } #leftsidebar1 { width:100%; height:5%; background-color:#B4CCEB; position:absolute; top:0%; left:0%; } #leftbar1 { width:15%; height:40%; background-color:#CEDFFF; position:absolute; top:5%; left:0%; } #leftsidebar2 { width:16%; height:2%; background-color:#B4CCEB; position:absolute; top:40%; left:0%; } #leftbar2 { width:15%; height:40%; background-color:#CEDFFF; position:absolute; top:41%; left:0%; } #leftsidebar3 { width:16%; height:1%; background-color:#B4CCEB; position:absolute; top:81%; left:0%; } #credits { position: absolute; left:1%; bottom:20%; } .tcredits { text-align: left; font-size: 9px; font-family: sans-serif; } I'm building a site: www.bunjareecottages.com.au At the moment, the middle column (which is the only variable sized bit on the page) is set to a min height of 495px. This works ok on larger resolutions, but creates a scroll even when no content reaches that length on smaller resolutions. That's as expected. What I want to have the middle section having a min height of 110px from the top of the page, and 10px from the bottom. So if the content was very little, the yellow background would still be 10px from the bottom, but if content was really long and there was a scoll, the end of the yellow was 10px from the bottom. Currently the yellow content area is relatively positioned from top by 110px, with margins of the correct sizes on each side. Everything else is absolutely positioned. Any ideas? http://s125392025.websitehome.co.uk/layout.html I'm working on a CSS layout(mind that this is my first time working with CSS, if something isn't right tell me, because I want to learn it right the first time), it's 2 columns, a main body and a subnav. But I can't get the subnav to align properly with the main body. I'm not too sure how to do this, I've tried it in a X,Y fashion but I'm not sure if I was doing that right. Please help. Edit: Finally Found it, nm. (never mind, i dont need layers anyways) Sorry, pls delete this! I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look? http://www.marginalspace.com/asif/index.php Hi guys .. Kinda stuck again. I've just obtained a menu which I liked, and for some reason, using the 960 gridsystem i cant get it to align correctly under the space which will eventually be a textlogo Here's the index.html: PHP Code: <!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" /> <link rel= "stylesheet" href="css/960/960.css" /> <link rel= "stylesheet" href="css/960/text.css" /> <link rel= "stylesheet" href="css/nav.css" /> <title>FIXA DATORN!</title> </head> <body> <div class="container_16"> <div id="logo" class="grid_4 push_5"><p><h3>FIXA DATORN!</h3></p> </div> </div> <nav> <div class="menu"> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="About">Portfolio</a></li> <li><a href="#" title="Jobs">Blog</a></li> <li><a href="#" title="Contact">Contact</a></li> </ul> </div> </nav> </body> </html> and nav.css: PHP Code: /* Nav */ nav{ bottom:414px; min-width:450px; position:absolute; right:10%; text-align: center; } nav ul li{ border-bottom:5px solid #68a99f; float:left; font-family:'BebasNeueRegular', sans-serif; font-size:18pt; height:60px; line-height:60px; list-style-type:none; margin:0 7px; text-align:center; width:120px; } nav ul li:hover{ border-bottom-color:#0076a3; transition-property:border-bottom-color; transition-duration:0.5s; -moz-transition-property:border-bottom-color; -moz-transition-duration:0.5s; -webkit-transition-property:border-bottom-color; -webkit-transition-duration:0.5s; } nav ul li a{ color:#eee; display:inline-block; height:100%; width:100%; text-decoration:none; } nav ul li a:hover{ color:#999; text-decoration:none; transition-property:color; transition-duration:0.5s; -moz-transition-property:color; -moz-transition-duration:0.5s; -webkit-transition-property:color; -webkit-transition-duration:0.5s; } .current_page_item{ border-bottom-color:#af4932; } I am trying to solve a problem I have had for a very long time. I have ignored it but I just can't do that any longer ... The code works well in FF but not in IE. The problem: I want to display three layers side by side (left to right). The left and right layers show just fine but the middle layer jumps down to just under the higher of the two other layers, effectively making my site not IE friendly. The code (taken from my site): Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Working with divisions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#content
{
margin-left: 205px;
margin-right: 205px;
width: 610px;
margin-top: 0px;
line-height: 150%;
background-color: white;
border: 1px solid red;
}
div#more
{
float: right;
width: 160px;
margin: 0;
padding: 4px 0px 8px 4px;
background-color: red;
color: #fff;
border: 1px solid white;
}
div#container
{
/* background-image: url(../nav_col_base.jpg); */
/* background-repeat: repeat-y; */
background-color: yellow;
border: 1px solid black;
}
div#container2
{
/* background-image: url(../more_col_base.jpg);
background-repeat: repeat-y;
background-position: right; */
border: 1px solid black;
background-color: gray;
}
#verMenu
{
padding-top: 2px;
float: left;
margin-left: 0px;
font: bold 11px Verdana, sans-serif;
width: 195px;
background-color: green;
border: 1px solid white;
}
div#banner
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
}
div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}
#cleardiv
{
clear: both;
height: 1em;
}
</style>
</head>
<body>
<div id="banner">
<h1>This is my banner division</h1>
</div>
<div id="container">
<div id="container2">
<div id="vermenu">
This is the VERMENU division. Lets see what happens if I add a whole lot of content to this deivision. I am expecting the content division to drop down and start displaying just as this content ends.
</div>
<div id="more">This is the more division. I also notice that in FF the width for the content division does not overlap over this division while in IE it does.</div>
<div id="content">This is the content division. I cannot figure out why this division drops to just under the larger of the other two divisions. If you add lines to any of the two divisions, this division shifts down ...</div>
<div id="cleardiv"></div>
</div>
</div>
</body>
</html>
I have color coded the layers to simplify identifying the layers and where they show. What am I doing wrong? Thank you all in advance for your assistance. Jose PS: I cannot post a link otherwise, I would have provided you with one for my website. All I'm looking for is something like: <div class="field">Name</div> <div class="result">Jeremy</div> Where the size of the left div is set and the right div can extend to the right of the page, but not drop underneath. I had: .field{ float:left; width:150px; } result{ float:left; } Which works fine until there's a really long name on the right. In cases like this, I still want that div to stay over to the right, but instead it drops down. So I want: Name: .... Here's a really long name. Here's a really long name. .............. Here's a really long name. Here's a really long name. .............. Here's a really long name. But I'm getting: Name: Here's a really long name. Here's a really long name. Here's a really long name. Here's a really long name.Here's a really long name. The right "column" breaks down to the line below. Of course this is easy to solve using tables. Any suggestions for Divs? The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables? The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7. Code: #title {
margin-left: 170px;
background: url(./imgs/title_mdl.gif) repeat-x;
width: auto;
height: 40px;
}
#title span {
font-size: large;
text-align: center;
}
#title img {
width: 82px;
height: 40px;
}
Code: <div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div> Hey, I'm working on a site (URL) and I am having some problems. I made a class in CSS: Code:
.middle {
background-attachment: fixed;
background-image: url(images/midtop.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
and am applying that class to the middle table. When I view it in IE, it looks fine, but in mozilla (I'm using firefox) it looks like it is positioning it at 0, 0 of the page, not the table. If I change background-position: 0px 0px; to background-position: 139px 0px; then it looks fine in mozilla, but not IE. Does anyone know how to fix this? (Or why it is happening) Thanks~ Hello, I created a form which is built mostly with ordered lists: http://www.27lamps.com/public/Beta.htm I am having a few problems. All of them inside a DIV to which I am applying the class "ListBox" 1. ListBox is not being applied to the child tags of that DIV, i.e., OL and LI. They have the styles defined by parent class. How can I solve this? 2. My second problem is how to clear floats on my ol. I applied the overflow approach to my OL tag but this does not seem to work. Note that I am trying to display 3 LI per row simulating a table. Could someone, please, help me out? And I am open to any suggestion which might improve my CSS on this form. I have been working on this for quite a while but I know I can still improve it. Thank You, Miguel I am having a problem displaying this vertical list in IE6. Here is the HTML: Code:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Dashboard Quick Link</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Artifacts</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Contact</a></li>
</ul>
The list is in a div called menu which is at the top of a div called sidebar. Here is the CSS: Code:
#sidebar {
margin:0px;
padding:0px;
width:220px;
float:left;
background:url(_images/team/bg_nav.jpg) repeat-y left;
position:relative;
}
#sidebar #menu {
margin:0px;
padding:0px;
border:solid 1px #000;
}
#sidebar #menu ul {
margin:0px;
padding:0px;
list-style:none;
}
#sidebar #menu li a:link, #sidebar #menu li a:visited {
display:block;
margin:0px;
background:#2175BC;
border-left:#1958B7;
border-bottom:#90BADE;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFF;
padding:5px 0px 5px 10px;
}
#sidebar #menu li a:hover, #sidebar #menu li a:active {
background:#205268;
border-left:#1C64D1;
}
I cannot see the background color for the links in IE6. There are also vertical spacing issues and although I've read up on Holly's Hack, I don't really understand how to implement it. Any help would be greatly appreciated. Thanks a lot, Brian Okay, I have played and stared at this problem/code for a few days now actually. Nothing is slapping me in the face and pointing to a problem, I seriously see nothing that could cause this. www.carbenco.com is the website, and if you look at the navigation, it sticks out the side.. the hover messes up, it almost seems as if the links are fine, then on hover its 5 pixels off or something. The reference for exactly how I want the nav to look is he www.carbenco.com/sample5.jpg I will put the index and css, incase the error is found somewhere in either. Thanks in advance! index Code: <!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" xml:lang="en"> <head> <title>Carbenco - Personal Portfolio</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" title="default" /> </head> <body> <div id="container"> <div id="white"></div> <div id="content"> <div id="left"><img src="top.jpg" alt="top.jpg" /> Content waaaaaa</div> <div id="right"><img src="clients.jpg" alt="clients.jpg" /> <div id="navi"> <ul> <li><a href="">Uniquely Yours</a></li> <li><a href="">Uniquely Yours</a></li> <li><a href="">Uniquely Yours</a></li> <li><a href="">Uniquely Yours</a></li> </ul> </div> </div> </div> <div id="bottom"><img src="logo.jpg" alt="logo.jpg" /><div id="botright"> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://carbenco.com/stylesheet.css"><img src="css.jpg" alt="css.jpg" /></a> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fcarbenco.com%2F"><img src="xhtml.jpg" alt="xhtml.jpg" /></a> <br /> <img src="copy.jpg" alt="copy.jpg" /> </div></div> </div> </body> </html> stylesheet Code: body {
margin: 0px;
padding: 0px;
text-align:center;
background-image: url(bg.jpg);
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#container {
position: relative; top: 50px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 524px;
height: 718px;
}
#white {
position: absolute;
left: 29px;
top: 0px;
width: 234px;
height: 12px;
background-color: #ffffff;
}
#content {
position: absolute;
left: 0px;
top: 12px;
width: 718px;
height: 416px;
background-image: url(back.jpg);
}
#left {
position: absolute;
left: 0px;
top: 0px;
width: 566px;
height: 416px;
}
#right {
position: absolute;
left: 565px;
top: 6px;
width: 152px;
height: 410px;
background-color: #ffffff;
border-left: solid #bdd180 1px;
}
#bottom {
position: absolute;
left: 0px;
top: 428px;
width: 718px;
height: 96px;
background-image: url(back2.jpg);
}
#botright {
position: absolute; right: 0px; bottom: 0px;
text-align: right;
}
#navi {
letter-spacing: 3px;
position: relative;
left: 0px; top: 0px;
width: 151px;
}
#navi ul {
width: 151px;
margin-left: 0;
padding-left: 0;
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
#navi li a {
width: 151px;
display: block;
padding: 0px;
background-color: #ffffff;
color: #000;
text-decoration: none;
width: 100%;
}
#navi li a:hover {
width: 151px;
display: block;
padding: 0px;
background-color: #bdd180;
color: #000;
text-decoration: none;
width: 100%;
}
#bottom img {
border: 0px;
}
ps: everything is validated, you can check the links on the actual site on bottom right for the validation of everything. Hi all, I really need some help figuring out this CSS issue. I've got a client that wants to show their product list using an expanding list. This data is drawn from the database using a tool that returns an HTML table structure that I have little control over. To over come this, I used a stored procedure to format each data element returned as a span with unique name that indicates it's level and location in the product hierarchy. The lowest level of the tree are links to the actual products. There is some javascript that toggles the display property of spans that are children of the item clicked, making them expand and collapse. This all works fine, with one little issue. In IE 6, when the child items are all hidden (collapsed), there is some extra space (from the TD containing the links to the products I think) that creates extra space between the categories. This space varies depending on how many products are at the bottom level of the hierarchy. I've tried everything I can to remove the space - margins, padding, borders set to 0px, etc. But I can't figure this one out. Can anybody give a hand? Thanks! This has been driving me nuts! GregC PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <title>Untitled</title> <script type="text/javascript"> function toggle(id, level){ allElements = document.getElementsByName(id); for (var i=0; i < allElements.length; i++) { if(allElements[i].style.display == "") { allElements[i].style.display = "none"; if (level == 1) { //hide all things with the same id allElements = document.getElementsByTagName("SPAN"); for (var i=0; i < allElements.length; i++) { var eName = allElements[i].id; if (eName) { if (eName.substring(0, id.length) == id) { allElements[i].style.display = "none"; } } } } } else { allElements[i].style.display = ""; } } } </script> <style type="text/css"> /* --- products expanding list --- */ .products_table { border: 0px hidden #ffffff; border-spacing : 0px; border-collapse: collapse; } .products_table tr{ border: 0px hidden #ffffff; background-color: #0000ff; color: #000000; padding: 0px; } .products_table td { border: 0px hidden #ffffff; background-color: #00ff00; color: #000000; padding: 0px; margin: 0px; } .products_table td span { background-color: #ff0000; } .hide_header { display: none; } .cat, .sub, .prod-none a, .prod a { display: block; background-color: #ffcccc; color: #000000; border: 0px hidden #ffffff; } .cat { font-weight: bold; margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px; } .sub { font-weight: normal; margin-left: 20px; margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px; } .prod a { padding-bottom: 0px; margin-left: 40px; font-style: italic; font-weight: bold; } </style> </head> <body> <table class="products_table"> <tr><td><span class="cat" onclick="toggle('sub1', 1 )" >Actuators</span> </td></tr><tr><td><span class="sub" onclick="toggle('sub1-1', 2 )" name="sub1" id="sub1" style="display:none">Electric</span> </td></tr><tr><td><span class="prod" name="sub1-1" id="sub1-1" style="display:none"> <a href="foo">AUMATIC Electric Actuators</a></span> </td></tr><tr><td><span class="prod" name="sub1-1" id="sub1-1" style="display:none"> <a href="foo">Triple Play Matic Electric Actuators </a></span> </td></tr><tr><td><span class="prod" name="sub1-1" id="sub1-1" style="display:none"> <a href="foo">Foo1 </a></span> </td></tr><tr><td><span class="prod" name="sub1-1" id="sub1-1" style="display:none"> <a href="foo">Foo2 </a></span> </td></tr><tr><td><span class="prod" name="sub1-1" id="sub1-1" style="display:none"> <a href="foo">foo3 </a></span> </td></tr><tr><td><span class="sub" onclick="toggle('sub1-2', 2 )" name="sub1" id="sub1" style="display:none">Equipment Monitoring</span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 1</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 2</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 3</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 4</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 5</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 6</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 7</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 8</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 9</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 10</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 11</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 12</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 13</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 14</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 15</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 16</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 17</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 18</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 19</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 20</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 21</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 22</a></span> </td></tr><tr><td><span class="cat" onclick="toggle('sub2', 1 )" >Controllers</span> </td></tr><tr><td><span class="sub" onclick="toggle('sub2-1', 2 )" name="sub2" id="sub2" style="display:none">Tension</span> </td></tr><tr><td><span class="prod" name="sub2-1" id="sub2-1" style="display:none"> <a href="foo">Tension Controller </a></span> </td></tr><tr><td><span class="cat" onclick="toggle('sub3', 1 )" >More Controllers</span> </td></tr><tr><td><span class="sub" onclick="toggle('sub3-1', 3 )" name="sub3" id="sub3" style="display:none">Anoter Item</span> </td></tr><tr><td><span class="prod" name="sub3-1" id="sub3-1" style="display:none"> <a href="foo">More Tension Controller </a></span> </td></tr></table> </ul> </body> </html> |
|||||||