This is what I need to do:
http://s27.postimg.org/ancbbaa6r/111.png
That is what I've done:
http://s27.postimg.org/87ahxfs43/222.png
Don't mind about fonts, I will change them Later.
I can't change HTML and use JS. Only CSS.
Any help?
CSS:
table {
width: 100%;
background-color: #f3c035;
padding: 10px;
font-family: "Arial", Arial, serif;
color: white;
}
iframe {
width: 100%;
}
.lewa {
background-color: #f3dfab;
width: 25%;
padding: 15px;
vertical-align: top;
font-family: "Times New Roman", Times, serif;
color: black;
}
.prawa {
background-color: #f3ecd9;
padding:15px;
vertical-align: top;
font-family: "Times New Roman", Times, serif;
color: black;
width: 100%;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="style/szablon.css" type="text/css" />
</head>
<body>
<table>
<th colspan="2">
<p class="naglowek">
Sugerowane w programie nauczania algorytmy do omówienia w ramach przedmiotu.
</p>
<hr/>
</th>
<tr>
<td class="lewa">
<p class="brown"> Menu: </p>
<ul class="brown">
<li><a target="tresc"
href="
http://www.algorytm.org/algorytmy-matematyczne/algorytm euklidesa.html
">Największy wspólny dzielnik</a></li>
<li><a target="tresc"
href="
http://www.ordona.internetdsl.pl/pascom/download/informatyka/algorytmy.pdf">Najmniejsza wspólna wielokrotność</a></li>
</ul>
</td>
<td class="prawa">
<iframe nama="tresc" style="width": 100%; height: 95%"> </iframe>
<p class="brown" style="text-align: right;"> Copyright 2013</p>
</td>
</tr>
</table>
</body>
Follow the code mate:
table {
width: 100%;
background-color: #f3c035;
padding: 10px;
font-family: "Arial", Arial, serif;
color: white;
height: 100%;
}
iframe {
width: 100%;
}
.lewa {
background-color: #f3dfab;
width: 25%;
padding: 15px;
vertical-align: top;
font-family: "Times New Roman", Times, serif;
color: black;
}
.prawa {
background-color: #f3ecd9;
padding:15px;
vertical-align: top;
font-family: "Times New Roman", Times, serif;
color: black;
width: 100%;
height: 100%;
}
I just added
height: 100%
in table {}
Remember that you have to fix the line:
<iframe nama="tresc" style="width": 100%; height: 95%"> </iframe>
to:
<iframe nama="tresc" style="width: 100%; height: 95%"> </iframe>
Look, you've added one extra " after width.
You have to add your th inside of a tr:
<tr>
<th colspan="2">
<p class="naglowek">
Sugerowane w programie nauczania algorytmy do omówienia w ramach przedmiotu.
</p>
<hr/>
</th>
</tr>
Related
I am new to coding (so go easy on me) doing this project for fun and I'm pretty close to being complete but I can't seem to get rid of this 2-5 px white space dividing my header from the first section. See the screenshot below:
I set all element margins to 0 such as
* {
margin: 0
}
but this didn't help.
the following code uses tables with inline CSS. Can somebody help me!
table.t00 {
width: 640px;
margin: 0;
}
table.t00 th {
max-width: 630px;
max-height: 474px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
}
table.t01 tbody {
text-align: center;
color: #f1f1f1
}
table.t01 th {
width: 636px;
}
table.t02 {
width: 640px;
background-color: white
}
table.t02 tbody {
text-align: center;
width: 634px;
height: 291px;
}
table.t02 th {
width: 634px;
}
table.t03 {
width: 634px;
height: 320px;
}
table.t03 tbody {
text-align: center;
width: 634px;
height: 320px;
padding-top: 60px;
}
table.t03 th {
width: 634px;
padding-bottom: 40px;
}
table.t04 {
width: 640px;
height: 84px;
background-color: #052f66;
}
table.t04 tbody {
text-align: center;
}
<body>
<table class="t00">
<tbody>
<th style="margin: 0;">
<img
class="header-image"
src="victory-club header.jpg"
alt="header for victory clubs membership"
/>
</th>
</tbody>
</table>
<table class="t01">
<tbody>
<th>
<p style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 28px; margin: 10px 0;">Your Member ID is:
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; margin: 0;">FL-9999999</h2>
<p style=" font-size: 14px;
font-style: italic; margin: 5px 0;">Please keep this for your records</h4>
</th>
</tbody>
</table>
<table class="t02">
<tbody>
<th>
<p style="padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center; width: 634px; margin: 25px 0px 0px 0px">
Member Benefits
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;">These are just some of the amazing benefits that come with your <br> Victory Clubs membership!</p>
<br>
<br>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive events and parties at local venues for Victory Clubs members only.</p>
<div style="background-color: white;
width: 634px;
height: 7px;"></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Deals and Savings at hundreds of retail and restaurant locations.
<div style="background-color: white;
width: 634px;
height: 7px;"
></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive Perks through your School.</p>
</div>
</th>
</tbody>
</table>
<table class="t03">
<tbody class="schedule">
<th>
<p style=" padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;">
Schedule Now!
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; margin: 0 59px;">Schedule and pass your initial drug test now so you can start enjoying all the perks and benefits your Victory Clubs membership has to offer.
</p>
<br>
<br>
<button style="display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 100px;
border: 1px solid;
color: white;
border-color: #dc1d40;
background-color: #dc1d40;">SHEDULE MY DRUG TEST</button>
<br>
<br>
<br>
<p style="color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px; margin: 0 59px;">
You’ll receive an email letting you know your free 90-day subscription has been activated once you pass your drug test.
</p>
<p style="color: #052f66;
text-align: center;
font-size: 16px; margin: 0 59px;">
<b> Keep up the great work!</b>
</p>
<br>
</th>
</tbody>
</table>
<table class="t04">
<tbody>
<th>
<ul style="padding: 20px;">
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">FB</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;"href="" target="_blank">Twitter</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Insta</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Youtube</a></li>
</ul>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
height: 32px;">© All Rights Reserved. Privacy Policy | Accessibility Policy | Terms & Conditions</p>
</th>
</tbody>
<table>
</body>
Try adding this code:
table.t00 th img {
display: block;
}
One thing about images is that they have a default display: inline-block which makes them leave margins around other elements ... putting block display eliminates this effect
Also try adding
table.t00 {
border-collapse: collapse;
}
instead of having separate which is the default behaviour
<table> have border-spacing and by default it's value is 2px..so change it to 0 ....
border-spacing: 0px;
for both of your tables...t00 and t01
table.t00 {
width: 640px;
margin: 0;
border-spacing: 0px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
border-spacing: 0px;
}
I am working on responsive newsletter using HTML, inline css as much as possible and some css also.
I am facing issue in design as i am not able to remove space between first Image and second table after image..
https://codepen.io/KGuide/full/oNXwyEW
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #fff;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
/* -ms-interpolation-mode:bicubic; */
}
a {
text-decoration: none;
}
.primary{
background: #f5564e;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #fafafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
/*BUTTON*/
.btn{
padding: 5px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 5px;
background: #f5564e;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 5px;
background: transparent;
border: 1px solid #fff;
color: #fff;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Nunito Sans', sans-serif;
color: #000000;
margin-top: 0;
}
body{
font-family: 'Nunito Sans', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #f5564e;
}
table{
}
/*LOGO*/
.logo h1{
margin: 0;
}
.logo h1 a{
color: #000;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Nunito Sans', sans-serif;
}
.navigation{
padding: 0;
}
.navigation li{
list-style: none;
display: inline-block;;
margin-left: 5px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.navigation li a{
color: rgba(0,0,0,.6);
}
/*HERO*/
.hero{
position: relative;
z-index: 0;
}
.hero .overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
background: #000000;
z-index: -1;
opacity: .3;
}
.hero .icon{
}
.hero .icon a{
display: block;
width: 60px;
margin: 0 auto;
}
.hero .text{
color: rgba(255,255,255,.8);
padding: 0 4em;
}
.hero .text h2{
color: #ffffff;
font-size: 40px;
margin-bottom: 0;
line-height: 1.2;
font-weight: 900;
}
/*HEADING SECTION*/
.heading-section{
}
.heading-section h2{
color: #000000;
font-size: 24px;
margin-top: 0;
line-height: 1.4;
font-weight: 700;
}
.heading-section .subheading{
margin-bottom: 20px !important;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0,0,0,.4);
position: relative;
}
.heading-section .subheading::after{
position: absolute;
left: 0;
right: 0;
bottom: -10px;
content: '';
width: 100%;
height: 2px;
background: #f5564e;
margin: 0 auto;
}
.heading-section-white{
color: rgba(255,255,255,.8);
}
.heading-section-white h2{
font-family:
line-height: 1;
padding-bottom: 0;
}
.heading-section-white h2{
color: #ffffff;
}
.heading-section-white .subheading{
margin-bottom: 0;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.4);
}
.icon{
text-align: center;
}
.icon img{
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
</head>
<style>
</style>
<body>
<table style="width:100%; text-align:center;">
<tr>
<td style="width:100%; text-align:center; border-spacing: 0px;" >
<table align="center" style="width:100%; max-width:600px;">
<tr>
<td ><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
</tr>
<tr>
<td class="">
<table style="width:100%; background:#525252; max-width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> Move-in now to your dream home in City Center Plaza
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> BUTTON </td>
</tr>
<tr>
<td style="padding:15px; background:#0A0A0A;">TEXT TEXT TEXT TEXT TEXT</td>
</tr>
<tr>
<td><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="padding:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Replace your code with this and see if this works:
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; border-collapse: collapse;">
<tr>
<td>
<img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="margin: 0; border: 0; padding: 0; display: block; width:100%; max-width: 600px;">
</td>
</tr>
Edit:
Here is 2 tutorials they helped me while creating HTML emails:
Build an HTML Email Template From Scratch
How to Code a Responsive Email from Scratch
As pointed out by the other user, some of that space is coming from the the font size.
What I recommend is using either:
line-height: 0;
or
font-size: 0;
To remove that, and then put all text inside spans to put the size back up.
You also need to remove the padding from your cells,
tr, td {
padding: 0;
}
Complete changes required:
tr, td {
padding: 0;
line-height: 0;
}
span {
line-height: 1;
}
Plus wrap all text in spans.
use "font-size: 0;"
and I think solve your problem
Example:-
<td style="font-size: 0;"><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
I am creating an html calendar(cal.ics) invite and it works in email clients like Gmail, Firefox, and YahooMail. But when I try it in thunderbird, the paragraph(p) tags are always off to the right, even though I've explicity set attributes like align left, float: none, etc. Am I doing something wrong? The email is below, is there something missing in my css?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Follow-Up! Meeting</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 2.0em;
margin: 0;
padding: 0;
text-align: left;
}
img {
max-width: 600px;
width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
height: 100%;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
margin-bottom: 10px;
width: auto !important;
}
.btn-primary td {
background-color: #348eda;
border-radius: 25px;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
.btn-primary td a {
background-color: #348eda;
border: solid 1px #348eda;
border-radius: 25px;
border-width: 10px 20px;
display: inline-block;
color: #ffffff;
cursor: pointer;
font-weight: bold;
line-height: 2;
text-decoration: none;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
padding: 20px;
width: 100%;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
clear: both !important;
width: 100%;
}
.footer-wrap .container p {
color: #666666;
font-size: 12px;
}
table.footer-wrap a {
color: #999999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
color: #111111;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
line-height: 1.2em;
margin: 40px 0 10px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0;
margin-bottom: 10px;
float: none;
text-align: left;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
clear: both !important;
display: block !important;
Margin: 0 auto !important;
max-width: 600px !important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
display: block;
margin: 0 auto;
max-width: 600px;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table width="100%" class="body-wrap" bgcolor="#f6f6f6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF"><!-- content -->
<div class="content">
<table width="100%" style="width: 100%; text-align: left;" cellpadding="0" cellspacing="0" border="0">
<tr style="width: 100%; text-align: left;" >
<td align="left" style="width: 100%; text-align: left;" >
Hi John Doe,
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
<h4>Topic</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >A Samle Meeting!</p>
<h4>Summmary</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >
A sample meeting to prove the concept work andthen take it form there
</p>
<h4>Location</h4>
<p>
123 Example Street New york, NY
</p>
<h4>Time</h4>
<p>
From: February 7, 2016, 2:28 am GMT-0500 <br />
To: February 9, 2016, 3:50 pm GMT-0500
</p>
<h4>Next Steps</h4>
<p>
You may view more information on the meeting by clicking the link below
</p><!-- button -->
<table class="btn-primary" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>View Meeting</td>
</tr>
</table><!-- /button -->
<p>
Please adjust your meeting schedule infomration there.
</p>
<p>
Thanks,
</p>
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container"><!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /footer -->
</body>
</html>
Tested your email in latest Thunderbird and paragraphs seem to be where they should be.
You may be however referring to the 20px padding set on the "container" with white background. Removing the padding will make the text stick to the left side of white space.
Since both Gmail and Yahoo ignore CSS in HEAD you do not see the padding there.
Personally I would advice against removing the padding for esthetic reason.
Preview in Thunderbird 38.5.1 (Windows)
The problem quite stupid actually. Apparently the spaces in the html were causing the problem.So I changed
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
To
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">You have been invited to attend a meeting</p>
With no space and problem fixed
I've added a new css element to my master page. But After that, I can't click on other controls in the page. I know some div is overlapping the other making click not working. But I couldn't figure it out with the css file. My css file is given below:
here where I placed my div in html :
/* XLSF 2007 */
body {
background: #333 url(image/bg-strip-dark.png) 0px 0px;
font-family: normal, "Century Gothic", "Helvetica Neue Light", "Helvetica Neue", georgia, "times new roman", "Arial Rounded MT Bold", helvetica, verdana, tahoma, arial, "sans serif";
font-size: 75%;
color: #666;
}
h1,
h1 a {
color: #999;
text-decoration: none;
}
h1 {
color: #999;
margin-bottom: 0;
margin-left: -5px;
margin-top: 0;
padding-left: 5px;
padding-right: 5px;
}
h1,
h2,
h3 {
clear: both;
float: left;
font-family: normal, "Century Gothic", "Helvetica Neue Light", "Helvetica Neue", georgia, "times new roman", "Arial Rounded MT Bold", helvetica, verdana, tahoma, arial, "sans serif";
font-size: 3em;
font-size-adjust: none;
margin-bottom: 0.25em;
padding-bottom: 1px;
}
h1,
h2 {
letter-spacing: -1px;
margin-bottom: 0;
margin-left: -5px;
margin-top: 0;
padding-left: 5px;
padding-right: 5px;
}
a {
color: #6699cc;
padding: 0px 2px;
text-decoration: none;
}
a:hover {
background: #6699cc;
color: #fff;
}
#lights {
clear: both;
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 96px;
overflow: hidden;
z-index: 1;
}
.xlsf-light {
position: relative;
}
body.fast .xlsf-light {
opacity: 0.9;
}
.xlsf-fragment {
position: relative;
background: transparent url(image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
width: 50px;
height: 50px;
}
.xlsf-fragment-box {
position: relative;
left: 0px;
top: 0px;
width: 50px;
height: 50px;
*width: 100%;
*height: 100%;
display: none;
}
.xlsf-cover {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #fff;
opacity: 1;
z-index: 999;
display: none;
}
/*
.xlsf-light.bottom {
height:49px;
border-bottom:1px solid #006600;
}
.xlsf-light.top {
height:49px;
border-top:1px solid #009900;
}
*/
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<link rel="stylesheet" media="screen" href="christmaslights.css" />
<title>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1 {
width: 135px;
}
</style>
<script src="snowstorm.js"></script>
<script>
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
snowStorm.flakesMaxActive = 96; // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>
<script src="lights/soundmanager2-nodebug-jsmin.js"></script>
<script src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script src="lights/christmaslights.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%;">
<tr>
<td class="style1">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/remedyonline-logo.png" />
</td>
<td>
<span style="font-family: Tahoma; font-size: xx-large; font-weight: bold; color: #666666; padding-left: 10px;">Representatives Corner
<marquee direction="right"><font color=#993300 size=5 ><strong>GDS Wishes A HAPPY X'MAS</strong></marquee></font>
</span>
</td>
</tr>
</table>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<div id="lights">
</div>
</body>
</html>
At least please notify me where's the problem. I am new to html and css.
It could be that one of the elements with a modified z-index property is rendered above the aforementioned controls. The solution, then, would be to isolate which one of them is problematic for you by removing the properties and observing the results.
A better solution, however, might be to learn about the developer tools in your favorite browser - they can be incredibly helpful for situations like this:
Chrome Dev Tools
Firefox Dev Tools
I'm adding a new 'News Container' to a slightly older webpage at our firm.
This container is made up of a 2x3 table. I want the Cell 2x2 to be as High as the Text.
Here's the Problem:
Everybody uses IE in our offices (Security reasons etc.) but for some reason IE ignores the height attribute given either directly in HTML (style="height:;" or height="") or in a separate CSS.
So in Chrome it looks like this (how it should):
╔════════════════╗
╠══╦═════════════╣
║ ║Test String ║
║ ╠═════════════╣
╚══╩═════════════╝
And in Internet Explorer like this:
╔════════════════╗
╠══╦═════════════╣
║ ║Test String ║
║ ║ ║
║ ╠═════════════╣
╚══╩═════════════╝
Picture: http://imgur.com/a/jQXhQ
View it yourself (Open in both Chrome and IE) here.
How can I get IE to use the Height attribute or alternatively is there a different way?
IE Version: 11.0.9600.17358
Update: 11.0.13
Code:
<table id="NewsTable">
<tr>
<th id="NewsHeader" colspan="2">IT Status</th>
</tr>
<tr>
<td rowspan="2">
<img id="NewsAmpel" alt="NewsStatus" src="Ampel/AmpelA.jpg" width="36px" height="100px">
</td>
<td id="NewsStatus"><b>Status: </b>Test String</td>
</tr>
<tr>
<td id="NewsDesc"><b>Description: </b>Sample Text</td>
</tr>
i have made some changes in html as well as CSS
Working Fiddle
http://jsfiddle.net/UzCRc/60/
HTML
<table id="NewsTable">
<tr>
<th id="NewsHeader" colspan="2">IT Status</th>
</tr>
<tr>
<td id="NewsAmpel">
<img alt="NewsStatus" src="Ampel/AmpelA.jpg" width="36px" height="100px">
</td>
<td id="NewsStatus"><b>Status: </b>Test String</td>
<td id="NewsDesc"><b>Description: </b>Sample Text</td>
</tr>
</table>
CSS
#NewsAmpel{
width:36px;
}
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
h1 {
font-size: 15px;
font-weight: bold;
}
h2 {
font-size: 14px;
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
h1 {
font-size: 15px;
font-weight: bold;
}
h2 {
font-size: 14px;
font-weight: bold;
}
img {
border: 0;
}
a {
color: #00538E;
}
#content {
width: 100%;
float: left;
}
#center {
width: 600px;
height: auto;
margin: 0 auto;
}
font-weight: bold;
}
img {
border: 0;
}
a {
color: #00538E;
}
#content {
width: 100%;
float: left;
}
#center {
width: 600px;
height: auto;
margin: 0 auto;
}
#NewsTable {
border: 2px solid #000000;
background-color: #FFFFFF;
width: 100%;
}
#NewsStatus {
height: 20px;
padding:0;
border-bottom: 1px solid #000000;
width: 100%;
vertical-align: top;
display:block;
}
#NewsDesc {
height: 20px;
width: 100%;
margin:0;
padding:0;
display:block;
}
#NewsHeader {
text-align: center;
font-size: 14px;
font-weight: bold;
border: 1px solid #000000;
background-color: #FF1000;
}
Changes in html
Removed colspan
added image TD in same TR
Instead of image, ID has given to TD
CSS changes
#NewsStatus {
height: 20px;
padding:0;
border-bottom: 1px solid #000000;
width: 100%;//modified
vertical-align: top;
display:block;//added
}
#NewsDesc {
height: 20px; //added
width: 100%;//modified
margin:0;
padding:0;
display:block;//added
}
#NewsAmpel{
width:36px;
}