13 replies [Last post]
Luke2000
Offline
Enthusiast
Last seen: 15 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

I have tried evrything to get these links to do what they should. They work fine in IE and AOL Explorer but not at all in FF, Opera or Netscape. Can anyone see anything i'm missing?

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Insight • Visual Solutions</title>
	
	<link href="css/images.css" rel="stylesheet" type="text/css" />
	<link href="css/layout.css" rel="stylesheet" type="text/css" />
	<link href="css/navs.css" rel="stylesheet" type="text/css" />
	
</head>



<body>


	<div id="imgcontainer">
	<img src="graphics/chair.jpg" width="400" height="280" alt="Welcome. Why don't you take a seat and then have a look around" id="chair" />
    <div id="enter"><a href="http//www.google.com">enter</a></div>
    <div id="dash"></div>
    </div>
    
</body>


</html>

and the css is:

#enter a:link, #enter a:visited 
{
display: block;
width: 40px;
padding: 1px 0 2px 0; 
font: bold 10px Verdana, Arial, sans-serif;
color: #666;
text-decoration: none;
background-color: #bcbcbc;
}

#enter a:hover, #enter a:active 
{
text-decoration: none;
width: 40px;
display: block;
color: #bcbcbc;
background-color: #666;
display: block;
font-weight: bold;
}

Thankyou.

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 32 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Links that work in IE but not FF etc....

firstly what are they supposed to do? How are they broken in FF.

Trying out your snipet of code it works as far as I can tell the same in FF and IE. Can you provide a live link perchange? or the full code.

Luke2000
Offline
Enthusiast
Last seen: 15 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

The site is off line, sorry...

The site is off line, so I can't provide a live link, sorry. However, we can make do and mend as they say. Here is the rest of the code. The background color of the text is meant to change when you roll over the text. Thankyou:

images.ccs

img#chair
{
position: absolute;
top: 50%;
left: 50%; 
width: 400px;
height: 280px;
margin-left: -200px;
margin-top: -140px;
} 

layout.css:

*
{
margin: 0;
padding: 0;
}


div#imgcontainer
{
width: 100%;
position: absolute;
top: 50%;
left: 50%; 
width: 600px;
height: 300px;
margin-left: -300px;
margin-top: -150px;
border: 1px dashed #bcbcbc;
}


div#enter
{
border-left: 1px solid #fff;
border-top: 1px solid #fff;
margin-bottom: -3px;
width: 40px;
text-align: left;
text-indent: 5px;
}

div#dash
{
position: relative;
top: -15px;
border-bottom: 1px dashed #bcbcbc;
border-right: 1px dashed #bcbcbc;
width: 42px;
height: 19px;
color: #666;
}

Along with the previous post thats the lot ( I have just started a complete re-design, so that explains the brevity of it... lol) Thankyou Smile

Luke2000
Offline
Enthusiast
Last seen: 15 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Found out... but don't know why?

I found out the problem is this div:

Quote:
<div id="dash"></div>

But I don't understand why? I am going to try and put it before the enter div.

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 32 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Links that work in IE but not FF etc....

Ah yes the rest of the code helps a lot.

Its not working in FF because you are taking the dash div and putting it on top of the link, hence the link is hiding behind this.

I would question why you need this empty div at all, can you not apply your dashes to the enter div. There is rarely a need for empty divs to be honest.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Links that work in IE but not FF etc....

Luke it's likely because you have given #dash a negative shifted position you have pulled it up from it's position to probably cover the element before it thus obscuring the links (even if they are visable) IE allows links to be clickable through stacked divs but this is not correct behaviour.

Hugo.
Edit: cross posted with above.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Luke2000
Offline
Enthusiast
Last seen: 15 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Resolved... but...

I figured out it was the position: relative on the dash div that it didnt like so I had to do it with margins instead. Here is the new code for the affected area:

div#enter
{
border-left: 2px solid #fff;
border-top: 1px solid #fff;
margin-top: -20px;
width: 40px;
text-align: left;
text-indent: 5px;
}

div#dash
{
margin-bottom: 1px;
border-bottom: 1px dashed #bcbcbc;
border-right: 1px dashed #bcbcbc;
width: 44px;
height: 19px;
color: #666;
}

Sorry to bother you all. It looks like I posted before I even tried but I have been at it for ages. Just something I didn't even think of, I was convinced it was to do with the nav css. Thanks anyway. Smile

Luke2000
Offline
Enthusiast
Last seen: 15 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

The reason...

I wanted the empty div so I could have a small white border between the enter button and the dash, perhaps a bit picky but i got it working now, thankyou for your help everyone.

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 32 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Links that work in IE but not FF etc....

Why not make your link a block level element, apply the enter styles to that then apply the dash styles to the enter div?

Should be able to get the same effect without that div.

Failing that wrap the dashed div around the enter div, then use margin and passing to get the desired effect. Then you won't have to worrk about things being on top of each other.

Luke2000
Offline
Enthusiast
Last seen: 15 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Block level element?

How do I make something a block level element. I am new to CSS so sorry for the newbie question.

Luke2000
Offline
Enthusiast
Last seen: 15 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Im guessing....

Do you mean like a h1 or p or something like that?

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 32 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Links that work in IE but not FF etc....

div and p's are nativelly block level elements yes.

However using CSS you can make and inline elemnt block level and and block level element inline.

If you have

a
{
display: block;
}

you can how treat your link as block level. This means that you can give it dimensions resize it a bit.

So have something like

#enter
{
     border-bottom: 1px dashed #bcbcbc;
     border-right: 1px dashed #bcbcbc;
     width: 42px;
     height: 19px;
}

 #enter a:link, #enter a:visited
{
     display: block;
     width: 40px;
     padding: 1px 0 2px 0;
     font: bold 10px Verdana, Arial, sans-serif;
     color: #666;
     text-decoration: none;
     background-color: #bcbcbc;
     text-indent:5px;
}

#enter a:hover, #enter a:active
{
     color: #bcbcbc;
     background-color: #666;
     font-weight: bold;
}

Luke2000
Offline
Enthusiast
Last seen: 15 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Ah...

Now I understand, thankyou, I will give it a go now Smile

Luke2000
Offline
Enthusiast
Last seen: 15 years 19 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Links that work in IE but not FF etc....

I sorted it, im getting my host set up now so I will post the link when its up and running. Thankyou Smile

Edit: Here is the welcome page to my site, the rest is still under wrapshttp://www.insightvs.co.uk