CSS Forum

**OldManRiver** · 01-03-2008, 10:36 PM

All,

Need to solve two problems

Problem One:
Have this experimental CSS menu file, but my existing web page program autogens my menu from MySQL into Table with each menu item/element in it's own row. Program also builds this horizontally with seperators and each item/element in it's own table cell.

Needing the CSS version for the popup functionality as additions to the menu are making it too busy to fit into the existing page space.

Once I know how to do this, within a single table cell, then I can store all the calling and popup info in a single record in MySQL and my existing page/menu program will process this right.

Problem Two:
IE does not show my popups or flyout submenus. I'm sure this is in the javascripting, since Mozilla and IE handle these differently.

What do I need to do to my javascripts?

Here is my code:

Code:

<?php
   $l_men = "  <div class='float-holder-left'>
                  <ul class='nav bvAssignKey-w-classW'>
                    <li class='main'><a href='./index.php'>Start</a></li>
                    <li class='sales'><a href='./ds.php'>Dispatch</a></li>
                    <li class='sales'><a href='./est.php'>Estimate</a></li>
                    <li class='sales'><a href='./inv.php'>Invoice</a></li>
                    <li class='sales'><a class='arrow' href='#'>Orders</a>
                       <div class='zone'></div>
                          <div>
                             <ul>
                                <li class='in-arrow-right'><a href='./co.php'>Change Order</a></li>
                                <li><a href='./pt.php'>Parts Order</a></li>
                                <li><a href='./po.php'>Purchase Order</a></li>
                                <li><a href='./ro.php'>Repair Order</a></li>
                                <li><a href='./wo.php'>Work Order</a></li>
                             </ul>
                          </div>
                    </li>
                    <li class='products'><a href='./bill.php'>Billing</a></li>
                    <li class='products'><a href='./tool.php'>Tools</a></li>
                    <li class='products'><a href='./set.php'>Setup</a></li>
                  </ul>
               </div>";
?>

<html>
<head>
<title>CSS Test</title>
<script type='text/javascript'>
   if (window.self != window.top) window.top.location = window.self.location;
</script>
<script type='text/javascript'><!--//--><![CDATA[//>
<!--
sfFocus = function() {
        var sfEls = document.getElementsByTagName('A');
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onfocus=function() {
                        this.className+=' sffocus';
                }
                sfEls[i].onblur=function() {
                        this.className=this.className.replace(new RegExp(' sffocus\\b'), '');
                }
        }
}
if (window.attachEvent) window.attachEvent('onload', sfFocus);

//--><!]]>
</script>
<script type='text/javascript' src='sidepages/auto-enableAddClassOnKey.js'>
</script>
<script type='text/javascript'><!--//--><![CDATA[//>
<!--
//              window.document.onkeypress = bv_addClassKeyListener;
//--><!]]>
</script>

<style type='text/css'>
html, body, ul, li {margin: 0; padding: 0; border: 0;}
body {
  color: #000;
  margin: 30px;
  background: #eee;
        font-size: 100.01%;
  font-family: verdana, sans-serif;
}

