link not clickable in IE - html

Update : JS Fiddle for this issue : http://jsfiddle.net/Ey4aH/2/ , run it in IE and see the problem.
I am using the below code, which is a part of set of menu's.
<div class="profile-menu">
<ul>
<li><a class="current" href="javascript:void('0');">
<table width="153" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22"><img src="images/about-icon.png" width="16" height="16" /></td>
<td width="135">About</td>
</tr>
</table>
</a> </li>
<li><a href="/friend/viewfriends/<%=temp.getString("user_id")%>">
<div><table width="153" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22"><img src="images/friends-icon.png" width="16" height="16" /></td>
<td width="135">Friends</td>
</tr>
</table></div>
</a>
</li></ul></div>
This works fine with other browsers, but in IE, when i try to click Friends text link, it is not working. But when i click the icon, it is working fine. Can anyone help me find what is the issue.

it is better if you don't use table inside <a> tag .
but use <a> tag inside each <td> elements .

It looks as if you're using a table to display content when tables are only supposed to be used to display tabular data.
'A' tags can not contain tables or other block level elements and be expected to play nice across all browsers.
The best solution would be to recreate your design without using tables.
Alternatively you could achieve what you're trying to do by using javascript to enable the click, on the table.
HTML5 allows block level elements to be wrapped within 'a' tags:
http://davidwalsh.name/html5-elements-links

Related

Quick HTML IMG solution

I'm looking for a Quick/Dirty HTML-solution for a one-time problem
I have a lot of images I want to add to a HTML-page, and have them resized to predefined sizes.
For that I at first used :
<img src="1980_cover.jpg" alt="HTML5 Icon" style="width:128px;height:200px;">
<img src="1981_cover.jpg" alt="HTML5 Icon" style="width:128px;height:200px;">
Looks how I want it, but seems I can't add some text over it
So I tried :
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="128px" height="200px" background="1980_cover.jpg" valign="bottom"><font size="+1" color="black">1980</font></td>
<td width="128px" height="200px" background="1981_cover.jpg" valign="bottom"><font size="+1" color="black">1981</font></td>
</tr>
</table>
The problem I have now, and can't find a solution is how to resize the images instead of cropping them.
As said, I just need this once, so it only should do what's needed, as simple as possible, legacy or bad HTML-coding isn't an issue for me
Anyone ?
In case you just want to achieve this with your second attempt, you can use CSS3 background-size property like so:
background-size: 128px 200px;
You can use this property together with your background image in an HTML inline style tag.

Adding Microdata for background images on simple HTML site

I am trying to enhance our old html site (webstore) with schema and am having some difficulties getting started. We have over 1,500 individual html product pages that I would like to start adding Schema to, so getting this correct to begin with is a must.
The biggest issue thus far is how to add the product image code as our site layout is table based with the main product image inserted as a background element. Most of the research examples I have found so far show different implementations, is this possible?
Here is a code example:
<TR>
<TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=10 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=18 ALT=""></TD>
</TR>
</TABLE>
</td>
<td valign="top">
<table width="599" border="0" cellpadding="0" cellspacing="0" background="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" style="background-repeat: no-repeat;">
<tr>
<td width="259" valign="top"><span class="style2 "><IMG SRC="images/spacer.gif" alt="" WIDTH=259 HEIGHT=150 border="0"><br></span>
<table width="238" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><span class="style109 style31">The HOBBIT<br> BILBO'S STING SWORD</span><span class="style117"><br> <span class="style33">UC2892 United Cutlery</span></span></td>
</tr>
From this code, I would like to highlight images/LOTR/BKG_Hobbit-Sting-UC2892.jpg as the product image via Schema.org.
I first tried adding the info to the <HEAD> section, but it does not check out correctly on Google's structured data testing tool:
<div itemscope itemtype="schema.org/Product">; <meta itemprop="image" content="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg"></meta>
Also, testing in Bing Markup tester gives me the result:
We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.
Is it not okay to add the Schema data via <div> to the head area?
Also, should the image link be a complete URL www.example.com/images/LOTR/BKG_Hobbit-Sting-UC2892.jpg?
As your table markup doesn’t seem to be very maintainable, and as the (obsolete) background attribute can’t be used for Microdata, the best way in your case would probably be to duplicate the content and mark it up with meta/link elements.
You can add this markup in the head or in the body, but you can’t use div in the head, so it’s easier to do it in the body.
So in the body, you could simply add this:
<div itemscope itemtype="http://schema.org/Product">
<link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" />
</div>
You have to use link instead of meta if the value is a URL. And this allows you to specify any kind of URL, absolute or relative (just like in the a element).
(Also note that neither meta nor link have a closing tag, so it’s <meta> or <meta />, but not <meta></meta>.)
That said, Microdata works best if you mark up your existing content, without duplicating it. If you would have to duplicate it, it might work better for your to use JSON-LD instead of Microdata.

HTML - IE10 does not display table correctly?

