HTML Forum

**megaholic** · 10:53 AM

Hi Guys, could someone please look over my code.. and see what firefox problems i've run into? I programmed the site under doctype strict, and IE renders perfect... but there must be major firefox no nos that need to be changed in my code.

Thanks in advance.
PM me for the link to the page.. I'd rather not publicly display it.

HTML code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Johnson GEOCENTRE website admin</title>
<link href="css/admin.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/external.js">
</script>
</head>

<body>
<div id="dhtmltooltip"></div>
<SCRIPT type="text/javascript" src="js/tooltip.js"></SCRIPT>
<div class="container">

    <!-- Header Image -->
    <div class="fl">
        <img src="http://www.webmaster-talk.com/images/interface/head_logo.gif" width="145" height="100" alt="Johnson GEO CENTRE - Earth's Geological Showcase">
    </div>
    <div class="fl">
        <img src="http://www.webmaster-talk.com/images/interface/head.gif" width="625" height="75" alt="Johnson GEO CENTRE website admin"><br>

    <!-- Navigation -->
    <ul id="toolbar">
        <li class="first"><a href="index.php">Main</a></li>
        <li><a href="products.php">Products</a></li>
        <li><a href="maillist/admin.php" rel="external">Newsletter</a></li>
    </ul>

    </div>

    <!-- Heading -->
    <div class="titlemargin">
            <div class="hr">
                <span class="h1" style="float: left;">Products</span>
                <span class="h2">Add and Edit Products here</span>
            </div>
    </div>

    <!-- Secondary Navigation -->
        <ul id="toolbar2">
        <li><a href="products.php">View All</a></li>
        <li><a href="product_cat.php">View by Category</a></li>
        <li><a href="product_sup.php">View by Supplier</a></li>
        <li class="refresh"><a href="javascript:refresh();">Refresh</a></li>
    </ul>
    <!-- Subheading -->
    <div class="titlemargin2">
        <span class="h1">Viewing All Products</span><br>
        <span class="h2">Listed below are all products within the online database.</span>
    </div>

    <!-- Dotted Line -->
    <hr class="dotted">

    <div class="content">



   <table width="100%" border="0" align="center" cellpadding="0">
   <tr><td bgcolor="#CCCCCC">
        <script language="JavaScript" type="text/JavaScript">
            function refresh()
            {
             window.location="products.php";
            }
        </script>

     <table width="100%" border="0" cellspacing="1" cellpadding="4">
       <tr bgcolor="#FFFFFF">
         <th width="10%" >Item #</th>
         <th width="30%">Name</th>
         <th width="30%">Supplier</th>
         <th width="20%">Category</th>
         <th width="5%"></th>
         <th width="5%"></th>
       </tr>

       
       <tr bgcolor="#f9f9f9">
         <th align="center">3917</th>
         <td>Candy Pebble Rocks</td>
         <td>Tall Ships</td>
         <td>Gifts</td>
         <td align="center">
         <form action=product_edit.php>
        <input type="hidden" name="Edit" value="3917">
        <input type="image" src="http://www.webmaster-talk.com/images/edit.gif" value="Edit" alt="Edit This Entry">
        </form></td>
         <td align="center"><form action=product_delete.php>
         <input type="hidden" name="Delete" value="3917">
        <input type="image" src="http://www.webmaster-talk.com/images/delete.gif" value="Delete" alt="Delete This Entry"></form>
        </td>
       </tr>


        
       <tr bgcolor="#f9f9f9">
         <th align="center">3365</th>
         <td>Agate Stand Up</td>
         <td>Nature's Expression</td>
         <td>Stones</td>
         <td align="center">
         <form action=product_edit.php>
        <input type="hidden" name="Edit" value="3365">
        <input type="image" src="http://www.webmaster-talk.com/images/edit.gif" value="Edit" alt="Edit This Entry">
        </form></td>
         <td align="center"><form action=product_delete.php>
         <input type="hidden" name="Delete" value="3365">
        <input type="image" src="http://www.webmaster-talk.com/images/delete.gif" value="Delete" alt="Delete This Entry"></form>
        </td>
       </tr>


           </table>
   </td></tr></table>


