Why Does Chrome Insert Code Into My HTML Page? - html
I have a page with two large tables, one positioned above the other:
http://files.sportsmogul.com/Encyclopedia/1907/BOS/index.html
In my editor (Dreamweaver CC 2015), there is no space between the tables.
But in Chrome, there is a unwanted gap of about 10 pixels (the blue space where the background shows through, between the top "navbar" and the rest of the page).
When you open 'Developer Tools' in Chrome, you see that Chrome has INSERTED a 'br' tag on-the-fly. (You can see the tag in the Developer Tools, but Chrome doesn't make any changes to my HTML file).
The first table closes on line 69.
The second table opens on line 71.
There is no code between these two tables (much less a 'BR').
However, Chrome inserts a 'BR' tag when displaying the file.
Why is Chrome doing this and how can I stop it?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>
1907 Boston Americans
</title>
<link href="../../styles.css" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">body {background-color: #606080; background-image: url(../../wallpaper.jpg)}</style>
<script type="text/JavaScript">
function MM_jumpMenu(targ,selObj,restore)
{
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<a name="top"></a>
<table class="basic" width="HTML_TABLE_WIDTH" align="center" cellpadding="0" cellspacing="0" background="../../navbar0.jpg" bgcolor="#ffffff">
<tr><td width="70" valign="top" style="PADDING-LEFT: 10px; PADDING-TOP: 10px"><table border="0" cellspacing="0" cellpadding="0">
<tr><td height="27" valign="bottom"><b class="title">Year: </b></td></tr>
<tr><td height="27" valign="bottom"><b class="title">Team: </b></td></tr>
</table></td>
<td style="PADDING-TOP: 7px"><table border="0" cellspacing="0" cellpadding="0">
<tr><td height="27" valign="top">
<form name="form1" id="form1">
<select name="menu1" class="navbar" onchange="MM_jumpMenu('parent',this,0)">
<option value="../../1901/BOS/index.html">1901</option>
<option value="../../1902/BOS/index.html">1902</option>
<option value="../../1903/BOS/index.html">1903</option>
<option value="../../1904/BOS/index.html">1904</option>
<option value="../../1905/BOS/index.html">1905</option>
<option value="../../1906/BOS/index.html">1906</option>
<option value="../../1907/BOS/index.html" selected>1907</option>
<option value="../../1908/BOS/index.html">1908</option>
<option value="../../BOS/index.html">All Years</option>
</select>
1906 | 1908
</form></td>
<td><span title="Show All Years"><img src="../../history.jpg" alt="All Years" width="28" height="22" border="0"></span></td>
</tr>
<tr><td height=27 valign="top">
<form name="form2" id="form2">
<select name="menu2" class="navbar" onchange="MM_jumpMenu('parent',this,0)">
<option value="../../1907/BOS/index.html" selected>Boston Americans</option>
<option value="../../1907/BSN/index.html">Boston Doves</option>
<option value="../../1907/BRO/index.html">Brooklyn Superbas</option>
<option value="../../1907/CHC/index.html">Chicago Cubs</option>
<option value="../../1907/CHW/index.html">Chicago White Sox</option>
<option value="../../1907/CIN/index.html">Cincinnati Reds</option>
<option value="../../1907/CLE/index.html">Cleveland Naps</option>
<option value="../../1907/DET/index.html">Detroit Tigers</option>
<option value="../../1907/NYG/index.html">New York Giants</option>
<option value="../../1907/NYY/index.html">New York Highlanders</option>
<option value="../../1907/PHA/index.html">Philadelphia Athletics</option>
<option value="../../1907/PHI/index.html">Philadelphia Phillies</option>
<option value="../../1907/PIT/index.html">Pittsburgh Pirates</option>
<option value="../../1907/SLB/index.html">St. Louis Browns</option>
<option value="../../1907/STL/index.html">St. Louis Cardinals</option>
<option value="../../1907/WSH/index.html">Washington Senators</option>
<option value="../../1907/index.html">All Teams</option>
</select></form></td>
<td><span title="Show All Teams"><img src="../../earth.jpg" alt="All Teams" width="28" height="22" border="0"></span></td>
</tr>
</table></td>
<td width="200"><img src="../../navbar1.jpg" border="0" alt="Home" width="200" height="76"></td>
<td width="198"><img src="../../navbar2g.jpg" border="0" alt="Leaders" width="198" height="76"></td>
<td width="198"><img src="../../navbar3.jpg" border="0" alt="Baseball Mogul" width="198" height="76"></td>
</tr>
</table>
<!-- Chrome inserts a BREAK (BR) here. -->
<table class="basic" width="HTML_TABLE_WIDTH" align="center" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="PADDING-RIGHT: 5px; PADDING-LEFT: 10px" align=center valign=top><BR>
<table class=table1 cellSpacing=0 cellPadding=0 width=310>
<tr class=tabletitle><td colspan="3">
<div align="center"><strong>1907 American League</strong></div></td></tr>
<tr class=header0>
<td width=195 class=ltl>Team</td>
<td width=60 class=ltc>Record</td>
<td width=55 class=ltc>GB</td></tr>
<tr><td class=lml>Detroit Tigers</td>
<td class=lmc>92 - 58</td>
<td class=lmc>—</td>
</tr>
<tr><td class=lml>Philadelphia Athletics</td>
<td class=lmc>88 - 57</td>
<td class=lmc>1.5</td>
</tr>
<tr><td class=lml>Chicago White Sox</td>
<td class=lmc>87 - 64</td>
<td class=lmc>5.5</td>
</tr>
<tr><td class=lml>Cleveland Naps</td>
<td class=lmc>85 - 67</td>
<td class=lmc>8.0</td>
</tr>
<tr><td class=lml>New York Highlanders</td>
<td class=lmc>70 - 78</td>
<td class=lmc>21.0</td>
</tr>
<tr><td class=lml>St. Louis Browns</td>
<td class=lmc>69 - 83</td>
<td class=lmc>24.0</td>
</tr>
<tr class=highlight2><td class=lml><B>Boston Americans</B></td>
<td class=lmc><B>59 - 90</B></td>
<td class=lmc>32.5</td>
</tr>
<tr><td class=lml>Washington Senators</td>
<td class=lmc>49 - 102</td>
<td class=lmc>43.5</td>
</tr>
</table></td>
<td style="PADDING-RIGHT: 10px; PADDING-LEFT: 5px" align=center valign=top><br>
<table class="table1" cellSpacing=0 cellPadding=0 width=310>
<tr class="tabletitle"><td>
<div align="center"><strong>7th (AL)</strong></div>
</td></tr>
<tr class=header><td></td></tr>
<tr><td class=lml>Runs Scored: 464</td></tr>
<tr class="highlight"><td class="lml">Runs Allowed: 558</td></tr>
<tr><td class="lml">Attendance: 436,777</td></tr>
</table></td>
</tr>
First of all there is a <br> immediately after the navbar table: http://i.imgur.com/qLGU3Du.png
Remove that and most of the space will go away. The leftover space is caused by the 'Home', 'Leaders', and 'created by' images in the navbar. The default alignment for inline elements such as those reserves some space underneath for letter descenders. You need to add a vertical-align: top style to each of those 3 images to remove the space. For example, the first image would look like:
<img src="../../navbar1.jpg" border="0" alt="Home" width="200" height="76" style="vertical-align: top">
So after removing that <br> and adding those styles to the three navbar images, it should look like this: http://i.imgur.com/XdgcTjj.png which I believe is the effect you were going for.
Also, just as a side note, Dreamweaver makes your code look absolutely atrocious and almost impossible to read. It makes finding these problems very difficult, which may be why nobody has really been able to help.
There is in fact a <br> between your tables. Giving a line might not help because it could be different in dream weaver.
What I would suggest is, open this document and then once open, press the following at the same time. CTR + F (or CMD + F on a mac) A search box will pop up, then type <br> If you do this while at the top of the document it will bring you to the first break, otherwise go to the one nearest the top. That is the one causing issues. just delete it and problem solved!
Inside of every
<td colspan="3" style="PADDING-LEFT: 10px; PADDING-RIGHT: 10px">
are "br" tags. Search for this line and you will find them all, or look at what the poster suggesting using a search function has said, it is also sufficient.
My wife discovered at least a partial answer:
Phantom <br> tag rendered by browsers prior to <table> tag
Unfortunately, the solution to that question doesn't appear to solve my problem. I validated the code using the feature in Dreamweaver 2015 that submits it W3C service and it comes back with "No warnings or errors found".
Related
How to edit a html template so that it shows a different logo for each company?
I assumed it wouldn't be too difficult so jumped on the wagon to try to send automated email templates. We send these emails to around 8 different categories/companies. I want the recipient company's logo on the up left side of the page. For each company, the template must understand which company is it for and create the logo accordingly. Currently it is our own fixed logo on this left side. How can I do that? <body> <font face="Arial" Font-Size=10pt> <table border="0" width="720" cellspacing="1" cellpadding="0" id="table6"> <tr> <td width="336"> <font face="Arial" Font-Size=10pt> <a href="http://www...ourwebsite...net"> <img border="0" src="OurLogo.gif" width="335" height="96"> </a> </font> </td> <td width="340"> <p> </p> <p> <font face="Arial" Font-Size=10pt> <b><font face="Arial" font-size=14pt>SOME TITLE</font> </b> </font> </td> <td width="88"> <p align="right"> <font face="Arial" Font-Size=10pt> <img border="0" src="Another_Random_Logo.gif" width="73" height="45" align="right"> </font> </td> </tr> </table>
You have to do something like this:
Created an array of images.
Added onclick on select. Upon your selection the changeCompany function will be called and an image from the array will be selected based on the index.
let images = ['https://i.picsum.photos/id/0/367/267.jpg?hmac=7vvdjNHaShwe3Ul3DAaQIBBz0RnNLfUcEaCV-94NNLE', 'https://i.picsum.photos/id/1001/367/267.jpg?hmac=h9_xzQEoMCgh9gDWOgnNnsEC9eTnf3j2BTfKXt8uu6U', 'https://i.picsum.photos/id/100/367/267.jpg?hmac=mNdSdA1Zh6w4qessdp5n207IFw3q_8FbbQ1gIr0jYBs'];
function changeCompany(id) {
document.getElementById("company_image").src = images[id];
console.log(images[id])
}
<div id="custom_select" style="width:200px;">
<select onclick="changeCompany(value)">
<option value="0">Company 1</option>
<option value="1">Company 2</option>
<option value="2">Company 3</option>
</select>
</div>
<img id="company_image" src="">
Working JsFiddle code
Render issue with CSS email signature on iPhone
I am making a new signature for my email. Here is the code:
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
</style>
<table cellspacing="0" width="500" cellpadding="0" border="0" style="padding:20px 0 20px 0;">
<tr>
<td style="padding:0 9px 0 0;vertical-align: middle;" width="100" valign="top"> <img alt="Logo" width="100" style="width:100px;moz-border-radius:15%;khtml-border-radius:15%;o-border-radius:15%;webkit-border-radius:15%;ms-border-radius:15%;border-radius:15%;" src="https://i.ibb.co/FzTmBN9/testlogo.png" /> </td>
<td style="border-left:0px solid;vertical-align: top;border-color:#acacac;padding:0 0 0 0px;" valign="middle">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.6;font-family:'Open Sans','Verdana','Geneva',sans-serif;font-size:12px;color: #000000;letter-spacing:.8px;">
<tr>
<td> <span style="font: 12px 'Open Sans','Verdana','Geneva',sans-serif;color:#000000;">My Name</span> <span style="font-family:'Open Sans','Verdana','Geneva',sans-serif;color: #000000;"> </span> </td>
</tr>
<tr>
<td style="padding: 5px 0;">
<div style="font-family: 'Lato','Verdana','Geneva',sans-serif;font-size:11px;color: #000000;letter-spacing:1.2px;">My Company</div>
</td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">line 1: </span> <span><a style="text-decoration:none;font-family:'Open Sans','Verdana','Geneva',sans-serif;color:#000000;" href="tel:+">123 456 7890</a></span> </td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">line 2: </span> <span><a style="text-decoration:none;font-family:'Open Sans','Verdana','Geneva',sans-serif;color:#000000;" href="tel:+">123 456 7891</a></span> </td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">https:// </span> <span style="font-family:'Open Sans','Verdana','Geneva',sans-serif;">website.com</span> </td>
</tr>
</table>
</td>
</tr>
</table>
<span style="font-family:'Open Sans','Helvetica','Arial', sans-serif;color:#acacac;font-size: 10px;">This communication (including any attachments) is intended only for the recipient(s) identified in the message, and may contain information that is business proprietary/confidential, privileged, or otherwise protected by law. If you are not the intended recipient, please disregard this communication and notify the sender. Any disclosure, copying, or distribution of this message, or the taking of any action based on it, without the express permission of the originator, is strictly prohibited.</span>
When I send myself a test email on my iPhone XS Max running iOS 13.5.1 it works well and displays like this:
But then if I rotate the phone horizontally it then does this:
And then when I turn it back to portrait mode it does this:
I am pretty sure this is a bug with the iOS mail app and not my code, however I want my signature to display well on any ordination. Why is this occurring? How can I fix this? I've tried adding in some breakes (<br>) and padding with no luck.
It's quite possible you need to put the span element within a table too. Alternatively, an easier option would be to use a paragraph tag instead of a span (make it a block element, not inline, in other words). i.e.: <p style="font-family:'Open Sans','Helvetica','Arial', sans-serif;color:#acacac;font-size: 10px;">This communication (including any attachments) is intended only for the recipient(s) identified in the message, and may contain information that is business proprietary/confidential, privileged, or otherwise protected by law. If you are not the intended recipient, please disregard this communication and notify the sender. Any disclosure, copying, or distribution of this message, or the taking of any action based on it, without the express permission of the originator, is strictly prohibited.</p>
ExtJs HTML/DOM code optimization
Spent already a lot of resources to figure out how to optimize extJs HTML code. I have simple combobox with a label and extjs throw on a page this: <tr role="presentation" id="inputs[1].TypeId-inputRow" class="x-form-item-input-row"> <td role="presentation" id="inputs[1].TypeId-labelCell" style="" valign="top" halign="left" width="88" class="x-field-label-cell"> <label id="inputs[1].TypeId-labelEl" for="inputs[1].TypeId-inputEl" class="x-form-item-label x-unselectable x-form-item-label-left" style="width:83px;margin-right:5px;" unselectable="on"> Placement ID: </label> </td> <td role="presentation" class="x-form-item-body x-form-trigger-wrap-focus" id="inputs[1].TypeId-bodyEl" colspan="2"> <table id="inputs[1].TypeId-triggerWrap" class="x-form-trigger-wrap" cellpadding="0" cellspacing="0" style="table-layout: auto;"> <tbody> <tr> <td id="inputs[1].TypeId-inputCell" class="x-form-trigger-input-cell"> <div class="x-hide-display x-form-data-hidden" role="presentation" id="ext-gen1311"> </div> <input id="inputs[1].TypeId-inputEl" type="text" class="x-form-field x-form-required-field x-form-text x-trigger-noedit x-form-focus x-field-form-focus x-field-default-form-focus" autocomplete="off" name="inputs[1].TypeId" placeholder="DATA SOURCE" readonly="readonly" aria-invalid="false" data-errorqtip="" style="width: 137px;"> </td> <td valign="top" class=" x-trigger-cell x-unselectable" style="width:22px;" id="ext-gen1310"> <div class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-first" role="button" id="ext-gen1309"> </div> </td> </tr> </tbody> </table> </td> </tr> How could I change tables inside a tables just for simple xtype: 'combobox'? I have hundreds like that on a page, it slows down a lot because very heavy HTML code. it could be done with simple div wit ha float on it, why does extJS renders all this table code?
If you want/need a simpler markup in Ext, the only way is to code your own component where you can define a simpler one. There is no way of simplifying the Ext generated markup without a danger of breaking functionality or layout engine.
Table tr td cant get text in one lane
I'm trying to build a newsletter for an email campaign. I have to build it with tables and all that cause most of the email clients ignore thinks like div etc. now I have the problem that I would like to have the text obertauern ...... in one line and under it the line ( <hr> ) but its not working the way I would like to have it. On the pic you can see what I'm trying to do and I put the html into jsfiddle. <table width="700" border="0" cellspacing="0" cellpadding="0" align="center"> <td colspan="2"> <img src="head.jpg" width="700" border="0"> </td> <tr> <td colspan="2"> <p style="color:#00668a;text-align:left;font-size:18px;"> Wer den Sonnenskilauf im SalzburgerLand noch intensiv genießen möchte, den erwarten strahlender Sonnenschein, bestens präparierte Pisten und sensationelle Urlaubsangebote: </p></td> </tr> <tr style="background-color:#deeef4;"> <td width="130" cellpadding="0" ><p style="color:#00668a;padding:10px">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span></p><a href="http://urlaub.salzburgerland.com/de/winterurlaub?utm_campaign=RK_WI_13&utm_medium=DE&utm_source=CARE-Verlag&utm_content=Newsletter" target="_blank"> <img src="ab1.jpg" width="250" height="138" border="0" style="padding:10px"></a> <td width="200" height="163"><p>"Sund and Fun Wochen"</p> <ul> <li>7 Tage Aufenhthalt inkl. Frühstück</li> <li>7 Tage Aufenhthalt inkl. Frühstück</li> </ul><img src="button.png" width="345" height="35" border="0"></td></td> </tr> </table> jsfiddle
just use the border property to create the line and change the p to a div so you do not put a lot of space after it: <tr> <td colspan="2"> <div style="border-top: solid 1px #00668a;height:1px;"> Here is a jFiddle: http://jsfiddle.net/qXxPb/2/
Try: <td width="600" cellpadding="0" > For the td where the text is located (or use something else than 600).
I fixed your jFiddle: http://jsfiddle.net/mSLf4/5/ Should work like that, you missed some tablecells and I made your sentence in an extra row + set the cell to span over 2 cells. Should work now, next time validate your code first please. <td colspan="2">...</td> was the important line.
How to make drop-down menu appear over a combobox in IE6?
I'm facing a problem in IE6 : My website contains a drop-down menu and some pages contains comboboxes. When I roll-out a menu and it's covering a combobox, the combobox always appears over the menu ! My website is to be used exclusively on IE6, so I want to solve this problem on IE6 and make the drop-down menu apprear OVER the combobox in such situations. Here is a code snippet that illustrates the problem : <html> <body> <!-- Menu --> <table width="20%" border="0" style="position:relative; z-index:100;"> <tr> <td colspan="0"> <table style="background-color: #40668C; color: white; z-index:100;" width="100%"> <tr> <td>Agenda</td> </tr> <tr> <td> <table align="right" valign="top" width="100%" height="100%" style=" visibility: visible; position: absolute; background-color: #40668C; color: white; top: 21px; z-index:100;"> <tr><td>Personnal</td></tr> <tr><td>Group</td></tr> <tr><td>Day</td></tr> </table> </td> </tr> </table> </td> </tr> </table> <!-- Combobox --> <form style="z-index: 0;"> <TABLE style="z-index: 0;"> <TR style="z-index: 0;"> <TD style="z-index: 0;"> <TABLE style="z-index: 0;"> <TR style="z-index: 0;"> <TD>Combobox :</TD> <TD style="z-index: 0;"> <SELECT style="z-index: 0;"> <OPTION></option> <OPTION>Element 1</option> <OPTION>Element 2</option> </select> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </form> </body> </html> I know this problem has already been reported and it's because of IE6 but unfortunately, I tried different solutions so far without any success. Thanks in advance !
This is the result of a z-index bug in IE6. Select elements are given a high z-index, so they always appear in front of other elements.
A quick way to fix this is to hide the select when your menu is open. You can call a function like this when you open the menu:
function hide_select(myelement){
var select = document.getElementById('myelement');
if(select.style.visibility == "hidden")
{
select.style.visibility="visible"
}else{
select.style.visibility="hidden";
}
}
Reference: http://www.tinyqueen.com/web-site-design/ie6-select-z-index-bug-a-workaround
It's an IE6 bug. There is no way around it other than setting the combo-box's CSS attribute display: none; while hovering on the dropdown, and setting it visible again otherwise.