Can C it in DW preview but not in IE

[csa]

If you go to http://www.screensuk.co.uk/JB/
in FireFox you should be able to see 3 rollover box links at the bottom of the page. I have copied the script from the top navigation and then altered the name so I could use it again below.

In DW I can preview the page and see the box links in IE, but if I upload the pages and view in IE I can't see the style.

Any ideas what I've done wrong? Thanks

Code: Select all

/* CSS Document */
body{
background-color: #000000;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
background-image:url(images/film.gif);
background-repeat:repeat-y;
}
#container{
width: 760px;
border: solid black 0px; 
position: relative;
left: 50%;
margin-left: -380px;
}
#toplogo{
width: 290px;
height: 116px;
position: relative;
margin-left: 30%;
}
#link{
width: 760px;
height: 30px;
}
#bodytext{
width: 685px;
margin-left: 5%;
padding-top: 20px;
}
h1{
font-size:12px;
font-weight:bold;
}
h2{
font-size:12px;
font-weight:normal;
}
h3{
font-size:10px;
font-weight:normal;
color:#999999;
}
#footer{
width: 760px;
text-align:center;
padding-top:10px;
}
.bottomlinks{
font-size:10px;
font-weight:normal;
color:#999999;
}
a.bottomlinks{
text-decoration:none;
color:#999999;
font-weight:normal;
}
a.bottomlinks:hover{
color:#999999;
text-decoration:underline;
font-weight:normal;
}
/*nav*/
#navlist
{
border-bottom: 1px solid #FF0000;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}
#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist a:link, #navlist a:visited
{
background: #000000;
border: 1px solid #FF0000;
color: #fff;
float: left;
font-size: small;
font-weight: bold;
line-height: 14px;
margin-right: 8px;
padding: 2px 5px 2px 10px;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
}
#navlist a:link#current, #navlist a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist a:hover { color: #f00; }
body.section-1 #navlist li#nav-1 a, 
body.section-2 #navlist li#nav-2 a,
body.section-3 #navlist li#nav-3 a,
body.section-4 #navlist li#nav-4 a
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist #subnav-1,
#navlist #subnav-2,
#navlist #subnav-3,
#navlist #subnav-4
{
display: none;
width: 90%;
}
body.section-1 #navlist ul#subnav-1, 
body.section-2 #navlist ul#subnav-2,
body.section-3 #navlist ul#subnav-3,
body.section-4 #navlist ul#subnav-4
{
display: inline;
left: 10px;
position: absolute;
top: 95px;
}
body.section-1 #navlist ul#subnav-1 a, 
body.section-2 #navlist ul#subnav-2 a,
body.section-3 #navlist ul#subnav-3 a,
body.section-4 #navlist ul#subnav-4 a
{
background: #fff;
border: none;
border-left: 1px solid #ccc;
color: #fff;
font-size: smaller;
font-weight: bold;
line-height: 10px;
margin-right: 4px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist ul a:hover { color: #f00 !important; }
#contents
{
background: #fff;
border: 1px solid #fff;
border-top: none;
clear: both;
margin: 0px;
padding: 15px;
} 
.bodylinks{
color:#FF0000;
}
/*end of nav*/
#spec{
width: 760px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin-left: 18px;
}
#topimage{
width:auto;
}
/*nav bottom links*/
#navlist2
{
border-bottom: 1px solid #FF0000;
margin: 0;
padding-bottom: 19px;
padding-left: 280px;
}
#navlist2 ul, #navlist2 li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist2 a:link, #navlist a:visited
{
background: #000000;
border: 1px solid #FF0000;
color: #fff;
float: left;
font-size: 11px;
font-weight: bold;
line-height: 14px;
margin-right: 8px;
padding: 2px 5px 2px 10px;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
}
#navlist2 a:link#current, #navlist2 a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist2 a:hover { color: #f00; }
body.section-1 #navlist2 li#nav-1 a, 
body.section-2 #navlist2 li#nav-2 a,
body.section-3 #navlist2 li#nav-3 a,
body.section-4 #navlist2 li#nav-4 a
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist2 #subnav-1,
#navlist2 #subnav-2,
#navlist2 #subnav-3,
#navlist2 #subnav-4
{
display: none;
width: 90%;
}
body.section-1 #navlist2 ul#subnav-1, 
body.section-2 #navlist2 ul#subnav-2,
body.section-3 #navlist2 ul#subnav-3,
body.section-4 #navlist2 ul#subnav-4
{
display: inline;
left: 10px;
position: absolute;
top: 95px;
}
body.section-1 #navlist2 ul#subnav-1 a, 
body.section-2 #navlist2 ul#subnav-2 a,
body.section-3 #navlist2 ul#subnav-3 a,
body.section-4 #navlist2 ul#subnav-4 a
{
background: #fff;
border: none;
border-left: 1px solid #ccc;
color: #fff;
font-size: 11px;
font-weight: bold;
line-height: 10px;
margin-right: 4px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist2 ul a:hover { color: #f00 !important; }
#contents2
{
background: #fff;
border: 1px solid #fff;
border-top: none;
clear: both;
margin: 0px;
padding: 15px;
} 
.bodylinks2{
color:#FF0000;
}
/*end of nav*/

[benbramz]

i see it in both firebox and IE...

[masonbarge]

I see them in both browsers.

I get a messed-up looking top nav in IE, and no bottom border. In FF, I see a bottom red border but it runs a couple of pixels into the bottom boxes. Actually the same thing in the top nav, i.e. bottom border is too high.

[csa]

errm, strange I've just looked on my computer at home and it looks fine in both browsers. Strange how this wasn't the case when I posted this on the forum last week. Even the client said he couldn't see the bottom red border boxes.

I don't know why masonbarge see's this a little differently, but I guess if I can now see it as it should be, that perhaps I'm okay to leave it how it is?

Thanks for looking.

[benbramz]

validate your code, correct any errors and then come back to us. that may lead to the problem.