|
CSS - Having Some Troubles With My Suckerfish Menus
http://www.sdtars.com/development/
I can't figure out why I can't get them to popup over the other menus. Can anyone see what I am doing wrong? Thanks! Similar TutorialsSuckerfish came into my life recently and has not only offered a great deal of freedom with dynamic menus at lower overheads than most (totally) Javascript alternatives, but has also had me tearing hairs out more frequently than most other things I know. The problem I currently face is when viewing my menus in IE6. At first this suggests that the issues lie within the Javascript of the Suckerfish menus... The pages in questions are located at the following addresses (please excuse the mid-construction state of each): www.cheapboilers.com/sandbox/index.html www.cheapboilers.com/sandbox/baxi_105.html Take the grey vertical menu on the left hand side. The first level appears fine, but the problem is with the second level. In index.html all appears well. However in baxi_105.html when moving down the list in the second level menu the menu disappears when moving from the first to the second item. At first I thought the problem was to do with the margins surrounding the elements - I thought the li element had detected the mouse as having left the element as it passed over the border. If this were true then the same would happen with the index.html page (which uses the same code/html/css). It does not. My current theory is that the other elements on the page are somehow interfering with the Suckerfish menus. Index.html has nothing but text in the content of the page. baxi_105.html has images, links etc in it. This theory is backed up by going to the bottom list item in index.html (Worcester) and viewing the second level menu for it. The menu vanishes as with all the menus on baxi_105.html. It is as if the footer of the page is interfering with the operation of the menus. This disappearing menu issue is driving me up the wall. Please can someone offer a solution? Thanks in advance. Andy Was referred to Suckerfish and find it very useful but I cannot figure out how to center the menu line on the screen (inside a table or not). Oddly, it automatically centers in IE but not Chrome or Firefox. Any suggestions? Thanks in advance!! I can post an example of what I mean but don't want to violate the new users guidelines. I am not sure how to centre all items on the suckerfish menus: I thought this would work, but it doesn't and even if it did it won't validate: <ul id="nav"> <div style="text-align:center;margin-left:auto;margin-right:auto;"> NAV ELEMENTS HERE... </div> </ul> Surely someone has had to centre there suckerfish menu to a fixed width box..or any box for that matter. I want to make the drop downs on suckerfish menus appear horizontally rather than vertically. Any ideas how to? PHP Code: <style type="text/css"> #nav, #nav ul { padding: 0; margin: 0; list-style: none; background-color: red; color: #000; } #nav a { display: block; width: 10em; color: #FFF; } #nav li { float: left; width: 10em; background-color: green; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } </style> <ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul> </li> <li><a href="#">Anabantoidei</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <!-- etc. --> </ul> I thought I could change the BLOCK display of the #nav a to INLINE but that doesn't work. We want the dropdowns to appear as 1 2 3 4 5 rather than 1 2 3 4 5 Thanks Hello my helpful comrades, I'm having some problems with the ol' Suckerfish in IE. It seems the second list is floating left, insead of appearing beneath the first list, and "clear:" won't fix it. I've been looking over the CSS all morning, but can't seem to locate the problem. The menus display perfectly in Fx. I have a feeling a lack of sleep is making me mildly stupid, but the slow progress thus far has driven me to seek help I've put the menu in a seperate .css file from the main layout to make it easier to read: CSS HTML Cheers! Hi fowks, Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped. Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial. Thanks for having a look. Hope you can help. It's driving me nuts. Cheers, John I have been developing some dropdown menus loosely based on Patrick Griffiths "Suckerfish" example (see http://www.alistapart.com/articles/dropdowns/) and I have a prototype mostly working. The code is simple and is included in full below. However I see two problems with this that I can't sort out. First, in IE (6.0.2800) the dropdown is offset significantly from the left edge of the upper menu cell. In Mozilla (1.7.5) it's fine. I can't figure out why -- any ideas? I want it right underneath, not offset. Also, in Mozilla the dropdowns have a 1-pixel space at the right edge between the background and the border. Also a mystery ... Thanks for any comments / thoughts. Tom ======================================================== Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font-family: arial, helvetica, serif;
background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
margin-left: 1em;
}
.mainlist {
list-style: none;
padding: 0;
margin: 0;
}
.mainitem {
float: left;
position: relative;
width: 120px;
text-align: center;
cursor: hand;
padding: 0;
border-top: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid green;
}
.mainitem a {
font-weight: bold;
color: green;
text-decoration: none;
}
.mainitemlast {
border-right: 1px solid green;
}
.mainlist li:hover ul {
display: block;
left: 0;
}
li.over ul {
display: block;
left: 0;
}
.sublist {
display: none;
position: absolute;
float: left;
top: auto;
font-weight: normal;
background-color: #CCCCFF;
width: 150px;
padding: 0;
}
.subitem {
display: block;
float: left;
position: relative;
left: 0;
width: 100%;
border-top: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
}
.subitemlast {
border-bottom: 1px solid blue;
}
.subitem a {
display: block;
font-weight: normal;
color: #060;
padding: 5px;
}
.subitem a:hover {
background-color: #EEEEFF;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<div id="content">
<br>
<ul class="mainlist" id="nav">
<li class="mainitem">
<div><a href="">Option 1</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
<li class="mainitem">
<div><a href="">Option 2</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
<li class="mainitem mainitemlast">
<div><a href="">Option 3</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it. This is an example of the problem. Any suggestions? Hi, Can anyone help me. I am using a son of suckerfish dropdown menu on a joomla 1.5 site I am working on. laminatefabricators.com The menu is dropping down fine on all of my browsers (apple mac: safari, camino, firefox). & are fine on firefox for pc. The menus aren't displaying at all on Internet explorer. Please help... I have wasted so much time trying to fix it/find a fix. Can someone please take a look at my CSS on this page and let me know what fixes I need to implement/read about in order to get the page to look acceptable in IE. I've checked and both the CSS and HTML are valid. I'm feeling more and more confident in my CSS abilities as time goes by but I can't seem to get a grasp on ALL the fixes IE seems to require. Thanks in advance! stuboo Hi, First post, first issue ... I am having some difficulties with the tag <table> in a fluid layout. without the attribute width set to 100%, the table is at the the top. If I set it up, the table goes down to the bottom. Can anybody explain why? ----------- 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>Title Here</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <STYLE> #outer_wrapper { width: 800px; } #container { float: left; } #left { background: #BBB; width: 150px; float: left; padding: 0px; border: solid 1px #000; } #main { background: #EEE; padding:4px; padding-left:160px; border: solid 1px #000; } table { border: solid 1px #A4A4A4; } </STYLE> </head> <body> <div id="outer_wrapper"> <div id="container"> <div id="left"> left here<br/><br/><br/><br/><br/><br/> </div> <div id="main"> <table cellspacing="0" cellpadding="2" width="100%"> <tr> <td align="top" valign="top"><b>Line 1</b></td> <td align="right">Line 2</td> </tr> </table> </div> </div> </div> <div id="footer"> footer here </div> </center> </body> </html> Hi everyone, So I'm implementing the suckerfish dropdown into one of my sites. I'm having a bit of trouble getting something to work correctly. I did most of the grunt work on getting it customized, but I was hoping someone could help me figure out a few minor details. The version of the drop down I had to make has images for the top level (main level) of the navigation, and each image is a unique size. In doing so, as well as adding padding to the second level li for aesthetic purposes, in IE the menu doesn't drop but floats over to the right. I'm not sure why this is. Also, I know this may be more fit for the JavaScript area, and I'll repost there if necessary, but I'd like to keep the top level image in the "over" state while the cursor is on that 2nd level dropdown. Is that possible? I'll be anxious for your feedback, this has been driving me crazy all day. Here's the code. XHTML: Code: <div id="nav"> <ul> <li class="one"><a href="#"><img src="images/home.gif" /></a></li> <li class="two"><a href="#" onmouseover="document.two.src='images/nav-our_products_on.gif';" onmouseout="document.two.src='images/nav-our_products_off.gif';"><img name="two" src="images/nav-our_products_off.gif" /></a> <ul> <li><a href="#">sublink 1</li></a> <li><a href="#">sublink 2</li></a> </ul> </li> </ul> </div> CSS Code:
#nav {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li.one {
float: left;
margin: 0;
padding: 0;
width: 51px;
list-style: none;
}
#nav ul li.one img {
border: 0;
}
#nav ul li.two {
float: left;
margin: 0;
padding: 0;
width: 118px;
list-style: none;
position: relative;
}
#nav ul li.two img {
border: 0;
}
/* - begin level 2 - */
#nav ul li ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: -999em;
border: solid 1px #ddd;
width: 118px;
voice-family: "\"}\"";
voice-family:inherit;
width: 116px;
}
#nav ul li ul li a {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 118px;
voice-family: "\"}\"";
voice-family:inherit;
width: 113px;
}
#nav ul li.two ul li a:hover {
color: #52432c;
background-color: #e4e2db;
text-decoration: none;
}
#nav ul li:hover ul, #nav ul li.sfhover ul {
left: auto;
}
JavaScript Code:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
It seems that in IE something isn't being cleared, as it almost appears that the second level is in place directly next to the top level link that is activating the dropdown menu. I look forward to your insight! Thanks! -Brian Hi all This is the place I need help with http://www.simon.rochester.edu/source%20files/newpage/web5/ at the white navigation bar on the top, the dropdown is aligned to the top right corner rather than bottom left. I looked up suckerfish page and found out that's what IE does, so I added the fix: top:100%; left:0; to #topnav li ul However, nothing happens. I tried a slew of other things, nothing seems to change that bit. Can anyone help? Also if you notice, the white bar navigations are images, those images get compressed for some damn reason in IE. Mozilla doesn't have any of these problems. I implemented IE7 patch as well I am trying to get my suckerfish dropdown menu to be centered on the page regardless of the resolution of the monitor. I know this is possible, but I just can't wrap my head around it. This is what I have so far: Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title><?php echo $title_page; ?></title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="site_files/style/web.css" /> <link rel="Shortcut Icon" href="site_files/pictures/favicon.ico" /> <script type="text/javascript" src="site_files/ie_drop.js"></script> </head> <body> <div id="header"> <p>NAVPACMETOCCEN San Diego Operational Home Page</p> </div> <div id="info"> <p>This page will be down at 1100 GMT on 20 June 2005. Click <a href="site_files/php/status.html">here</a> for more information.</p> </div> <div id="menu"> <ul id="nav"> <li><a href="index.php">Home Page</a></li> <li>Support <ul> <li><a href="site_files/php/a.html">Ship Specific</a></li> <li><a href="site_files/php/a.html">Unit Specific</a></li> <li><a href="site_files/php/a.html">Detachment</a></li> <li><a href="site_files/php/a.html">Mobile Env. Team</a></li> <li><a href="site_files/php/a.html">Coast Guard</a></li> </ul> </li> <li>Satellite <ul> <li><a href="site_files/php/a.html">Infrared</a></li> <li><a href="site_files/php/a.html">Visual</a></li> <li><a href="site_files/php/a.html">Water Vapor</a></li> <li><a href="site_files/php/a.html">Lightning</a></li> <li><a href="site_files/php/a.html">Analysis</a></li> </ul> </li> <li>Products <ul> <li><a href="site_files/php/a.html">Warnings</a></li> <li><a href="site_files/php/a.html">Forecasts</a></li> </ul> </li> <li>Aviation <ul> <li><a href="site_files/php/a.html">Products</a></li> <li><a href="site_files/php/a.html">Contact Info.</a></li> <li><a href="site_files/php/a.html">OBS/TAFS</a></li> <li><a href="site_files/php/a.html">Aviation Links</a></li> </ul> </li> <li><a href="site_files/php/links.html">Links</a></li> </ul> </div> <div id="leftside"> <p class="leftmenu"><a href="http://www.navy.com">Navy Jobs</a></p> <p class="leftmenu"><a href="http://www.donhr.navy.mil/NoFearAct.asp">No Fear Act</a></p> <p class="leftmenu"><a href="http://www.navy.mil">U.S. Navy Website</a></p> <p class="leftmenu"><a href="html/privacy.html">Privacy Policy</a></p> <p class="leftmenu"><a href="site_files/disclaimer.html">DoD Disclaimer</a></p> </div> </body> </html> And here is the style sheet: Code:
/* This part tells us how the hyperlinks will be handled by the browsers, and also what the background will be */
a:link { /* This is the link standard color*/
color: #000000; /*black*/
}
a:visited { /* This is the color of an already visited link*/
color: #800080;/*purple*/
}
a:hover {/* This is the color your link will take when you move your mouse over it*/
color: #FF0000;/*red*/
text-decoration: none;
}
a:active {/* This is the color and effect when you physically click on the link*/
color: #008080; /*teal*/
}
a { /*This tells the browser not to underline any links */
text-decoration: none;
}
/* This begins the header and the information notice portion */
#header {
margin: -14px -8px 0px -8px;
padding: 10px;
height: auto;
background: #000060;
}
#header p {
margin: 0;
height: auto;
color: #FFFF1B;
text-align: center;
font: small-caps 24px verdana, san-serif, serif;
}
#info {
margin: -1px -8px 0px -8px;
padding: 1px;
height: auto;
}
#info p {
margin: 0;
height: auto;
color: #0000FF;
background: #FFFFFF;
text-align: center;
font: bold 12px arial, san-serif, serif;
}
/* This ends the header and the information notice portion */
/* This begins the Drop-down menu portion*/
#menu { /* Top-Right-Bottom-Left */
margin: 0 0 0 145px;
padding: 0;
width: auto;
font: small-caps bold 12px verdana, san-serif, serif;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 125px;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 14px;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
/* This ends the drop-down menu portion */
/* This begins the left-side menu portion */
#leftside {
margin: 100px 0px 0px -8px;
width: 115px;
color: #000000;
font: small-caps 12px arial, san-serif, serif;
}
.leftmenu {
margin: 5px 0 2px 0;
height: 15px;
background: #DDEEFF;
}
#pkinotice {
margin: 0px 50px 0px 125px;
font: bold 12px arial, san-serif, serif;
}
.pki {
border: 2px solid #FF0000;
As you can see, I've just moved it over manually 145 px, and that centers it pretty well if you are viewing it at 1024x768, but at higher resolutions, the 145px is not sufficient for the centering. If anyone has an idea on how to fix it, I'd appreciate help. The solution must be able to validate, and work in both IE and a compliant browser (mozilla or firefox is what I use). Also, if the style sheet code can be cleaned up, or you see mistakes, don't hesitate to tell me. I've been learning CSS2.1 for about 3 months now, but I am not a whiz at it... I appreciate the help. Many thanks... Bryan I built a custom Suckerfish CSS dropdown nav, with a portion of the code for which is below: Code:
#nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
text-align: left;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li.navsep {
float: left;
width: 2px;
}
li.home {
float: left;
position: relative;
width: 61px;
}
li.home img {
border: 0;
}
li.ourproducts {
float: left;
position: relative;
width: 132px;
z-index: 500;
}
li.ourproducts img {
border: 0;
}
li.ourproducts ul {
display: none;
position: absolute;
top: 0;
left: 0;
width: 132px;
background-color: #fff;
}
li.ourproducts ul a, li.ourproducts ul a:visited {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 129px;
}
li.ourproducts ul a:hover {
display: block;
background-color: #e4e2db;
color: #67670f;
text-decoration: none;
}
The focus is on the li.ourproducts a, li.ourproducts a:visited declaration. In IE6, the background on :hover is 3 pixels shy of covering the whole list item. I know this must have something to do with the padding. FF however, renders it fine. I figured that IE6 would handle the box model fine. When I make the width 132px however for li.ourproducts a, li.ourproducts a:visited, in IE6 it's fine and in FF it's 3 pixels farther than it should be (135px). Can anyone hint at what the problem might be? I can't seem to get the declaration so both see it fine. -B I'm working on my first suckerfish dropdown for a site. I'm encountering two problems. 1) There is no background color on the subitems when i select the main item, making them hard to read 2) Internet Explorer displays the dropdown to the right of the main list item, rather than below. Netscape displays it correctly. Is this due to something I altered? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Markey Home Remodeling</title>
<link href="main.css" rel="stylesheet" type="text/css">
<style title="text/css">
#container {
width: 562px;
background: #F4ECD9;
text-align: left;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 562px;
list-style: none;
line-height: 1;
background: EAE3A3;
font-weight: bold;
padding: 0;
margin: 0 0 1em 0;
}
#nav a {
display: inline;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(rightarrow2.gif) center right no-repeat;
}
#nav li {
float: right;
padding: 0;
width: 10em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: white;
}
</style>
<script type="text/javascript">
sfHover = function()
{
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function()
{
this.className+=" sfhover";
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0" class="tableborder" align="center">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="20" width="562" class="leftnav">
<div id="container">
<ul id="nav">
<li><a href="#">SIDING</a></li>
<li><a href="#">GUTTERS</a></li>
<li><a href="#">BASEMENTS</a></li>
<li><a href="#">WINDOWS</a>
<ul>
<li><a href="#">300 Series</a></li>
<li><a href="#">900 Series</a></li>
<li><a href="#">Sliding</a></li>
<li><a href="#">Bay and Bow</a></li>
</ul>
</li>
<li><a href="#">DOORS</a>
<ul>
<li><a href="#">Entry</a></li>
<li><a href="#">Patio</a></li>
<li><a href="#">Garage</a></li>
</ul>
</li>
</ul>
</div></td>
<td class="rightnav">
<div id=linkstyles> <a href="#">HOME</a> <a href="#">CONTACT US</a>
</div></td></tr>
<tr>
<td>
<table width="562" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/mainimage.jpg"></td>
</tr>
<tr>
<td><div align="center"><img src="images/whychoose.jpg"></div></td>
</tr>
<tr><td>
<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center" class="maincontenttable">
<tr>
<td width="50%">REPUTATION: A proven track record with thousands of
delighted customers.
<br><br>
QUALITY: The highest quality products, the best trained
window installers
*all A.W.D.I. (American Window and Door Installed) Certified.
<br><br>
PRICE: The lowest prices on the highest quality
brand-name products. Period.
<br><br>
Factory Authorized Distribution, Factory Trained
Employees.
<br><br>
Qualified, Courteous Salespeople treat you with
professionalism and respect.
</td>
<td width="355"> </td>
</tr>
</table>
</td></tr>
</table>
</td>
<td valign="top" width="100%" class="mainrighttable">
<table width="230" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><img src="images/pledge.jpg" hspace="5" vspace="5"></td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="right" class="rightcontenttable">
<tr>
<td>Our business has always been family owned
and operated. For more than 27 years, we
have served our community with pride and
integrity. Years ago, the best craftsmen always
put their names on their work.
<br><br>
We still do.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<span class="style1"></span></td>
</tr>
</table>
</body>
</html>
Thanks for your help If you are having problems with Son of Suckerfish and IE7, where the drop down menu will not disappear like it should. Take out the javascript because you do not need it with IE7, but if you still want IE6 to work then put it in. For IE7, you need to add Code: *:first-child+html #nav {
height: 1%;
}
*:first-child+html #nav li {
height: 1%;
}
to your css and you will be fine. Don't ask me why, Don't ask how, i just chalk it up to just IE Hi, q1)I can't move the menu to the right without problems as i set a margin on #headlinks2 and the links get cluttered? Code:
#headlinks2 {
height:25px;
}
#headlinks2 a {
color:green;
display: block;
text-decoration:none;
width: 100px;
font-size:13pt;
padding-right:5px;
//margin-left:205px;
}
#headlinks2 a:hover {
color: white;
}
#headlinks2, #headlinks2 ul {
padding: 0;
margin: 0;
list-style: none;
}
#headlinks2 li {
float: left;
width: 100px;
}
#headlinks2 li ul {
position: absolute;
width: 100px;
left: -999em;
}
#headlinks2 li:hover ul {
left: auto;
}
#headlinks2 li:hover ul, #headlinks2 li.sfhover ul {
left: auto;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
//html
<div id="headlinks2">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
</ul>
</li>
<li><a href="#">Anabant</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">mex</a></li>
</ul>
</li>
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
</ul>
</li>
<li><a href="#">Anabant</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">mex</a></li>
</ul>
</li>
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
</ul>
</li>
<!-- etc. -->
</div>
|
|||||||