Some links work, other's don't??

[csa]

I can't work out why sometimes the underline statement works on my navigation links, and other times it doesn't. Anyone have any ideas?

http://www.securiguard.uk.com/secg/

Code: Select all

/* CSS Document */
body{
background-color: #ffffff;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-top: 0px;
}
#container{
width: 760px;
border: solid black 0px; 
position: relative;
left: 50%;
margin-left: -380px;
}
#topnavigation{
width: 760px;
background-image:url(images/securiguardtop.gif);
height: 66px;
}
#topimage{
width: 760px;
height: 125px;
background-color:#FFFFFF;
}
#strapline{
width: 760px;
height: 24px;
background-color:#FFFFFF;
}
#bodyleft{
width: 268px;
height: 360px;
background-color:#D8D7E7;
float:left;
}
#bodyright{
width: 486px;
background-color:#FFFFFF;
float:right;
}
#bodylefttext{
width: 230px;
text-align:center;
font-size:12px;
margin-left: 20px;
padding-top: 10px;
}
h1{
font-size:11px;
font-weight:bold;
}
#bodyright1{
width: 295px;
background-color:#ffffff;
float:left;
}
#bodyright2{
width: 185px;
background-color:#FFFFFF;
float:right;
}
#navlist { 
list-style-image: url(images/bullet.gif);
margin-left: 20px;
line-height: 22px;
font-weight:bold;
}
#navcontainer{
width: 275px;
}
h2{
font-size:11px;
font-weight:bold;
color:#DF0031;
}
.homeproducttext{
font-size:11px;
font-weight:bold;
color:#DF0031;
}
.homeproductsmall{
font-size:10px;
}
.text{
height: 60px;
padding-left: 340px;
padding-top: 5px;
}
#text li
{
display: inline;
list-style-type: none;
color:#FFFF00;
padding-left:20px;
}
ul{
margin-left:0;
padding-left:0;
}
a:link {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #FFFF00;
 font-weight: bold;
 text-decoration: none;
}
a:hover {
 color:#FFFF00;
 font-weight: bold;
 text-decoration: underline;
}
a:active {
 color: #FFFF00;
 font-weight: bold;
 text-decoration: none;
}
a:visited {
 color: #FFFF00;
 font-weight: bold;
 text-decoration: none;
}

[darryladie]

Well I haved tried the link in Firefox and seems to work fine.

My guess would be that it is because of the default line-heights in different browsers. Try setting a line-height across all the browsers using CSS to create a slightly bigger gap between the nav and the contact details. This way you will be able to see the underline which is probably hidden underneath the address.

Nice design by the way

[csa]

Will have ago.

One thing I have noticed is that on the Security Shutter page, ALUMINIUM SHUTTERS there appears to be an ed. at the end of the paragraph. This isn't in the text so I don't know why it's repeating?? Help!

[darryladie]

It's not underlining now that I've looked at it again!

Have you changed something is that just what it is doing?

Also did you know that your markup is actually valid XHTML 1.0 rather than just HTML 4.01 - all you'd have to do is change the doctitle.

[csa]

I decided to be lazy and remove the underline altogether. Still getting to grips with CSS and this site has been a pain as it has had to look like the brochure despite my protests.

I checked it out in W3C and it's comes up as html 4.01 valid (except for the contact page!) I'm a bit confused with which level I should be designing at, but there are loads of errors. In FF I'm missing some of the top header text, there's that strange type error on the shutters page etc. etc. but without completely re-building it, I'm not sure how to do a quick fix. May have to come back to this when I gain some more experience, but if you do have any ideas about the ed problem on the shutters page that would be great.

This is the css for that page:

Code: Select all

/* CSS Document */
body{
background-color: #ffffff;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-top: 0px;
}
#container{
width: 760px;
border: solid black 0px; 
position: relative;
left: 50%;
margin-left: -380px;
}
#topnavigation{
width: 760px;
background-image:url(images/securiguardtop.gif);
height: 66px;
}
#topimage{
width: 760px;
height: 125px;
background-color:#FFFFFF;
}
#strapline{
width: 760px;
height: 24px;
background-color:#FFFFFF;
}
#bodyleft{
width: 268px;
height: 360px;
background-color:#D8D7E7;
float:left;
}
#bodyright{
width: 486px;
background-color:#FFFFFF;
float:right;
}
#bodylefttext{
width: 230px;
text-align:center;
font-size:12px;
margin-left: 20px;
padding-top: 10px;
}
h1{
font-size:11px;
font-weight:bold;
}
#bodyright1{
width: 295px;
background-color:#ffffff;
float:left;
}
#bodyright2{
width: 185px;
background-color:#FFFFFF;
float:right;
}
#navlist { 
list-style-image: url(images/bullet.gif);
margin-left: 20px;
line-height: 22px;
font-weight:bold;
}
#navcontainer{
width: 275px;
}
h2{
font-size:11px;
font-weight:bold;
color:#DF0031;
}
.homeproducttext{
font-size:11px;
font-weight:bold;
color:#DF0031;
}
.homeproductsmall{
font-size:10px;
}
.text{
height: 60px;
padding-left: 340px;
padding-top: 5px;
}
#text li
{
display:inline;
list-style-type: none;
color:#FFFF00;
padding-left:20px;
}
ul{
margin-left:0;
padding-left:0;
}
a:link {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #FFFF00;
 font-weight: bold;
 text-decoration: none;
}
a:hover {
 color:#FFFF00;
 font-weight: bold;
 text-decoration: none;
}
a:active {
 color: #FFFF00;
 font-weight: bold;
 text-decoration: none;
}
a:visited {
 color: #FFFF00;
 font-weight: bold;
 text-decoration: none;
}
#shutterstop{
width: 760px;
height:230px;
background-color:#FFFFFF;
}
#shutterstop2{
width: 760px;
height:200px;
background-color:#FFFFFF;
}
#shutter5{
width: 190px;
background-color:#FFFFFF;
float:right;
}
#shutter4{
width: 190px;
background-color:#FFFFFF;
float:right;
}
#shutter3{
width: 190px;
background-color:#FFFFFF;
float:right;
}
#shutter2{
width: 190px;
background-color:#FFFFFF;
float:right;
}
.shutterbox1{
width: 175px;
padding-left: 10px;
}
#shutter25{
width: 190px;
background-color:#FFFFFF;
float:right;
}
#shutter24{
width: 190px;
background-color:#FFFFFF;
float:right;
}
#shutter23{
width: 190px;
background-color:#FFFFFF;
float:right;
}
#shutter22{
width: 190px;
background-color:#FFFFFF;
float:right;
}
#shutterbox21{
width: 175px;
padding-left: 10px;
}
.shutterheader{
font-size:11px;
font-weight:bold;
color:#173367;
}
.shutterbodytext{
font-size:11px;
color:#000000;
}

[darryladie]

The problem with the added "ed." on the shutter page is a known bug with IE.

Check out this post: http://www.webforumz.com/css-forum/5...ting-words.htm

[csa]

Thanks for the link DarryLadie, for once this isn't something I've done!! I now have this fixed.