links not working in Firefox, IE 6 they're OK.

**z_diver** · 03-27-2006, 08:37 PM

Basically I have created a div called box for images that create a navigational menu. The divs are replicated vertically but only the first menu item works properly in Firefox 1.5. The second works if you hover over the top 1/4 of the image but none of the others do anything. btw: the links work properly in IE 6 on XP but not 5.5 on Mac.

http://www.lagunadata.com/staging/cp/index16.html

It appears to me that the <a> tag stops working at the end of the background image. Does anyone know what the problem could be?

Thanks,
Chuck

**jscheuer1** · 03-27-2006, 08:57 PM

Well, just a rough idea, without looking at the details. There are some layout and css rules that IE doesn't obey but that are part of the standards that almost every other browser follows.

The most important one here likely is that in IE an anchor link:

<a href="something">Text or Image</a>

Is often treated as though it has and can be assigned height. This is even though it is an inline element and can be no taller than the text or image it contains. If you want it to act as a block level element, set is display value to block in the style:

display:block;

The division around the anchor link cannot have any effect on its 'hot zone' unless the link is display:block with the width and height the same as the container. Padding and margin values on the link may be adjusted as well to get it to look the way you want.

**z_diver** · 03-27-2006, 09:29 PM

Thanks John. I added display:block; to my .box class which houses the anchor link but it did not fix the issue. Was that the right place to use it?

Edit:
Here's the relevant css
.box
{
display:block;
width: 80px;
height: 80px;
background: #fff;
margin-top: 20px;
padding: 0px;
margin-bottom: 30px;
margin-left: 10px;}

**jscheuer1** · 03-27-2006, 10:28 PM

No, you would need to apply it to the anchor links contained in the box. If they have no class designation, this selector will 'get' them:

Code:

.box a {
display:block;
width:80px;
height:80px;
}

You may need to modify the padding and/or margin (padding, most likely) on the '.box' selector and/or transfer that part to the '.box a' selector to get it to work out right.

This could mess things up in IE. If so, IE only style will need to be added later in the style sheet to override the styling for other browsers, for example:

Code:

* html .box a {
display:inline;
}

But if you play with it, you should be able to find a way that both browsers like.

**jscheuer1** · 03-27-2006, 11:10 PM

I've played with it a bit more and it is your .mainbody and perhaps others covering the links. I've worked it out (mostly) but gotta run, I'll get back to you.

**z_diver** · 03-28-2006, 02:22 AM

Well, any and all help is GREATLY appreciated. I attempted to make .mainbody relative so that it would come after the content div.

Thanks again!
Chuck

**jscheuer1** · 03-28-2006, 02:57 AM

OK, I've removed some styles not used on this page and put the style on the page. I've also simplified the markup, taken care of a problem in FF where the page was too wide to fit 1024x768 and made all image paths absolute so I could work on it locally but, viola! It works now.

Code:

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

<!--
===============================================================
	Copyright Laguna Data
	Web Designer: Charles Huber
	Created: March 18, 2006  /  Last update: 04/10/06 (sv)
===============================================================
-->

<head>
  <meta name="description" content="Venezuelan Bakery in south Orange County." />
  <meta name="keywords" content="Venezuelan bakery in orange county southern california" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="chuck huber" />
  <meta name="generator" content="Quanta" />


<style type="text/css">
/*
===============================================================
	Copyright Laguna Data
	Web Designer: Charles Huber
	Created: March 18, 2006  /  Last update: 04/10/06 (sv)
===============================================================
 */



.about
{
	position: relative; 
	left: 340px; 
	top: 120px;
	color: #f1edd3;
	width:500px;

}

.address
{
	position: relative; 
	left: 44px; 
	top: 250px;
	color: #f1edd3;
	width:500px;

}


.banner
{
	background: #462300 url(http://www.caffeandpan.com/staging/images/newcurve5.png) no-repeat;
	width: 941px;
	height: 1000px;
	margin: 0px auto -1px auto;}


 body
{
	background:  #dcc58b url(http://www.caffeandpan.com/staging/images/bg-brn-center.png) repeat-y center top;
	margin: 0;
	padding: 0;}

.bold
{
	font-weight: bold;}

.bottom
{
	text-align: center;
	}


.sidebar a
{
	margin-top: 20px;
position:relative;
	margin-bottom: 30px;
	margin-left: 10px;
	display:block;
	width: 80px;
	height: 80px;
	font-size: 12px;
	color: #fff;
	text-decoration: none;
z-index:100;
border:5px solid white;
}

.sidebar a:hover
{
	color: #fff;
	text-decoration: none;}