.alignright {margin: 0 30px 30px 0; text-align: right;}
.small {font-size: .8em;}
.back {text-align: right; padding: 3px 10px 0 0;}
.back a {text-align: right; font-size: .8em; color: #000;}

.textbox {
  border: 1px solid #252;
  margin: 20px 10%;
  padding: 0 10px;
  background: #fff8f8;
}

img {border: 0;}
h1 {text-align: center; font-family: tahoma, arial, sans-serif; color: #484;}
h1:active {background: red;}
h2 {font-size: 1em; font-family: verdana, sans-serif; margin: 10px;}
p {color: #000; font-size: .9em;}
ul { /* needs the Holly hack to avoid IE bugs */
  border-top: 1px solid #000;
}

li {
  list-style: none; /* kills the list item 'bullet' markers */
  border-bottom: 1px solid #000; /* Makes side borders on flyouts */
  position: relative;
  text-align: center;
  vertical-align: bottom; /* for IE5/win */
  font-weight: bold;
  font-family: arial, sans-serif;
}

.nav a {
  display: block;
  vertical-align: bottom; /* needed for IE5/win */
  color: #552;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #000;
  border-width: 0 1px; /* Makes side borders on flyouts */
}

.nav a:hover {color: #c44; text-decoration: underline;}

.nav a:focus, .nav a.sffocus { /* enhances the focus styling for keyboard tabbing */
  background-color: #00c !important;
  color: white;
}

.float-holder-left {
  width: 150px;
  float: left;
  margin: 0 0 0 0;
}

.float-holder-right {
  width: 150px;
  float: right;
  margin: 40px 0 0 20px;
}

.nav div {
  width: 150px;
  position: absolute;
  left: -3000px;
}

/* \*/
.nav div {
  width: 220px;
  wid\th: 150px;
}
/* Box model fix for IE5.x Win */


.float-holder-left div {
  padding: 30px 60px 30px 10px;
}

.float-holder-right div {
  padding: 30px 10px 30px 60px;
}

.float-holder-left div.leftbox,

.float-holder-right div.leftbox {
  padding: 30px 10px 30px 60px;
}

.float-holder-left div.rightbox,

.float-holder-right div.rightbox {
  padding: 30px 60px 30px 10px;
}

.float-holder-left .nav div.zone,

.float-holder-right .nav div.zone {
  padding: 0;
  width: 150px;
  height: 10px;
  left: -3000px;
  top: auto;
  bottom: -10px;
  font-size: 1px;
}

.float-holder-left .nav li:hover div.zone,

.float-holder-right .nav li:hover div.zone {
  left: 0;
}

.float-holder-left li:hover div div,

.float-holder-left div li:hover div div,

.float-holder-right li:hover div div,

.float-holder-right div li:hover div div {
  left: -3000px;
}

.float-holder-left li:hover div,

.float-holder-left div li:hover div,

.float-holder-left div div li:hover div.rightbox,

.float-holder-right div div li:hover div.rightbox {
  left: 126px;
  top: -28px;
}

.float-holder-left div div li:hover div.leftbox,

.float-holder-right li:hover div,

.float-holder-right div li:hover div,

.float-holder-right div div li:hover div.leftbox {
  left: auto;
  right: 126px;
  top: -28px;
}

.main {z-index: 5; background: #ccf;}

.main li {background-color: #dbb;}

.sales {z-index: 4; background: #ccf}

.sales li {background-color: #ebc;}

.products {z-index: 3; background: #ccf;}

.products li {background-color: #bbd;}

.products li li {background-color: #99b;}

.products li li li {background-color: #fff;}

.advertising {z-index: 2; background: #dfd;}

.advertising li {background-color: #bdb;}

.nav ul a {color: #fff;}

.nav li li li li a {
  color: #000;
}

.float-holder-left .arrow {
  background: url(images/arrow-right.gif) no-repeat 100% 50%;
}

.float-holder-right .arrow {
  background: url(images/arrow-left.gif) no-repeat 0 50%;
}

.arrow-double {
  background: url(images/arrow-double.gif) no-repeat 0 50%;
}

.in-arrow-right {
  background: url(images/arrow-right-lite.gif) 0 .4em no-repeat;
}

.in-arrow-left {
  background: url(images/arrow-left-lite.gif) 100% .4em no-repeat;
}


/* \*/ /*/

.nav div, .nav ul ul .leftbox, .nav ul ul .rightbox {
  position: relative;
  left: 5px;
  padding: 0;
}

.nav .arrow, .nav .arrow-double {border-bottom: 1px solid #000;}

.zone {display: none;}

/* */
.classW {font-size: .6em !important;}

.classW div, .classW ul ul .leftbox, .classW ul ul .rightbox,

.classW li:hover div, .classW ul li:hover div .leftbox, .classW ul ul .rightbox {
  position: relative !important;
  left: 5px !important;
  top: 0 !important;
  padding: 0 !important;
}

.classW .arrow, .classW .arrow-double, .classW .in-arrow-right, .classW .in-arrow-left {
  border-bottom: 1px solid #000;
  background-image: none  !important;
}

.classW .zone {display: none;}

<!--[if IE]>
  <style type='text/css'>
                body {behavior: url(sidepages/csshover.htc);}

                .nav a, ul {height: 1%;}
li {
height: 1%;
margin-left: -16px;
mar\gin-left: 0;
}

  </style>

        <noscript>
<style type='text/css'>

.nav div, .nav ul ul .leftbox, .nav ul ul .rightbox {
  position: relative;
        left: 5px;
        padding: 0;
        }

.nav .arrow, .nav .arrow-double {border-bottom: 1px solid #000;}

.zone {display: none;}

</style>
        </noscript>
<![endif]-->
<!-- The above block calls the special .htc script that forces compliance in IE/win. -->

</style>

</head>
<body>
<table border=0 width=150 cellpadding=0 cellspacing=0>
   <tr>
   <td align=center valign=top><?php echo $l_men; ?></td>
   </tr>
</table>
</body>
</html>

So you know the difference, the old program generates this .php file then links it in, with an include and echos it in php:

Code:

<?php
   $l_men = "<table width=150 align=center border=0>
               <tr>
               <td height=25 align=center><a href='./index.php'>Start</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./co.php'>COrder</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./ds.php'>Dispatch</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./est.php'>Estimate</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./pt.php'>Parts</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./po.php'>POrder</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./ro.php'>ROrder</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./wo.php'>WOrder</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./inv.php'>Invoice</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./bill.php'>Billing</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./tool.php'>Tools</a></td>
               </tr>

               <tr>
               <td height=25 align=center><a href='./set.php'>Setup</a></td>
               </tr>
            </table>";
?>

The original file uses this .CSS style sheet (linked in):

Code:

<style type="text/css">
body {margin: 0; padding: 0; font-size: 101%; background-color: #ffffff; font-family: arial;}
pre {margin: 0px; font-family: monospace;}
#table.bd {border-collapse: collapse;}
.center td {text-align: center;}
.center table { margin-left: auto; margin-right: auto; text-align: left;}
.center th { text-align: center !important; }
#td, th { border: 1px solid #000000; font-size: 75%; vertical-align: baseline;}
td, th {border-collapse: collapse;}
.bd {border: 1px solid #000000; font-size: 75%; vertical-align: baseline;}
.cm {font-size: 100%;}
h1 {font-size: 150%;}
.ed {position: absolute; left: 502px; top: 210px; font-color: #ffffff; font-size: 18; font-face: Edwardian Script ITC; z-index: 11;}
h2 {font-size: 125%;}
.p {text-align: left;}
.e {background-color: #ccccff; font-weight: bold; color: #000000;}
.h {background-color: #9999cc; font-weight: bold; color: #000000;}
.v {background-color: #cccccc; color: #000000;}
.vr {background-color: #cccccc; text-align: right; color: #000000;}
img {float: right; border: 0px;}
hr {width: 600px; background-color: #cccccc; border: 0px; height: 1px; color: #000000;}
#hr {border: 0; width: 100%; background-color: #ffffff; height: 2px; margin-left: 0em;}

blockquote {
  background: transparent url(images/quoleft.png) left top no-repeat;
  margin-left: 1em;
}
blockquote div {
  padding: 0px;
  background: transparent url(images/quoright.png) right bottom no-repeat;

  font-family: Tahoma,Helvetica, Arial, Geneva, sans-serif;
  font-size: medium;
  color: #406B9C;
}
p {
        font-family: Helvetica, Arial, Geneva, sans-serif;
        font-size: 0.7em;
        font-weight: bold;
}
td {
        font-family: Helvetica, Arial, Geneva, sans-serif;
        font-size: 1.0em;
        font-weight: bold;
}
td.p {
        font-family: Helvetica, Arial, Geneva, sans-serif;
        font-size: 0.7em;
        font-weight: bold;
}
td.php {
        color: #000000;
        font-family: Helvetica, Arial, Geneva, sans-serif;
        font-size: 0.7em;
        font-weight: bold;
}
li {
        font-family: Helvetica, Arial, Geneva, sans-serif;
        font-size: 0.7em;
        font-weight: bold;
}
.productName {
        color: #A60000;
        font-family: Tahoma, Verdana, Arial, Helvetica, Georgia;
        text-transform: uppercase;
        font-size: small;
        font-weight: bold;
}
a:link {color: #ffffff; font-size: 75%; font-weight: bold; background-color: #333388; text-decoration: none;}
a:visited {color: #ffff55; font-family: verdana; font-weight: extrabold; background-color: #333388; text-decoration: none;}
a:hover {text-decoration: underline; font-size: 125%;}
#a:active {color: #D10307; text-decoration: none; font-size: small}

a.cm:link {
        color: #ffffff; text-decoration: none; font-family: Verdana,
        font-weight: font-size: small; margin-left:0in; margin-right:0in; margin-top:6.0pt;
        margin-bottom:18.0pt; letter-spacing: -0.03em;}
a.cm:visited { color: #ffffff; text-decoration: none; font-family: Verdana,
        font-weight: bold; font-size: small; margin-left: 0em; letter-spacing: -0.03em;}
a.cm:hover { color: #ffffff; text-decoration: none; font-family: Verdana,
        font-weight: bold; font-size: medium; margin-left: 0em; letter-spacing: -0.03em;}
a.cm:active { color: #ffffff; text-decoration: none; font-family: Verdana,
        font-weight: font-size: small; margin-left:0in; margin-right:0in; margin-top:6.0pt;
        margin-bottom:18.0pt; letter-spacing: -0.03em;}

a.img:link { color: none; text-decoration: none; font-family: Tahoma, Verdana, Arial, Helvetica, Georgia; font-weight: font-size: small; margin-left: 0em; letter-spacing: -0.03em;}
a.img:visited { color: none; text-decoration: none; font-family: Tahoma, Verdana, Arial, Helvetica, Georgia; font-weight: bold; font-size: small; margin-left: 0em; letter-spacing: -0.03em;}
a.img:hover { color: none; text-decoration: none; font-family: Tahoma, Verdana, Arial, Helvetica, Georgia; font-weight: bold; font-size: medium; margin-left: 0em; letter-spacing: -0.03em;}
a.img:active { color: none; text-decoration: none; font-family: Tahoma, Verdana, Arial, Helvetica, Georgia; font-weight: bold; font-size: large; margin-left: 0em; letter-spacing: -0.03em;}

a.buyProd:link { color: #FFFF00; text-decoration: none; font-family: Helvetica, Arial, Geneva, sans-serif; font-weight: bold; font-size: 1em;}
a.buyProd:visited { color: #FFFF00; text-decoration: none; font-family: Helvetica, Arial, Geneva, sans-serif; font-weight: bold; font-size: 1em;}
a.buyProd:hover { color: #FFFFFF; text-decoration: underline; font-family: Helvetica, Arial, Geneva, sans-serif; font-weight: bold; font-size: 1em;}
a.buyProd:active { color: #FFFFFF; text-decoration: none; font-family: Helvetica, Arial, Geneva, sans-serif; font-weight: bold; font-size: 1em; }

h5 {color: #FFFFFF; font-family: Verdana, Arial, Helvetica, Georgia; text-transform: uppercase; margin-bottom: 0.02em; }
h6 {color: #000000; font-family: Verdana, Arial, Helvetica, Georgia; text-transform: uppercase; margin-bottom: 0.02em; }
</STYLE>

Hope you can help me!

Thanks!

OMR

**chrishirst** · 01-04-2008, 04:18 AM

A url would be better.

But just for a start;

1. No doctype. One is needed to make IE behave.
2. There are nested stylesheet declarations.
3. a noscript element nested inside a stylesheet

None of which are going to help.

**OldManRiver** · 01-12-2008, 07:53 PM

Quote:

Originally Posted by chrishirst

A url would be better.

But just for a start;

1. No doctype. One is needed to make IE behave.
2. There are nested stylesheet declarations.
3. a noscript element nested inside a stylesheet

None of which are going to help.

Chris,

Not understanding your reply, at least not all. Seems that you are saying too much junk in the .css. I agree, but it was the only example that would make my test work and then only in FireFox. With the "doctype" statement I think you were trying to tell me how to make IE work, but I do not know anything about IE, so that leaves me clueless without an example.

For what I'm trying to do, thought may some screenshots would help!

First file thumbnail is the old menu screen and second is the new css version, but all done as list items, not in tables as is the first. Just need this to work right within the existing structure. Modified the MySQL table serving the Menu by adding need field of "fld_pid" for the parent ID, which is always "0" unless it is a submenu or flyaway item and added code:

Code:

if ($prt_id != 0) {
   <tr> ... etc. ... </tr>
} else {
   <li> ... etc.
}

So both process, the normal table and the flyaway list items, but would rather these also be table rows as well, with just the level, id, etc.

What I'm trying to accomplish is the "ORDER" section or items in the menu were becoming to many so trying to get them all to pop under the one section as illustrated in my CSS example.

I understand and can work with the basics, but the flyaway and level stuff, I still don't have my head around conceptually, so do not understand the "WHY" of what is needed, so get real clueless real fast here.

Thanks!

OMR

**chrishirst** · 01-13-2008, 07:14 AM

this;

Code:

.classW .zone {display: none;}

<!--[if IE]>
  <style type='text/css'>
                body {behavior: url(sidepages/csshover.htc);}

                .nav a, ul {height: 1%;}
li {
height: 1%;
margin-left: -16px;
mar\gin-left: 0;
}

  </style>

        <noscript>
<style type='text/css'>

.nav div, .nav ul ul .leftbox, .nav ul ul .rightbox {
  position: relative;
        left: 5px;
        padding: 0;
        }

.nav .arrow, .nav .arrow-double {border-bottom: 1px solid #000;}

.zone {display: none;}

</style>
        </noscript>
<![endif]-->
<!-- The above block calls the special .htc script that forces compliance in IE/win. -->

</style>

</head>
<body>

is the messed up style sheet

screenshots are useless for seeing errors in code. the are ok for illustrating what you are seeing, but of no use for debugging.

**OldManRiver** · 05:25 PM

Quote:

Originally Posted by chrishirst

this is the messed up style sheet screenshots are useless for seeing errors in code. the are ok for illustrating what you are seeing, but of no use for debugging.

Chris,

What are you saying?
Delete the code you pasted from mine?
Add the pasted code to mine?

Again what are you saying?

I do not get errors from my code and assume you are, therefore your response. That is why I must get this clear, as it appears different results for you vs. for me.

Maybe it is a deployment thing. I'm on WAMP localhost. What are you testing on/against?

Thanks!

OMR

**chrishirst** · 01-13-2008, 06:50 PM

the code needs sorting out

You CAN'T have conditional comments that put another <style> block INSIDE an existing style block so you end up with

Code:

 
<style type="text/css">
definitions


...

<style type="text/css">

more definitions 

</style>
</style>

And then to compound the problem there is a <noscript> block INSIDE the style sheet that is inserting a THIRD style block!

So because the style sheets are messed up, the .htc file won't be loaded, therefore the arbitary element hover will not be working in IE.

**carloncho** · 01-19-2008, 06:02 PM

In IE, needs a doctype declaration. IE not follow standards, but need a doctype declaration