Code is seemingly alright when viewing it with the source html/css files, but when is sent through "Webtools Toolbox", (a portal that manages Email+ and Skin Designs that utilizes HTML/CSS), the UL Menu breaks in the email. Is there a way to make the UL width scale to whatever parameter of the email content? You can view the source here: https://illinois.edu/skinDesigner/preview/10087
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="#">
<tr>
<td style="border: medium none;
font-size: 12px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;">
<ul style="list-style:none">
<li class="listle" ><a class="arttle"
href="http://promisemagazine.org/category/longform/">LONGFORM</a> |</li>
<li class="listle" ><a class="arttle"
href="http://promisemagazine.org/category/alumni/">ALUMNI</a> |</li>
<li class="listle" ><a class="arttle"
href="http://promisemagazine.org/category/community/">COMMUNITY</a> |</li>
<li class="listle" ><a class="arttle"
href="http://promisemagazine.org/category/giving/">GIVING</a> |</li>
<li class="listle" ><a class="arttle"
href="http://promisemagazine.org/category/opinion/">OPINION</a> |</li>
<li class="listle" ><a class="arttle"
href="http://promisemagazine.org/category/research/">RESEARCH</a>|</li>
<li class="listle" ><a class="arttle"
href="http://promisemagazine.org/category/schools/">SCHOOLS</a></li>
</ul>
</td>
</tr>
</table>
/td>
</tr>
You set class names on your elements, but there is no CSS. Email providers strip <head> and <body> tags from your document, so whatever you specified in there is lost.
Try to use <span> instead of li for you menu, or use a table for the menu. Table will take 100% of available width.
EDIT:
Another option is to simply show links:
<td style="border: medium none;
font-size: 12px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;">
LONGFORM |
ALUMNI |
COMMUNITY |
GIVING |
OPINION |
RESEARCH|
SCHOOLS
</td>
Not completely sure I understand the problem (are you worried about people changing the size of their email window, or if the content does not fit the table?)
Assuming you are trying to keep content within square window, try putting it in a div, and then adjusting the width of the div to fit your table, and displaying inline block. I added margin: 0 auto to center content like your format above.
Code example:
<div style="width: x; height: y; display: inline-block; margin: 0 auto">
<ul style="list-style:none">
<li>
<li>
<li>
<li>
</ul>
</div>
I would stick with only tables for HTML email. The source code looks horrible but that's your only option.
Related
I have a solution for my problem, but it doesn't seem right. I want to know what's going on.
Nested list item's background colour doesn't extend to the bottom even though there's no margin on it (see the gap below the blue background in the screen shots). The paragraph inside does have a margin. But I've tried to reproduce this outside of my app (which uses Bootstrap) and I can't. In Firebug I tried turning off all CSS except that which was necessary to show the problem (i.e., the background-color and border -- see 2nd image), but it makes no difference. Seen in Chrome and Firefox.
The fix is either adding bottom padding or overflow-y:auto; to the inner list item. But why? Has anyone encountered something like this?
I can't post all the code here, but the HTML at least is something like this:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
[Update] Here is a simplified, non-Bootstrap version. Why no gaps in this one?
ul {
width: 300px;
border: 1px solid red;
float: left;
}
li.sub {
border: 1px solid green;
background-color: yellow;
padding: 8px 8px 0;
}
p { margin:10px; /* no gaps with or without this */ }
<ul>
<li><p>item 1</p>
<ul>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
</ul>
</li>
<li>thing
<ul>
<li class="sub">
nuther
</li>
</ul>
</li>
</ul>
The spacing is occurring because of the margins in the p elements inside the lis, specifically the bottom margin.
This behavior is defined as 'collapsing margins'. More info here: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
You can see this by setting them to 0.
.notification-new p{
margin:0;
}
Live example: http://www.bootply.com/wlfIl3RziC
Full code below:
.notification-new {
background-color:red;
}
.notification-new p{
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
</ul>
</li>
</ul>
This works fine until I introduce the <br> tag and another line of content. The inline <li> tags end up stacking.
<ul style="list-style:none;">
<li style="display:inline;border:1px solid red;">
C
<br>A
</li>
<li style="display:inline;border:1px solid red;">
B
<br>D
</li>
<li style="display:inline;border:1px solid red;">
A
<br>E
</li>
</ul>
If you want all the list items on one line, and rest on a second line, you could try floating them with :
li {
float: left;
}
JSFiddle here
Hey guys this is my second question so far on a website i'm re-designing for my boss. I'm trying have it where if the user hovers over "4-Color Offset Printing" the background of the div ID will change to another background-color. (Example blue). I've tried adding #4_color_offset_printing:hover to see if that will just simply change the background color. This usually works but on this navigation bar it seems to not be working. Right now the default background is green. I'd like it to turn blue when i hover over it. I'm trying to apply this affect to every link but if i could get one working i could figure out the rest.
The older style of the navigation bar is the Gray with the blue link hover affect. The last developer that designed the site decided to use inline CSS. I'm not a fan of inline, but even if i try to simply copy and paste his inline code to the main.css it does not take affect. I have no idea why that would be happening. If anybody has any advice that would be great!
Here is my Demo
<style type="text/css"></style></head>
<body class="desktop webkit webkit_525">
<div id="header">
<div class="content_width rel">
<a href="./Welcome to our site!_files/Welcome to our site!.html">
<div id="header_logo"></div>
</a>
<ul id="top_nav">
<li><a class="home_icon" href="./Welcome to our site!_files/Welcome to our site!.html">Home</a></li>
<li>Contact</li>
<li>Estimates</li>
<li>Help Center</li>
<li>Samples</li>
<li>Shopping Cart</li>
<li class="last-child">My Account</li>
</ul>
<ul id="loginbar" class="rounded">
<li>New Account</li>
<li class="last-child">Login</li>
</ul>
<div id="header_products"></div>
<div id="header_phone">Customer Service: (949) 215-9060</div>
<div id="product_search">
<input id="product_ti" class="default" type="text" value="Find A Product">
<input id="product_btn" type="button" value="Search">
<input id="product_default" type="hidden" value="Find A Product">
</div>
</div>
</div>
<div id="nav">
<ul id="nav_links" class="content_width_adjust">
<li id="4_color_offset_printing" style="width:183px; height:44px; background-color:#0C0; border-top: 4px solid #009ad6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;" class=""><a class="nav_parent narrow" href=""><span>4-Color Offset Printing</span></a></li>
<li id="large_format" style="width:139px" class=""><a class="nav_parent wide" href=""><span>Large Format</span></a></li>
<li id="1-2_color_printing" style="width:164px"><a class="nav_parent" href=""><span>1&2 Color Printing</span></a></li>
<li id="4_color_digital_printing" style="width:189px"><a class="nav_parent narrow" href=""><span>4-Color Digital Printing</span></a></li>
<li id="roll_labels" style="width:130px" class=""><a class="nav_parent wide" href=""><span>Roll Labels</span></a></li>
<li id="services" class="last " style="width:133px"><a class="nav_parent services" href=""><span>Services</span></a></li>
</ul>
</div>
An elements ID can't start with a number, only classes can. Removing the 4_ from '4_color_offset_printing' so you just have a ID of 'color_offset_printing' will allow you to target it in CSS.
If you really don't want to change your ID's, you can target ID's that begin with a number like this:
[id='4_color_offset_printing'] {
background: blue;
}
But I wouldn't recommend using that, it may not work well in all browsers. Best to do things the right way and not use numbers to start your ID's.
Need to add to the #nav_links li a:hover class
#nav_links li a:hover
{
background-color: blue;
}
https://jsfiddle.net/akdz7udj/7/
I am working on my website, http://www.isaveplus.com and I am having an issue of the table adding some space between each col (td) in it. My goal is to have the columns touching because I want the background color to blend in with each other. The picture below will show you what I meant by the space between them.
Thanks in advance!
<table style="width:inherit; margin-left:-5px; margin-top:-5px; " cellspacing="0">
<tr>
<td class="searchBar" align="left" >
<div id="ddtopmenubar" class="mattblackmenu" >
<ul>
<li><a style="vertical-align:bottom;">Best of Coupons</a></li>
<li>
<a style="vertical-align:bottom;"> Best of Travel</a>
<a style="vertical-align:bottom;">Grocery stores</a>
</li>
<li><a style="vertical-align:bottom;">Office Supplies</a></li>
<li><a style="vertical-align:bottom;"> Department <br /> stores </a></li>
<li><a style="vertical-align:bottom;">Drug <br /> stores</a></li>
</ul>
</div>
</td>
<td class="searchBar" align="left">
<asp:Button ID="whatIsIsavePlusButton" runat="server" onclick="whatIsIsavePlusButton_Click" style="color: #800000; font-weight: 700" Text="?" Visible="False" />
</td>
<td class="searchBar" align="left">social media right here!</td>
</tr>
</table>
And the css for searchbar is:
.searchBar
{
background-color: #414141;
color:White;
width:auto;
margin:-5px;
padding:0px;
}
Your links
<a style="vertical-align:bottom;">Best of Travel<a style="vertical-align:bottom;">Grocery stores</a>
have a
border-right: 1px solid white
defined in
.mattblackmenu li a
there you can set the width of these white spaces
Your code isn't displaying the same in my browser as in the picture you give. But essentially I think you either want to put a negative margin-right on the div ddtopmenubar or a border-left:1px solid white on the following td. There might be another way to do it but I think that'd work.
Have you tried the border-collapse property? http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse
border-collapse: collapse;
Can anyone help with this CSS problem. I need NavDropDown to get wider when any NavLevel2 text gets longer than 200px. There should be no text wrap in the list items and NavLevel1 should always be 200px wide.
<div id="Nav">
<ul>
<li class="NavLevel1" style="width: 200px; border: 1px solid Black;"><a><span>Level 1.1</span></a>
<ul id="NavDropDown" style="border: 1px solid Black;">
<li class="NavLevel2"><a><span>Level 2.1.1 test to see if this will push the width out a little</span></a></li>
<li class="NavLevel2"><a><span>Level 2.1.2</span></a></li>
<li class="NavLevel2"><a><span>Level 2.1.3</span></a></li>
</ul>
</li>
</ul>
</div>
change the width style to min-width.
I posted to hastily, just found my solution.
<div id="Nav">
<ul>
<li class="NavLevel1" style="width: 200px; border: 1px solid Black;"><a><span>Level 1.1</span></a>
<ul id="NavDropDown" style="border: 1px solid Black; position:absolute;">
<li class="NavLevel2" style="white-space: nowrap;"><a><span>Level 2.1.1 test to see if this will push the width out a little</span></a></li>
<li class="NavLevel2"><a><span>Level 2.1.2</span></a></li>
<li class="NavLevel2"><a><span>Level 2.1.3</span></a></li>
</ul>
</li>
</ul>
</div>