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
CREATiVENESSAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

InsoftserviceCommented:
<!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,
0
CREATiVENESSAuthor Commented:
ok i need to add something to the div, so now what do i need to do to make it show up empty.
0
InsoftserviceCommented:
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
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Vinay RajputSr. UI LeadCommented:
<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
0
Chris StanyonWebDevCommented:
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

0
CREATiVENESSAuthor Commented:
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.
0
CREATiVENESSAuthor Commented:
In IE it doesn't see the div as a link at all.
0
Chris StanyonWebDevCommented:
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/
0
COBOLdinosaurCommented:
<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&
0
CREATiVENESSAuthor Commented:
@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.
0
CREATiVENESSAuthor Commented:
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
0
CREATiVENESSAuthor Commented:
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.
0
Chris StanyonWebDevCommented:
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.
0
CREATiVENESSAuthor Commented:
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
0
Chris StanyonWebDevCommented:
You just need to set the background colour of the LIs that you want the hover to work on. Something like this in your CSS:

#sampleimage li { background-color: rgba(0,0,0,0); }

Open in new window

0
CREATiVENESSAuthor Commented:
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
0
Chris StanyonWebDevCommented:
Try adding this to your style sheet:

a img { border: none; }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CREATiVENESSAuthor Commented:
ok. so I just need to tell it to have no border. I didn't understand why other browsers didnt have that.
0
CREATiVENESSAuthor Commented:
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
0
Chris StanyonWebDevCommented:
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/
0
CREATiVENESSAuthor Commented:
Very Patient. Thank you very much.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.