5 replies [Last post]
chistosa
Offline
newbie
Last seen: 12 years 32 weeks ago
Joined: 2007-11-10
Posts: 6
Points: 0

Hi

Can anyone see why the "language" links don't function on this page?
http://www.ravensleach.com/ambiente-independiente/design-3.htm

They're not meant to go anywhere yet, but they just don't appear as links in Firefox (they do in IE).

I think (because if I put them elsewhere on the page without positioning they are fine), it is in the positioning css which is a bit strange anyway, using negatives and relative positioning, but that was the only way I could get it where I want it.

both html and css validate using w3c.

Here is the code: I'll include all the css in case it is something in another div that is messing it up.

Many thanks for your help

Ambiente Independiente Galapagos

Quechua English Deutsch Français


Heading 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla sem urna,
molestie non, auctor ac, pellentesque ac, odio. Phasellus cursus. Aliquam
nisl risus, tristique a, aliquet sit aarae; Donec non diam vitae mi egestas
volutpat. Suspendisse accumsan libero ut purus.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla sem urna,
molestie non, auctor ac, pellentesque ac, odio. Phasellus cursus. Aliquam
nisl risus, tristique a, aliquet sit aarae; Donec non diam vitae mi egestas
volutpat. Suspendisse accumsan libero ut purus.



Logotipo de la campaña "la Funda Lógica"Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Nulla sem urna, molestie
non, auctor ac, pellentesque ac, odio. Phasellus cursus. Aliquam nisl risus,
tristique a, aliquet sit aarae; Donec non diam vitae mi egestas volutpat.
Suspendisse accumsan libero ut purus. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nulla sem urna, molestie non, auctor ac, pellentesque ac,
odio. Phasellus cursus. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.


Link 1 Link
2 Link 3 Link 4 Link 5
Link 6

© 2008 Ambiente Independiente, Isla Santa Cruz, Galápagos, Ecuador : Design © 2008 Ravensleach


and the css

body { text-align: center; background-color: #EAFFEA; margin-top: 0px; margin-left: 0px; }

.container {
text-align: left;
width: 780px;
margin: 0px auto;
background-color: #009800;
z-index: 0;
border: 1px solid #333333;
padding-right: 20px;

}
.content {
background-color: #FFFFFF;
border: 1px solid #333333;
padding: 50px 10px 10px;
position: absolute;
top: 90px;
margin-left: 10px;
width: 760px;
background-image: url(images/background-sm.gif);
background-repeat: no-repeat;
background-position: center center;
margin-bottom: 0px;

}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #009900;
font-size: 1.2em;
margin-bottom: 0px;
margin-top: 0px;
}

.content p {
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
margin-top: 0px;
text-align: justify;
font-size: 0.9em;
width: 500px;
}

.menuimagecontainer {
position: relative;
width: 141px;
top: -150px;
left: 550px;
z-index: 100;
}

.topnav {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin-bottom: 10px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px none #333333;
border-left: 1px solid #333333;

}

.topnav a:link {
color: #009900;
font-size: 0.8em;
font-weight: bold;
text-decoration: none;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
display: block;
}

.topnav a:hover {
background-color: #F4FFF4;
}
.logo {
left: 0px;
top: 0px;
position: relative;
z-index: 99;
}

.language {
font-family: Verdana, Arial, Helvetica, sans-serif;
position: relative;
left: 700px;
font-size: 0.8em;
background-color: #009800;
width: 6em;
z-index: 98;
clear: right;
top: -500px;

}

.language a:link {
color: #FCFCFC;
font-weight: bold;
text-decoration: none;
display: block;
width: 5em;

}

.language a:hover {
background-color: #ECFFEC;
color: #009800;
}

.bottomnav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align: center;
}

.bottomnav a:link {
color: #339900;
font-weight: bold;
margin-right: 10px;
margin-left: 10px;
text-decoration: none;
border: 1px solid #FFFFFF;
padding-right: 3px;
padding-left: 3px;

}

.bottomnav a:hover {
background-color: #F4FFF4;
text-decoration: none;
border: 1px solid #009800;
}
.credits {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.6em;
color: #006600;
margin-top: 20px;
position: relative;
margin-bottom: 0px;
bottom: 0px;
text-align: center;

}
.imgfundalogica {
float: left;
}

drhowarddrfine
Offline
Leader
Last seen: 10 years 42 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Your doctype is incorrect

Your doctype is incorrect and IE is in quirks. Use this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

chistosa
Offline
newbie
Last seen: 12 years 32 weeks ago
Joined: 2007-11-10
Posts: 6
Points: 0

still not showing as links ...

Ok, thanks, done that and uploaded, but still no links showing .... the problem div is at the top right, starting 'Quechua' - thanks in advance for any tips

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 20 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try z-index:1; in .logo

Try z-index:1; in .logo

drhowarddrfine
Offline
Leader
Last seen: 10 years 42 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Yes, Dan caught it. The

Yes, Dan caught it. The logo is overlapping the links. You could also make the logo less wide.

Firefox is performing correctly and, as usual, you are being fooled by an IE bug.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

chistosa
Offline
newbie
Last seen: 12 years 32 weeks ago
Joined: 2007-11-10
Posts: 6
Points: 0

Thanks Dan - changing the

Thanks Dan - changing the z-index did it.