I'm creating a pure CSS tabbed area as seen on CSS-tricks. Only trouble is, when a larger area is selected, the content below does not move down. There is div position: absolute within a div position: relative. Think this is necessary for the tabbed area to function, and I assumed that because it was wrapped within a relative div, this would not overlap later content.
Please can any suggest how I can edit this to prevent the later content being overlapped? Thank you!
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: #000;
color: #fff;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
display: block;
}
[type=radio]:not(:checked) ~ label ~ .content {
display: none;
}
* {
margin: 0;
padding: 0;
}
body {
background: #999;
}
#page-wrap {
width: 960px;
margin: 100px auto;
}
#test {
width: 100%;
text-align: center;
color: #fff;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Pure CSS Tabbed Areas</title>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<div id="page-wrap">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
<table>
<tbody>
<tr>
<td align="center" valign="top" width="175">
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/PayPal_logo_150x65.gif" alt="" border="0">
</td>
<td width="598">
PayPal is our preferred method of payment for UK & overseas customers as it is quick & easy for you and for us.
</td>
</tr>
<tr>
<td align="center" valign="top" width="175">
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/phonepay.jpg" alt="" border="0">
</td>
<td width="598">If you prefer not to pay online we accept Credit & Debit card payments over the telephone. Please call us on <strong>---</strong> Monday to Friday between 9am & 4pm UK time. We will need your eBay User ID or an Item Number to find your order. We accept all major Credit & Debit cards except American Express.
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
<table>
<tbody>
<tr>
<td align="center" valign="top" width="175">
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/rm.jpg" alt="" border="0">
<br><br>
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/specdel.jpg" alt="" border="0">
<br><br>
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/airmail.jpg" alt="" border="0">
<br><br>
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/parcelforceww.jpg" alt="" border="0">
</td>
<td width="598">
The majority of our prices include standard UK delivery, this will normally be by the Royal Mail 48, Royal Mail Tracked 48 or Royal Mail 48 Signed For services. For multiple orders that have been paid for individually we may combine orders into one package so you receive all your items together.
<br><br>
We realise that when you place an order you want it now not in a weeks time! We aim to post items the same day we receive cleared payment Monday to Friday, otherwise we post items the next working day. We post orders in plain plastic mailing bags or boxes. When your order is dispatched we will send you an email to let you know. Royal Mail collect from us each weekday afternoon and most UK customers receive their orders within two days. Please check our feedback to see what customers say about the speed of our delivery.
<br><br>
If you need guaranteed next day delivery we can send your order by Royal Mail Special Delivery which will be delivered by 1pm.
<br><br>
We ship worldwide by Royal Mail Airmail and Parcel Force Worldwide so please contact us for a price to your country.
<br><br>
Overseas buyers are responsible for any tax & import duty charged when goods are imported to your country.
<br><br>
If you want to collect your order from our warehouse in Rye, East Sussex we are happy to accommodate, please email cs#zestclothing.co.uk to arrange a convenient time.
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
<p>We realise that clothing sizes differ from one manufacturer to another so if your purchase does not fit we can help you to find an alternative size or product. We are happy to exchange items within 30 days of purchase providing that they are returned in the same condition as when they left us with all the tags and packaging.
<br><br>
There is no need to contact us before returning an item.
<br><br>
If you post an item to us then please include the original paperwork or a copy. Please write on the paperwork the reason for return & whether you would like an alternative size, an alternative product or a refund. Please post returns to:</p>
<table>
<tbody>
<col width="30px" />
<col width="742px" />
<tr>
<td>
</td>
<td>
<strong>---<br>
---<br>
---<br>
---<br>
---<br>
---<br>
---</strong>
<br><br>
</td>
</tr>
</tbody>
</table>
<p>We recommend that you obtain a free proof of posting from the Post Office when sending returns. Customers are responsible for the return postage cost.</p>
</div>
</div>
</div>
</div>
<div id="test">
<p>This should move down, but it gets covered!</p>
</div>
</body>
</html>
Related
I am currently working on a web page and I have encountered an issue with my list items. The dots and numbers that usually appear next to each list item are not showing up. Additionally, when i remove the overflow-x: hidden; property in my CSS the list items numbers and dots show immediately, the texts are showing all the time though.
**THIS IS THE HTML**
<body>
<main>
<section>
<div>
<h2 id="getting-started" class="heading-color mt-5">
GETTING STARTED
</h2>
<p>
There are 2 ways to join Fyre Skin Brand Partnership Program.
</p>
<ol>
<li>
Join directly from the Fyre Skin website by clicking the
link.
<a href="https://brandpartner.fyreskin.com.ng/register"
>Register</a
>
</li>
<li>
Join using the link of a brand partner that recommended you
and they automatically become you Up-line partner and you
their Down-line partner.
</li>
</ol>
<p>
If you decide to join, the startup registration is 25,000
Naira with a monthly renewal of 10,000 Naira.
</p>
<p>Your monthly subscription gives you access to</p>
<ul>
<li>
Your own back office dashboard were you can see your
commission, payments, pending payments, bonuses, sales made
using your link, clients who bought using your link, team
members profile, team members sales and profit and marketing
tools .
</li>
<li>
Your own personalise Fyre Skin website that your potential
clients can shop with.
</li>
<li>
Your personalised brand partnership link for potential
clients .
</li>
<li>
Your personalised Networking link for building your own
team.
</li>
<li>Growth and development training for personal growth.</li>
<li>A community of entrepreneurs that you can learn from.</li>
</ul>
<p>
<span class="fw-bold">How to get started - </span>For us at
Fyre Skin convenience is everything that why we built a
website that’s swift and easy to access by both brand partners
and clients.
</p>
<ol>
<li>
After signing up and creating an account, login into your
back office the click copy
<span class="fw-bold">‘default brand partners link’</span>.
Share your link on
<span class="fw-bold">social platforms</span> that can be
visible potential clients.
</li>
<img src="" />
<div>
<ol>
<li>Create a target audience</li>
<li>
Set a daily goal target that includes number of people and
how much he want to make.
</li>
<li>Set the amount of times he want to work a week.</li>
<li>Products and services he want to market (optional)</li>
</ol>
</div>
<p>Target: 40% male, 60% female</p>
<p>Goals: 4 people a day, ₦50,000 a day</p>
<p>Work: 4 times a week</p>
<p>
<span>
*lets assume Ade already did his homework by attending our
webinars, where he learnt how to market like a pro and he
already posted his business links on every social platform
and uses his online messaging apps.
</span>
</p>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 1</h5>
</div>
<p>
Ade’s target for the day is 4 people and he got 2 men and 2
women.
</p>
<p><span>MEN</span></p>
<p>1st man did deep tissue massage and jelly pedicure</p>
<p>
2nd man never left his house, he just order online 1 ultra
shade Creamy gel and 1 Lightening glow milk
</p>
<p><span>WOMEN</span></p>
<p>
1st woman did a brightening facials and braided her hair
</p>
<p>
2nd woman did a botanical pedicure and botanical manicure
</p>
<div>
<table
class="table table-responsive table-bordered border-dark"
>
<tr class="th">
<th>MEN</th>
<th>PRICE</th>
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Deep Tissues massage</td>
<td>12,000</td>
<td>Brightening facials</td>
<td>9,000</td>
</tr>
<tr>
<td>Jelly Pedicure</td>
<td>5,000</td>
<td>Corn row</td>
<td>5,000</td>
</tr>
<tr>
<td>Ultra shade creamy gel</td>
<td>5,000</td>
<td>Botanical pedicure</td>
<td>5,000</td>
</tr>
<tr>
<td>Lightening glow milk</td>
<td>10,000</td>
<td>Botanical manicure</td>
<td>3,000</td>
</tr>
<tr>
<td>TOTAL</td>
<td>32,000</td>
<td>TOTAL</td>
<td>22,000</td>
</tr>
</table>
<div class="heading-color "><h5 class="total">OVERALL TOTAL =54,000</h5></div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 2</h5>
</div>
<p>Ade repeated same target as day 1.</p>
<p>
4 people but this time his message only attracted 4 women
who just wanted to do the best friends package and relax
themselves.
</p>
<p><span>WOMEN</span></p>
<p>2 best-friends package comprises of 3 services each -</p>
<p>
deep cleansing facials, Swedish massage and botanical
pedicure
</p>
<div>
<table
class="table table-responsive table-bordered border-dark"
>
<tr class="th">
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
</table>
<div class="heading-color">
<h5 class="total" >OVERALL TOTAL =84,000</h5>
</div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 3</h5>
</div>
<p>
Same target, same goal. 4 people. Repeated strategy brings
repeated results
</p>
</body>
</html>
MY CSS
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Custom color variables */
*{
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
:root {
--primary: #e67e22;
--secondary: #16a085;
--success: #2ecc71;
--danger: #e74c3c;
--warning: #F0FF42;
--info: #3498db;
--light: #f5f5f5;
--dark: #2c3e50;
}
.container
{
font-weight: 400;
}
img{
width: auto;
border-radius: 1rem;
}
a{
font-family: 'Roboto', sans-serif;
}
p{
text-align: left;
}
button {
height: 50px;
}
.header{
margin-left: 50px;
}
.sidebar{
background-color: #F0FF42;
}
.heading-color{
background-color: #F0FF42;
}
span{
font-weight: bold;
}
.th{
background-color: #F0FF42;
}
li{
font-weight: 600;
}
td{
font-weight: 600;}
.total{
text-align: center;
}
#media (max-width : 450px){
.container{
width: 375px;
margin: 2rem auto;
}
}
I have tried several solutions such as using different CSS selectors to target the list items, and also tried to override the overflow-x property with overflow-x: visible; but it gives me an overflow on my webpage. I have also checked for any other conflicting CSS styles that may be causing the issue, but I have not found any.
The list items' numbers and dots are showing in my snippet.
Try this:
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Custom color variables */
*{
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
:root {
--primary: #e67e22;
--secondary: #16a085;
--success: #2ecc71;
--danger: #e74c3c;
--warning: #F0FF42;
--info: #3498db;
--light: #f5f5f5;
--dark: #2c3e50;
}
.container
{
font-weight: 400;
}
img{
width: auto;
border-radius: 1rem;
}
a{
font-family: 'Roboto', sans-serif;
}
p{
text-align: left;
}
button {
height: 50px;
}
.header{
margin-left: 50px;
}
.sidebar{
background-color: #F0FF42;
}
.heading-color{
background-color: #F0FF42;
}
span{
font-weight: bold;
}
.th{
background-color: #F0FF42;
}
li{
font-weight: 600;
}
td{
font-weight: 600;
}
.total{
text-align: center;
}
#media (max-width : 450px){
.container{
width: 375px;
margin: 2rem auto;
}
}
<html>
<body>
<main>
<section>
<div>
<h2 id="getting-started" class="heading-color mt-5">GETTING STARTED</h2>
<p>There are 2 ways to join Fyre Skin Brand Partnership Program.</p>
<ol>
<li>Join directly from the Fyre Skin website by clicking the link.
Register
</li>
<li>Join using the link of a brand partner that recommended you and they automatically become you Up-line partner and you their Down-line partner.
</li>
</ol>
<p>If you decide to join, the startup registration is 25,000 Naira with a monthly renewal of 10,000 Naira.</p>
<p>Your monthly subscription gives you access to</p>
<ul>
<li>Your own back office dashboard were you can see your commission, payments, pending payments, bonuses, sales made using your link, clients who bought using your link, team members profile, team members sales and profit and marketing tools.</li>
<li>Your own personalise Fyre Skin website that your potential clients can shop with.</li>
<li>Your personalised brand partnership link for potential clients.</li>
<li>Your personalised Networking link for building your own team.</li>
<li>Growth and development training for personal growth.</li>
<li>A community of entrepreneurs that you can learn from.</li>
</ul>
<p><span class="fw-bold">How to get started - </span>For us at Fyre Skin convenience is everything that why we built a website that’s swift and easy to access by both brand partners and clients.</p>
<ol>
<li>After signing up and creating an account, login into your back office the click copy <span class="fw-bold">‘default brand partners link’</span>. Share your link on <span class="fw-bold">social platforms</span> that can be visible potential clients.</li>
<img src="" />
<div>
<ol>
<li>Create a target audience</li>
<li>Set a daily goal target that includes number of people and how much he want to make.</li>
<li>Set the amount of times he want to work a week.</li>
<li>Products and services he want to market (optional)</li>
</ol>
</div>
<p>Target: 40% male, 60% female</p>
<p>Goals: 4 people a day, ₦50,000 a day</p>
<p>Work: 4 times a week</p>
<p>
<span>*lets assume Ade already did his homework by attending our webinars, where he learnt how to market like a pro and he already posted his business links on every social platform and uses his online messaging apps.
</span>
</p>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 1</h5>
</div>
<p>Ade’s target for the day is 4 people and he got 2 men and 2 women.</p>
<p><span>MEN</span></p>
<p>1st man did deep tissue massage and jelly pedicure</p>
<p>2nd man never left his house, he just order online 1 ultra shade Creamy gel and 1 Lightening glow milk</p>
<p><span>WOMEN</span></p>
<p>1st woman did a brightening facials and braided her hair</p>
<p>2nd woman did a botanical pedicure and botanical manicure</p>
<div>
<table class="table table-responsive table-bordered border-dark">
<tr class="th">
<th>MEN</th>
<th>PRICE</th>
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Deep Tissues massage</td>
<td>12,000</td>
<td>Brightening facials</td>
<td>9,000</td>
</tr>
<tr>
<td>Jelly Pedicure</td>
<td>5,000</td>
<td>Corn row</td>
<td>5,000</td>
</tr>
<tr>
<td>Ultra shade creamy gel</td>
<td>5,000</td>
<td>Botanical pedicure</td>
<td>5,000</td>
</tr>
<tr>
<td>Lightening glow milk</td>
<td>10,000</td>
<td>Botanical manicure</td>
<td>3,000</td>
</tr>
<tr>
<td>TOTAL</td>
<td>32,000</td>
<td>TOTAL</td>
<td>22,000</td>
</tr>
</table>
<div class="heading-color ">
<h5 class="total">OVERALL TOTAL =54,000</h5>
</div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 2</h5>
</div>
<p>Ade repeated same target as day 1.</p>
<p>4 people but this time his message only attracted 4 women who just wanted to do the best friends package and relax themselves.</p>
<p><span>WOMEN</span></p>
<p>2 best-friends package comprises of 3 services each -</p>
<p>deep cleansing facials, Swedish massage and botanical pedicure</p>
<div>
<table class="table table-responsive table-bordered border-dark">
<tr class="th">
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
</table>
<div class="heading-color">
<h5 class="total" >OVERALL TOTAL =84,000</h5>
</div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 3</h5>
</div>
<p>
Same target, same goal. 4 people. Repeated strategy brings
repeated results
</p>
</body>
</html>
I am trying to make a table with drop-down info tabs that appear when you scroll over a term.
My initial approach was to make these info tabs not display with display : none css rule, then
when the user hovers the mouse over the corresponding text, the the info tab appears by altering display property to display: block.
My problem is that I can't figure out how to override the default behavior for the containing/parent element, and the table resizes to fit the newly appeared element, then resizes back to normal when the user scrolls away. I experimented with z-index (setting the td to z-index: 1 and info tab to z-index:2) as well as visibility:hidden -> visibility:visible vs display:none -> display:block, but no luck with either of those. I also tried setting the max height of the td element to 200px, but it seems to grow past that regardless.
Here is the source code for what i have so far:
/* In an attempt to prevent row from expanding automatically */
td {
max-height: 100px;
}
.card-body {
display: none;
border: 2px solid black;
height: 300px;
width: 400px;
z-index: 2;
}
.card-trigger:hover+.card-body {
display: inline-block;
position: relative;
top: 0px;
right: 15px;
}
.card-body:hover {
display: block;
}
.card-body .game-info {
display: none;
}
.card-body .dd-trigger:hover+.game-info {
display: block;
}
<h3>Ratings by som bol</h3>
<p>sort by release date (asc/desc), rating amout, game category, game creator, game console</p>
<input type="text" placeholder="filter by game title, categories, creators, consoles, console makers">
<div>Search hints</div>
<table class="table">
<thead>
<tr>
<th>Game title</th>
<th>your rating</th>
<th>Average rating</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td>
<a class="card-trigger" href="#">Some Videogame</a>
<div class="card-body">
<img src="#" alt="picture of the game in question" />
<h3><a [routerLink]="">Game title</a></h3>
<p>Some stuff happens and you have fun</p>
<span class="dd-trigger">Show more info</span>
<ul class="game-info">
<li>Average Rating: </li>
<li>Average Review Score: </li>
</ul>
</div>
</td>
<td>
your rating : 2
</td>
<td>
average rating : 3
</td>
<td><button>Delete rating</button></td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<a class="card-trigger" href="#">Some Videogame</a>
<div class="card-body">
<img src="#" alt="picture of the game in question" />
<h3><a [routerLink]="">Game title</a></h3>
<p>Some stuff happens and you have fun</p>
<span class="dd-trigger">Show more info</span>
<ul class="game-info">
<li>Average Rating: </li>
<li>Average Review Score: </li>
</ul>
</div>
</td>
<td>
your rating : 2
</td>
<td>
average rating : 3
</td>
<td><button>Delete rating</button></td>
</tr>
<!-- row 3 -->
<tr>
<td>
<a class="card-trigger" href="#">Some Videogame</a>
<div class="card-body">
<img src="#" alt="picture of the game in question" />
<h3><a [routerLink]="">Game title</a></h3>
<p>Some stuff happens and you have fun</p>
<span class="dd-trigger">Show more info</span>
<ul class="game-info">
<li>Average Rating: </li>
<li>Average Review Score: </li>
</ul>
</div>
</td>
<td>
your rating : 2
</td>
<td>
average rating : 3
</td>
<td><button>Delete rating</button></td>
</tr>
</tbody>
</table>
In order to prevent parents from resizing to fit the contained element, you must do three things:
Set parent position to relative
Set child position to absolute (and position in appropriate place using top, bottom, left, right)
Set child element z-index higher than that of parent. We do this to prevent any parent styles from overlapping with child styles. It essentially makes the child element look like it is sitting on top of the parent element.
the html is a trivial example of a table with one row. the css hides the contained child div by default, and sets the display to block when hovering, in addition to default styles and the positioning/z-index mentioned above
table, th, td {
border: 1px solid black;
}
.pop-up {
display: none
}
td {
position: relative;
}
td:hover > .pop-up {
display: block;
}
.pop-up {
width: 500px;
height: 100px;
background: red;
border: 1px solid black;
position: absolute;
left: 50px;
z-index: 1;
}
click here to see full example
I'm trying to save page length in SharePoint by having a list of links that expose corresponding copy directly below them onto the page.
I have this working great outside of SharePoint thanks to the labels solution in this question and once in SP it works fine in Chrome but the hidden divs don't expand when the links are clicked in IE11.
To get around SP stripping the formatting away I created a .txt file containing the CSS and HTML and uploaded it to the sites style library. Then linked to it in a Content Editor Webpart. you can see what I'm using in the demo.
I'd like a solution without using JQuery as I'm not sure if we can use it within our internal enviroment (I've asked if we can but haven't heard back yet) It seems logical that there must be a simple way to do this within SP itself or SharePoint Designer or CSS without the above issue?
.artifact_top
{padding:10px;border:1px solid lightgrey;margin:10px;overflow:auto;}
.collapse{
cursor: pointer;
display: block;
color: #6490d6;
text-decoration: none;
}
.collapse:hover{
text-decoration: underline;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
display:none;
}
.collapse + input:checked + div{
display:block;
}
table
{border-collapse:separate;width:100%;border:none;}
td
{padding-left:10px;padding-top:10px;vertical-align:top;}
<div style="float: right; width: 35%; padding-left: 5%;"><div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong style="font-size: 13.3333px;">Implementation</strong><strong> Artifacts</strong></div>
<br/>
<span class="ms-rteFontSize-1">This topic provides you a list of the artifacts and supporting documentation related to <span>Implementation</span>. Artifacts with an asterisk are required for all projects.</span>
<br/><br/>
<div><label class="collapse" for="_1">Final Implementation Plan*</label>
<input id="_1" type="checkbox"/>
<div class="artifact_top">The Implementation Plan identifies tasks, owners, timeline, and communication for IT components of the Implementation phase.<br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>PM</td>
<td width="50%"><strong>Template</strong><br/>View the Implementation Plan template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>Delivery Lead, PM, Release Manager</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div><label class="collapse" for="_2">Operational Readiness Review (ORR)*</label>
<input id="_2" type="checkbox"/>
<div class="artifact_top">The Operational Readiness Review is a checklist to ensure all required documentation listed within the ORR is completed.<br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>App Services</td>
<td width="50%"><strong>Template</strong><br/>View the Operational Readiness Review template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>App Services</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div><label class="collapse" for="_3">System/Application Documentation*</label>
<input id="_3" type="checkbox"/>
<div class="artifact_top">The System/Application Documentation consolidates content about the system/application, which backend users can use to determine how that system/application is designed and functions. <br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>TechComm</td>
<td width="50%"><strong>Template</strong><br/>N/A</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>IT Configuration Management</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
</div>
To support some advanced functionality in Internet Explorer, SharePoint 2010 uses some ActiveX controls that are only available in IE8. SharePoint forces Internet Explorer 11 into compatibility view to emulate Internet Explorer 8, essentially downgrading your version of IE.
Unfortunately, the input:checked CSS selector was introduced with CSS 3 and was not yet available in Internet Explorer 8.
As an alternative, you can use a click event handler in JavaScript to toggle the visibility of the divs. JavaScript can be entered into the same .txt file as your CSS and HTML (enclosed within <script> tags). If you put the JavaScript below your HTML, it will not execute until the preceding HTML is loaded by the browser, allowing you to query and reference the preceding HTML elements in your script.
<script>
var labels = document.querySelectorAll(".collapse"); // get all labels
for(var i = 0; i < labels.length; i++){
var label = labels[i];
(function(div){
label.onclick = function(){
if(div.style.display == "block"){
div.style.display = "none";
}else{
div.style.display = "block";
}
};
})(label.parentNode.querySelector("div"));
}
</script>
var labels = document.querySelectorAll(".collapse"); // get all labels
for (var i = 0; i < labels.length; i++) {
var label = labels[i];
(function(div) {
label.onclick = function() {
if (div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
};
})(label.parentNode.querySelector("div"));
}
.collapse {
cursor: pointer;
display: block;
color: #6490d6;
text-decoration: none;
}
.collapse:hover {
text-decoration: underline;
}
.collapse + input {
display: none;
/* hide the checkboxes */
}
.collapse + input + div {
display: none;
}
table {
border-collapse: separate;
width: 100%;
border: none;
}
td {
padding-left: 10px;
padding-top: 10px;
vertical-align: top;
}
.artifact_top {
padding: 10px;
border: 1px solid lightgrey;
margin: 10px;
overflow: auto;
}
<div style="float: right; width: 35%; padding-left: 5%;">
<div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong style="font-size: 13.3333px;">Implementation</strong><strong> Artifacts</strong>
</div>
<br/>
<span class="ms-rteFontSize-1">This topic provides you a list of the artifacts and supporting documentation related to <span>Implementation</span>. Artifacts with an asterisk are required for all projects.</span>
<br/>
<br/>
<div>
<label class="collapse" for="_1">Final Implementation Plan*</label>
<input id="_1" type="checkbox" />
<div class="artifact_top">The Implementation Plan identifies tasks, owners, timeline, and communication for IT components of the Implementation phase.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>PM
</td>
<td width="50%"><strong>Template</strong>
<br/>View the Implementation Plan template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>Delivery Lead, PM, Release Manager</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div>
<label class="collapse" for="_2">Operational Readiness Review (ORR)*</label>
<input id="_2" type="checkbox" />
<div class="artifact_top">The Operational Readiness Review is a checklist to ensure all required documentation listed within the ORR is completed.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>App Services</td>
<td width="50%"><strong>Template</strong>
<br/>View the Operational Readiness Review template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>App Services</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div>
<label class="collapse" for="_3">System/Application Documentation*</label>
<input id="_3" type="checkbox" />
<div class="artifact_top">The System/Application Documentation consolidates content about the system/application, which backend users can use to determine how that system/application is designed and functions.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>TechComm</td>
<td width="50%"><strong>Template</strong>
<br/>N/A</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>IT Configuration Management</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
</div>
pure css and html, nice work!
have you the possibility to add a meta into the header?
see / try the ie=edge meta:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
we got a lot of issues with our sharepoint / our ie version on our workmachines - css styles are ignored, scripts not working etc.
are the contents always hidden and the click has no effect or are they alwasy visible?
I'm coding an email for my place of work and because we are business to business, there's a lot of pressure for me to get emails to look nice in Microsoft Outlook. I originally had this set up as a 6 column table (I broke my first row into 6 empty divisions and used colspan), but reduced it to a 3 column table. I was sure that I had all my measurements right, but it seems that Microsoft Outlook is still breaking my table.
In Outlook, the right side of the 3rd, 4th and 5th rows jut out about 100px from the 1st and 2nd rows, and the 5th row, my footer, has the white text squashed into what looks like a 100px wide division and the button floats in the center of rest of the space.
I've quadruple checked my colspans and pixel measurements, as well as replacing my hr tags with .jpg images (but changed them back to hr tags when I found that that didn't make a difference), but it's still giving me Hell. I've been looking at this way to long, I must be missing the problem over and over again.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w31.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>2015 Outdoor Room Design Ideas Promo</title>
<style type="text/css">
.ExternalClass * {
width: 100%;
line-height: 100%;
margin: 0 auto;
}
body {
margin: 0 auto !important;
}
table.container {
width: 100% !important;
border-collapse: collapse !important;
mso-table-lspace:0;
mso-table-rspace:0;
table-layout: fixed ;
vertical-align: top !important;
}
table.layout {
width: 600px !important;
}
table.copy {
width: 550px !important;
}
</style>
</head>
<body style="background-color: #d1d1d1; font-family: sans-serif; font-size: 16px;">
<table class="container" cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="center">
<table class="layout" cellspacing="0" cellpadding="0" border="0" width="600px">
<tr><td width="200px" height="10px"></td><td width="200px" height="10px"></td><td width="200px" height="10px"></td></tr>
<tr><td colspan="3" width="600px" height="50px">
<img src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Header.jpg" width="600px" height="50px" alt="Hearth and Home magazine, the voice of the hearth, barbecue, and patio industries" /></td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="3" width="600px" height="347px">
<img src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Image.jpg" width="600px" height="347px" alt="David Thorne Landscape Architect" /></td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="3" width="550px" height="auto" style="background-color: #FFF; padding-left: 25px; padding-right: 25px;">
<h1 align="center" style="font-size: 22px; color: #477696;">We're Looking for a Few Great<br /> Outdoor Rooms</h1>
<hr width="550px" style="border: 1px #d1d1d1 solid;" />
<p style="color: #000000; font-size: 16px;">The August issue of <i>Hearth & Home</i> will feature Outdoor Room Designs. From spectacular, over-the-top showstoppers, to modest, small-scale spaces, we plan to showcase outdoor living areas that will delight and inspire you, and your customers, no matter their budget or vision.</p>
<p style="font-size: 16px; word-spacing: -1px; color: #000000">We hope this Special Section in <i>Hearth & Home</i> will be something you'll want to save for reference and share with your customers as a design resource and idea source while helping them create outdoor kitchens and living spaces in their backyards.</p>
<p style="color: #000000; font-size: 16px;">We invite you to share photos of outdoor projects you have worked on for possible inclusion in this section. Ideally, we would love to see projects that include outdoor kitchens, outdoor fireplaces or fire pits, AND outdoor dining and seating, but we'll gladly consider those that have only some of those elements.</p>
<p style="word-spacing: -1px; color: #000000; font-size: 16px;">Whether you or your business handled the entire project from inception to completion, or worked on just one aspect of it, such as the design, landscaping or supplying the outdoor kitchen appliances, hearth products, patio furniture or other products, we would love to see your photos and hear a little bit about the details.</p>
<p style="color: #000000; font-size: 16px;">Deadline for submissions will be <b>May 22, 2015</b>. All work will be properly credited to you.</p>
<hr width="550px" style="border: 1px #d1d1d1 solid;" />
<p style="font-size: 19px; color: #477696; font-weight: 600" align="center">Thanks! We can't wait to see<br /> your great Outdoor Rooms!</p>
</td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="2" width="350px" height="80px" style="background-color: #477696; padding-left: 25px; padding-right: 25px;"><p style="color: #FFFFFF; font-size: 14px; font-weight: 200">To submit your project for consideration, click the button to the right and fill out the submission form. When uploading your images, we encourage you to send <i>.zip files</i>. Not sure how to zip files? <a style="color: #FFF" href="http://www.wikihow.com/Zip-Files-Together" alt="How to zip files" target="_blank">Click here</a>.</p></td>
<td width="200px" height="80px" style="background-color: #477696;"><img style="vertical-align: center;" src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Button.jpg" width="167px" height="61px" alt="Click here to submit your outdoor room project" /></td></tr>
<tr><td colspan="3" width="600px" height="50px" style="vertical-align: center;"><p align="center" style="font-size: 14px; color: #000000"><i>Any questions, please contact<br />
</i></p></td></tr>
</table>
</td></tr></table>
</body>
</html>
Nevermind, I resolved my own issue.
It was the three empty cells at the top of the page, so I dropped from 3 columns to 2 columns. I've lost the nice spacing I had above the header, but it is no longer breaking in Outlook.
I have clearly defined the width of my email to be 804px wide max. But within Outlook it will full screen width the whole thing, can't tell if it's a specific element somewhere not taking into account the max width. Trying to see if anyone can see an obvious reason for this.
It looks like the left content text is the issue but I have defined width for that too!
Looks fine within a browser of course! Dam email programs (Outlook).
Screenshot of what it looks like in Outlook.
HTML Email Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WYLES HARDY & Co</title>
<meta name="viewport" content="width = 483" />
<style type="text/css">
a {text-decoration:none; color: #004466; }
a img, img, .images, .images a, .images a img, .images img { border: 0; padding: 0; margin: 0; }
body {width: 100% !important; background-color: #fff; font-family: 'Arial'; }
p { margin: 10px 5px 0px 5px; line-height: 19px; font-size: 14px; font-family: 'Arial'; color: #004466; }
p.larger { margin: 5px 5px 8px 5px; line-height: 19px; font-size: 15px; font-family: 'Arial'; color: #004466; }
p a { color: #00A952; text-decoration: none; font-weight: bold; }
h1 { margin: 5px; color: #00405C; font-weight: bold; font-size: 18px; }
h2 { margin: 10px 5px 10px 5px; color: #00405C; font-weight: bold; font-size: 14px; }
.blue-table { background: #EAF0F4; margin: 0; padding: 0 10px 10px 10px; border: 0; }
.clear-table { background: #fff; margin: 0; padding: 0; border: 0; }
.grid-table { border: 1px solid #004466; margin: 5px; line-height: 20px; font-size: 11px; font-family: 'Arial'; color: #004466; }
.table-div { width: 96%; margin: 2%; height: 1px; border-top: 1px solid #004466; }
.left { text-align: left;}
.right { text-align: right; }
.main { border: 1px solid #444; margin-top: 10px; margin-bottom: 10px; padding: 5px; }
.content { background: #fff; }
</style>
</head>
<body style="margin:0;padding:0">
<a name="top"></a>
<table class="main" width="804px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="804px" class="images">
<tr><td><a target="_blank" href="http://www.wyleshardy.com/businesssales.asp?pge=3"><img style="border: 0; padding: 0" src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/header.jpg" /></a></td></tr>
</table>
<br />
<table width="804px" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td class="clear-table" width="20px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="clear-table" width="395px" valign="top" >
<table class="clear-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<!-- <ul width="405px">
<li>Company established over 30 years ago.</li>
<li>Trades from NW London from leased industrial premises.</li>
<li>Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</li>
<li>The company has a diverse number of clients, together with a significant business relationship with a high profile client group, forged over many years.</li>
<li>It holds ISO 9001 Certification for quality management and also FSC and PEFC accreditations.</li>
<li>It has a dedicated and loyal workforce, with employees currently totaling 23, including 4 directors.</li>
<li>The business and assets include goodwill (name, web domains, client data base, telephone numbers etc.) Contracts, various items of plant & machinery (some subject to finance agreements), and minimal stock.</li>
</ul> -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>•</td>
<td> Company established over 30 years ago.</td>
</tr>
<tr>
<td>•</td>
<td> Trades from NW London from leased industrial premises.</td>
</tr>
<tr>
<td>•</td>
<td> Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</td>
</tr>
</table>
</a>
<img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/frplogo.jpg" width="375px" alt="" title="" />
</td>
</tr>
</table>
</td>
<td class="clear-table" width="10px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="content" width="346px" valign="top">
<table class="blue-table" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<p><strong>TURNOVER:</strong> Turnover totalled £2.8m per accounts to June 2013, and £ 1.9m for the 9 months to March 2014.</p>
<p><strong>OPPORTUNITIES:</strong> The Company offers an excellent opportunity to consolidate existing trade and exploit the contracts already in place.</p>
<br>
<h1>ENQUIRIES:</h1>
<p class="larger">All enquiries should<br>be directed to:<br>
<strong>Julie Gearing<br>Nigel Strike<br>FRP Advisory LLP</strong></p>
<p><strong>Tel:</strong> 01277 503 304<br><strong>Fax:</strong> 01277 503 300<br><strong>Email:</strong><br> Julie.Gearing#frpadvisory.com<br>Nigel.Strike#frpadvisory.com</p>
<br>
<p><strong>FRP Advisory LLP</strong><br>Jupiter House<br>Warley Hill Business Park<br>The Drive<br>Brentwood<br>Essex<br>CM13 3BE</p>
<br>
<p>A sales pack containing detailed information regarding the business for sale will be provided to interested parties following the signing and return of a Non-Disclosure Agreement.</p></a>
</td>
</tr>
</table>
<td class="clear-table" width="13px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
</td>
</tr>
</tr>
</table>
</table>
</body>
</html>
You have missed some closing tag and misplaced the closing tag in your HTML part.
I have modified your HTML part and it should be like below.
<table class="main" width="804px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="804px" class="images">
<tr><td><a target="_blank" href="http://www.wyleshardy.com/businesssales.asp?pge=3"><img style="border: 0; padding: 0" src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/header.jpg" /></a></td></tr>
</table>
<br />
<table width="804px" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td class="clear-table" width="20px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="clear-table" width="395px" valign="top" >
<table class="clear-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<!-- <ul width="405px">
<li>Company established over 30 years ago.</li>
<li>Trades from NW London from leased industrial premises.</li>
<li>Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</li>
<li>The company has a diverse number of clients, together with a significant business relationship with a high profile client group, forged over many years.</li>
<li>It holds ISO 9001 Certification for quality management and also FSC and PEFC accreditations.</li>
<li>It has a dedicated and loyal workforce, with employees currently totaling 23, including 4 directors.</li>
<li>The business and assets include goodwill (name, web domains, client data base, telephone numbers etc.) Contracts, various items of plant & machinery (some subject to finance agreements), and minimal stock.</li>
</ul> -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>•</td>
<td> Company established over 30 years ago.</td>
</tr>
<tr>
<td>•</td>
<td> Trades from NW London from leased industrial premises.</td>
</tr>
<tr>
<td>•</td>
<td> Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</td>
</tr>
</table>
</a>
<img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/frplogo.jpg" width="375px" alt="" title="" />
</td>
</tr>
</table>
</td>
<td class="clear-table" width="10px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="content" width="346px" valign="top">
<table class="blue-table" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<p><strong>TURNOVER:</strong> Turnover totalled £2.8m per accounts to June 2013, and £ 1.9m for the 9 months to March 2014.</p>
<p><strong>OPPORTUNITIES:</strong> The Company offers an excellent opportunity to consolidate existing trade and exploit the contracts already in place.</p>
<br>
<h1>ENQUIRIES:</h1>
<p class="larger">All enquiries should<br>be directed to:<br>
<strong>Julie Gearing<br>Nigel Strike<br>FRP Advisory LLP</strong></p>
<p><strong>Tel:</strong> 01277 503 304<br><strong>Fax:</strong> 01277 503 300<br><strong>Email:</strong><br> Julie.Gearing#frpadvisory.com<br>Nigel.Strike#frpadvisory.com</p>
<br>
<p><strong>FRP Advisory LLP</strong><br>Jupiter House<br>Warley Hill Business Park<br>The Drive<br>Brentwood<br>Essex<br>CM13 3BE</p>
<br>
<p>A sales pack containing detailed information regarding the business for sale will be provided to interested parties following the signing and return of a Non-Disclosure Agreement.</p></a>
</td>
</tr>
</table>
</td>
<td class="clear-table" width="13px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
</tr>
</table>
</td>
</tr>
</table>
I've now fixed the issue, the changes required were to change the following:
Before
width="395px"
After
width="395"