Forum Moderators: open

Message Too Old, No Replies

Firefox and Opera Problems - weird lines in Nav Bar

Dreamweaver CS3 CSS Navigation Bar - unwanted lines

         

danadesigns

3:47 am on Jul 7, 2008 (gmt 0)

10+ Year Member



I did not design this site but am trying to fix a problem that someone else created. The navigation bar is having problems displaying properly in Firefox and Opera. I'm getting funny lines that are vertical over the word "about us" and also the "home" box is not in line with the rest of the boxes on Firefox.

Here is the html code:

<DIV class="Object4702">
<div id="vdividermenu">
<div class="ObjectMenu">
<ul>
<li><a href="index.html" class="ObjectMenu" >Home</a></li>
<li><a href="aboutus.html" >About Us</a></li>
<li><a href="portfolio01.html" >Portfolio 1</a></li>
<li><a href="portfolio02.html" >Portfolio 2</a></li>
<li><a href="contact.html" >Contact Info</a></li>
<li><a href="links.html" >Links</a> </li>
</ul>
</div>
</div>
</html>

Here is the CSS page that is referenced:

.textstyle0 {
font-family:Mistral;
font-weight:normal;
font-style:normal;
font-size:8pt;
text-decoration:normal;
color:#000000;
}
.textstyle1{
font-family:Arial;
font-weight:normal;
font-style:normal;
font-size:8pt;
text-decoration:normal;
color:#000000;
}
.textstyle2 {
font-family:Arial;
font-weight:bold;
font-style:normal;
font-size:8pt;
text-decoration:normal;
color:#000000;
}

DIV.Object3911 { position:absolute; top:0px; left:38px; z-index:0; }
DIV.Object3912 { position:absolute; top:0px; left:160px; z-index:1; }
DIV.Object3913 { position:absolute; top:0px; left:70px; z-index:2; }
DIV.Object3914 { position:absolute; top:0px; left:0px; z-index:3; }
DIV.Object3915 { position:absolute; top:0px; left:61px; z-index:4; }
DIV.Object3916 { position:absolute; top:319px; left:656px; z-index:5; }
DIV.Object3917 { position:absolute; top:173px; left:14px; z-index:6; }
DIV.Object3918 { position:absolute; top:142px; left:29px; z-index:7; }
DIV.Object3919 { position:absolute; top:113px; left:84px; z-index:8; }
DIV.Object3920 { position:absolute; top:120px; left:61px; z-index:9; }
DIV.Object3921 { position:absolute; top:95px; left:545px; z-index:10; }
DIV.Object3922 { position:absolute; top:106px; left:557px; z-index:11; }
DIV.Object3923 { position:absolute; top:145px; left:290px; z-index:12; }
DIV.Object3924 { position:absolute; top:63px; left:32px; z-index:13; }
DIV.Object3925 { position:absolute; top:63px; left:147px; z-index:14; }
DIV.Object3926 { position:absolute; top:63px; left:262px; z-index:15; }
DIV.Object3927 { position:absolute; top:63px; left:377px; z-index:16; }
DIV.Object3928 { position:absolute; top:63px; left:492px; z-index:17; }
DIV.Object3929 { position:absolute; top:63px; left:607px; z-index:18; }
DIV.Object3930 { position:absolute; top:322px; left:32px; z-index:19; }
DIV.Object3931 { position:absolute; top:486px; left:32px; z-index:20; }
DIV.Object3932 { position:absolute; top:322px; left:519px; z-index:21; }
DIV.Object3933 { position:absolute; top:221px; left:100px; z-index:22; }
DIV.Object3934 { position:absolute; top:355px; left:57px; z-index:23; }
DIV.Object3935 { position:absolute; top:516px; left:106px; z-index:24; }
DIV.Object3936 { position:absolute; top:363px; left:551px; z-index:25; }
DIV.Object4694 { position:absolute; top:95px; left:15px; z-index:1; }
DIV.Object4695 { position:absolute; top:130px; left:30px; z-index:0; }
DIV.Object4696 { position:absolute; top:101px; left:85px; z-index:2; }
DIV.Object4697 { position:absolute; top:104px; left:67px; z-index:3; }
DIV.Object4698 { position:absolute; top:0px; left:38px; z-index:4; }
DIV.Object1932 { position:absolute; top:494px; left:609px; z-index:21; }
DIV.Object4699 { position:absolute; top:0px; left:160px; z-index:5; }
DIV.Object4700 { position:absolute; top:0px; left:70px; z-index:6; }
DIV.Object4701 { position:absolute; top:0px; left:0px; z-index:7; }
DIV.ObjectMenu {
position:absolute;
top:74px;
left:47px;
z-index:25;
width: 802px;
height: 154px;
}
DIV.Object4703 { position:absolute; top:0px; left:61px; z-index:9; }
DIV.Object4704 { position:absolute; top:140px; left:201px; z-index:10; }
DIV.Object4705 { position:absolute; top:483px; left:296px; z-index:11; }
DIV.Object4706 { position:absolute; top:570px; left:36px; z-index:12; }
DIV.Object4707 { position:absolute; top:95px; left:545px; z-index:13; }
DIV.Object4708 { position:absolute; top:106px; left:557px; z-index:14; }
DIV.Object4709 { position:absolute; top:482px; left:36px; z-index:15; }
DIV.Object4710 { position:absolute; top:63px; left:147px; z-index:16; }
DIV.Object4711 { position:absolute; top:63px; left:262px; z-index:17; }
DIV.Object4712 { position:absolute; top:63px; left:377px; z-index:18; }
DIV.Object4713 { position:absolute; top:63px; left:492px; z-index:19; }
DIV.Object4714 { position:absolute; top:63px; left:607px; z-index:20; }
DIV.Object4715 { position:absolute; top:576px; left:229px; z-index:21; }
DIV.Object4716 { position:absolute; top:239px; left:71px; z-index:22; }
DIV.Object4717 {
position:absolute;
top:482px;
left:99px;
z-index:23;
width: 190px;
height: 80px;

}
DIV.Object1931 { position:absolute; top:483px; left:684px; width 125px; z-index:20; }

