I am creating a mail template with responsive.In OutLook when mail is loading first time, images are not displaying but mail looks good no scroll bar. On clicking the image, image get loaded and automatically scroll bar comes. Its not responsive. How to avoid this scroll bar?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
margin:0 auto;
}
.max-width{
width:100%;
}
.no-margin{
margin:0;
}
.margin-equal{
margin:0 auto;
}
.bold{
font-weight:bold;
}
.content-main-p{
padding:0 0 10px 0;
margin:0;
}
.link{
outline:none;
border:0;
display:inline-block;
color:#0000EE;
}
.wrapper{
padding:0;
font-family:'Calibri';
color:#333;
overflow:hidden;
border-collapse:collapse;
border:0;
font-size:14px;
max-width:100%;
}
.content{
background-color:#ffffff;
}
.content-main{
padding:10px 0;
font-size:14px;
line-height:20px;
color:#00201d;
}
.expert-content table td a{
word-break:break-all;
}
.expert-content table td{
vertical-align:top;
border-collapse:collapse;
min-height:20px;
}
.expert-content .list-test li{
list-style:none;
display:table-cell;
padding:0 2% 0 0;
}
.expert-content .list-test li p{
margin:2px 0;
}
.expert-content .list-test li a{
word-break:break-all;
}
.expert-content a,.expert-content span,.expert-content font span{
display:block !important;
word-break:break-all !important;
}
.content-footer{
border-top:1px solid #BFBFBF;
padding:10px 0;
margin:0;
font-size:10px;
}
.address-panel{
color:#313131;
line-height:normal;
}
.ExternalClass h1{
font-weight:bolder !important;
}
.ExternalClass *{
line-height:100% !important;
}
.expert-content,.address-panel{
border-top:1px solid #BFBFBF;
padding:10px 0;
width:100%;
}
.logo-section a img{
max-width:100%;
}
#media only screen and (max-width: 480px){
body{
font-size:11px !important;
margin:0;
padding:0;
}
} #media only screen and (max-width: 480px){
.wrapper{
width:100% !important;
}
} #media only screen and (max-width: 767px){
.expert-content td{
width:100%;
display:block !important;
}
} #media only screen and (max-width: 480px){
.expert-content td{
width:100%;
display:block !important;
}
} #media only screen and (max-width: 480px){
.bg-btn{
font-size:12px;
margin-right:-130px;
}
}</style></head>
<body>
<table cellpadding="0" cellspacing="0" class="wrapper margin-equal" style="width: 100%;max-width: 100%;table-layout: fixed;">
<!--Email Content table-->
<tr>
<td class="max-width">
<div style="padding: 0 1%;">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="position: relative">
<table cellspacing="0" cellpadding="0" class="content margin-equal" style="width: 100%;max-width: 100%;table-layout: fixed;">
<!--Image section-->
<tr class="logo-section">
<td style="background-color:#D9D9D9;">
<table cellspacing="0" cellpadding="0" class="content margin-equal" style="width: 100%;max-width: 100%;table-layout: fixed;position: relative;">
<tbody>
<tr>
<td style="width: 100%;">
<img style="max-width: 100%; display: block;" src="https://gallery.mailchimp.com/15e0eb6ff3b427d17752e909f/images/04778e34-84a5-487d-be77-813f1a8a9550.png">
</td>
</tr>
<tr style="position: absolute;bottom: 0;">
<td>
<table cellspacing="0" cellpadding="0" class="content margin-equal" style="max-width: 100%;table-layout: fixed;">
<tr>
<td>
<div style="border-radius: 3px;background-color: #E18600;background: #E18600; width: 400px;position:relative; top:-100px !important;">
<a style="font-size: 16px;font-family: Helvetica, Arial, sans-serif;color: #ffffff;text-decoration: none;border-radius: 3px;padding: 15px 25px;border: 1px solid #E18600;display: inline-block;" href="http://www.drupalgeeks.com/still-on-drupal-6-and-looking-for-reliable-long-term-support?utm_source=Email%20Marketing&utm_medium=Email&utm_campaign=Amx-D6-Retainer-MS">
Click here
</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--End Image section-->
<!--Main content-->
<tr>
<td class="content-main" style="background-color:#D9D9D9;">
<p>Hi ,</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.software like Aldus PageMaker including versions of Lorem Ipsum..</p>
<p>xxxx is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker includingversions of Lorem Ipsum.</p>
<p>Thanks,<br>
XXXXXXX</p>
</td>
</tr>
<!--End 3 Column Layout -->
<tr>
<td>
<div style="padding: 10px 0; border-top:1px solid #BFBFBF;"></div>
</td>
</tr>
<tr class="logo-section">
<td style="text-align:center; background-color:#595959;line-height: 20px;padding: 20px 0 20px 0;color: #ffffff;">
<div style="padding: 8px 8px 2px 8px;">
<a href="">
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/e512ea00cef06b6458a70eca017036ea64ac16d638a7f3b6f64ecc89516cb677a3c5c02d96aa046464ba1eeb74119b940aeef1ad6b4d7159156ec0f5bbc738e2.png">
</a>
<a href="">
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/41518b8775122f06178d677e57942f8e8008b80d3891bd2ac70e26ef59ca04173bb473e3ac1866f89e0ea79a395495b29d6cebef12687cfbc302a6913b5a80ab.png">
</a>
<a href="">
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/cb4ebae50ac0840135990248236b9828610f1828d7f4f49e2f9b4b5683940d3ab2d7a616b3f9228e91525162a4c234157d4100b3e83d00c1fbfdd047b44b7e07.png">
</a>
<a href="">
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/037a112de555a804cbe0be286210f3cbc4a9eaa250556e8cd419acdf80395321955758fe23d0fe50b36bdeccf0918b55ef128d8fd59e8812e8dad71b167032ee.png"></a>
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align:center;background-color:#D9D9D9;padding: 10px 0;">
<a style="color:#000000;font-size: 18px;" href="">Visit us</a>|<a style="color:#000000;font-size: 18px;" href="">Unsubscribe</a>
</div>
</td>
</tr>
<!--End Signature panel-->
<!-- Disclaimer -->
<tr>
<td class="content-footer no-margin">
<p class="no-margin" style="padding:0;"><span class="bold">Note: </span>
This is a promotional email which complies with all the guidelines
of CAN-SPAM act 2003. We have found your email address through our own
efforts on the web search and not through any illegal way. If you find
this email unsolicited, please reply with "REMOVE" in the subject line and
we will take care that you don't receive any further promotional mail.
</p>
</td>
</tr>
<!--End Disclaimer -->
</table>
</div>
</td>
</tr>
</table>
</div>
<!--Footer mountain -->
</td>
</tr>
<!--End Email Content table-->
</table>
</body>
</html>
Related
Here is my current code :
img{ width:100%;}
#g1{ width:100px;}
#g2{ width:500px;}
#g1{ width:20%;}
#g2{ width:80%;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div align="center">
<div style="width:75%;" align="left">
<div style="width:100%;"><b><font size="+2" style="word-break:break-all; line-height:40px;"> Title</font></b></div>
<div style="display:table-row;width:100%;">
<div style="width:60%; display:table-cell; background-color:#996;">
<table>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
<td id="g2" rowspan="5"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif" style="width:100%"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
</table>
</div>
<div style="width:40%; display:table-cell; background-color:#F96;">
<p>text Here</p>
<div style="width:100%;">
choose : <input name="" type="text" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
hv anyway to set the text of the the top of the div ? not on half or bottom .
have any suggestion code for this type of design ?
that so ..........................................................................................................................................................
To answer your question, you can change vertical alignement of text inside table with the vertical-align property. In your code, just add vertical-align: top; to the style of your div like so:
<div style="width:40%; display:table-cell; background-color:#F96; vertical-align: top;">
<p>text Here</p>
<div style="width:100%;">
choose : <input name="" type="text" />
</div>
</div>
With that being said, there is a proper way to achieve what you want to do (I'll assume you can build your code from scratch):
First, if you can, put all your styles in your stylesheet to separate your structure and your styles.
Then, if browser support allows you, the simplest way is to use flexbox.
Here is your code cleaned, I let you play with it to understand how everything work:
.wrapper {
width: 75%;
/* This will align your content to the center of the page */
margin-left: auto;
margin-right: auto;
}
.container {
background-color: #996;
display: flex;
align-items: center;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 12%; /* in your code it was 20% of 60% */
flex: 1 1 auto;
}
li + li {
/* if you want spacing between image you can define it here */
margin-top: 10px;
}
img {
display: block;
width: 100%;
height: auto;
}
.featured {
padding-left: 10px;
padding-right: 10px;
width: 48%; /* in your code it was 80% of 60% */
flex: 1 1 auto;
}
.featured img {
margin-top: auto;
margin-bottom: auto;
}
.text {
background-color: #f96;
padding-left: 10px;
padding-right: 10px;
width: 40%;
width: 48%; /* in your code it was 80% of 60% */
flex: 1 1 auto;
align-self: stretch;
}
<div class="wrapper">
<h1> Title</h1>
<div class="container">
<ul>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
</ul>
<div class="featured">
<img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif">
</div>
<div class="text">
<p>Some text here...</p>
<p>
Choose : <input name="" type="text" />
</p>
</div>
</div>
</div>
I would use flex instead of table for display. Change these:
<div style="display:flex;width:100%;">
...
<div style="width:40%; background-color:#F96;">
img{ width:100%;}
#g1{ width:100px;}
#g2{ width:500px;}
#g1{ width:20%;}
#g2{ width:80%;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div align="center">
<div style="width:75%;" align="left">
<div style="width:100%;"><b><font size="+2" style="word-break:break-all; line-height:40px;"> Title</font></b></div>
<div style="display:flex;width:100%;">
<div style="width:60%; background-color:#996;">
<table>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
<td id="g2" rowspan="5"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif" style="width:100%"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
</table>
</div>
<div style="width:40%; background-color:#F96;">
<p>text Here</p>
<div style="width:100%;">
choose : <input name="" type="text" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Do this
<p id="p1">text Here</p>
<div style="width:100%;">
#p1{margin-top:0em;}
I am currently learning HTML and CSS. My problem is: I have a button and a search bar with the search bar currently below the button. I have tried different solutions but to no avail. What should I do so that the button and the search bar are beside each other
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
p.pos_right {
position: relative;
left: 20px;
}
img {
display: inline-block;
z-index:-1;
}
#mine{
display: inline;
}
</style>
</head>
<body>
<div style="text-align:center;">
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>
<div class = "mine" align ="center">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
</body>
</html>
use .mine not #mine (which is for ID.)
give display:inline-block for childer of mine
.mine>button,.mine>table{
display: inline-block;float:left;
}
table, th, td {
border: 1px solid black;
}
p.pos_right {
position: relative;
left: 20px;
}
img {
display: inline-block;
z-index:-1;
}
.mine>button,.mine>table{
display: inline-block;float:left;
}
refer below code snippet.
<div style="text-align:center;">
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>
<div class = "mine" align ="center">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
One of many ways to achieve this would be to put the button in its own
<td>
tag inside the row of the table. I.e.
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
</td>
...
See https://jsfiddle.net/orndorffgrant/189judf0/
.
The reason that there was a line break is that there is an implicit line break before and after every table.
How do I prevent the div overflow that appears at the top.
I do not want to set static dimensions either.
See it here http://jsfiddle.net/tok5zf35/1/ or below
.panel_white_black {
border:7px solid #56575a;
filter:alpha(opacity=70);
background-color:#56575a;
}
.round_all {
-webkit-border-radius:4px;
-khtml-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.round_top {
-webkit-border-radius:4px 4px 0px 0px;
-khtml-border-radius:4px 4px 0px 0px;
-moz-border-radius:4px 4px 0px 0px;
border-radius:4px 4px 0px 0px;
}
<div class="panel_white_black round_all" Width="200px">
<table width="100%" style="border-collapse:collapse; padding:0;" cellpadding="0">
<tr>
<td>
<div style="background: #353639; padding:7px; float:left; width:100%;" class="round_top">
<div style="float: left;"> <font color="white">{dialog title}</font>
</div>
<div style="float:right;"> <font color="white">{X}</font>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="background: #FFFFFF; padding:7px;">{data here}</div>
</td>
</tr>
</table>
</div>
Use box-sizing attribute:
.round_top {
box-sizing:border-box;
}
Corrected fiddle.
There's a good explanation on how this works here on CSS-tricks.com. Essentially it boils down in this case to that your width:100% now means 100% including my own borders instead of the default just my content, which caused the overflow.
If you are not aware of appending your code with yet another div - here is the solution
http://jsfiddle.net/my0j0mmy/
<div style="background: #353639; padding:7px;" class="round_top">
<div style="float: left;"> <font color="white">{dialog title}</font>
</div>
<div style="float:right;"> <font color="white">{X}</font>
</div>
<div style="clear:both"></div>
</div>
I am building an HTML email campaign using Mailchimp and my own HTML. I have heard that to build a successful HTML email you must focus on using tables, and use inline CSS. I have removed all padding from my styles and added in 0 measure to margin, padding, border and outline tags. Any suggestions guys? Really stuck with this.
<body style="background:blue; margin:0; padding:0; border:0; outline:0;">
<div id="wrap" style="background:green; width:100%;">
<table width="100%">
<tr>
<td style="
width:100%; margin:0; padding:0; border:0; outline:0;
height:100px;
background:#4b86fc;
background-size:60px 60px;
">
</td>
</tr>
</table>
<table width="500" align="center">
<tr>
<td style="
padding:20px 0px 25px 0px;
color:#000; font-family:Verdana, Geneva, sans-serif;
font-weight:100; font-size:12px;">
<p>Hi,</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Many Thanks,
Liam</p></td>
</tr>
</table>
<table width="100%">
<tr>
<td style="
width:100%; margin:0; padding:0; border:0; outline:0;
background-color:#ebebeb;
background:#ebebeb;
border-top:1px solid #c3c3c3;
font-family:Verdana, Geneva, sans-serif;
font-weight:100; font-size:11px;
text-align:center;">
<ul style="list-style-type:none; margin:0; padding:0;">
<li style="display:inline; padding:0 8px 0 0;">Homepage</li>
<li style="display:inline; padding:0 8px 0 0;">Twitter</li>
<li style="display:inline; padding:0 8px 0 0;">Dribbble</li>
<li style="display:inline; padding:0 0 0 8px;">Facebook</li>
</ul>
</td>
</tr>
</table>
</div>
</body>
This will get you started:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
content
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
This has the background set as white (#FFFFFF) so that if someone forwards it, they will be writing on white. You can change this to whatever, just keep in mind nobody wants to type on a dark color. The inner table (on the same line as the <body> tag) controls color of the html area background color (#252525). The content table is your center floated panel.
See this thread for a lot more info on html email.
You can apply 100% width for table in html email
Also consider these things :
1 - Must include <meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> in <head>.
2 - Apply mso-line-height-rule: exactly; at the <body>.
Like, <body mso-line-height-rule:exactly;>
3 - Please avoid <ul> & <li> tags, you can use <p> or any other supporting tags. Use • for bullet.
4 - Use <table> instead of <div>
5 - Use <b> instead of <strong>.
6 - Use nested tables, rather than rowspan or colspan.
Go to https://www.campaignmonitor.com/css/ for all kind of help in css for mailer
By default, most browsers add margin to the BODY tag. Therefore you need
<body style="background:blue;margin:0">
to get rid of that margin.
Have you tried putting
margin:0;
in the body style tag?
Notice how the first HTML/CSS works when you re-size the browser horizontally. It will shrink no further than around 800 pixels, but it will expand as far as you drag the right edge of the browser. It will also correctly overflow the table at the top and scroll it horizontally.
The thing I don't like about the first code snippet is where the scrollbar is. I want it to show up within the borders of the fieldset, so even if I narrow the browser down to 800 pixels wide, I can see both the left and right sides of the fieldset's border.
The second code snippet is exactly the same as the first except I add another div tag to the mix, inside of the field set and around the grid. Notice how the top fieldset's width won't correctly shrink when you make the viewport of your browser narrower. Any ideas on why it doesn't work, what I can do to get it to work like the first code snippet?
I don't think I'm describing this clearly, but if you run the two side by side, and expand and contract the horizontal edge of your browser windows, you'll see the differences between the two.
I'm pretty new to CSS and HTML layout, so my understanding of why CSS handles sizing the way it does in some situations is still really confusing to me.
Working HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divMasterGrid {
position:relative;
margin:5px;
top:5px;
width:99%;
margin:0 auto;
overflow-x:scroll;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divMasterGrid">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
Broken HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divTopFieldSet {
position:relative;
margin:5px;
top:5px;
width:99%;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
#divTable {
position:relative;
width:99%;
margin:5px auto;
overflow-x:scroll;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divTopFieldSet">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<div id="divTable">
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
I hope this is what you mean:
I've moved the overflow-x and width rules to #divTopFieldSet - the contents of the div correctly scrolls when the body becomes too narrow to contain the table.
To tell you the truth, I'm not 100% sure of the root cause of this. When an element with a percentage width is set to overflow:scroll, it doesn't automatically shrink to crop its contents - it seems like the children of the element play a part. Because the table has a minimum width of its own (determined by the contents of the cells), the surrounding container will not shrink past the outer edge of the table. On top of that, there is the calculation of percentage widths - width:99%; means '99% of the parent container's width' - if the parent container isn't based on the size of the viewport, that 99% won't change when you resize, either.
Applying the overflow rule to a container further up the tree (divTopFieldSet) does work, though.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divTopFieldSet {
position:relative;
margin:5px;
top:5px;
width:99%;
overflow-x:scroll;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
#divTable {
margin:5px auto;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divTopFieldSet">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<div id="divTable">
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
Let us know if this isn't what you need...