|
CSS - Css Display In An Email Client
Greets,
For once, this isn't going to be an IE vs FF thread I am trying (for the 1st time) to get things properly displayed in an email (It's a newsletter tool). I used to do it with tables... but we're not allowed to do that no more.. so i figured I'd try doing it properly with divs and a style sheet. It consists of 3 divs encapsulated in a main one: PHP Code: <div id="NL_Container"> <div id="NL_Top"> //header here </div> <div id="NL_Mid"> //Content here </div> <div id="NL_Footer"> //footer here </div> </div> the above is located between the <html><body> tags... and I set the style in the headers (html, not the email headers). The email is sent by a php script. Now, my top & bottom divs have a static height, and the center one doesn't have a set height... this is where I am having trouble: It shows what I think is a 1em height space between the divs. I tried setting the same background image to the container div, but that one passes through at the bottom. I have checked the display in both Outlook 2003 and thunderbird. Here is the style info: PHP Code: div { margin: 0px; padding: 0px; } #NL_Container { width: 620px; background-image: url(http://www.remediaprod.be/cinenygma/images/newsletter_r2_c1.gif); background-repeat: repeat; background-position: center top; } #NL_Top { background-image: url(http://www.remediaprod.be/cinenygma/images/newsletter_r1_c1.gif); background-repeat: no-repeat; background-position: center top; height: 92px; } #NL_Mid { background-image: url(http://www.remediaprod.be/cinenygma/images/newsletter_r2_c1.gif); background-repeat: repeat; background-position: center top; padding-left : 20px; padding-right: 20px; font-family: Arial; font-size: 8pt; } #NL_Footer { background-image: url(http://www.remediaprod.be/cinenygma/images/newsletter_r3_c1.gif); background-repeat: no-repeat; background-position: center top; height: 116px; padding-left : 20px; padding-right: 20px; font-family: Arial; font-size: 8pt; } #NL_Footer a { color: #ffffff; } Similar TutorialsI've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks I have set the Notification Type to "Instant Email Notification" but I do not receive any email when someone replies to my posts? Any idea why? Brad. Hi, Not sure if I'm posting in the right area, but here goes. I'm trying to learn how to send HTML emails, and as I'm in the process of revamping our website using only CSS (no tables), I wanted to format the emails in the same way. I've created 2 html pages in Dreamweaver - in one, I linked to my stylesheets, and in the other I copied and pasted the contents of the stylesheets and embedded them in my html page. The incorrect result described below is exactly the same for both. In Outlook, following instructions I found on Macromedia's website, I created a New email, did Insert -> File, clicked the dropdown arrow beside the Insert button, and clicked Insert As Text. It inserts the images fine, so obviously it's finding the path I've specified (I have alternated between using an absolute path and using a relative path and a base tag) but the layout is completely wrong, eg. the 'LeftPanel' which I've specified as : #LeftPanel { position:absolute; top: 105px; left: 5px; width: 190px; height: 400px; border: 1px solid #000033 } is taking up the full width of the email - basically everywhere I've set a specific width/height are not being displayed as specified at all. I've used a browser to view the work I've done on the revamp of the actual website and everything is exactly right, so the stylesheets are working correctly in that context. Anyone any ideas what the problem is? Thanks a lot, J. I need some assistance getting my site menu to display correctly on FF. It displays fine on IE. You can see an example of the page he http://www.gallery.vividusphoto.com. If viewed in FF, the menu table is touching the logo. In IE, the menu is aligned to the right. If I do an align="right" the "under construction" bar goes up under the logo/menu in FF and the menu is moved to the correct position all while IE is unchanged. Any help is greatly appriciated. Code:
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #333333;
}
.vividus #container {
width: 46em;
margin: 20px auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.vividus #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #333333;
height: 30em;
}
.vividus #headerContent {
width: 46em;
text-align: right;
color: #CCCCCC;
}
.vividus #footerContent {
width: 46em;
padding: 10px 0 0 0;
text-align: left;
color: #CCCCCC;
font: 75% Georgia, "Times New Roman", Times, serif;
}
.vividus #menu {
width: 30em;
border: 0;
margin: 15px 0 5px 0;
text-align: right;
font: 75% Georgia, "Times New Roman", Times, serif;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
}
.login {
background: #000000;
}
.login a:hover {
text-decoration: none;
color: #999999;
}
.newsBanner a:hover {
color:#FFFFFF;
}
.vividus #newsBanner {
background: #666666;
padding: 7px 15px 7px 5px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #CCCCCC;
}
.vividus #realContent {
background: #FFFFFF;
margin: 10px 0 0 0;
height: 30em;
padding: 10px 15px 10px 15px;
}
.vividus #realContentHome {
background: #666666;
margin: 10px 0 0 0;
height: 30em;
padding: 10px 10px 10px 10px;
}
.vividus #bodyHeadline {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
}
.vividus #bodyText {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
}
.vividus #loginForm {
padding: 5px 0 5px 0;
border: 1px solid #000000;
}
.vividus #bodyHeader {
font-size: 2em;
font-family: Georgia, "Times New Roman", Times, serif;
}
.floatright {
float: right;
margin: 10px 0 10px 10px;
}
.vividus #imgAbout {
height: 30em;
background: top right no-repeat url(../images/about_img.jpg);
}
.vividus #bodyHeadlineAbout {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
width: 35em;
}
.vividus #error {
color: #FF0000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
width: 35em;
}
.green {
background:#333333;
margin: 0px 6px 6px 6px;
border:1px solid #3b6e22;
height:24px;
line-height:14px;
color:#FFFFFF;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
margin-right:10px;
display:inline-block;
text-decoration:none;
}
.login2 {
width: 200px;
font-size: 1.1em;
font-family:Georgia, "Times New Roman", Times, serif;
background-color: #FFFFFF;
color: #102132;
border: 1px solid #284279;
}
Edit: Nevermind, I fixed my problem by working through each issue that the W3C validation service gave me, and fixing each one. It works in Internet Explorer now. Thanks for your time anyway. Peace, Pete Zaria. Hey all I'm having a little trouble with my web site, which I have been attempting to make "css-based" and "tableless." The problem that I am having is that there are quite a few small but frusterating differences between how the page displays in IE and Mozilla Firefox (i tend to beleive that ie, the non-standards browser is wrong). Anyway, to the problem. If you view this site: http://trinity.killagraphix.com/index.php Css: http://trinity.killagraphix.com/theme.css (i didn't want to paste the whole file as it is quite large) In Internet explorer, you get a small margin between the Header image, and the rest of the content. This is not here viewing the same page in Mozilla. Also, in both browsers the menu background image is slightly above the center of the line. I think this is because the image is not as big as the line size, is there a way to make the image (which is a css background property) appear vertically-aligned to the center? Thanks in advance, sorry for the post length I'm working on a new site, and having trouble getting the CSS to work with IE7 (big surprise), it works fine in Firefox (big surprise). You can see the site he http://www.gocubit.com CSS he http://www.gocubit.com/styles.css IE6 stylesheet he http://www.gocubit.com/ie.css The problem is very simple, so let me explain what I have setup, and what is happening. I have 4 backgrounds I want to display, in the following containers: body - this contains a tiling wall texture #outerWrapper - this contains a small non-repeating bg image that puts graffiti in the upper right corner on top of the wall bg #innerWrapper - same as outerWrapper, but puts a graffiti bg in top left #contentWrapper - this div contains the main display area, and displays a vertically repeating paper background that should fill the screen from top to bottom (on top of the wall and two graffiti backgrounds) I've tried my best to get this to display right, but have one of two problems depending on how it is set up. In all cases, BODY and HTML are set to 100% height. SCENARIO #1 (same problem in FF or IE7): I set outerWrapper, innerWrapper, and contentWrapper to min-height: 100%. This doesn't extend the paper background all the way to the bottom on pages that don't fill the screen with content (see the CONTACT page). SCENARIO #2 (works in FF): I set outerWrapper, innerWrapper to height: 100%, and contentWrapper to min-height:100%. This actually appears to work on first glance (and does work in FF). But, if you go to a page with a lot of content (see the SERVICES page) where you need to scroll, what happens is that there is no paper BG in the area that is off screen. The content "below the fold", when scrolled to, has no paper BG. It's setting the height of the div to the screen height, filling in the BG, and any content below that height has no BG (only the wall BG in the body element). Code: html { height: 100%; }
body {
background-color: #8d7c51;
background-image: url(images/bgStucco.jpg);
font-size: 12pt;
margin: 0;
padding: 0;
height: 100%;
}
#outerWrapper {
background-image:url(images/bgStucco_tr.jpg);
background-repeat:no-repeat;
background-position: right top;
width: 100%;
margin: 0;
padding: 0;
min-height: 100%;
}
#innerWrapper {
background-image:url(images/bgStucco_tl.jpg);
background-repeat:no-repeat;
min-height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
Code: <body><div id="outerWrapper"><div id="innerWrapper"><div id="contentWrapper"> CONTENT GOES HERE </div></div></div></body> Any ideas on how to get this to work? Hi guys, Just a quickie , I was looking at a site I produced in Netscape Navigator 7 and noticed a problem. I have a left hand nav that expands to show a sub Nav on mouse over. When moving your mouse off the menu item onto another one the previous menu closes (unless it's the page your looking at) Simple right? - well I noticed in NN7 that the display:none; I use to close the menu does not seem to work. No error, just doesn't work. Does display:none; not work in NN7 then? Is there a way arround it? Cheers, Daz Hello all, I feel like such a dumb a$$ for not figuring this out... I have a div with ID head and width 100%; In that div there are 4 elements, 2 images and two header ( h1 and h2 ) elements. The two gifs are positioned absolutely one top:0;left:0; and one top:0;right:0; The parent div is set to min-height & height of 160px; The height of the images. In firefox they display where you would expect them, top right and left corners. In ie 5,5.5, 6 and 7 they just don't display at all. Here is some code: CSS Code: Original - CSS Code #head{ text-align:center; clear:both; width:100%; min-width:100%; max-width:100%; min-height:160px; height:160px; } #img1{ position:absolute;top:0;left:0; } #img2{ position:absolute;top:0;right:0; } #head1{ clear:none; width:100%; min-width:100%; max-width:100%; } #head2{ clear:left; margin:0; width:100%; min-width:100%; max-width:100%; }
#head{
HTML4strict Code: Original - HTML4strict Code <link type="text/css" rel="stylesheet" href="default.css" /> </head> <body> <div id="head"> <img id="img1" src="img1.gif" alt="an animated gif"> <h1 id="head1">h1</h1> <h2 id="head2">h2</h2> <img id="img2" src="img2.gif" alt="an animted gif"> </div> <link type="text/css" rel="stylesheet" href="default.css" /> Hi, I have this code and i need some text next to the drop down. I am attaching the image how it looks like the text " Hold Ctrl key 4 multiple " is next to the drop down and it sticks to the drop down i need some space between the text and drop down and its not working here is the css code The text scorlls next to the drop down and i want the space to be uniform on the 3 lines where the text scrolls down also can i have Hold Ctrl key 4 on one line and then multiple on the second line thank you princecharles Code:
.credfont
{
font-weight:bold;
font-size:12px;
padding:0px 0px 0px 4px;
color: #f00;
}
<tr class="oddrow">
<td class="lbl" width="152">Subjects: </td>
<td width="170"><span style="float:left;"><select name="Subjects" id="Subjects" multiple="multiple" size="2">
<option>Maths</option>
<option>Science</option>
<option>PT</option>
<option>Arts</option>
</select> </span> <span class="credfont">( Hold Ctrl key 4 multiple )</span>
</td>
<td class="lbl" width="92" > Class: </td>
<td colspan="2"> <input type="text" class="writein" name="class" id="class" size="30" value="">
</td>
</tr>
Hi, i have a section of XML, that displays features of a car. Looks something like this: <features> <boot length="30" max-depth="160" min-depth="30" cover="false"/> <dvd/> <radio/> <fuel type="Unleaded" ron="98"/> </features> Each car has a different list of features. How would i write the code in css, to display "Features" then the list of features, with fuel in bold, starting on a new line on in a box? Many thanks I have this CSS for my "globalNav" class: .globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px} .globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block} This is my code for globalNav: <div class="globalNav"> <a href="#">Global 1</a> <a href="#">Global 2</a> <a href="#">Global 3</a> <a href="#">Global 4</a> <a href="#">Global 5</a> <a href="#">Global 6</a> </div> For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work? I have created my first css site. I got it to work on the mac and pc, firefox and ie. So, naturally I moved on and created the inside pages to the site. I made the first inside page, and it worked as well....I really only copy and pasted the code I knew worked. I am using dreamweaver, so I set up templates and made the other pages. All I've done is copy and paste. But the inside pages get messed up and not in a consistent way. If I never changed a thing to the code, why is this happeneing? Is there any known bug/fix to this? Thanks www.rookscommunications.com/inrs/ I have a small problem with the login bar on my homepage. In IE it decides to pad extra space on the bottom , however in Firefox all is displayed ok. Please visit www.wecook.co.uk to see the problem. I think the problem is this bit of css Code:
#login
{
width: 736px;
background-color: #e4e2df;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
padding-top: 1px;
padding-bottom: 1px;
text-align: right;
}
label:after
{
content: ": ";
}
label
{
color: black;
font-weight: bold;
padding: 1px;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
}
input
{
display: block;
width: 100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
padding: 4px;
border: solid black;
border-width: 1px 2px 2px 1px;
}
.buttonLogin
{
width: 60px;
color: black;
text-transform: uppercase;
border: 1px solid #5C5C5C;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
text-align:center;
}
Offending bit of HTML Code:
<!-- If no cookies display login bar -->
<!-- start login -->
<div id = "login">
<form action="Login.do" method="post">
<table width="736" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="445" align="right"> </td>
<td width="112" align="center">
<input name="uname" type="text" id="uname" value="Username" size = "10" /> <br />
</td>
<td width="112" align = "center">
<input name="pword" type="password" id="pword" value="Password" size = "10" /> <br />
</td>
<td width="67" align = "center" valign="bottom">
<input type="submit" name="Login" value="Login" class="buttonLogin" /> </td>
</tr>
</table>
</form>
<!-- end login -->
</div>
Any help is appreciated. Thanks. I think its to do with the login button - but dont know how to fix it. This is yet again another mysterious issue I am having with CSS and the notorious Internet Explorer. I have two divs fashioned into boxes. One is floated to the left the other is floated to the right. The height looks fine in FF but when you look at the bottom border of said 'boxes' the one on the right draws up sooner than the one on the left (when viewed in IE). The CSS definitions for both divs have the same height specified. Any help at all is very appreciated. http://www.ioforge.com/contact The problem I'm referring to can be seen he http://www.bertelsen.ca/microeconomics/micro-class-2 If you scroll down to the bottom it seems as though there is a white border overlapping some of the text. I really don't know how to explain it past that. Any suggestions? Hi there, Please help me with the CSS on my website, http://www.tophatweddings.co.uk On the home page I am trying to display a product feed as rows of 3. However, you will notice that sometimes it will force a new line. I do not understand what is causing this The class being applied is he Code: #productDisplay li
{
float:left;
width:165px;
padding-right:10px;
padding-bottom:10px;
padding-top:10px;
}
Please help oh wise CSS gurus What should I try? |
|||||||