</div>

    <div class="footmargin">

        <div class="fr">&nbsp;Logout?&nbsp;<a href="http://www.geocentre.ca/"><img src="http://www.webmaster-talk.com/images/logout.gif" width="20" height="20" class="noborder" alt="Logout"></a>
        </div>

    </div>
</div>

    <div class="foot">
        <div class="copy"><strong>Johnson GEO CENTRE</strong> website admin v1.0<br>
        Created by <a href="mailto:info@michaelmartin.ca">Michael Martin</a>, 2006</div>
           <div class="valid">
        <img src="http://www.webmaster-talk.com/images/valid-html401.png" height="31" width="88"><img src="http://www.webmaster-talk.com/images/valid-css.png" height="31" width="88">
        </div>
    </div>

</body>

</html>

Stylesheet:

Code:

/*
-----------------------------------------------
Johnson GEOCENTRE Website Admin styles
Author:   Michael Martin
Version:  4 July 2006
----------------------------------------------- */

body {
    margin: 0px auto 10px auto;
    text-align: center;
    font-size : 12px;
    font-family : Verdana, Arial, sans-serif;
    background-color: #1A82AC;
  }
.container {
    background: url(../images/interface/bgmaintable.gif);
    width: 770px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  
DIV {
      font-size : 10px;
 }

/* Page Structure
----------------------------------------------- */
.hr {
    height:0px;
    border-bottom: solid #0066CC 1px;
    text-align: right;
}


hr.dotted {
       margin: 0px 50px 0px 58px;
    height:0px;
    border-bottom: dotted #888888 1px;
    text-align: right;
}

.fl {
    float: left;
}



.fr {
    float: right;
}

.frr {
    float: right; text-align: right;
}

.noborder {
    border:0;
}


.content {
       clear: both;
       margin: 20px 80px 20px 53px;
}


#dhtmltooltip{
position: absolute;
font-size: 10px;
width: 200px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
/*specify height of broken up content */
.multiparts{
height: 50px;
}

/* Links
----------------------------------------------- */

A, A:visited, A.normal {
    color: #0182AC;
    text-decoration: none;
}
A:hover, A:active {
    color: #999999;
    text-decoration: none;
}
.navmargin {
    margin: 5px 40px;
}



/* Toolbar
----------------------------------------------- */

#toolbar {
  clear:both;
  float:right;
  margin: 5px 17px;
  padding:2px 0;
  }
#toolbar ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
  }
#toolbar li {
  float:left;
  padding:0 5px;
  line-height:1.3em;
  border-left:1px solid #0182AC;
  font-weight:bold;
  font-size : 11px; 
  }
  
#toolbar li.first {
  border-left-width:0;
  }
  
#toolbar a {
  float:left;
  padding:1px 5px;
  border:1px solid #fff;
  text-decoration:none;
  color: #0182AC;
  }
#toolbar a:hover {
  color:#0182AC;
  border-color:#CCCCCC;
  }

  
/* Toolbar 2
----------------------------------------------- */
  
#toolbar2
  {
  clear: both;
  margin: 0px 25px;
  text-align: right;
  padding-left: 0;
  list-style: none;
  line-height: 16px;
  float: right;
  }

#toolbar2 li
  {
  margin-left: 20px;
  float: left;

}
#toolbar2 li.add 
  {
  padding-left: 20px;
  background-image: url(../images/add_icon.gif);
  background-repeat: no-repeat;

}
#toolbar2 li.refresh 
  {
  padding-left: 20px;
  background-image: url(../images/refresh_icon.gif);
  background-repeat: no-repeat;
}


/* Titles
----------------------------------------------- */

.h1 {
    font-size : 13px;
       color : #0182AC;
}

.h2 {
    font-size: 10px;
}

.titlemargin {
    clear: both;
    margin: 20px 40px;
}

.titlemargin2 {
       clear: both; margin: 22px 80px 20px 45px;
       text-align: left;
}
/* Footer
----------------------------------------------- */

.foot {
       background: url(../images/interface/bottom.gif);
       height: 49px;
       width: 770px;
       text-align: left;
       margin: 0px 33px 20px 33px;
 }