Here is my html:
<table id='first' width="800" border="0" cellpadding="0"> <!-- first table -->
<tr>
<td width="323">
<img src="../imageOne.jpg" width="323" height="179" alt="" />
</td>
<td width="257">
<table id='second'> <!-- table inside table -->
<tr>
<td><img src="../imageTwo.jpg" alt="CSS logo" width="190" height="100" /></td>
</tr>
<tr>
<td><br /><img src="../imageThree.jpg" alt="ESA logo" width="190" height="95" /></td>
</tr>
</table> <!-- end second table. This second table had two rows / two images, one on top of another. -->
</td>
<td width="212"><img src="../imageFour.jpg" width="203" height="251" alt="photo of an extension cord plugged in" /></td>
</tr>
</table>
This isn't actually my html, I'm at work and have to edit someone elses.
As you can see, there is a table inside a table. In IE8, the second table is inside the first table, but for some reason in IE10, the second table is a bit below the first table. It's as if the second table has a
margin-top: 20px;
but I made sure that the table has no margin-top. Any idea why the second table is not inline / completely inside the first table?
Note: This webpage is on an intranet site.
Edit: I was thinking, if I can find a way to vertically align the table inside the first table, maybe that will fix the problem? Is there a way to vertically align a table inside another table?
You are almost certainly having an issue with Compatibility Mode:
Click Tools -> Compatibilily View Settings
Untick "Display Intranet sites in Compatibility View"
For reasons beyond my imagination, Microsoft believes that by default Intranet sites should be rendered in "Compatibility View" mode, which basically means an earlier version of IE's rendering engine (I believe it goes all the way back to IE7).
http://windows.microsoft.com/en-CA/internet-explorer/use-compatibility-view#ie=ie-11
You might also want to look at this meta tag and the header you need to set in your web.config, as detailed in this SO post:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode

Outlook 2010 table spacing weirdness

When coding a HTML email newsletter Outlook 2010 is acting up. (surprise surprise)
The following screenshot is the result: http://screencast.com/t/PSZqP7wg
This screenshot shows what's happening (same, but images turned off): http://screencast.com/t/DrbexyHnytJ
Obviously, the middle white column is to narrow. Should be 604px wide, but is a lot less. It seems Outlook is placing extra padding next to the spacer images.
Anyone has an idea why this is happening?
This is the source in the body tag:
<table width="761" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="151" style="height: 151px;" style="padding: 0px;"><img width="761" height="151" src="http://www.bothino.be/newsletter/top.jpg" alt="" /></td>
</tr>
<tr>
<td width="77" style="width: 77px;">
<img src="http://www.bothino.be/newsletter/spacer.jpg" width="77" alt="" />
</td>
<td width="604" bgcolor="ffffff">
test sdlkfjhklsdjfhqsdklfh qklsdfh klqsjf lqksjdf lkqsjdhf lkdflkqshdfkl jqhsdlkfj
hqslkdfh qlksjdfh lqskjdhf lkqjshdlfk jqhsldkfh qlsdjfh lqksjdflk qsdflkqshdklfh
klqshdf kqshdklf hqskldfqklsd
</td>
<td width="76" style="width: 76px;"><img src="http://www.bothino.be/newsletter/spacer.jpg" width="76" alt="" /></td>
</tr>
<tr>
<td height="151" colspan="3">
<img width="761" height="151" src="http://www.bothino.be/newsletter/bottom.jpg" alt="" />
</td>
</tr>
</table>
You just need to add a background color to both tags. the widths are displaying correctly.
I'm used to issues with "undefined" blank spaces and line breaks in IE and Outlook. They are usually interpreted as a real, wanted space, formatted by style of the nearest parent (if any).
That's why i prefer writing htm like this:
<tr>
<td height="151" colspan="3"><img
src="http://www.bothino.be/newsletter/bottom.jpg"
width="761" height="151" alt="" /></td>
</tr>
Line breaks inside a tag will make no difference at display time ... but apply a similar structure to the code.
The important part is no blank between TD and IMAGE tag.
Maybe, this doesn't explain and solve that huge indentions in your screenshot.
my experience with Outlook is to never ever never ever use the rowspan and colspan attributes. This is guaranteed to cause trouble. Should a table cell require a different layout/width than the one above/below it, nest another right into it with the correct layout. this way the overall basic grid stays intact. Not nice, but then again: outlook plays dirty and so will you (have to). All tables need to have cellpaddign=0 and cellspacing=0. This helps me to get over similar issues.
sometimes it's better to leave out width for td's eg leave out width=77 and rest of width for all td's. that way it can expand automatically to fill the entire row. or you can also include a table withing that tr.

menu not visible in chrome but works in IE

I am having a coding issue with Chrome and Firefox. The page I'm building has a menu that is placed with an anchor and it shows fine in IE but not Chrome or FF. Here is the code for the anchor:
<TR>
<TD bgColor=#FFFFFF height=31 colSpan=4 noWrap><a name="awmAnchormenu"></a></TD>
</TR>
I was told this, but not sure how to make the change:
This is because you used "name" instead of ID in the Positioning Element (the <a> link you used).
First of all, due to formatting issues I strongly suggest using <div> or <span> instead of <a>.
Second, you have to use ID. Only IE considers "name" to work like an ID, so now your menu does not show in any other browser.
I'm not fixing the HTML itself, but I will fix the problem according to the person who instructed you. Try this:
<TR>
<TD bgColor=#FFFFFF height=31 colSpan=4 noWrap><a name="awmAnchormenu" id="awmAnchormenu"></a></TD>
</TR>
edit: OK, I can't take it. Here's the HTML fixed.
<tr>
<td bgcolor="#FFFFFF" height="31" colspan="4" nowrap="nowrap">
<a name="awmAnchormenu" id="awmAnchormenu"></a>
</td>
</tr>
It's still pretty old-school, but at least it's following some rules.
It's as he said. Replace name with id. Also consider changing a to div or span.
you can try this
<tr>
<td bgColor="#FFFFFF" height="31" colSpan="4" nowrap="nowrap">
<span id="awmAnchormenu"></span>
</td>
</tr>
also , you should not use capital letters for the html tags.
It means you should change <a name="awmAnchormenu"></a> to <span id="awmAnchormenu"></span>.