I have this dropdown in a table. The dropdown list is a long ( 90 characters)
for 1 item. Others are are lot shorter.
This is a generated page so there will be more records than the one listed.
I was able to delete the white space at the bottom of the page,
however I lost the horizontal scroll on the browser.
I want to scroll in the browser to see the right side of the table.
How do I delete the white space below the table and keep the horizontal scroll
on the browser?
How do I get a horizontal scroll on the browser, not the table?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html Lang="en">
<head>
<title>test_Scroll</title>
<style type="text/css">
#wrappergo { background:#ffffff;}
.main_clearr{
clear:both;
}
table.myview{
width:96%;
margin: 0px auto;
border-collapse: collapse;
border-width:1px 1px 1px 1px;
overflow:visible;
overflow:auto;
border-color: #000;
border-style: solid;
}
table.myview td{
margin:3px 2px 2px 4px;
}
td.tblnormal_1_4em
{
FONT-WEIGHT: normal;
FONT-SIZE: 1.4em;
COLOR: #000000;
font-family:'Rockwell',arial, verdana, sans-serif;
BACKGROUND-COLOR: #ffffff;
}
tr>th, tr>td {
text-align: center;
vertical-align:top;
font-family: Rockwell, Verdana, Arial, Helvetica, sans-serif;
color: #000000;
FONT-SIZE: 1.0em;
}
th+th, td+td {
text-align: left;
padding-left: 150px;
}
th+th+th, td+td+td {
padding-left: 0px;
text-align: right;
}
.cssdropdown{
height:auto;
FONT-SIZE: 1em;
COLOR: #000000;
font-family:'Rockwell',arial, verdana, sans-serif;
BACKGROUND-COLOR: #ffffff;
}
.contentmain {
padding:10px 20px 0px 20px;
}
#outerdiv {float:left; width:99%; background:#ffffff;
padding-bottom:32767px; margin-bottom:-32767px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outerdiv {float:left; width:75.8%; background:#ffffff;}
/* for IE6 */
* html #wrappersn {display:inline-block;}
</style>
<![endif]-->
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#800000" vlink="#800000" alink="#800000" >
<div class="main_clearr"></div>
<div id="wrappergo">
<div id="outerdiv">
<div class="contentmain">
<form method="Post" name="form3" >
<table class="myview" border="1" >
<thead>
<tr>
<th width="10%">
Country</th>
<th width="15%" >
State</th>
<th width="20%" >
City</th>
<th width="50%" >
School </th></tr>
</thead>
<tbody>
<tr><td colspan="4">The testing data</td></tr>
<tr><td class="tblnormal_1_4em">USA</td><td class="tblnormal_1_4em">Pennsylvania_PN </td><td class="tblnormal_1_4em">Pittsburg</td>
<td class="tblnormal_1_4em">
<select name="ohighschool" class="cssdropdown">
<option value="0" SELECTED >Select Lunch</option>
<option value="2"> Healthy Lunch Deluxe Supreme (This will be the longest line in this dropdown 90 characters)</option>
<option value="3"> Healthy Lunch Express</option>
</select>
</td></tr>
</tbody>
</table>
</form>
</div> <!-- end contentmain-->
</div> <!-- end outerdiv-->
</div><!-- #wrappersn -->
</body>
</html>
If the content is wider than the browser window, you get a scroll bar. That happens automatically.
There is no "white space" under your table - that's just the remainder of the unoccupied browser window.
Related
In the following example the gray "td" bar will fill the entire window width, but I can't get the encapsulated link to. I want the entire bar to be an active link, not just the text:
<html>
<head>
<style type="text/css">
<!-- table,
tr,
td {
width: 100%;
background: gray;
}
a {
width: 100%;
text-align: left;
color: white;
background-color: black;
font-size: 24px
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
Unfortunately, I don't have the ability to change the order of the HTML elements. This must be solved only by CSS/Javascript.
Simply add display: flex; to a in the CSS:
<html>
<head>
<style type="text/css">
<!--
table, tr, td {width: 100%;background: gray;}
a {width:100%;
text-align:left;
color:white;
background-color:black;
font-size: 24px;
display: flex;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
Adding display:block could do it.
<html>
<head>
<style type="text/css">
<!-- table,
tr,
td {
width: 100%;
background: gray;
}
a {
width: 100%;
text-align: left;
color: white;
background-color: black;
font-size: 24px;
display:block
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
so I started doing HTML email template with using the table form or the tr>td codes and stuff, my template mostly combine with small text and mostly graphic my main concern is that when I test my email template in my pc It jus work fine also. the images and graphic ay pretty responsive but when I test it on my mobile the image is not even loading even the place holders for it does bother to load I really confuse
<!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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application Accepted </title>
<head>
<style type="text/css">
#import url('https://fonts.googleapis.com/css2?family=Manrope:wght#200&display=swap');
.body{
margin: 0px;
background-color: #ffffff;
font-family:'Manrope', sans-serif;
}
.table{
border-spacing: 0;
}
.td{
padding: 0;
}
.img{
border: 0;
}
.wrapper{
width: 100%;
table-layout: fixed;
background-color: #ffffff;
padding-bottom: 40px;
}
.main{
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
font-family:'Manrope',sans-serif;
color: #FDB833;
}
.Logo{
padding: 10px;
text-align: left;
}
.content{
padding: 0px;
text-align: center;
line-height: 0;
}
.logo{
text-align: right;
}
#media screen and (max-width: 600px){
.content .img{
width: 600px!important;
max-width: 600px!important;
}
.Logo .img{
width: 400px!important;
max-width: 400px!important;
}
}
</style>
</head>
<body>
<center class="wrapper">
<table class="main" width= 100%>
<!--header-->
<tr>
<td>
<table width="100%">
<tr>
<td class="Logo">
<img src="https://lh3.googleusercontent.com/dydWcJy6wrBvml0hAPEw12f9CiHgEEf9MN0vFDkrEPx7i0bzCpdq4_WqDhC9mGCeMv3CsWnq2BH1jgaDXsEhCd9DWaRMu1LBPJCCCWsnt9NrRyucZf5qeJz1wOMUsNjZ2rl4CITbE4GXf1_FudMM473BriHc_gILDFmQ4qdD0rUeJkfDVdXFns0bJUA0HqPFh9nyWoNbSe5g5SHTulxEYCemom23K-5_ld1zMvX_AkZwC-brRTN4gTAHk_eWAi6wbdXzVujAhc6_IrYByYd3HMqhD8WJBe8qi9FsR95AlX1ncMVvzXwEmd4Ozz_KvSxf2BXi8tWTZJc6pUEhkVTlCOHrqgiVP13HzYOEhUol1_3X3fJUD6IxTcKzI5kGBA4byp_47cQWqnSRVx_9t5QH3dVEzJjsorPEH19JhQ54NSdhoQg3KkHsJzS0lJTLIfDdP8EQv90kGWKh8Up7B4XLn0z0Hycp_WciuaEupO_ykCDFrPhRNk74vjWyo8mMhxzkQEvRf2Jvvmn8-yzp8B_AB9J4SmbnUXehwabt13SSgK8QN70cYzpjij3HX7ABng0kXiyVH_pGlcXruVNokaisVr4lpCHGUgsTuTLC83A9iEsoNPuViaYJPQm_Rs-tvYS2jJy-ejXCd8W5FynfxibIL9CXynSzqEWQKlGBtc2LHDfcHowtXMuEVddGUCJ9lg=w400-h113-no?authuser=0"
alt="" width="200px">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=100% height= 20px style="background-color: #007F5F;"></td>
</tr>
<!--content-->
<tr>
<td class="content">
<img src="https://lh3.googleusercontent.com/mU8vN1xEsyHYAbV7IZZEbvpxRijXbTf7B2OlX_0kKDKTIWDeREXmRymFksPekBaVkX-fZ9MwYlGTH4roD9K0qzu8LHpyfOJwJ54fZO9m6O6Cl4jn1ErWRNqEcRMXNr3LescX20M-lTDsiiMrjik5fiPKoKPiy-WxsEDP3r3VtQllkE4ISTjwSrTSYbDBawi2Hx-2VAJSL34CZwDAeIICqcQSxJPD5JCE1FEejrGCdQPzrYr7tUpUyfygTn5_5SOoNHvCbnZW3GsnMzQ4nSqWyFTZF1qrmN1tlVlAbL6lVSsF_V9QY5xRqhaxjtyky6kBNxAXBjU6QX4WlpFD-8Dj2hMDM9X9ckzMuZWuju5C_bKni1bw1OpsYKyO0lyiNamABd5l8rrkRVFK7Z_5gz3KJJYsBqcSn97hmhxjkgQjt0HJwfEIbd_H5bKGcl3GikiCNOsNY5sb_L7c6mx65y_vlKln4DJ25jk927_t6VM0aCZUMah1KrbcQdqUvopeDD0vp008cnREa15_17waa3_hZD1yJwzmFEmtmOq_Z7UItGr5rWIvPCZfQFznX-k6znGJ7xr7i-MGZihGplciBV-5rn6ncMjXzEkd-JQvQbOcM8HbJFZOiLNDYaJPPJYWV4hgNJi9ueuCjPmoVXLsdS7PfqcxhT4Kqse6SviuXwktYziddS_quS_EjrJexDrImg=w495-h695-no?authuser=0"
alt="" width= auto style="max-width: 600px;">
</td>
</tr>
<!--footer-->
<tr>
<td class="footer" style="background-color: #007F5F; padding: 15px;">
<p style="text-align: left;font-size: 15px; font-weight: bold;">Courtesy:</p>
<p style="text-align: left;font-size: 10px;"> Approved by the St.Jerome School Administration and Club Committee<br>
Valid only for Academic year 2020-2021</p>
</td>
</tr>
</table>
</center>
</body>
this my code for it I also the check the sizing if that the case yet it seems it's not, I am really new in coding and this is not even my forte.
I need to send mail with the image embedded as mail body. Below is the code
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="background: url(http://localhost/image/mvp-bg.jpg) no-repeat top left; width: 800px; height:685px; margin: 0 auto; color: #ffffff; font-family: Arial; font-size: 16px;">
<div style="width: 700px; margin: 0 auto; padding-top: 80px;">
<p>Mail Body</p>
</div>
</div>
</body>
</html>
Could some one let me know how to fix this.
Thanks
For email templates better refer the images from server instead of localhost, You cannot expect the user will have the images loaded in their localhost :)
Change it to url(http://domain.com/image/mvp-bg.jpg)
Got the solution from html email with background-image style not shown . Also below is the code i modified so that css are rendered properly in mail. When using tags the css were not rendering, so instaed used table tags.
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:*
{
behavior: url(#default#VML);
display: inline-block;
}
</style>
</head>
<body>
<table style="background-image: url('image/mvp-bg.jpg'); background-repeat: no-repeat;width: 800px; height:685px; margin: 0 auto; color: #ffffff; font-family: Arial; font-size: 16px;" >
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="http://www.domain.com/image/mvp-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody>
<tr>
<td>
<div style="width: 700px; margin: 0 auto; padding-top: 85px; font-family: Arial; font-size: 16px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="2" valign="top" style="padding: 10px; color: #ffffff;">
Mail Body
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Login.css
body {
font-family: "Trebuchet MS", Tahoma, Arial, Geneva, sans-serif, Helvetica, sans-serif;
font-size: 13px;
background: url(../images/bg.png) 0 64px repeat-x;
margin: 0;
}
.wrapper {
xmargin: 0 auto;
}
#border-top.h_green {
background: url(../images/j_header_middle.png) repeat-x;
height: 84px;
xmargin: 0 auto;
}
#contentbox {
width: 755px;
margin: 0 auto;
xbackground: #efefef;
padding: 0px;
position: relative;
}
#header-top {
width: 960px;
margin: 0 auto;
xbackground: #efefef;
padding: 0px;
position: relative;
}
#menuheader {
position: relative;
}
#contentbox p {
padding: 0 0 10px 0;
}
#menubox {
background: #fff;
padding: 3px 10px;
border-left: 1px solid #cccecc;
border-right: 1px solid #cccecc;
height: 15px;
}
#user_name {
position: absolute;
right: 0px;
top: 0px;
xbackground: url(../../../images/icons/user.png) no-repeat scroll 0 2px
transparent;
padding-left: 20px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
.loginwrapper {
width: 755px;
margin: 0 auto;
}
.btn{
background:url(../images/btn.jpg) repeat-x;
height:28px;
border:none;
color:#fff;
margin-top:20px;
}
.loginbox {
background: url(../images/login_shadow.png) no-repeat;
height: 310px;
padding: 40px;
}
.rightsection {
width: 85%;
float: right;
border-bottom: 1px solid #cccc;
}
.rightboxwrapper {
float: left;
width: 325px;
padding-right: 30px;
background: url(../images/loginleft.png) no-repeat center bottom;
height: 262px;
}
.rightboxwrapper .loginheader h2 {
color: #0588ab;
font-size: 16px;
font-family: trebuchet MS;
margin: 0;
text-align: left;
}
.loginform input {
width: 170px;
}
.loginform input#btnsubmit {
width: 80px !important;
border: none;
}
.loginform {
padding: 10px 0 0 45px;
line-height: 35px;
background: url(../images/lock.png) no-repeat right center;
width: 335px;
}
.loginform td {
color: #333333;
font-family: trebuchet MS;
font-size: 12px;
padding: 0;
margin: 0;
}
.copyright {
width: 100%;
text-align: right;
padding: 5px 0px;
font-size: 11px;;
color: #0588ab;
font-family: trebuchet MS;
}
.copyright p {
padding-right: 15px !important;
}
index.jsp
<%# page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#commentForm1").validate({meta: "validate"});
required: 'Enter this!'
});
</script>
<style type="text/css">
form { width: 500px; }
form label { width: 250px; }
form label.error,
form input.submit { color: red; font-size: 20px; }
</style>
</head>
<body>
<div class="wrapper">
<!--maindiv wrapper starts-->
<div id="border-top" class="h_green">
<!--header starts-->
<div id="header-top">
<div><img width="249" height="54" style="padding:15px 0 0 0px" src="images/companylogo.png"> </div>
</div>
</div>
<div id="contentbox">
<div style="background:none;border:none;" id="menubox">
<div id="menuheader">
<div id="message">
<p style="text-align:center; padding-top:10px;" class="message_text"> </p>
</div>
<div id="user_name">
</div>
</div>
</div>
<div class="loginbox">
<div style="width:100%!important;" class="rightsection">
<form name="loginform" action="loginServlet" method="post" id="commentForm1">
<div class="loginwrapper">
<div class="rightboxwrapper">
<table cellspacing="0" cellpadding="0" border="0" align="center" class="loginform">
<tbody><tr class="loginheader">
<th style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:35px;"> <h2>Login</h2></th>
</tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;">User ID </td></tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;"><input type="text" id="username" name="username" class="{validate:{required:true, messages:{required:'*'}}}"></td>
</tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;">Password</td></tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;"><input type="password" id="password" name="password" class="{validate:{required:true, messages:{required:'*'}}}"></td>
</tr>
<tr>
<td colspan="2">
<input value="Login" class="btn" style="width:60px;" type="submit"/>
<input value="Reset" class="btn" style="width:60px; margin-left:10px;" type="reset"/>
</td>
</tr>
</tbody></table>
</div>
<div class="imagewrapper">
<img width="323px" height="262px" src="images/loginimg.png">
</div>
</div> <div style="clear:both; color:fff"></div>
</form>
</div>
<div class="cleared"></div>
</div>
<div id="footerwrapper"><!--Div for the Footer -->
<div class="copyright">
<p>Copyright © 2012 BitsCrafters HRM All rights reserved.</p>
</div><!--ended Footer Div-->
</div>
</div>
</div>
</body>
</html>
What is wrong with this code? can anyone help me out of this? There is something wrong because when i run it through tomcat sometime its work but sometime it doesn't work some icon and image is not displayed. In browser i checked view source to check whether css path is correct or not it is correct.
Ran into the same, just correct the href path:
<link rel="stylesheet" type="text/css" href="./css/login.css"/>
The code and CSS look correct at first glance, so the error is elsewhere.
Use a tool like Firebug or "Inspect Element" to check what your browser gets. All these tools have a network tab where you can see what the browser requested and what it got. Look for:
Do you see all the URLs that you expect?
Could the server serve all these (HTTP status 200)
Check the content of the files. Do they contain what you expect?
Check the error console. Do you get any CSS / JavaScript errors?
Inspect the element in question. Does it have the correct CSS styles? In the CSS panel, do you see the correct styles?
I've got a page that has a background color for the main container, but for some reason, the color ends just below the header div. The page and the CSS validate in the w3 validators, though, and I have no idea why and I've tried several different fixes.
CSS
body{
margin:0;
padding:0;
line-height: 1.5em;
background-color: #e5e5dc;
color: #000;
}
#maincontainer{
background-color: green;
width: 98%;
margin: 0 auto;
border: 1px solid black;
}
#topsection{
background-color: transparent;
height: 90px; /*Height of top section*/
}
#logo{
background-image: url();
text-align: center;
margin: 0 auto;
width: 100%;
}
#contentwrapper{
float: left;
width: 100%;
background-color: transparent;
}
#contentcolumn{
margin-right: 230px; /*Set right margin to RightColumnWidth*/
}
#rightcolumn{
float: left;
width: 230px; /*Width of right column in pixels*/
margin-left: -230px; /*Set left margin to -(RightColumnWidth) */
background-color: transparent;
}
#footer{
clear: left;
width: 100%;
background-color: transparent;
text-align: center;
padding: 4px 0;
border-top: 1px solid black;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.error{
background-image: url("images/misc/scroll.jpg");
background-position: top left;
background-repeat: no-repeat;
}
a:link, a:visited{
color: #000;
text-decoration: none;
}
a:hover, a:active{
color: #000;
text-decoration: underline;
}
EDIT -- Raw html source straight from view source in my browser
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haven • Login</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
var e = document.createElement('script');
e.src = 'includes/all.js';
document.getElementById('script_insertion').appendChild(e);
}
</script>
</head>
<body onload="init();">
<div id="script_insertion"></div>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>IMG</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<form action="./login.php?mode=login" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" size="10" title="Username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="password" size="10" title="Password" /></td>
</tr>
<tr>
<td><input type="reset" value="Clear" /></td>
<td><input type="submit" name="login" value="Login" /></td>
</tr>
</table>
<input type="hidden" name="remember" value="true" />
</form>
<br />
Don't have an account yet? Register here!
</div>
</div>
</div> <div id="rightcolumn">
<div class="innertube">
Chat
</div>
</div>
</div>
</body>
</html>
You are floating #contentwrapper which takes it out of the document flow so #maincontainer no longer contains it.
To contain it, you need to give #maincontainer an overflow attribute (auto should work).
FYI, adding borders to your elements are a good way to debug things like this.
If I understand correctly, this is a well addressed question. See CSS 100% height in ie or http://www.tutwow.com/htmlcss/quick-tip-css-100-height/