473,325 Members | 2,342 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

Problems with tables and hyperlinks

Hi guys,

I have a problem where IE is refusing tables to made as hyperlinks. I
have some CSS code which makes the background glow if is hovered upon
and this works fine both in Firefox and IE. However, if you try
clicking on the link that it points to, it redirects in Firefox but not
in IE. I have included a stripped down version of the code below and I
would be greatly appreciative if someone could help me out, or suggest
an alternative to achieve the same effect.

Also, notice how the correct URL is shown in IE's status bar so I'm
pretty sure the code is *almost* correct.

Thanks,
ii2o

------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
background-color: #000000;
}

..heading1 {
font-weight: bold;
color: #663333;
border-color: #663333;
line-height: 140%;
text-decoration: none;
}

#main {
position: absolute; left: 4px; top: 79px;
padding : 2px;
overflow: auto;
border : solid 1px #444444;
}

..menuitem a {
display:block;
background-color:#000000;
color:#FFFFFF;
text-decoration:none;
border-width : 1px;
border-style:solid;
border-color:#000000;
}

..menuitem a:hover {
background-color:#333333;
color:#FFFFFF;
text-decoration:none;
border: 1px solid #663333;
}

..menuitem a:visited {
color:#FFFFFF;
}

</style>
</head>

<body>

<div id="main" style="width : 360px; height : 250px;">

<div class="menuitem" style="width : 342px">
<a href="http://www.bbc.co.uk">
<table width="342" border="0">
<tr>
<td valign="middle" width="40"><img class="heading1"
src="http://newsimg.bbc.co.uk/media/images/40749000/jpg/_40749725_abbas203indap.jpg"
width="40" height="40" border="1"></td>
<td width="280">
<span class="heading1">01234 - 56789</span><br />
abcde - fghijk
</td>
<td valign="center" width="20"><img class="heading1"
src="http://newsimg.bbc.co.uk/media/images/40749000/jpg/_40749725_abbas203indap.jpg"
width="20" height="20" border="1">
</td>
</tr>
</table>
</a>
</div>

<div class="menuitem" style="width : 342px">
<a href="http://www.bbc.co.uk/sport">
<table width="342" border="0">
<tr>
<td valign="middle" width="40"><img class="heading1"
src="http://newsimg.bbc.co.uk/media/images/40752000/jpg/_40752243_berg_pa_203.jpg"
width="40" height="40" border="1"></td>
<td width="280">
<span class="heading1">blah - blah</span><br />
text - here
</td>
<td valign="center" width="20"><img class="heading1"
src="http://newsimg.bbc.co.uk/media/images/40752000/jpg/_40752243_berg_pa_203.jpg"
width="20" height="20" border="1">
</td>
</tr>
</table>
</a>
</div>

</div>
</body>
</html>

Jul 23 '05 #1
7 1741
Previously in comp.infosystems.www.authoring.html, ii2o
<ii**@hotmail.com> said:
I have a problem


http://validator.w3.org/

--
Mark Parnell
http://www.clarkecomputers.com.au
Jul 23 '05 #2
Okay...... I guess I can't put tables inside an <a href> tag. How can I
get around this using DIV's because when I replace the three table
cells with DIV tags, it keeps putting each DIV on a new line - why
won't it let me put all three adjacent to each other?

Jul 23 '05 #3
Previously in comp.infosystems.www.authoring.html, ii2o
<ii**@hotmail.com> said:
Okay...... I guess I can't put tables inside an <a href> tag.
Correct. An anchor cannot contain any block-levet element. It must be
the other way around. (Besides, making an entire table a link is
illogical).
How can I
get around this using DIV's


You can't. As I said above, an anchor cannot contain a block-level
element. Why not describe what you are actually trying to do, rather
than the perceived solution? Then we might be able to help.

--
Mark Parnell
http://www.clarkecomputers.com.au
Jul 23 '05 #4
Hi,

Well i'll try my best to describe (but if you'd like to see what I'd
like to achieve then copy the code into an htm file and run it because
everything works in it except the link can't be clicked), but I'd like
a list of items, where each item has a 40 x 40 picture to the left, 2
lines of text in the center, and a smaller 20 x 20 image to the right.
When you hover over the item, I'd like the background to change colour,
and the whole item to be surrounded by a border. Also, clicking
anywhere on the item should take the user to the link specified by the
a href tag.

Thanks,
ii2o

Jul 23 '05 #5
Previously in comp.infosystems.www.authoring.html, ii2o
<ii**@hotmail.com> said:
Well i'll try my best to describe (but if you'd like to see what I'd
like to achieve then copy the code into an htm file and run it because
everything works in it except the link can't be clicked),
Since you are the one requesting help, it is generally expected that you
will provide the URL of the relevant page, rather than making us jump
through hoops to see the results of code which may not be the same as
that on your page anyway.
but I'd like
a list of items, where each item has a 40 x 40 picture to the left, 2
lines of text in the center, and a smaller 20 x 20 image to the right.
When you hover over the item, I'd like the background to change colour,
and the whole item to be surrounded by a border.
Enclosing it in a div and applying the :hover psuedo-class to the div
styles works in all modern browsers...
Also, clicking
anywhere on the item should take the user to the link specified by the
a href tag.