.sidebar a:visited
{
	color: #fff;}

.cap
{
	float: left;
	width: auto;
	font-size: 62px;
	line-height: 51px;
	font-weight: normal;
	font-family: georgia, times;}

.center
{
	text-align: center;}


.content
{
	float: left;
	border: 0px solid #ccc;
	width: 170px;
	margin: 10px 10px 10px 10px;
	padding-left: 40px;
	padding-top: 55px;
	height: 700;}

.date
{
	float: left;
	font-size: 10px;
	margin-top: 2px;
	font-weight: normal;
	font-family: arial, helvetica, sans-serif;
	color: #666;}


.footer
{
	clear: left;
	widt: 300px;
	margin-top: 10px;
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	font-size: x-small;
	text-align: center;}


.footer a
{
	font-size: x-small;}

.footer a:hover
{
	color: #600;}

.footer p
{
	font-size: x-small;}

.footerNav
{
	font-size: x-small;
	text-align: center;}

.footerNav a
{
	font-size: x-small;}

.footerNav a:hover
{
	color: #600;}

h2
{
	margin: 0;
	padding: 0;
	font-family: arial, helvetica, sans-serif;
	font-size: 15px;
	color: #444;}



.logo
{
	position: absolute; left: 500px; top: 15px;}


#menu 
{
	width: 750px;
	height: 20px;
	margin: 0 auto 0 auto;
	padding-top: 2px;
	vertical-align: bottom;
	text-align: left;
        background: #fefefe}

.mainbody
{
	position: relative; 
	left: 0px; 
	top: 210px;
	font-size: 12px;
	font-weight: normal;
	font-family: arial, helvetica, sans-serif;}

	
.sidebar
{	width: 160px;
	border: 0px solid #c0c0c0;
	margin-top: 0px;
	padding: 0;
	margin-bottom: 0px;
	margin-left: 0px;}




</style>

  <title>Caffe and Pan, a Venezuelan Bakery in Orange County - southern California</title>

</head>


<div class="banner">

<div class="content">

<div class="sidebar">



 <a href="index.html" onMouseOver="document.home_button.src='http://www.caffeandpan.com/staging/images/home_hover.png';" onMouseOut="document.home_button.src='http://www.caffeandpan.com/staging/images/home.png';" ><img src="http://www.caffeandpan.com/staging/images/home.png" alt="home" border="0" name="home_button" /></a>




 <a href="menu.html" onMouseOver="document.menu_button.src='http://www.caffeandpan.com/staging/images/menu_hover.png';" onMouseOut="document.menu_button.src='http://www.caffeandpan.com/staging/images/menu.png';" ><img src="http://www.caffeandpan.com/staging/images/menu.png" alt="home" border="0" name="menu_button" /></a>



  <a href="location.html" onMouseOver="document.services_button.src='http://www.caffeandpan.com/staging/images/location_hover.png';" onMouseOut="document.services_button.src='http://www.caffeandpan.com/staging/images/location.png';" ><img src="http://www.caffeandpan.com/staging/images/location.png" alt="Map" border="0" name="services_button" /></a>



  <a href="about.html" onMouseOver="document.about_button.src='http://www.caffeandpan.com/staging/images/about_hover.png';" onMouseOut="document.about_button.src='http://www.caffeandpan.com/staging/images/about.png';" ><img src="http://www.caffeandpan.com/staging/images/about.png" alt="About us" border="0" name="about_button" /></a>



  <a href="contact.html" onMouseOver="document.contact_button.src='http://www.caffeandpan.com/staging/images/contact_hover.png';" onMouseOut="document.contact_button.src='http://www.caffeandpan.com/staging/images/contact.png';" ><img src="http://www.caffeandpan.com/staging/images/contact.png" alt="Contact" border="0" name="contact_button" /></a>



<br />
<br />



</div>
<div class="date">Updated: March 14, 2006
</div>
</div>

<div class="mainbody">

<div class="about">
Caffe and Pan is a Venezuelan bakery<br>in Orange County, California</div>
<div class="address">8691 Irvine Center Drive, CA 92618</div>
<img src="http://www.caffeandpan.com/staging/images/C&P_location4.png" width="621" height="345" border="0" /><br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<div class="footer">
Copyright Caffe and Pan 2006 ©, All rights reserved</a>
</div>
</div>




</div>







</body>
</html>

**z_diver** · 03-28-2006, 04:08 AM

Wow! That's five star service!

Do you mind if I just run over some of your changes to ensure I understand why you did what you did?

You removed the .box class altogether and created the .sidebar a in it's stead which cleans up the markup. You changed it's position to relative, added the Z-index:100(I was thinking of doing something like this elsewhere but I'm unsure of when to use the z-index). In this case, what exactly does that acomplish?

How did you fix the FF width issue which kept a scrollbar at the bottom of the page? Did adding width to the .about and .address classes fix it? I could have sworn I tried that with a value of 300 and it didn't work. ???

Thank you so much for your time John. You've helped tremendously.

Chuck

**jscheuer1** · 03-28-2006, 05:17 AM

Um, you got most of what I did, let's see:

Yeah, the .box class wasn't needed. Once the links were block level, wrapping them in another block level element was just extra. The .sidebar class contained all the links in question and only those links, so it was handy.

The reason I set the links to position relative and added a z-index (even z-index:1 would probably been enough) was because the .mainbody class was relative and came after the links in the page's stacking order. This meant that it covered them, if not visually, at least as far as the mouse pointer was concerned. Z-index will raise an element's level in the stacking order but only if the element is position:relative or absolute (and possibly floating), all this only in some browsers but, generally it won't hurt the ones where these considerations don't apply.

I had tried a width of 300 for .address and .about but, due to reasons I didn't bother trying to discover, this made them too narrow, causing their text to wrap. 500 worked and made them narrow enough to eliminate the horzontal scrollbar in FF.

**z_diver** · 03-28-2006, 04:11 PM

Getting a glimpse into your thinking and judgement on these matters is almost as helpful as the work you have done on the code itself. I owe you one.

--
Chuck

Thread: links not working in Firefox, IE 6 they're OK.

Thread Tools

Search Thread

links not working in Firefox, IE 6 they're OK.

Bookmarks

Bookmarks

Posting Permissions