Hey!
I am working on getting my navigation for our new site and everything works fine on IE, but when i uploaded it and tried it on Firefox and Netscape all heck broke lose with my side nav. Any suggestions? Here is the link to the place where the page is uploaded, and below is the css code
<!-- m --><a class="postlink" href="http://www.3bsoftware.com/a/index.asp">http://www.3bsoftware.com/a/index.asp</a><!-- m -->
.topheader{
/* Top Header */
background-color:#CBCBD4;
border-bottom:1px solid #666666;
}
.bottomheader{
/* Bottom Header */
background-color:#CBCBD4;
border-top:1px solid #666666;
border-bottom:1px solid #666666;
}
/* Border Instructions */
.border{border:1px solid #666666}
.topborder{border-top:1px solid #666666}
.leftborder{border-left:1px solid #666666;}
.middleborder{
border-left:1px solid #666666;
border-top:1px solid #666666;
}
table{border-collapse:collapse}
ul.nav{
/* List Command */
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a.topnav{
/* Top Nav Specifications */
float:left;
width:9em;
text-decoration:none;
font-family:Arial;
text-align:center;
color:#000000;
font-size:11px;
border-right:1px solid #000000;
background-color:white;
padding:0.2em 0.6em 0.2em 0.6em;
}
a.topnav:hover{background-color:#CBCBD4}
li.topnav{
display:inline;
}
a.sidenav{
/* Side Nav Specifications */
float:left;
width:11em;
text-decoration:none;
color:#000000;
font:11px/.93 Arial;
margin-left:3px;
padding:2px 4px 4px 8px;
background-color:white;
border-right:1px solid #FFFFFF;
}
a.sidenav:hover {
width:125px;
background-color:#CBCBD4;
}
/* li {display:inline} */
a.bottomnav{
/* Top Nav Specifications */
float:center;
text-decoration:none;
font-family:Arial;
text-align:center;
color:#050C96;
font-size:11px;
background-color:CBCBD4;
padding:0.2em 0.6em 0.2em 0.6em;
}
a.bottomnav:hover{color:#990000}
li.bottomnav{display:inline;}
h1{
/* Header Font */
font-family:Arial;
font-size:20px;
font-weight:bold;
color:#000000;
text-align:center;
}
h2{
/* Column Headings Font for the Side Nav */
font-family:Arial;
margin: 0px 0px 5px 3px;
font-size:12px;
font-weight:bold;
text-align:left;
color:#000000;
}
.prodname{
/* Product Bi-Line*/
font-family:Arial;
font-size:12px;
text-align:left;
font-weight:bold;
color:#050C96;
}
.prodbi{
/* Product Bi-Line*/
font-family:Arial;
font-size:11px;
text-align:left;
font-weight:bold;
color:#000000;
}
.newshead{
/* News Annoucements */
font-family:Arial;
font-size:12px;
text-align:center;
font-weight:bold;
color:#666666;
}
.newsinfo{
/* News Annoucements Info*/
font-family:Arial;
font-size:11px;
text-align:left;
color:#666666;
}
.newsitems{
/* News Annoucements */
font-family:Arial;
font-size:11px;
text-align:left;
color:#666666;
}
a.newsitems{
/* News Annoucements */
text-decoration:none;
font-family:Arial;
font-size:11px;
text-align:left;
color:#050C96;
}
a.newsitems:hover{color:#990000}
.copyright{
/* Copy Right Font */
font-family:Arial;
font-size:10px;
text-align:center;
color:#666666;
}
.flright{float:right;}
.backtopleft{
border-left:1px dotted #666666;
border-top:1px dotted #666666;
}
.backbottomleft{
border-left:1px dotted #666666;
border-bottom:1px dotted #666666;
}
.backtopright{
border-right:1px dotted #666666;
border-top:1px dotted #666666;
}
.backbottomright{
border-right:1px dotted #666666;
border-bottom:1px dotted #666666;
}
Plus i noticed that the lines, when they intersect from the side nav to the top. The top has a few pixels to the left so they dont match up evenly as seen here
<!-- m --><a class="postlink" href="http://www.3bsoftware.com/a/images/noalign.gifI">http://www.3bsoftware.com/a/images/noalign.gifI</a><!-- m --> got that issued fixed i wasn't putting in the doc type which was this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
"//W3C//DTD HTML 4.0 Transitional//EN" >
and once it is in there it works fine......
now my tables are cuasing me gried
If you look at that page in IE (6.0 or 7.0)
<!-- m --><a class="postlink" href="http://www.3bsoftware.com/a/index_new.asp">http://www.3bsoftware.com/a/index_new.asp</a><!-- m -->
It looks fine, yet if you look at it in firefox or netscape there are huge gapping issues in the rows. Any ideas?
I am working on getting my navigation for our new site and everything works fine on IE, but when i uploaded it and tried it on Firefox and Netscape all heck broke lose with my side nav. Any suggestions? Here is the link to the place where the page is uploaded, and below is the css code
<!-- m --><a class="postlink" href="http://www.3bsoftware.com/a/index.asp">http://www.3bsoftware.com/a/index.asp</a><!-- m -->
.topheader{
/* Top Header */
background-color:#CBCBD4;
border-bottom:1px solid #666666;
}
.bottomheader{
/* Bottom Header */
background-color:#CBCBD4;
border-top:1px solid #666666;
border-bottom:1px solid #666666;
}
/* Border Instructions */
.border{border:1px solid #666666}
.topborder{border-top:1px solid #666666}
.leftborder{border-left:1px solid #666666;}
.middleborder{
border-left:1px solid #666666;
border-top:1px solid #666666;
}
table{border-collapse:collapse}
ul.nav{
/* List Command */
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a.topnav{
/* Top Nav Specifications */
float:left;
width:9em;
text-decoration:none;
font-family:Arial;
text-align:center;
color:#000000;
font-size:11px;
border-right:1px solid #000000;
background-color:white;
padding:0.2em 0.6em 0.2em 0.6em;
}
a.topnav:hover{background-color:#CBCBD4}
li.topnav{
display:inline;
}
a.sidenav{
/* Side Nav Specifications */
float:left;
width:11em;
text-decoration:none;
color:#000000;
font:11px/.93 Arial;
margin-left:3px;
padding:2px 4px 4px 8px;
background-color:white;
border-right:1px solid #FFFFFF;
}
a.sidenav:hover {
width:125px;
background-color:#CBCBD4;
}
/* li {display:inline} */
a.bottomnav{
/* Top Nav Specifications */
float:center;
text-decoration:none;
font-family:Arial;
text-align:center;
color:#050C96;
font-size:11px;
background-color:CBCBD4;
padding:0.2em 0.6em 0.2em 0.6em;
}
a.bottomnav:hover{color:#990000}
li.bottomnav{display:inline;}
h1{
/* Header Font */
font-family:Arial;
font-size:20px;
font-weight:bold;
color:#000000;
text-align:center;
}
h2{
/* Column Headings Font for the Side Nav */
font-family:Arial;
margin: 0px 0px 5px 3px;
font-size:12px;
font-weight:bold;
text-align:left;
color:#000000;
}
.prodname{
/* Product Bi-Line*/
font-family:Arial;
font-size:12px;
text-align:left;
font-weight:bold;
color:#050C96;
}
.prodbi{
/* Product Bi-Line*/
font-family:Arial;
font-size:11px;
text-align:left;
font-weight:bold;
color:#000000;
}
.newshead{
/* News Annoucements */
font-family:Arial;
font-size:12px;
text-align:center;
font-weight:bold;
color:#666666;
}
.newsinfo{
/* News Annoucements Info*/
font-family:Arial;
font-size:11px;
text-align:left;
color:#666666;
}
.newsitems{
/* News Annoucements */
font-family:Arial;
font-size:11px;
text-align:left;
color:#666666;
}
a.newsitems{
/* News Annoucements */
text-decoration:none;
font-family:Arial;
font-size:11px;
text-align:left;
color:#050C96;
}
a.newsitems:hover{color:#990000}
.copyright{
/* Copy Right Font */
font-family:Arial;
font-size:10px;
text-align:center;
color:#666666;
}
.flright{float:right;}
.backtopleft{
border-left:1px dotted #666666;
border-top:1px dotted #666666;
}
.backbottomleft{
border-left:1px dotted #666666;
border-bottom:1px dotted #666666;
}
.backtopright{
border-right:1px dotted #666666;
border-top:1px dotted #666666;
}
.backbottomright{
border-right:1px dotted #666666;
border-bottom:1px dotted #666666;
}
Plus i noticed that the lines, when they intersect from the side nav to the top. The top has a few pixels to the left so they dont match up evenly as seen here
<!-- m --><a class="postlink" href="http://www.3bsoftware.com/a/images/noalign.gifI">http://www.3bsoftware.com/a/images/noalign.gifI</a><!-- m --> got that issued fixed i wasn't putting in the doc type which was this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
"//W3C//DTD HTML 4.0 Transitional//EN" >
and once it is in there it works fine......
now my tables are cuasing me gried
If you look at that page in IE (6.0 or 7.0)
<!-- m --><a class="postlink" href="http://www.3bsoftware.com/a/index_new.asp">http://www.3bsoftware.com/a/index_new.asp</a><!-- m -->
It looks fine, yet if you look at it in firefox or netscape there are huge gapping issues in the rows. Any ideas?