when I scroll horizontal the page, the background color disappear. How to solve?
This is the code
<html>
<head>
</head>
<body style="margin:0 auto;">
<div align="center" width="100%" style=" background-color: #183337; height: 50px; ">
<table align="center" width="100%" border="0">
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>
</div>
</body>
</html>
LOOK HERE
Add
display: inline-block;
To the styling for that div.
Here is how it will look. http://jsfiddle.net/3kdu6/4/
Related
I'm trying to remove the extra space for the jcpenney credit card logo.
I tried multiple attempts from border-collapse,display:block and even setting the margin to auto.Any feedback is welcome.Thank You
<table class="Billing-and-Shipping-Information" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background: white; ">
<tr>
<td>
<table class="billing" width="50%" cellpadding="0" cellspacing="0" border="0" align="left" style="background: white;padding-left:20px;margin:auto; ">
<tr>
<td style="margin:0 auto;padding:0px;">
<h3 style="font-family:Arial,Helvetica,sans-serif;font-weight:600;font-size:20px;margin:0 auto;display:block;">Billing Information</h3>
</td>
</tr>
<tr>
<td>
<!--HERE IS THE ISSUE -->
<img src="images/jcpenney.jpg" style="display:block;">
<!-- HERE IS THE ISSUE -->
</td>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;margin:0 auto;">JCP Card *XXXX* </td>
<td style="padding-top:5px;padding-left:24px;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;margin:auto;">$64.94</td>
</tr>
</table>
Your question is not clear. Though you can try this
<td style="text-align:center;>
<img src="images/jcpenney.jpg" style="display:block;">
</td>
or,
<td>
<img src="images/jcpenney.jpg" style="display:block;width:100%;">
</td>
Do you mean the extra white space below the image?
For example, here at this example I did, you can see a white extra space below the astronaut img and you can fix that adding the next property and value to the imgs at yout CSS.
vertical-align: middle;
img {
max-width: 100%;
}
.image-container {
width: 300px;
background-color: red;
}
<div class="image-container">
<img src="https://i.imgur.com/DtxmvLB.jpg" alt="Apollo 11">
</div>
The first should have vertical scroll bar when it's longer than 50% but it didn't work. I want to fix the 50% and if the text is longer it should show the scroll bar from the overflow.
<!DOCTYPE html>
<html>
<head>
</head>
<style>
html, body { height: 100%; }
</style>
<body>
<table style="height:100%; width:100%" border=1>
<tr style="height:50%">
<td style="width:30%;">
<div style="width:100px; height:50% overflow:auto;">
<table>
<tr><td>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</td></tr>
</table>
</div>
</td>
<td width="70%"></td>
</tr>
<tr style="height:50%"><td></td><td></td></tr>
</table>
</body>
</html>
You are doing almost right ... just ,missing a huge comma :P <div style="width:100px; height:50% ;overflow:auto;">
<!DOCTYPE html>
<html>
<head>
</head>
<style>
html, body { height: 100%; }
</style>
<body>
<table style="height:100%; width:100%" border=1>
<tr style="height:50%">
<td style="width:30%;">
<div style="width:100px; height:50% ;overflow:auto;">
<table>
<tr><td>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</td></tr>
</table>
</div>
</td>
<td width="70%"></td>
</tr>
<tr style="height:50%"><td></td><td></td></tr>
</table>
</body>
</html>
I have a image that I'd like to use as a horizontally-repeating banner with a non-white background color underneath in an HTML email, that also scales to fit the height. Although it is currently repeating, I cannot get the image to scale down properly. The header element is set to 100px, but the image does not resize and is cut off by the next element.
HTML
<body style="margin: 0; padding: 0;" >
<!-- CONTAINER TABLE (HEADER) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style=" table-layout: fixed;">
<tr>
<td align="center" bgcolor="#339969" style="padding: 0 0 0 0;">
<!-- HIDDEN PREHEADER -->
<div style="display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
Some text.
</div>
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper">
<!-- HEADER -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- HERE need to properly scale then repeat this image -->
<td align="left"
background="img/large_christmasbanner.png"
background-size="contain"
alt="Bappy Bolidays!"
width="100%"
height="100">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
background-size="contain" is not a valid html attribute. Use this instead:
style="background-size: contain;"
I put an image of height 900px inside a table also of height 900px. But for some reason an added 5px height automatically gets added to the bottom of the table. Here is the code. Could someone explain why this is happening? Thanks.
<body style="margin: 0; padding: 0;">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="650" height="900" style="border-collapse: collapse;" style="border-top: 1px solid white;">
<tr>
<td><img src="dummy.png" alt="#" style="width: 296px; height:auto;"></td>
</tr>
</table>
</body>
An image is an inline element by default. Add the following style to your image and the white space will disappear.
img{display:block}
jsfiddle demo
It's a known problem of tables and td
Set the image as background of the td
http://jsfiddle.net/F6Gds/30/
<body>
<table align="center" border="1" width="296" height="900">
<tr>
<td style="background-image:url(http://dummyimage.com/296x900/ccc/fff);">
</td>
</tr>
</table>
</body>
The website i am building has the requirement of increasing the size of a textarea as the resolution goes up.
I tried doing this with floating and non floating divs but in every scenario i tried so far the divs aligned nicely but i had no way of controlling the textarea size.
Standard tables do however provide this functionality out of the box except for 1 ie compatibility problem.
The following code works as intended in firefox and ie(quircks mode) standard ie fails to resize the textarea height.
I don't mind some out of the box thinking, it don't have to be tables divs or whatever as long as it gets the job done.
I am aware javascript can do some resolution calculations but that solution feels a bit too complicated for a simple layout issue. The simpler & lesser code the better imo.
<!DOCTYPE html>
<html>
<body>
<table style="width: 100%">
<tr>
<td style="width: 300px">
<table class="clsDataGrid" width="100%" height="350px">
<tr style="height:350px;background-color:blue;">
<td style="height:350px">test</td>
</tr>
</table>
<br/>
<table width="100%">
<tr>
<td style="background-color:red;height:100px">test</td>
</tr>
</table>
</td>
<td style="padding-left : 1em;height: 100%">
<table class="clsDataGrid" style="width: 100%;height: 100%">
<tr>
<th>Description</th>
</tr>
<tr>
<td style="height: 100%">
<textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Ok so solution 3 - using no js - you have to go tables.
Watch out for how I had to force the description label in - its a bug fix not me being an idiot.
<!--Solution 3-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {padding:0; margin:0;}
table td {vertical-align: top;}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="height:350px; background-color:blue; color:white; padding:0 24px;">
Blue Test
</td>
<td rowspan="2" style="padding:31px 24px 0; position:relative; height:100%">
<label style="position:absolute; top:0; left:24px;">Description</label>
<textarea style="resize: none; width:100%; height:100%;">DATAAAAA</textarea>
</td>
</tr>
<tr>
<td style="height:100px; background-color:red; color:white; padding:0 24px;">
Red Test
</td>
</tr>
</table>
</body>
</html>
As with anything like this there are a bunch of solutions - here are two off the top of my head - a place for you to start - I haven't test cross browser.
Hope they help.
<!--Solution 1-->
<!DOCTYPE html>
<html>
<body>
<div style="display:table; width:100%">
<div style="display:table-cell; width:30%;">
<div style="height:350px; background-color:blue; color:white; padding:0 24px;">
Blue Test
</div>
<div style="height:100px; background-color:red; color:white; padding:0 24px;">
Red Test
</div>
</div>
<div style="display:table-cell; vertical-align:middle">
<div style="padding:0 24px;">
<span>Description</span>
<textarea style="resize: none; width:100%;height: 100%">DATAAAAA</textarea>
</div>
</div>
</div>
</body>
</html>
<!--Solution 2-->
<!DOCTYPE html>
<html>
<body>
<div style="width:100%">
<div style="display:inline-block; width:30%;">
<div style="height:350px; background-color:blue;">
Blue Test
</div>
<div style="height:100px; background-color:red;">
Red Test
</div>
</div>
<div style="display:inline-block; width:69%">
<span>Description</span>
<textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea>
</div>
</div>
</body>
</html>