....but won't help with this.

Something like this (untested) should give you a basic version of what
you are looking for:

a.menuitem { display: block; }

a.menuitem:hover { background-color: #333333; border: 1px solid #663333;
}

<a href="mylink.html" class="menuitem"><img src="bigimage.png"
alt="Something appropriate"><p>Blah blah blah<br>blah etc.</p><img
src="smallimage.png" alt="Something appropriate"></a>

Actually, looking back over your code, you are already doing that; you
are just trying to make it more complicated than it needs to be. Since
you are setting display: block; on the anchor, you don't need a table or
div at all.

--
Mark Parnell
http://www.clarkecomputers.com.au
Jul 23 '05 #6
On 23 Jan 2005 15:39:24 -0800, ii2o <ii**@hotmail.com> wrote:
Well i'll try my best to describe (but if you'd like to see what I'd
like to achieve then copy the code into an htm file and run it because
everything works in it except the link can't be clicked),
A URL, even a mockup is always a good idea. It helps the ones who try to help
you.
but I'd like
a list of items, where each item has a 40 x 40 picture to the left, 2
lines of text in the center, and a smaller 20 x 20 image to the right.
When you hover over the item, I'd like the background to change colour,
and the whole item to be surrounded by a border. Also, clicking
anywhere on the item should take the user to the link specified by the
a href tag.


I'm assuming the images for each item are different? If not, try setting them as
background on both <li> and <a>.

If different for each item: You said list, so for markup:

<ul id="menu">
<li><a href="foo/bar1.html"><img_40x40 id="large">first line<br>
second line<img_20x20 id="small"></a></li>
<li><a href="foo/bar2.html"><img_40x40 id="large">first line<br>
second line<img_20x20 id="small"></a></li>
<li><a href="foo/bar3.html"><img_40x40 id="large">first line<br>
second line<img_20x20 id="small"></a></li>
<li><a href="foo/bar4.html"><img_40x40 id="large">first line<br>
second line<img_20x20 id="small"></a></li>
</ul>

Play around with the images inside the anchor element or outside to see the
difference.

For styling:
#menu {
text-align:center; }

#menu img.large {
float:left; }

#menu img.small {
float:right; }

#menu li a,
#menu li a:link,
#menu li a:visited {
display:block;
width:100%;
color:black;
background-color:yellow;
border:2px solid red; }

#menu li a:focus,
#menu li a:hover,
#menu li a:active {
display:block;
width:100%;
color:yellow;
background-color:black;
border:2px solid green; }

Not tested.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Jul 23 '05 #7
Hi,
I uploaded the page to my webspace. The link is:
www.astrofaes.co.uk/index2.htm

Thanks,
ii2o

Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: LRW | last post by:
Below I'll paste my CSS and the HTML in question. But what's happening is, I'm trying to establish a link behavior for a class that's separate from the normal link class. I've established a: 's...
1
by: Laphan | last post by:
Hi All Wondered if you could help me even though the NG might not be the most relevant to my query. Basically I have a WinXP machine (SP1 with all web updates don't want to upgrade to SP2...
0
by: naijacoder naijacoder | last post by:
I want my Submenu in TreeView to have hyperlinks and 'm populating my TreeView from a Xml file and formatting it with XSL. I want to have hyperlinks on elements authors,year,business etc.. Any...
5
by: Richard | last post by:
I've created a simple web project, which works great on my local machine. Every page works correctly (hyperlinks, textboxes, validator controls, etc.). I've tried both the X-Copy method and a setup...
1
by: Elmo Watson | last post by:
Ok - I've got a datalist - in the template, there is a hyperlink, in which, I need to dynamically use the record's ID inside a Javascript function (a popup window function, which works perfectly...
4
by: Seefor | last post by:
Hi, I want my text hyperlinks to have a dotted border underneath, so I did this which works fine: a, a:link, a:visited, a:hover, a:active { color: #000; text-decoration: none;
0
by: Janelle.Dunlap | last post by:
I have created a database that I need to deploy to users without Access installed on their computers. I bought Microsoft Office Developer's Edition so that I could package the database and use...
1
by: Janna | last post by:
Hello tech savvy gurus! I hope someone can help me! THE PROBLEM: "Cannot open specified file" when I click on a hyperlink in an Access database when it is located on our server. THE...
5
LAD
by: LAD | last post by:
Using Access 2003 on Windows 2000. My Skill Level: Med Low (Some VBA, okay with Access) Form: Single View - based on Query of single Table to sort by field. Application: Dealers email 'contract...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.