I'm trying to put a shadow on each one of my table lines. But it's not working with the first one and I don't really understand why.
I put you the css inline as you can see the all things
{% for resultat in resultats %}
<tr style="background-color: #F0F0F0; box-shadow: 8px 8px 12px #aaa, 8px -8px 12px #aaa; -webkit-box-shadow: 8px 8px 12px #aaa;"
id="first_{{ nb }}>
<td>
<span class="fl marginTop8">
{{ resultat.missions.getDateReaPrev()|date('Y-m-d') }}
</span>
</td>
<td></td>
<td></td>
<td>
<span class="fl marginTop8">
{{ resultat.distance }} Km
</span>
</td>
<td></td>
<td class="badge fr" style="color: darkorange;">{{ resultat.nb_pdv }}</td>
</tr>
<tr style="background-color:white">
<td colspan="6"></td>
</tr>
{% endfor %}
Here is what I got with this code:
As you can see, the shadow is on the right both tr...but the border is only on the last tr.
I would like to get something like this one
Thanks for your help.
EDIT: For more precision there is a class tableEnquete on the table.
So there is too
.tableEnquetes tr:nth-child(2){ position:relative }
.tableEnquetes table{
border-radius: 0 0 15px 0;
box-shadow: 3px 3px 3px #AAA;
margin: 0;
table-layout: fixed;
}
Here is a fiddle of this problem: https://jsfiddle.net/wdwgn7ta/
You only need to change background-color:white to background-color:none
<tr style="background-color:none">
<td colspan="6"></td>
</tr>
Related
I'm reasonaly new to html and css, I am developing a simple web app in flask.
I'm trying to edit the homepage home.html, which inherits from layout.html.
I would like the bottom table (with the green and red circles) to be on the right of the main table above it. Ideally I could define the amount of space each takes in the container i.e. the left table takes up 65% and the right 35%. The tables would extend vertially the length of the page.
Thank you
layout.html
...
table {border-collapse: collapse; width: 100%; border: none;}
/*table {border-collapse: collapse; width: 100%; margin-bottom: 2em; border: none;}*/
td { border: none; padding: 0.5em 0; font-size: 20px; vertical-align: top;}
thead { text-transform: uppercase; font-weight: 700; border-bottom: 1px solid #ea560d;}
thead td { font-size: 20px; letter-spacing: 0.3px;}
tbody tr { border-bottom: 1px solid #a8a8a8;}
.leftside .rightside{
height:100vh;
width:95%;
}
.leftside{
background:white;
overflow:hidden;
}
.rightside{
background:black;
width:220px;
margin-left:30px;
float:right;
}
</style>
<body>
<section class="container">
{% block content %}{% endblock %}
</section>
</body>
</html>
home.html
{% block content %}
<div style="leftside">
<p align="right">
<a class="btn btn-primary" class="nav-item nav-link" href="{{ url_for('new_post') }}" role="button"
>New Post</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">Quick Expand</a>
</p>
<table style="leftside" align="center">
<tr style="border-bottom:1pt solid black;">
<th>Title</th>
<th>Status</th>
<th>Datetime</th>
<th>Assigned To</th>
<th>Reported By</th>
<th>Edit</th>
</tr>
{% for post in posts %}
<tr>
<td><a class="article-title" href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a></td>
<td>{{ post.status }}</td>
<td><strong><small>{{ post.date_posted }}</small></strong></td>
<td><small>{{ post.assigned_to }}</small></td>
<td><small>{{ post.reported_by }}</small></td>
<td><a class="btn btn-primary" class="article-title" href="{{ url_for('update_post', post_id=post.id) }}">Edit</a></td>
</tr>
<td colspan="5">
<div class="collapse" id="collapseExample"><div class="card card-body">{{ post.description }}</div></div>
</td>
{% endfor %}
</table>
</div>
<div style="rightside">
<table>
{% for buggy in buggies %}
<tr>
{% if buggy['BRider'] %}
<td><svg height="40" width="40">
<circle cx="14" cy="14" r="12" stroke="black" stroke-width="3" fill="red" />
Sorry, your browser does not support inline SVG.
</svg></td>
{% else %}
<td><svg height="40" width="40">
<circle cx="14" cy="14" r="12" stroke="black" stroke-width="3" fill="green" />
Sorry, your browser does not support inline SVG.
</svg></td>
{% endif %}
<td>{{ buggy['BName'] }}</td>
<td>{{ buggy['BRider'] }}</td>
</tr>
{% endfor %}
</table>
</div>
{% endblock content %}
Above code is not functional to the fullest to recreate it however this snippet will help you to how you can achieve the requested work:
flex got one of these features which helps developer not to break head to do these alignment since the property of flex will take care of both rows and columns.
In the below snippet you can change in the parent property of flex-direction:row/column; to see the difference in the alignment.
.Blocks{
display:flex;
flex-direction:row; /* change here(row/column) to see the difference */
padding:5px;
border:2px solid yellow;
width:650px;
}
#First{
border:2px solid blue;
height:450px;
width:300px;
margin:5px;
}
#Second{
border:2px solid red;
height:450px;
width:300px;
margin:5px;
}
<div class="Blocks">
<div id="First">
First
</div>
<div id="Second">
Second
</div>
</div>
Try using float : left attribute.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table{
width : 50%;
float : left;
}
</style>
</head>
<body>
<h1>The table element</h1>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<table >
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Here is the working example Click Here!
Currently, I'm working on an e-mail template in HubSpot but I came across a problem that I can't seem to find a fix for.
<table class="two-col-centered" style="line-height: 1.5em; max-height: 309px;">
<tr>
<td style="width: 40%; font-size: 12px; padding: 0px 0px 0px 0px;" valign=top class="k-700-col mk-padding">
<table style="width: 100%;"><tr>
<td style="padding: 0px 0px 0px 00px;">
{% if widget.Image.src %}
<img src="{{ widget.Image.src }}" width="309px;" height="269px" alt="{{ widget.Image.alt }}">
{% endif %}
</td>
</tr></table>
</td>
<td style="width: 60%; font-size: 12px; padding: 0; background-color: #ED4A2F;" valign=top class="k-700-col mk-padding;">
<table style="width: 100%;"><tr>
<td style="padding: 25px 30px;">
<h2 style="font-size: 20px; margin: 0; margin-bottom: 10px; color: #fff;">{{ widget.heading_right }}</h2>
<span style="display: block; background-color: #fff; width: 5em; height: 5px; border: none;"></span>
{{ widget.content_right }}
{{ widget.CTA }}
</td>
</tr>
</table>
</td>
</tr>
This is the code currently in HubSpot for the particular part that isn't responsive in the Gmail app.
Android Gmail app screenshot
iOS app screenshot
Outlook 2016 screenshot
Outlook Chrome screenshot
Ideally, I would like to have the Android Gmail app like the iOS app...
Thanks in advance.
Android Gmail app does not support media queries.
https://litmus.com/community/discussions/6184-media-query-support-for-gmail-app-on-lollipop-does-it-work-for-you
https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81
Outlook does not support a value like this in tables: width="309px;" Use width="309" instead.
Good luck.
I'm trying to edit our Shopify 'New Order Notification' email and create a custom table to organize the information a bit better.
It should look like this on desktop, but I'd like to have the totals lined up with the 'line price' column.
On mobile, it looks like this the totals aren't aligned and the 'totals' table doesn't have a 100% width.
I know I obviously need to add mobile queries, which I tried & removed, I just got tired of trying & brought my issue here.
What styles or edits should I make to make both tables 100% on desktop & mobile, and how do I align the totals with the last column of the top table?
Here's my CSS:
/* general styles */
.main-container {
width: 80%;
}
table, tr, td, th {
border-collapse: collapse;
}
table {
width: 100%;
}
/* table-1-items styles */
.table-1-headers {
background-color: #00a850;
color: white;
font-weight: bold;
border-bottom: 2px solid black;
}
.table-1-headers td {
height: 50px;
vertical-align: middle;
}
.left-justify {
text-align: left;
}
.center-justify {
text-align: center;
}
.header-item {
padding-left: 20px;
}
.item-image,
.item-title,
.item-sku,
.item-price,
.item-qty,
.total-line-price,
.header-item-price,
.header-qty,
.header-line-price {
padding-right: 20px;
}
.spacer {
height: 15px;
}
/* table-2-totals styles */
.table-2-totals {
border-top: 2px solid black;
}
.totals-row-1 {
padding-top: 15px;
}
.order-instructions {
font-weight: bold;
vertical-align: top;
padding: 10px 30px 5px 5px;
white-space: nowrap;
}
.order-instructions span {
background-color: yellow;
font-weight: normal;
}
.totals-header {
font-weight: bold;
text-align: right;
border-left: 2px solid black;
padding-left: 8px;
}
.totals {
text-align: right;
padding-right: 22px !important;
min-width:101px !important;
}
.subtotal-header,
.subtotal-input {
padding-top: 10px;
}
And my HTML:
<p>Hello {{ shop_name }},</p>
<p>{% if customer.name %}<b>{{ customer.name }}</b>{% else %}Someone{% endif %} placed a new order with your store, {{ date | date: "%b %d %I:%M%p" }}:</p>
<div class="main-container">
<table class="table-1-items">
<tr class="table-1-headers" >
<td colspan="2" class="header-item left-justify" >Item</td>
<td class="header-sku left-justify">SKU</td>
<td class="header-item-price center-justify">Item Price</td>
<td class="header-qty center-justify">Qty</td>
<td class="header-line-price center-justify">Line Price</td>
</tr>
{% for line in line_items %}
<tr class="item-line">
<td class="item-image center-justify"><img src="{{ line | img_url: 'thumb' }}" alt="Item Image" /></td>
<td class="item-title left-justify">{{ line.title }}</td>
<td class="item-sku left-justify">{{ line.sku | lowcase }}</td>
<td class="item-price center-justify">{{ line.price | money }}</td>
<td class="item-qty center-justify">{{ line.quantity }}</td>
<td class="total-line-price center-justify">{{ line.line_price | money }}</td>
</tr>
{% endfor %}
<tr class="spacer"></tr>
</table>
<table class="table-2-totals">
<tr class="totals-row-1">
<td rowspan="7" class="order-instructions">ORDER NOTE/SPECIAL INSTRUCTIONS<br><span>{{ note }}</span></td>
<td class="totals-header subtotal-header">Subtotal:</td>
<td class="totals subtotal-input">{{ subtotal_price | money }}</td>
</tr>
<tr>
<td class="totals-header">Tax:</td>
<td class="totals">{{ total_tax | money }}</td>
</tr>
<tr>
<td class="totals-header">Rate:</td>
<td class="totals">{{ tax_line.rate }}</td>
</tr>
<tr>
<td class="totals-header">Discounts:</td>
<td class="totals">{{ discounts_amount | money }}</td>
</tr>
<tr>
<td class="totals-header">Shipping:</td>
<td class="totals">{{ shipping_price | money }}</td>
</tr>
<tr>
<td class="totals-header">Total:</td>
<td class="totals">{{ total_price | money }}</td>
</tr>
</table>
</div>
<br>
<br>
View order {{order_name}}
<br>
{% if fulfillment_aborted %}
<p>The above order was not automatically fulfilled because it was flagged as suspicious.</p>{% endif %}
<br>
{% if has_high_risks? %}<p><b>Security check:</b></p>
<p>This order has a risk of being fraudulent. Review the order in your store's admin and contact the customer to verify their information.</p>
{% endif %}
<br>
<p><b>Customer Email: </b>{{ email }}</p>
<p><b>Customer Company: </b>{{ billing_address.company }}</p>
<br>
<p><b>Payment processing method:</b></p>
<p>{{ gateway }}</p>
<br>
{% if requires_shipping and shipping_address %}
<p><b>Delivery method:</b></p>
{% for shipping_method in shipping_methods %}<p>{{ shipping_method.title }}</p>{% endfor %}
<br>
<p><b>Shipping address:</b></p>
<p>{{ shipping_address.name }}</p>
<p>{{ shipping_address.street }}</p>
<p>{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}</p>
<p>{{ shipping_address.country }}</p>
<p>{{ shipping_address.phone }}{% endif %}</p>
<br>
{% if shopify_shipping_enabled %}
<p>Save time and money by fulfilling with Shopify Shipping</p>
{% endif %}
Thanks in advance for any help!
So if tables have no defined height they will keep getting smaller until they can no longer get any smaller, then they stop where they are.
Add this to your CSS
table {
max-width: 800px;
min-width: 500px;
width: 100%;
}
All I'm doing there is telling the tables to be 100% wide, to a maximum of 800px, and a minimum of 500px. (adjust as required)
When you've added this you'll also want to remove the right paddding on the totals for MOBILES
.totals {
padding-right: 0 !important;
}
You also have a style called .main-container which has a max width of 80%... you need to replace that with
.main-container {
width: 100%;
}
I am creating a table in html and it needs to be scrollable. So I changed the display to block and made overflow-y scroll. When I do this it makes the columns header not spaced out so there is a lot of excess space. I know the display block setting is what causes this, but I need to make it scrollable. how do I set this in css and html?
table {
margin-bottom: 40px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
height: 250px !important;
overflow-y: scroll;
display: block;
}
<table>
<thead>
<tr class="rowTable header">
<th class="cell">Date Submitted</th>
<th class="cell">Bounty Name</th>
<th class="cell">Company</th>
<th class="cell">Paid</th>
<th class="cell">Details</th>
<th class="cell">Response</th>
</tr>
</thead>
<tbody>
{% for report in recentReports %}
<tr class="rowTable">
<td class="cell">{{report.date}}</td>
<td class="cell"><a href="/_hunter/bounty/{{report.bountyID}}">{{report.name}}</td>
<td class="cell">{{report.company}}</td>
<td class="cell">{{report.amountPaid}}</td>
<td class="cell">
<button type="button" class="detailsButton" data-toggle="modal"
data-target="#detailsModal" data-whatever="#getbootstrap"
data-ID={{report.reportID}}>
View
</button>
</td>
<td class="cell">
<button type="button" class="messageButton" data-toggle="modal"
data-target="#messageModal" data-whatever="#getbootstrap"
data-ID={{report.reportID}}>
View
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
Here is a photo of what happens. I think its clear to see that what i want is the columns take take up the entire table evenly. The image is of just the table, not the entire webpage.
You need to do what #Johannes suggests:
<div id="wrapper">
<!-- put your table here-->
</div>
Change your Css to:
#wrapper {
margin-bottom: 40px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
height: 250px !important;
overflow-y: scroll;
display: block;
}
table{
width:100%
}
And you are done. If you find this answer useful, please up vote #Johannes answer. And if you feel Happy up vote mine to.
See example:
https://jsfiddle.net/ex239ck6/
put the table in a DIV that has the settings your table has now (i.e. height and overflow), and let the table be a table...
I have a CSS Based dropdown menu that works great in Firefox and Chrome, however, in IE it submenu's won't dropdown. I had it working for a SHORT while, but now again its not working. Please help!
URL: itsjust4me.com
CSS:
body,ul,li{font-family:Arial,Helvetica,sans-serif;font-size:14px;text-align:left;}
#menu{
line-height:21px;
background:#ED7CD4;
border-radius:8px 8px 0 0;
-moz-border-radius:8px 8px 0 0;
-webkit-border-radius:8px 8px 0 0;
box-shadow:0 0 1px #EDF9FF inset;
height:50px;
list-style:none outside none;
margin:0;
padding:0 10px 0px 5px;
z-index:50000;
}
#menu li{border:medium none;display:block;float:left;margin-right:2px;margin-top:10px;margin-bottom:-3px;padding:4px 10px;position:relative;text-align:center;}
li.lessline{line-height:150%!important;margin-bottom:7px!important;}#menu li:hover{border-radius:5px 5px 0px 0px; background:#FCEFF9;border:1px solid #777777;padding:4px 9px;}#menu li a{color:#FFFFFF;display:block;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:400;outline:0 none;text-decoration:none;text-shadow:1px 1px 1px #000000;}#menu li:hover a{color:#B10D90;text-shadow:1px 1px 1px #FFFFFF;}#menu li .drop{background:url("img/drop.png") no-repeat scroll right 8px transparent;padding-right:21px;font-weight:700;}#menu li .noarrow{background:none!important;padding-right:0;font-weight:700;}#menu li:hover .drop{background:url("img/drop.png") no-repeat scroll right 7px transparent;}.dropdown_1column,.dropdown_2columns,.dropdown_3columns,.dropdown_4columns,.dropdown_5columns{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:#FCEFF9;border-color:-moz-use-text-color #777777 #777777;border-image:none;border-radius:0 5px 5px 5px;border-right:1px solid #777777;border-style:none solid solid;border-width:medium 1px 1px;float:left;left:-999em;margin:4px auto;padding:10px 5px;position:absolute;text-align:left;box-shadow:0px 12px 10px #000;-moz-box-shadow:0px 12px 10px #000;-webkit-box-shadow:0px 10px 10px #000;}.dropdown_1column{width:140px;}.dropdown_2columns{width:280px;}.dropdown_3columns{width:420px;}.dropdown_4columns{width:560px;}.dropdown_5columns{width:700px;}#menu li:hover .dropdown_1column,#menu li:hover .dropdown_2columns,#menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns{left:-1px;top:auto;}.col_1,.col_2,.col_3,.col_4,.col_5{display:inline;float:left;margin-left:5px;margin-right:5px;position:relative;}.col_1{width:130px;}.col_2{width:270px;}.col_3{width:410px;}.col_4{width:550px;}.col_5{width:690px;}#menu .menu_right{float:right;margin-right:0;}#menu li .align_right{border-radius:5px 0 5px 5px;}#menu li:hover .align_right{left:auto;right:-1px;top:auto;}#menu p,#menu h2,#menu h3,#menu ul li{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:21px;text-align:left;text-shadow:1px 1px 1px #FFFFFF;}#menu h2{border-bottom:1px solid #B10D90;font-size:21px;font-weight:700;letter-spacing:-1px;margin:7px 0 14px;padding-bottom:14px;color:#B10D90;}#menu h3{border-bottom:1px solid #00ACED;font-size:14px;margin:7px 0 14px;padding-bottom:7px;color:#00ACED;}#menu p{line-height:18px;margin:0 0 10px;}#menu li:hover div a{color:#015B86;font-size:14px;}#menu li:hover div a:hover{color:#029FEB;}.strong{font-weight:bold;}.italic{font-style:italic;}.imgshadow{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #777777;box-shadow:0 0 5px #666666;margin-top:5px;padding:4px;}.img_left{float:left;margin:5px 15px 5px 5px;width:auto;}#menu li .black_box{background-color:#333333;border-radius:5px 5px 5px 5px;box-shadow:0 0 3px #000000 inset;color:#EEEEEE;padding:4px 6px;text-shadow:1px 1px 1px #000000;}#menu li ul{list-style:none outside none;margin:0 0 12px;padding:0;}#menu li ul li{float:none;font-size:12px;line-height:24px;margin:0;padding:0;position:relative;text-align:left;text-shadow:1px 1px 1px #FFFFFF;width:130px;}#menu li ul li:hover{background:none repeat scroll 0 0 transparent;border:medium none;margin:0;padding:0;}#menu li .greybox li{background:none repeat scroll 0 0 #FFE0F8;border:1px solid #EDC4E3;border-radius:5px 5px 5px 5px;margin:0 0 4px;padding:4px 6px;width:116px;}#menu li .greybox li:hover{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #AAAAAA;margin:0 0 4px;padding:4px 6px;}#menu .search{background:none!important;border:none!important;border-radius:0!important;padding:0!important; display:block;}#menu .search:hover{background:none!important;border:none!important;border-radius:0!important;padding:0!important;}
#menu th {background:#F7D7EF;border-right:solid 1px rgb(232, 208, 226); border-bottom:solid 1px rgb(232, 208, 226); color:#B10D90 !important;}
#menu td {border-bottom:dashed 1px rgb(232, 208, 226);}
.menutableright {border-right:dashed 1px rgb(232, 208, 226);}
.single {border-radius:5px 5px 5px 5px !important;}
HTML
in head
<link rel="stylesheet" type="text/css" href="../usermods/_INCstyles_.css" media="all">
<link rel="stylesheet" type="text/css" href="../usermods/stylemy.css" media="all">
<link rel="stylesheet" href="../menu/menu.css?v4" type="text/css" media="screen"/>
<style>
<!--[if IE]>
body {
background-color: #ED7ED7;
background-image: url(images-common/bgrd.jpg);
background-repeat: repeat-x;
dropdown_4columns {width:56ypx !important;}
behavior: url("http://wwww.itsjust4me.com/menu/csshover3.htc");
}
<![endif]-->
</style>
In Body
<ul id="menu">
<li class="single">Home
<li class="single">Products
<li>Shop By Category
<div class="dropdown_4columns">
<div class="col_1">
<ul>
<li class="lessline">Personalized Step Stools</li>
<li class="lessline">Personalized CD's</li>
<li class="lessline">Personalized Name Puzzles</li>
<li class="lessline">Personalized Coat Racks</li>
<li class="lessline">Personalized Kids Scrubs</li>
</ul>
</div>
<div class="col_1">
<ul>
<li class="lessline">Personalized Name Trains</li>
<li class="lessline">Personalized Crayola</li>
<li class="lessline">Personalized Sports Gifts</li>
<li class="lessline">Personalized Backpacks</li>
<li class="lessline">Fathead Decals</li>
</ul>
</div>
<div class="col_2">
<a href="http://www.itsjust4me.com/content/Pages/All-Fatheads.html" alt="Fathead Decals, Personalized Stools, Personalized CD's"/><img src="http://www.itsjust4me.com/prodimages/Fathead-Kids-sm.jpg" width="260" class="" alt="Fathead Decals" border="0"/></a>
<span style="width:100%; height:2px;"> </span>
</div>
<div class="col_4">
<div class="col_2" style="width:265px !important;">
<img src="http://www.itsjust4me.com/prodimages/Personalized-Stools-Img1.png" width="260" class="" alt="Personalized CD's, Personalized Stools" border="0"/>
</div>
<div class="col_2" style="width:265px !important;">
<img src="http://www.itsjust4me.com/Scripts/images-common/hpcd.jpg" width="260" class="" alt="Personalized CD's, Personalized Stools" border="0"/></div>
</div>
</div>
</li>
<li>Shop By Theme
<div class="dropdown_2columns">
<div class="col_2">
<h2>Coming Soon</h2>
</div>
</div>
</li>
<li class="single">FAQ</li>
<li>Shipping
<div class="dropdown_4columns align_right">
<div class="col_4">
<H2>Product Delivery Times</H2>
</div>
<div class="col_4">
<table style="width: 100%; margin-top:-5px;">
<tr>
<th align="center">Product Type</th>
<th align="center">Manufacturing / Processing</th>
<th align="center" style="border-right:none !important;">Shipping</th>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized CDs</th>
<td align="center" class="menutableright">2-3 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Books</th>
<td align="center" class="menutableright">2-3 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Step Stools</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Name Boards</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Coat Racks</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Clocks</th>
<td align="center" class="menutableright">5-7 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Name Trains</th>
<td align="center" class="menutableright">2-5 Days</td>
<td align="center">3-4 Days</td>
</tr>
</table>
</div>
</div>
</li>
<li class="menu_right search"><form method="post" action="/scripts/chshowinfo.php" style="width:156px !important;">
<input name="txtsearch" id="txtsearch" style="border: 1px solid rgb(177, 13, 144); border-radius: 4px 4px 4px 4px; text-align: left; margin-top: 3px; padding: 4px 0px 4px 2px;" placeholder="Search Products" type="text" value=""/>
</form>
</li>
</ul>
#Sven You hit it right on the head! The DOCTYPE was declared but it was placed below some ASP includes... moved it to the top of the page & it did the trick!