|
Nav bar Works in Firefox but not in IE
06-23-2008, 06:18 PM
|
Nav bar Works in Firefox but not in IE
|
Posts: 10
Name: Los
Location: St. Louis, MO.
|
My suckerfish menu seems to work in Firefox but will not work in IE. The third level menu is way out to the side and not aligned with the rest of stuff. Any suggestions?
Example of what i am talking about is at:
http://www.carlosrapa.com/stljewelco/index2.html
Below I have the main html info, main page css, and nav bar .css. if you need anything else to help me feel free to ask..
Thanks a Bunch WebGods.
Carlos M. Rapa
Here is my main html
HTML 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>The St. Louis Jewelry Company</title>
<style media="screen">@import url(sfmenu.css);</style>
<script type="text/javascript" src="sfmenu.js"></script>
<link href="custom.css" rel="stylesheet" type="text/css">
<style type="text/css"><!--.style1 {font-size: 90%}--></style>
</head>
<body>
<table width="767" align="center" cellpadding="0" cellspacing="0" class="table0">
<tr>
<td width="763" height="137" id="c_name"> </td>
</tr>
<tr>
<td><ul id="nav">
<li><a href="#">Home</a><ul></ul></li>
<li><a href="#">Jewelry Products</a>
<ul>
<li>Bridal
<ul>
<li><a href="#">Engagement Rings</a></li>
<li><a href="#">Wedding Bands</a></li>
<li><a href="#">Wedding Sets</a></li>
</ul>
</li>
<li>Fraternal
<ul>
<li><a href="#">Blue Lodge</a></li>
<li><a href="#">Eastern Star</a></li>
<li><a href="#">Past Master</a></li>
<li><a href="#">Scottish Rite</a></li>
<li><a href="#">Shrine</a></li>
<li><a href="#">Other Fraternals</a></li>
</ul>
</li>
<li>Ladies
<ul>
<li><a href="#">Antique & Filigree</a></li>
<li><a href="#">Cameo & Onyx</a></li>
<li><a href="#">Remounts & Cocktail Rings</a></li>
<li><a href="#">Pendants & Earings</a></li>
</ul>
</li>
<li>Mens Rings
<ul>
<li><a href="#">Diamond Rings</a></li>
<li><a href="#">Initial Rings</a></li>
<li><a href="#">Stone Rings</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="nav1"></div></td>
</tr>
</body>
</html>
Here is my main page css
HTML Code:
body {
text-align: center;
margin-top: 17px;
margin-bottom: 15px;
background-color: #858B9B;
}
.table0 {
background-color: #FFFFFF;
width: 763px;
}
#c_name {
background-image: url("images/foto1.jpg");
vertical-align: top;
padding-top: 0px;
padding-right: 0px;
width: 763px;
background-repeat: no-repeat;
/*height: 1px;*/
}
/*.c_name {
color: #FFFFFF;
font-weight: normal;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}*/
/*.c_name H1 {
color: #003D59;
font-weight: normal;
font-family: Times, "Times New Roman", serif;
font-size: 30px;
margin-top: 0px;
margin-bottom: 0px;
}*/
.c_name P {
font-style: italic;
margin-top: 0px;
margin-bottom: 0px;
}
#t1_menu_l {
background-image: url("images/t1_menu_l.gif");
background-repeat: repeat-y;
vertical-align: top;
width: 2px;
height: 21px;
}
#t1_menu {
background-color: #003D59;
background-repeat: no-repeat;
vertical-align: middle;
width: 763px;
height: 0px;
}
.hmains {
color: #FFFFFF;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.hmains P {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
.hmains a {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
}
.hmains a:hover {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 11px;
}
.hmains_pic{
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
}
#t1_menu_r {
background-image: url("images/t1_menu_r.gif");
background-repeat: repeat-y;
vertical-align: top;
width: 2px;
height: 21px;
}
#t2_menu {
background-image: url("images/foto2.jpg");
background-repeat: no-repeat;
vertical-align: middle;
width: 491px;
height: 21px;
padding-left: 136px;
padding-right: 136px;
}
.hsubs {
color: #003D59;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.hsubs P {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
.hsubs a {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #003D59;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
}
.hsubs a:hover {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #003D59;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 10px;
}
.hsubs_pic{
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
}
#gray_line {
background-image: url("images/gray_line.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 763px;
height: 10px;
}
#foot_l {
background-image: url("images/foot_l.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 2px;
height: 23px;
}
#copyright {
background-image: url("images/foot_line.gif");
background-repeat: repeat-x;
vertical-align: middle;
width: 759px;
height: 23px;
}
.copyright {
color: #FFFFFF;
text-align: center;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.copyright P {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
#foot_r {
background-image: url("images/foot_r.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 2px;
height: 23px;
}
#welcome {
background-image: url("images/foto33.jpg");
background-repeat: no-repeat;
vertical-align: top;
padding-top: 16px;
padding-left: 66px;
padding-right: 90px;
padding-bottom: 10px;
width: 338px;
height: 236px;
}
#welcomesub {
background-image: url("images/foto33.jpg");
background-repeat: no-repeat;
vertical-align: top;
padding-top: 16px;
padding-left: 66px;
padding-right: 90px;
padding-bottom: 10px;
width: 607px;
height: 236px;
}
.welcome {
text-align: left;
color: #000000;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.welcome H1 {
color: #003D59;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
margin-top: 28px;
margin-bottom: 28px;
}
.welcome P {
margin-top: 2px;
margin-bottom: 2px;
line-height: 16px;
}
#box1_top {
background-image: url("images/box1_top.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 269px;
height: 4px;
}
#box1 {
background-color: #ECEFF6;
width: 269px;
}
#box1_pole {
background-image: url("images/box1_vl.gif");
background-repeat: repeat-y;
vertical-align: top;
padding-top: 0px;
padding-left: 18px;
padding-right: 18px;
padding-bottom: 10px;
width: 101px;
}
.special {
text-align: left;
color: #B61C1C;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.special H1 {
color: #003D59;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 12px;
margin-bottom: 15px;
}
.special H2 {
color: #003D59;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: 0px;
margin-bottom: 15px;
}
.special P {
margin-top: 0px;
margin-bottom: 2px;
line-height: 16px;
}
#box1_hl1 {
vertical-align: top;
width: 129px;
height: 8px;
}
#box1_r_top {
background-image: url("images/box1_r_top.gif");
background-repeat: no-repeat;
width: 129px;
height: 2px;
}
#box1_l {
background-image: url("images/box1_l.gif");
background-repeat: repeat-y;
width: 2px;
height: 109px;
}
#box1_foto {
background-image: url("images/foto4.jpg");
background-repeat: no-repeat;
vertical-align: top;
width: 119px;
height: 109px;
}
#box1_r {
background-image: url("images/box1_r.gif");
background-repeat: repeat-y;
vertical-align: top;
width: 8px;
height: 109px;
}
#box1_r_bottom {
background-image: url("images/box1_r_bottom.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 129px;
}
#box1_rb {
background-image: url("images/box1_rb.gif");
background-repeat: repeat-y;
vertical-align: top;
width: 3px;
}
#box1_middle {
background-image: url("images/box1_middle.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 269px;
height: 4px;
}
#box2 {
background-color: #F3F6FD;
width: 269px;
}
#box2_pole {
background-image: url("images/box2_vl.gif");
background-repeat: repeat-y;
vertical-align: top;
padding-top: 0px;
padding-left: 18px;
padding-right: 1px;
padding-bottom: 10px;
width: 118px;
}
.products {
text-align: left;
color: #000000;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.products H1 {
color: #003D59;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 10px;
margin-bottom: 22px;
}
.products H2 {
color: #003D59;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 0px;
margin-bottom: 2px;
}
.products P {
margin-top: 0px;
margin-bottom: 2px;
line-height: 16px;
}
#box2_foto {
background-image: url("images/foto5.jpg");
background-repeat: no-repeat;
vertical-align: top;
width: 129px;
}
#box2_rb {
background-image: url("images/box2_rb.gif");
background-repeat: repeat-y;
vertical-align: top;
width: 3px;
}
#box2_bottom {
background-image: url("images/box2_bottom.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 269px;
height: 2px;
}
Here is my nav bar .css
HTML Code:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 9.4099999em;
height: auto;
border: 1px solid #ccc;
background-color:#003D59;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li ul ul {
margin: -1em 0 0 10em;
}
#nav li:hover ul {
left: auto;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.hover {
position: static;
}
#nav li a {text-decoration:none;color:#fff;}
#nav li li {background-color:#cff;color:#600;}
#nav li li a {text-decoration:none;color:#66f;}
Last edited by carlosrapa; 06-23-2008 at 06:20 PM..
|
|
|
|
|
06-23-2008, 09:49 PM
|
Re: Nav bar Works in Firefox but not in IE
|
Posts: 10,016
Location: Tennessee
|
Cure the float drop first, then adjust the positioning of the dropdown menu.
Float drop occurs for many reasons, but usually it's because IE doesn't like really tight spaces. Try narrowing the sizes a pixel or two.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
06-24-2008, 07:57 AM
|
Re: Nav bar Works in Firefox but not in IE
|
Posts: 10
Name: Los
Location: St. Louis, MO.
|
Quote:
Originally Posted by LadynRed
Cure the float drop first, then adjust the positioning of the dropdown menu.
Float drop occurs for many reasons, but usually it's because IE doesn't like really tight spaces. Try narrowing the sizes a pixel or two.
|
Not to sound like a complete idiot here but i have cut and paste knowledge of css and i am still in the learning process. Where would i find the float drop and postioning of the dropdown menu to cure?
Not trying to be a pain,
Carlos |
|
|
|
|
06-24-2008, 09:39 AM
|
Re: Nav bar Works in Firefox but not in IE
|
Posts: 10
Name: Los
Location: St. Louis, MO.
|
ok i cleared the line
float: left from nav li of the nav css but now i have a vertical bar...
How do i fix the positioning?
Is there a tutorial on sucker fish menus that actually work in IE.. All the ones I have found tend to be broken in someway. I know I should be reading up on how to do css in general but i just need to finish this site real quick.
Thanks a Bunch,
Carlos
|
|
|
|
|
06-24-2008, 08:21 PM
|
Re: Nav bar Works in Firefox but not in IE
|
Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
Sucker fish should work in IE. I've used it on several sites myself. What usually throws things off a little with submenus is that IE and FF is:
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}
Each treats the positioning of left: auto a little differently. I usually have to tweak things a bit moving things one way or another a few px so they line up where I want.
Have you used conditional comments before? The easiest way to style things differently for FF and IE is to use conditional comments and create a separate stylesheet for the few IE specific styles you need to set up? |
|
|
|
|
06-25-2008, 12:54 PM
|
Re: Nav bar Works in Firefox but not in IE
|
Posts: 10
Name: Los
Location: St. Louis, MO.
|
First I want to thank the both of you for the help you have given me. It has help and I now have my menu working in IE7 and Firefox. But why is my menu off in lala land in IE6? I still dont get the float thing but I will get there eventually. oh in firefox the bottom looks strange for some reason too.
Any suggested changes to make this thing work? in IE6 and
http://www.carlosrapa.com/stljewelco/
I have combined the menu css with the the main(custom) css . below i have the index.html listed and custom.css listed
custom.css
HTML Code:
@charset "utf-8";
/* CSS Document */
body {
text-align: center;
margin-top: 17px;
margin-bottom: 15px;
background-color: #858B9B;
}
.table0 {
background-color: #FFFFFF;
width: 764px;
}
.table1 {
background-color: #FFFFFF;
}
#c_name {
background-image: url("images/foto1.jpg");
vertical-align: top;
padding-top: 0px;
padding-right: 0px;
width: 763px;
background-repeat: no-repeat;/*height: 1px;*/
}
.c_name P {
font-style: italic;
margin-top: 0px;
margin-bottom: 0px;
}
#t1_menu_l {
background-image: url("images/t1_menu_l.gif");
background-repeat: repeat-y;
vertical-align: top;
width: 2px;
height: 21px;
}
#t1_menu {
background-color: #003D59;
background-repeat: no-repeat;
vertical-align: middle;
width: 763px;
height: 0px;
}
.hmains {
color: #FFFFFF;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.hmains P {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
.hmains a {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
}
.hmains a:hover {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 11px;
}
.hmains_pic {
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
}
#t1_menu_r {
background-image: url("images/t1_menu_r.gif");
background-repeat: repeat-y;
vertical-align: top;
width: 2px;
height: 21px;
}
#t2_menu {
background-image: url("images/foto2.jpg");
background-repeat: no-repeat;
vertical-align: middle;
width: 491px;
height: 21px;
padding-left: 136px;
padding-right: 136px;
}
.hsubs {
color: #003D59;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.hsubs P {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
.hsubs a {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #003D59;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
}
.hsubs a:hover {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #003D59;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 10px;
}
.hsubs_pic {
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
}
#gray_line {
background-image: url("images/gray_line.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 763px;
height: 10px;
}
#foot_l {
background-image: url("images/foot_l.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 2px;
height: 23px;
}
#copyright {
background-image: url("images/foot_line.gif");
background-repeat: repeat-x;
vertical-align: middle width: 759px;
height: 23px;
}
.copyright {
color: #FFFFFF;
text-align: right;
padding-right: 10px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.copyright2 {
color: #FFFFFF;
text-align: left;
padding-left: 10px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.copyright P {
text-align: right;
margin-top: 0px;
margin-bottom: 0px;
}
#foot_r {
background-image: url("images/foot_r.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 2px;
height: 23px;
}
#welcome {
background-image: url("images/foto33.jpg");
background-repeat: no-repeat;
vertical-align: top;
padding-top: 16px;
padding-left: 66px;
padding-right: 90px;
padding-bottom: 10px;
width: 338px;
height: 236px;
}
#welcomesub {
background-image: url("images/foto33.jpg");
background-repeat: no-repeat;
vertical-align: top;
padding-top: 16px;
padding-left: 66px;
padding-right: 90px;
padding-bottom: 10px;
width: 607px;
height: 236px;
}
.welcome {
text-align: left;
color: #000000;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.welcome H1 {
color: #003D59;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
margin-top: 28px;
margin-bottom: 28px;
}
.welcome P {
margin-top: 2px;
margin-bottom: 2px;
line-height: 16px;
}
#box1_top {
background-image: url("images/box1_top.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 269px;
height: 4px;
}
#box1 {
background-color: #ECEFF6;
width: 269px;
}
#box1_pole {
background-image: url("images/box1_vl.gif");
background-repeat: repeat-y;
vertical-align: top;
padding-top: 0px;
padding-left: 18px;
padding-right: 18px;
padding-bottom: 10px;
width: 101px;
}
.special {
text-align: left;
color: #B61C1C;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.special H1 {
color: #003D59;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 12px;
margin-bottom: 15px;
}
.special H2 {
color: #003D59;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: 0px;
margin-bottom: 15px;
}
.special P {
margin-top: 0px;
margin-bottom: 2px;
line-height: 16px;
}
#box1_hl1 {
vertical-align: top;
width: 129px;
height: 8px;
}
#box1_r_top {
background-image: url("images/box1_r_top.gif");
background-repeat: no-repeat;
width: 129px;
height: 2px;
}
#box1_l {
background-image: url("images/box1_l.gif");
background-repeat: repeat-y;
width: 2px;
height: 109px;
}
#box1_foto {
background-image: url("images/foto4.jpg");
background-repeat: no-repeat;
vertical-align: top;
width: 119px;
height: 109px;
}
#box1_r {
background-image: url("images/box1_r.gif");
background-repeat: repeat-y;
vertical-align: top;
width: 8px;
height: 109px;
}
#box1_r_bottom {
background-image: url("images/box1_r_bottom.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 129px;
}
#box1_rb {
background-image: url("images/box1_rb.gif");
background-repeat: repeat-y;
vertical-align: top;
width: 3px;
}
#box1_middle {
background-image: url("images/box1_middle.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 269px;
height: 4px;
}
#box2 {
background-color: #F3F6FD;
width: 269px;
}
#box2_pole {
background-image: url("images/box2_vl.gif");
background-repeat: repeat-y;
vertical-align: top;
padding-top: 0px;
padding-left: 18px;
padding-right: 1px;
padding-bottom: 10px;
width: 118px;
}
.products {
text-align: left;
color: #000000;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.products H1 {
color: #003D59;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 10px;
margin-bottom: 22px;
}
.products H2 {
color: #003D59;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 0px;
margin-bottom: 2px;
}
.products P {
margin-top: 0px;
margin-bottom: 2px;
line-height: 16px;
}
#box2_foto {
background-image: url("images/foto5.jpg");
background-repeat: no-repeat;
vertical-align: top;
width: 129px;
}
#box2_rb {
background-image: url("images/box2_rb.gif");
background-repeat: repeat-y;
vertical-align: top;
width: 3px;
}
#box2_bottom {
background-image: url("images/box2_bottom.gif");
background-repeat: no-repeat;
vertical-align: top;
width: 269px;
height: 2px;
}
#nav1 {
margin-top:20px;
}
#nav {
margin:0;
margin-left: 2px;
padding: 0;
list-style: none;
/* position: 50px;*/
top: inherit;
left: 0;
z-index:900;
}
#nav a {
display: block;
width: 150px;
}
#nav li {
float: left;
width: 150px;
position:relative;
height:20px;
border: 1px solid #ccc;
background-color:#003D59;
}
#nav li a {
text-decoration:none;
color:#fff;
}
#nav li ul {
margin:0;
padding:0;
position: absolute;
width: 150px;
left: -1700px;
top: 1.2em;
z-index:900;
}
#nav li li {
background-color:#003D59;
color:#fff;
}
#nav li li a {
text-decoration:none;
color:#fff;
}
#nav li:hover ul, #nav li.sfh ul {
left: 100;
}
#nav li ul ul {
list-style: none;
margin: -1.2em 0 0 9.4em;
padding: 0;
border-top: 3px solid #000;
z-index:900;
}
#nav li:hover ul ul, #nav li.sfh ul ul {
left: -100em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfh ul, #nav li li.sfh ul {
left: 0;
}
* html #nav {
position:absolute;
}
index.html
HTML 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=iso-8859-1">
<title>The St. Louis Jewelry Company</title>
<script type="text/javascript" src="sfmenu.js">
</script>
<link href="custom.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {
font-size: 90%
}
-->
</style>
<body>
<table align="center" cellpadding="0" cellspacing="0" class="table0">
<tr>
<td id="c_name" height="137"></td>
</tr>
<td><ul id="nav">
<li><a href="#">Home</a>
<ul>
</ul>
</li>
<li><a href="products.html">Jewelry Products</a>
<ul>
<li>Bridal
<ul>
<li><a href="#">Engagement Rings</a></li>
<li><a href="#">Wedding Bands</a></li>
<li><a href="#">Wedding Sets</a></li>
</ul>
</li>
<li>Fraternal
<ul>
<li><a href="#">Blue Lodge</a></li>
<li><a href="#">Eastern Star</a></li>
<li><a href="#">Past Master</a></li>
<li><a href="#">Scottish Rite</a></li>
<li><a href="#">Shrine</a></li>
<li><a href="#">Other Fraternals</a></li>
</ul>
</li>
<li>Ladies
<ul>
<li><a href="#">Antique & Filigree</a></li>
<li><a href="#">Cameo & Onyx</a></li>
<li><a href="#">Remounts & Cocktail Rings</a></li>
<li><a href="#">Pendants & Earings</a></li>
</ul>
</li>
<li>Mens Rings
<ul>
<li><a href="#">Diamond Rings</a></li>
<li><a href="#">Initial Rings</a></li>
<li><a href="#">Stone Rings</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="careers.html">Careers</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
<div id="nav1"></div></td>
</tr>
<tr>
<td><table class="table0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="welcome" class="welcome"><H1 class="welcome"> Welcome to St. Louis Jewelry Company</H1>
<P>The St. Louis Jewelry Company is a complete manufacturer of fine gold, silver and platinum jewelry consisting of Masonic Rings and other Fraternal Rings as well as a complete line of wedding rings, bridal jewelry, anniversary bands, ladies diamond rings, diamond right hand rings, 3 stone rings, both ladies and mens cameo rings, onyx diamond rings, pendants and much more. We are also the largest brick & mortar retailer of Gothic Fraternal Rings including Gothic Masonic Rings, Gothic Past Master Rings, Gothic Scottich Rite Rings, Gothic Shriners Rings, Gothic Knights Templar Rings, Gothic Knights of Columbus Rings, Gothic Elk or BPOE Rings and Gothic Eastern Star Rings. </P>
<P> </P>
<P> </P>
<P> </P></td>
<td valign="top"><table align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td id="box1_top"></td>
</tr>
<tr>
<td id="box1" valign="top"><table align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td id="box1_pole" class="special"><H1> Special Offer </H1>
<H2>Fraternals Past Master Ring</H2>
<P> now only <br>
<b style="font-size:16px;"> $465 </b> </P></td>
<td valign="top"><table align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="3" id="box1_hl1"></td>
</tr>
<tr>
<td colspan="3" id="box1_r_top"></td>
</tr>
<tr>
<td id="box1_l"></td>
<td id="box1_foto"></td>
<td id="box1_r"></td>
</tr>
<tr>
<td colspan="3" id="box1_r_bottom"></td>
</table></td>
<td id="box1_rb"></td>
</tr>
</table></td>
</tr>
<tr>
<td id="box1_middle"></td>
</tr>
<tr>
<td id="box2" valign="top"><table align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td id="box2_pole" class="products"><H1> New Products </H1>
<H2> Diamond Pendant </H2>
<P> 14KT tutone love-knot diamond pendant with a 5 pt total diamond weight </P></td>
<td id="box2_foto"></td>
<td id="box2_rb"></td>
</tr>
</table></td>
</tr>
<tr>
<td id="box2_bottom"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td id="gray_line"></td>
</tr>
<tr>
<td><table class="table1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="2" id="foot_l"></td>
<td width="382" class="copyright2" id="copyright">
<P>Phone: (877) 539 - 9586</P>
</td>
<td width="382" class="copyright" id="copyright">
<P>Email: info@stljewelco.com</P>
</td>
<td width="270" id="foot_r"></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
|
|
|
|
|
06-25-2008, 09:29 PM
|
Re: Nav bar Works in Firefox but not in IE
|
Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
I'm not 100% sure, but I think if you add:
position: relative
to .table0 in your css the menu will line back up in IE6.
It's a bit of a guess, and it's not necessarily the best way to fix things, but I think it will work while still working in FF and IE7.
|
|
|
|
|
06-26-2008, 01:53 AM
|
Re: Nav bar Works in Firefox but not in IE
|
Posts: 10
Name: Los
Location: St. Louis, MO.
|
Quote:
Originally Posted by vangogh
I'm not 100% sure, but I think if you add:
position: relative
to .table0 in your css the menu will line back up in IE6.
It's a bit of a guess, and it's not necessarily the best way to fix things, but I think it will work while still working in FF and IE7.
|
I wish it was that simple... it stopped working in IE7. I didnt even bother trying to see if it worked in IE6.
I was told by someone that my biggest problem is that I have tables on my page. Is there another way to design this without the tables? |
|
|
|
|
06-26-2008, 10:58 AM
|
Re: Nav bar Works in Firefox but not in IE
|
Posts: 3,985
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
Yes, you will need to study. It takes perhaps a bit more effort to learn to design without tables, but once you get the hang of it, you will find the overall task of creating layouts is much easier and faster. You will also find that you will be able to accomplish more without using tables. Here is an article that may help you to get started:
http://www.alistapart.com/articles/journey
Although the above article is all the way from 2001 (theory, and browsers, have advanced much since then), it contains many of the core concepts that we still use today. It also discusses many of the reasons that tables are inferior for making layouts.
***EDIT***
I just finished reading the above article myself. It ends like this:
Quote:
|
Of course, if you choose not to learn about CSS and other web standards, MacDonald’s restaurants are said to have an excellent management training program.
|
lol
Last edited by wayfarer07; 06-26-2008 at 11:09 AM..
|
|
|
|
|
06-26-2008, 06:07 PM
|
Re: Nav bar Works in Firefox but not in IE
|
Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
Funny end to the article.
Carlos it would definitely be better to use css to layout the site instead of tables, but Abel is right it will take a little time to get the hang of it. The syntax of css is pretty easy to understand and no more complicated than html.
The trick is when it comes time to drop the tables from the layout you have to train your mind to think a little differently. It's not hard, but it takes a little practice.
Many of us here will be happy to help you down the path to css layouts and offer assistance along the way.
|
|
|
|
|
06-28-2008, 12:13 PM
|
Re: Nav bar Works in Firefox but not in IE
|
Posts: 3,985
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
|
|
|
|
|
« Reply to Nav bar Works in Firefox but not in IE
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
