menu not visible in chrome but works in IE - google-chrome

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>.

Related

Phantom Showing up in my page

I have a page written in HTML/ASP that has a series of nested tables that I use for formatting the page the way I want it.
When the page loads however there is a white space between the two tables that is not in the code and when I inspect it in chrome it shows the code has a &nbsp character between them.
Why is this appearing in the page when it loads but it is not in the script? How can I remove it?
<table width=100% border=2 cellpadding=0>
<tr>
<table width=100%>
<tr>
<th width=10% align="right">Destination:</th>
<td width=60%>Here</td>
<td width=10% align="right">Date:</td>
<td width=20% align="left"> <%=FormatDateTime(d,2)%></td>
</tr>
</table>
</tr>
<tr>
<table width = 100%>
<tr>
<td width=2%> </td>
<td align="right">Time1:</td>
<td align="center"><%=formatTime(oRS1("time"))%></td>
<td><%=oRS1("location")%></td>
<td width=40> </td>
<td align="right">Driver</td>
<td> <%=fpn%></td>
</tr>
<tr>
</table>
I just had this same issue and here are the steps that I tried that eventually fixed it:
Cleared the cache in the browser
Cleared all browser data
Tried a different browser
None of the above worked in my case, and the phantom was not in my code (and I triple checked it!!!!), but it was obviously somewhere since it was showing in the console and other browsers:
So, (and this may not be the best way to solve this but it worked) as you can see from my console output, I added two paragraph tags above and two below (by carefully putting the cursor in front of the next element and using a carriage return and the arrow key to go back up) to get the phantom in the middle. After that I saved it, then proceeded to select and delete the two paragraph tags in the middle together (with the phantom between them). This is what finally worked, the delete of both the elements surrounding it together took the phantom with it...
Perhaps some small part of my html page became corrupted? Who knows... but if anyone else is having this issue, give this a try.

outlook 2013 in-browser inbox is adding style attribute to my table and destroying the alignment

EDIT: I have added a fiddle to better demonstrate what is happening since the person who has taken the time to offer an answer (thanks!) does not seem to get what I was asking, so hopefully this helps to clarify
http://jsfiddle.net/t5sPL/
I am sending an HTML email. It renders fine in gmail, outlook desktop client, and several other email clients. however, when viewing an inbox online in the outlook webmail app, http://portal.microsoftonline.com, Microsoft seems to be doing its best to not let me center the contents of a table. Tipped off by this article
https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin
I see that the margin attribute is no longer supported. I tried using padding instead and no luck. So, to center my table, I thought I could go oldschool and use this pattern to center it:
<table width='100%' style='width:100%'>
<tbody>
<tr>
<td align='center'>
<table width='700' style='width:700px'>
<tbody>
<tr>
<td>Content to be centered</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
however, this still does not work, because in my <td align='center'> tag, outlook is inexplicably attaching a style='text-align:center;' attribute, for a result of
<td align='center' style='text-align:center;'>
which effectively justifies the content to the left. When I use "inspect element" and delete the style attribute, everything looks as expected.
Has anyone dealt with this issue before? Any resolution, or explanation? Thanks!
Are you trying to center the content inside the 700 wide table? If so, add align="center" to the table cell it is in:
<table width='700' style='width:700px'>
<tbody>
<tr>
<td align="center">Content to be centered</td>
</tr>
</tbody>
</table>
If you are trying to left align the 700 table content, but have the 700 table itself centered, just add align="left" to the <td> instead.
UPDATE:
Based on your jsFiddle - This should fix it:
<table width='100%' style='width:100%' border=1>
<tbody>
<tr>
<td align='center' style='text-align:center'>
<table align='center' width='700' style='width:700px' border=1>
<tbody>
<tr>
<td align='left'><b style='color:red'>This content used to be aligned incorrectly...</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>

HTML table - space between rows

I am seeing a different behavior between Firefox and Chrome for the same HTML table.
Firefox: the space between rows are equally divided.
Chrome: the space between rows are NOT equally divided.
Could someone tell me what is going on?
jsfiddle.net
<html>
<body>
<table border="1" width="100%">
<tr>
<td rowspan="3">AAA</td>
<td>BBB</td>
<td rowspan="3"CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/></td>
</tr>
<tr>
<td>BBB</td>
</tr>
<tr>
<td>BBB</td>
</tr>
</table>
</body>
</html>
It's a known rendering issue with Chrome/Webkit browsers.
A user provided a solution here: Table cells bad rendering with Google Chrome/Webkit
You need to use close the tag by using <br/> instead of <br>.
In compliant XHTML, all tags need to be properly closed. In this case, instead of closing the tag with </br>, you use the trailing / to do it.
<br></br>
is equivalent to
<br/>
You would do the same thing with an image element:
<img src="..."/>
Had a similar issue where I get 1px space between rows in Chrome but not in other browsers. It was solved when I added the following in the the CSS.
td{
padding: 0px 0px;
position:relative;
}
The key point is setting td to "position:relative". For some reason it solved the issue. Maybe the same could help in this situation.
What if you close the third <td...
<td rowspan="3"CCC
<td rowspan="3">CCC

link not clickable in IE

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

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.