Spaces between table cells that has no border - html

I just want to decrease the size of space between this two images I put in the table. I'm so sorry I know this is just a basic html code. Please help me.
This is the code:
<table class="sample" width="200" border="0" cellpadding="1" cellspacing="1" >
<tr>
<td align="center" valign="center">
<a href="#" ><img src="images/reception2.png" alt="" /></a>
</br>
SERVICES
</td>
<td align="center" valign="center">
<img src="images/services2.png" alt="" />
</br>
OFFERS
</td>
</tr>
</table>

It's hard to advise without seeing the CSS you are using. You could try adjusting the width of the table.
Demo here: http://codepen.io/sol_b/pen/VmQGzr
You can remove the inline style on your table and then target it in your CSS, like this:
.sample {
width: 200px;
}
Change the width to whatever works.

you can use margin property of CSS. for your question margin-right for the SERVICES img and margin-left for the OFFERS img are proper solutions.
Try to add this snippet:
<img src="images/reception2.png" alt="" style="margin-right: -25px"/>
<img src="images/services2.png" alt="" style="margin-left: -25px"/>
Also, You can change the number range to finally find the suitable numbers.

Related

XPATH - Find element where child items h3 text has a specific value

I need to find the selected DIV using a 'Employment' text for h3 tag.
I can find it using the following XPATH:
.//div[table[tbody[tr[td[h3[text() = 'Employment']]]]]]/following-sibling::div[#class = 'pbBody']
But this is too big and ugly, what is the good way? something like:
parent::div[h3]following-sibling::div, so without this [table[tbody[tr[td[
HTML text:
<div class="listRelatedObject customnotabBlock">
<div class="bPageBlock brandSecondaryBrd secondaryPalette">
<div class="pbHeader">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="pbTitle">
<img class="minWidth" width="12" height="1" title="" style="margin-right: 0.25em;" alt="" src="/img/s.gif"/>
<img class="relatedListIcon" title="Custom" alt="Custom" src="/img/s.gif"/>
<h3 id="a1H9E000000528F_00N2400000IF18T_title">Employment</h3>
</td>
<td class="pbButton">
<td class="pbHelp">
</tr>
</tbody>
</table>
</div>
<div id="DIV_THAT_I_NEED_TO_FIND" class="pbBody">
<div class="pbFooter secondaryPalette">
</div>
</div>
If you want shorter version you can try
//h3[.="Employment"]/following::div[#class="pbBody"]
The most simple locator:
//div[#class="pbBody"][.//h3[text()='Employment']
but better to use "contains", as usually classes could be added to element
//div[contains(#class, "pbBody")][.//h3[text()='Employment']
And last one is similar to #Andersson 's, but corrected (as you need not following element, but ancestor):
//h3[.="Employment"]/ancestor::div[#class="pbBody"]

Unable to change header height in HTML

I have created a header for our companies email templates, luckily I was able to find a basic template on the web and tweak it to our requirements.
I am a real beginner when it comes to HTML so I am sure there are many errors in it too.
I need to figure out how to reduce the blue banner to 42px in height but everything I try ruins it. I have also been told that my 600 wide option is very old school and it should be 1200. I have tried to change this too, but then it loses all of the other formatting and looks terrible.
Its supposed to be responsive, if anyone could make any edit suggestions I would be very grateful.
header.txt
header.html
try changing the padding in the td containing the logo/image. To decrease the height of the blue banner, decrease the padiing at top and bottom of the above mentioned table data.
This helps you but another way is to decrease the logos height.
From looking at the codes, there is no specific "height" that is being assigned to the table containers that you can change to specify to 42px. The most that you can do is to remove the "top" and "bottom" padding from the containers inside to make the header's height smaller.
Here's a sample code with the changes. If you notice, I changed the top and bottom padding to 0px. For the second td, I left 5px for the top padding to add some spaces between the logos and the top edge of the screen. If you want to edit the width, I change the width to 800px but you also need to adjust the widths of the 2 containers inside the table. For example, I changed them from 270px to 370px each.
Lastly, I agree that this "template" that you found seems very complex and it would be better to learn a little bit of basic html and css and what you're trying to do is simple and can be done with much simpler codes. Good luck!
<center>
<table cellspacing="0" cellpadding="0" width="800" class="w320">
<tr>
<td valign="top" width="370" style="background:#2980B9;padding:0px 15px 0px 15px;">
<a href="https://www.hayley-group.co.uk/" style="text-decoration:none;">
<img src="http://hosted.hayley-group.co.uk/shop/hayley_web_logo_white(trans).png" width="110" height="auto" alt="Hayley Group PLC Logo"/>
</a>
</td>
<td valign="top" width="370" style="background:#2980B9;padding:5px 15px 0px 15px">
<table border="0" cellpadding="0" cellspacing="0" class="mobile-center-block" align="right">
<tr>
<td align="right">
<a href="https://www.facebook.com/HayleyGroup/">
<img src="http://hosted.hayley-group.co.uk/shop/social_facebook.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://twitter.com/HayleyGroup">
<img src="http://hosted.hayley-group.co.uk/shop/social_twitter.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://www.linkedin.com/company/hayley-group">
<img src="http://hosted.hayley-group.co.uk/shop/social_linkedin.png" width="30" height="30" alt="social icon"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>

table-footer-group and table-header-group not taking the width of the table

Firstly I am doing a responsive website, the layout is a bit complicated.I have two columns in a table. The client need last column first in mobile and the first column last.
I did that using table-header-group and table-footer-group. The parent table takes the width of the Container, but the columns not taking table's width.
Please find the attached image here.
You can see the table width in the last of the image, but the column's not taking that width.
Can anyone know how to fix the column's width according to the table.
Please find the HTML below
<div class="col1">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="colA">
<img src="https://cdn4.iconfinder.com/data/icons/redis-2/467/Redis_Logo-256.png" />
</td>
<td class="colB">
<img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
<img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
<img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
<img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
</td>
</tr>
</table>
and here the
Demo Fiddle
Add display:table and width:100% to the parent tr to make columns full width.
<div class="col1">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr style="display:table;width:100%;">
<td class="colA">
<img src="https://cdn4.iconfinder.com/data/icons/redis-2/467/Redis_Logo-256.png" />
</td>
<td class="colB">
<img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
<img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
<img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
<img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
</td>
</tr>
</table>
See fiddle
Don't use a table. Instead float "column 2" to the right and (depending on how you define the widths of the columns) either float "column 1" left, or give it a right margin the same as the width of "column 2". For mobile just remove the floats and margins.
If this doesn't help, post the relevant HTML and CSS, best as a fiddle.

Html img 1 pixel line underneath

I am not a html programmer but I have to fix an urgent problem. Since this is a private project, I can't post the code here. But here is the obfuscated page source (Note: a href tag is created by Spring Security tag)
<td width="359">
<table style="margin-left:auto; margin-right:8px">
<tbody><tr>
<td>
<img src="/img/Login.gif" alt="Login" height="18" border="0" width="120">
<br>
<br>
<img src="/img/newAct.gif" alt="new account" height="18" border="0" width="120">
</td>
</tr>
</tbody></table>
</td>
Above html code creates a 1 pixel shadow right under the second image. Please see attached picture and red arrow pointing to 1 pixel line.
Thank you for your help in advance!
<img src="..." style="margin-top:0px;">

HTML-Newsletter: Image adjust

I have made an HTML-Newsletter Template. I have one Bug. How can i adjust images in table layouts? I have tried to to use margin but that wont work on Outlook 2010.
Here ist the Code-Snipet from the image: `
<table id="logo" cellpadding="20" cellspacing="0" width="620" align="center">
<td width="161" height="24" align="left" valign="top">
<a title="www.xxx.xxx besuchen" href="http://www.xxx.xxx/" target="_blank"><img src="http://www.xxx.xxx/images/header/logo_sub.gif" border="0" alt="www.xxx.xxx besuchen" style="margin-left:-13px !important;"/></a>
</td>
</table>`
Try adding columns and rows to the table. Stick the image in one of the middle columns and apply widths and heights to the surrounding columns to get the image into place.