.footmargin {
       margin: 0px 33px 20px 33px;
 }
 
 .valid {
        float: right;
        margin: 0px 15px 0px 0px;
 }


.copy {
       margin: 0px 80px 0px 20px;
       float: left;
       color:#999999;
    font-size: 9px;
    text-align: left;
}

**LadynRed** · 07-06-2006, 12:16 PM

Nope. As usual IE gets it WRONG and FF is showing you what is REALLY going on.
You really should design so that it's right in FF, then fix anything that's not right with IE as it is the least standards-compliant with the most bugs.

2 things you need to do:
1) Put your footer INSIDE your container and adjust margins accordingly
2) Use this method to clear your floats:

Quote:

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Put a <br class="brclear"> under the closing #content div and before the footer.
Just putting 'clear:both' on certain elements does not properly clear the floats.

**megaholic** · 02:13 PM

Hi, Thanks for the help so far.

I'm having problems with margins still.. it seems my firefox margins are correct.. but they have much more extra space in IE.

Also, I can't figure out the floats in my header.

I'm new to this tableless layout business. Sorry.

Here's the link..

http://www.geocentre.ca/admin/products.php
user: guest pass:guest

**LadynRed** · 07-06-2006, 04:54 PM

Ok, IE has a nasty bug.. margin doubling under certain conditions. You might want to read thru the bugs and how to deal with them here:
http://www.positioniseverything.net/explorer.html
Double Float Margin bug: http://www.positioniseverything.net/...ed-margin.html

What you're seeing is known as float drop - when the total width of the elements inside the container are wider than the container, then a div will 'drop' down below the previous box.

For your header, my suggestion to you would be to make the entire header section a single graphic 770px wide and 100px high.
Put that in a div and call it #header, then floats will not be necessary.

When you float a box, you MUST give it a defined width.
IE's broken box model will ADD padding and margins to the size of your box, so be aware of that, especially with very tight layouts.

**megaholic** · 07-07-2006, 08:24 AM

Thank you again, that was great.

"display: inline;" did just the trick on my margin problems.

And for my header.. I just removed the DIVS wrapping my 2 images, and floated the images themselves instead. It seemed that the DIVS might've been adding space outside the image size, and caused them not to fit.

Everything is looking good in IE and FF right now.. though I still have a minor problem with my title area. IE renders it the way I want it to look.
Its a DIV wrapping my title area with the bottom border made blue.. to give it a horizontal rule beneath it.
It seems in firefox.. the contents jump above the div somehow. I don't get it.

http://www.geocentre.ca/admin/products.php
user: guest password: guest

Code:

<div class="hr">
        <span class="h1" style="float: left;"><?php echo($title);?></span>
        <span class="h2"><?php echo($desc);?></span>
</div>

Code:

.hr {
    height:0;
    border-bottom: solid #0066CC 1px;
    text-align: right;
    clear: both;
    margin: 20px 40px;
}

.h1 {
    font-size : 13px;
       color : #0182AC;
}

.h2 {
    font-size: 10px;
}

**LadynRed** · 07-07-2006, 09:44 AM

Your titlemargin box had no height and therefore could not 'contain' what was inside it. I made the following changes to your code:

CSS

Quote:

.hr { *** no longer needed ***
/*height:0px;*/
/* border-bottom: solid #0066CC 1px;*/
/*text-align: right;*/
}
.h1 {
font-size : 13px;
color : #0182AC;
float: left;
}

.h2 {
font-size: 10px;
float: right;
margin-top: 2px;
}

.titlemargin {
clear: both;
margin: 20px 40px;
border-bottom: 1px solid #0066CC;
height: 1.5em;
}

Notice the height rule on titlemargin. This gives it space to contain what's in it. It also puts the border on the bottom of the outside containing div.

In the HTML I the titlemargin area now looks like this:

Quote:

<div class="titlemargin">
<span class="h1">Products</span>
<span class="h2">Add and Edit Products here</span>
</div>

The additional containing div with the .hr class wasn't really necessary, so I removed it.