#vdividermenu ul{
margin: 0;
padding: 0;
float: left;
font-family:Arial, Helvetica, sans-serif;
font-size : 7pt;
width: 100%;
}

* html #vdividermenu ul{ /*IE only rule, reduce menu width*/
width: 100%;
}

#vdividermenu ul li{
display: inline;
margin : 10px;
background-color : White;
color : #999999;
border-right:1px solid gray;
border-left:1px solid gray;
border-bottom:1px solid gray;
border-top:1px solid gray;

}

#vdividermenu ul li a{
margin : 10px;
width: 88px;
float: left;
color: #999999;
padding: 2px 6px;
text-decoration: none;
background:white;
border-right:1px solid gray;
border-left:1px solid gray;
border-bottom:1px solid gray;
border-top:1px solid gray;
text-align: center;
}

#vdividermenu ul li a:visited{
color: #999999;
background: white;
border-right:1px solid gray;
border-left:1px solid gray;
border-bottom:1px solid gray;
border-top:1px solid gray;
}

#vdividermenu ul li a:hover{
color: White;
background-color: Purple;
border-right:1px solid gray;
border-left:1px solid gray;
border-bottom:1px solid gray;
border-top:1px solid gray;
}


ul.menu
{
float: none;
width:100%;
padding:0;
margin:0;
list-style-type: none;
display: inline;
text-align : left;
}
a.menu
{
float: none;

text-decoration:none;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size : xx-small;
color:Gray;
background-color:white;
padding: 0.6em;
margin:10px;
border-right:1px solid gray;
border-left:1px solid gray;
border-bottom:1px solid gray;
border-top:1px solid gray;
}
a.menu:hover {
background-color:purple;
color:White;
}
a.menu:visited {
color:gray;
background-color: White;
}

a.menu:active {
background-color:purple;
color:White;
}

li.menu {
list-style: none;
}

Any ideas why I'm getting these weird lines?