asked on

Using whole divs as links?

I am putting links in a file that are a whole div like this

<a href="#"><div style="width:475px; height:100px;"></div></a

Open in new window

that creates a box that is a link, and this works fine in chrome and firefox but IE doesnt read this correctly.
Can you explain what i need to do to make this work in ie also.
thanks,
randy

Insoftservice inso

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<a href="#"><div style="width:475px; height:100px;">ddddddddd now check</div></a

</body>
</html>

NO VALUES specified. read a href tag for detail information
Provide some details in div tag as id , class and values for any functionality you want,

CREATiVENESS

ASKER

ok i need to add something to the div, so now what do i need to do to make it show up empty.

Insoftservice inso

It "show up empty "means?

<a href="#"> replace # with specific desired links or add javascript:void(0) so that it don't take you to top screen of your website after being clicked

Vinay Rajput

<div style="width:475px; height:100px; cursor:pointer;" onclick="document.location.href='#'"></div>

Open in new window

<div style="width:475px; height:100px; cursor:pointer;" onclick="document.location.href='#'"></div>

replace # with your link

Chris Stanyon

Can you clarify what you need, and what problems you have ('it doesn't work' isn't really any help to us). The code you've posted will work in IE (make sure you have a valid DOCTYPE!). Your code gives you a sized DIV wrapped in a link, although the link goes nowhere (#).

Any reason why you can't just style the link:

<a href="#" style="display:block; width:475px; height:100px;"></a>

Open in new window

CREATiVENESS

ASKER

I dont understand why doctype or where the link is going is important.
You can see he added "dddddd now check" to the div, this is where I'm saying so I need to add something. but I would like it "empty."
Basically what I am trying to do very similar to facebooks image tags. They are an "invisible" box that when you rollover it shows you the borders around the box and has a link. The coding I have above works in firefox and chrome but not IE.

CREATiVENESS

ASKER

In IE it doesn't see the div as a link at all.

Chris Stanyon

A DOCTYPE is important as it defines the rules by which a browser will render the document. Without it your page will render in Quirks mode, which effectively allows a browser to do as it pleases.

The link doesn't matter - I was simply pointing out that your code is using a # so clicking it won't take you anywhere.

I don't understand this bit - I want to add something but I want it empty! Either you want to add something OR you want it empty - you can't have both.

I've tested the code in IE and it works fine, assuming you've got a valid DOCTYPE.

If you want a link to have a border when you hover over it then you need to use the :hover pseudo class.

Have a look at this fiddle and you'll see it works fine in all the browsers:

http://jsfiddle.net/ChrisStanyon/FXQDX/

COBOLdinosaur

<div> is a block element and putting a block element inside is invalid and structurally illogical.

The correct approach is to style the link as a div with display: block and then then it will respond to all CSS valid for block elements.

Cd&

CREATiVENESS

ASKER

@ChrisStanyon your fiddle was pretty much what I was looking for, but I added my code and it works there too.
http://jsfiddle.net/FXQDX/8/
Very Weird.
I have no idea whats blocking it from working. You can see my test file here.
http://creativeness.com/MLK_POC/MLK_proof_023g_animatedNav.html
If you look at that file in ff or chrome you will see you can rollover the quotes, but in IE they do not show up.

CREATiVENESS

ASKER

If you are having issues with where to see the rollovers you need to scroll to the left or right. The buttons to scroll are on the left and right side in the center of the page vertically.

Any Ideas?
Randy

CREATiVENESS

ASKER

And then you roll over the quotes on the wall, you will see a rectangle border come up, please let me know if you need me to explain anything else. Sorry the site is still in testing mode.

Chris Stanyon

Right. It seems like a bug (yes, another one!) in Internet Explorer. You're adding the hover to each LI. You also need to add a background-color to these LIs. Normally that would prevent you seeing the content underneath, so you also need to set the background colour to be totally transparent. Add the following to each of your LIs

background-color: rgba(0,0,0,0);

That will sort your problem out.

Having said all that, each of your hover border's are created by having a DIV inside an A inside an LI inside a UL. Why!!

A couple of other comments here have already mentioned styling links directly or styling the DIV. Thats the way to go - drop all the UL, LI, and A tags and just have a DIV.

CREATiVENESS

ASKER

Thanks Chris but Im not following you, can you post the code of what I need to do.

The links arent even being noticed though?
All the help is appreciated.
Thanks,
Randy

SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

CREATiVENESS

ASKER

Chris --- Awesome, You kind of got it. hahah
http://creativeness.com/MLK_POC/MLK_proof_019g_animatedNav.html
Please check out the first quote to the left of the center stone. (Only one has the upper image uploaded)
"If we are to have Peace...."
You will see the rollover is working but now there is some sort of border around the upper image that was never there before.

If you look at it in other browsers you will notice that this rollover and upper image works fine.
You rollover the quote and an image will appear above it, similar to a drop down menu.
Any Ideas to fix this border.

Thanks,
Randy

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

CREATiVENESS

ASKER

ok. so I just need to tell it to have no border. I didn't understand why other browsers didnt have that.

CREATiVENESS

ASKER

Sorry Chris, I tried to get it figured out but with my coding I couldnt get it.

css code

#nav{
	list-style:none;
	font-weight:bold;
	float: left;
	width: 481px;
	left: 4504px;
	top: -234px;
	position: relative;
	padding: 0 0 0 0;
}
#nav li{
    float:left;
    position:relative;
	z-index:99999;
	background-color: rgba(0,0,0,0);
}

#nav a{
    display:block;
    padding:0px;
    text-decoration:none;
}
#nav a:hover{
	border:#00C;
}

#nav ul{ 
    list-style:none;
    position:absolute;
	display:none;
	 
}

#nav ul li{
    padding-top:0px; 
    float:none;
	top: -4px;
}

#nav ul a{
    white-space:nowrap; 
}

#nav li:hover ul{ 
top:-348px;
left:-70px;
	display:block;
}

#nav li:hover a{
	border:#00C;
}

#nav li:hover ul a{ 
    text-decoration:none;
	border:#00C;
}

#nav li:hover {
	border: 3px solid #2185C7;
	-moz-box-shadow: 0 0 5px 5px rgba(33,133,199,0.5);
	-webkit-box-shadow: 0 0 5px 5px rgba(33,133,199,0.5);
	box-shadow: 0 0 5px 5px rgba(33,133,199,0.5);
}

#nav li ul li:hover {
	border: none !important;
	box-shadow: none !important;
}

Open in new window

And the HTML coding

<ul id="nav">  
                    <li><a href="#"><div style="width:475px; height:100px;"></div></a>
        <ul> 
            <li><a href="#"><img src="images/img_home_quote6.png"/></a></li> 
        </ul>
    </li>
</ul>

Open in new window

So it should be
#nav li ul
I dont know what I need to add to remove the border I tried add
border: none;
to a few different areas.

Thanks,
Randy

Chris Stanyon

Exactly as I showed you. You need to add this to your CSS:

a img { border: none; }

Different browsers render elements in their own way. The usual way to avoid this and level the playing field is to use a CSS reset or normalizer. Basically this is a stylesheet that you load before all others that sets the defaults for all elements - it forces every browser to render according to this stylesheet, instead of it's own defaults.

I tend to use one called normalize.css - use it in your next project. It will help with cross-browser issues:

http://necolas.github.io/normalize.css/

CREATiVENESS

ASKER

Very Patient. Thank you very much.