I am having a little bit of a hard time getting a CSS rule to work for me. I believe it has to do with the order the rules are applied, but I hope that maybe one of you who is no doubt more experienced with HTML and CSS than myself could help me out.
Basically my goal was to put a colored border around the currently focused text inputs (textboxes and textareas as well as drop downs). The CSS is fairly short (I think...) But the rule that is giving me trouble is at the very bottom (.userinput:focus)
body
{
font-family: Arial;
}
.header
{
color: #004c85;
font-family: Arial;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
padding-bottom: 5px;
}
.titleCell
{
background-color: #004c85;
font-family: Arial;
color: White;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 2px 2px 2px 2px;
}
.subtitleCell
{
background-color: #aaaaaa;
font-family: Arial;
color: #092548;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 2px 2px 2px 2px;
}
.normalCell
{
background-color: #f1f1f1;
font-family: Arial;
color: #092548;
font-size: 9pt;
font-weight: bold;
text-align: left;
padding: 1px 2px 1px 2px;
}
.errorText
{
font-family: Arial;
color: #d01d00;
font-size: 9pt;
font-weight: bold;
text-align: left;
}
.button
{
font-size: 12px;
color: #f1f1f1;
background-color: #004c85;
}
.userinput:focus
{
border: 2px ridge #00a2ff !important;
}
I created a simple page with a single table and it worked fine (target browser here is IE).
When I create a large page though with multiple tables and divs, this rule doesn't seem to be applied in IE anymore. Upon reading I added the !important to the rule, but it didn't help me out. I downloaded Firebug, but the same page looks fine in Firefox (the border appears).
Any tips at this point would be greatly appreciated.
Edit: I can't post a link to the whole thing unfortunately. Below is the test page that I had success with. I can probably post a link to the larger HTML, but it would have to be downloaded and run locally.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Demo Page</title>
<link href="base.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form name="FormName" method="post" style="text-align: center">
<table cellpadding="0" cellspacing="0" width="900" border="0" style="text-align:left">
<tr>
<td class="header">
Header
</td>
</tr>
<tr>
<td class="errorText">
Error Text
</td>
</tr>
<tr>
<td class="titleCell">
Title Cell
</td>
</tr>
<tr>
<td class="subtitleCell">
Subtitle Cell
</td>
</tr>
<tr>
<td class="normalCell">
Normal Cell
</td>
</tr>
<tr>
<td class="normalCell">
<input type="text" class="userinput" size="25" />
</td>
</tr>
<tr>
<td class="normalCell">
<input type="checkbox" value="ON" />
Checkbox
</td>
</tr>
<tr>
<td>
<input type="button" class="button" value="Button" />
</td>
</tr>
</table>
</form>
</body>
</html>
That is the test page that worked OK. Note I have the css file on a web server, but it is only internally accessible. I thought about doing jquery but I thought this would be easier. Apparently not.
Thanks again. If needed I can still probably post the HTML for the big page later.
Edit Again: I am looking at the markup now. It seems OK on the W3C sites, but maybe I am missing something. If anyone is interested, here is a link to the larger page HTML in a txt file. http://cloudstor.pogoplug.com/share/xGQzP43X9FsEq5Z1XqafYQ/LNtISrGuLxJsaxhZ3iPZUw/form.txt
I should probably also mention the CSS I posted previously is the only one in use. Also, although it doesn't really help much, the CSS works in Chrome as well as Firefox. IE is the lone holdout (big surprise there...)
Thanks again all for the links and comments. I am determined to figure this out.
Without seeing the full markup, my best guess is that you have either invalid markup on the page (ie unclosed tags, invalid characters), which can result in broken styles and page structure, sometimes differing between browsers, or your class declaration is being overridden somewhere else in your stylesheet. The focus selector is valid and jquery won't be necessary.
I can think about two things that can break down the selector:
Another stylesheet/ style tag has the same selector+property and includes !important too, and because of this - you can't see your own css.
The markup on your HTML page is invalid. Take a second and validate it using W3C Validation service.
Like what Ryet and Nadav said, you could have invalid html markup. But invalid html markup is not the only thing that causes problems, so does invalid css. Invalid css can involve missing brackets, absent semicolons, misuse of id's and classes, and so on. You can find invalid css markup using this site http://jigsaw.w3.org/css-validator/
Figured it out. And I feel very silly. Comments broke my page.
I am much more of a C, C++, C# kinda guy. It has been awhile since I have done much straight HTML from scratch. I was trying to create a template we could use going forward to base all of our HTML forms on. At the very top of the page I had a block comment explaining what the template is for (not too uncommon to place a block comment at the top of a code file explaining what it does, right?)
Long story short I took out bits and pieces of my HTML until all that was left was a single table, one row, one column and the text box. When that still didn't work, I thought about taking out the comment. The comment was the first thing on the page, above the
<!DOCTYPE ...
Thanks for your help. If anyone has any tips or links to best practices when using comments in HTML, I would be very thankful.
Thanks again for all your suggestions.
Related
I have scanned through your vast database of question but don't seem to find an answer. I am having Problems with Take the text to a new line - even with space still left on the line before. Here is the code :
p1 {
border-left: 6px solid blue;
background-color: lightblue;
padding: 10px 9px;
font-size: 17px;
word-wrap: break-word;
}
br {
line-height: 200%;
}
<br>
<p1> <b> < !DOCTYPEhtml > <br> < html > </b>
</p1>
<br>
Now if you were to run it, you would see something like the image below:
Now what would I have liked it to look like is something like this:
Now this is am image of a text box under the tab Editors on the W3School Webpage. I was trying to create similar box for my website - with the Blue side line running all the way down, and with text laid out similar to the W3Schools. But I cant seem to get it right even after spending 5 hours on this very problem. Can anyone help me out?
Regards Satanshu
Use real HTML elements.
p.t1 {
border-left: 6px solid blue;
background-color: lightblue;
padding: 10px 9px;
font-size: 17px;
word-wrap: break-word;
}
br {
line-height: 200%;
}
<br>
<p class="t1"> <b> < !DOCTYPEhtml > <br> < html > </b>
</p1>
<br>
This works because <p> is a real element and <p1> is not.
And if you are curious to the specifics, the reason why <p1> does not work is not that it is an undefined element. (Otherwise, it wouldn't do anything; it wouldn't even have a left border on the first line.) It is because the error correction routines of your browser considers this an inline element, while <p> is a block element. That's really what's causing the difference in display.
Don't count on error correcting routines solving everything for you though. Sooner or later you'll run into an error that is not handled the same by all browsers, and then you'll be in trouble. Better stick to the rules.
Thanks Chris, It seemed that using tags such has caused the text box to not work as it should. I appreciate you help mate and would look forward to returning the favor in the future.
Regards
Satanshu
Conclusion - Use classes!
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
.w3-code{
line-height: 200%;
border-left: 6px solid blue;
padding: 10px 9px;
font-size: 17px;
word-wrap: break-word;
color:#FFFFFF;
background-color: #A9A9A9;
margin:10px 5px 0 0;
}
</style>
</head>
<body>
<div class=w3-code>
<!DOCTYPE html><br>
<html><br>
<head><br>
<title>Page Title</title><br>
</head><br>
<body><br><br>
<h1>This is a Heading</h1><br>
<p>This is a paragraph.</p><br><br>
</body><br>
</html>
</div>
</body>
</html>
This is worked for me.
In trying to give my emails a more 'professional' look, I want to create a neat looking signature. Now for a test, I first want to create a simple signature. And if I get the hang of it, expand it to a better one.
It seems that I can't seem to 'reset' or clear the table. But I can't figure out what the problem is... Any help would be appreciated!
For starters I want to create a signature like this:
I created a single html file (including css) with simple code in it. See below. The problem I keep experiencing is that for some reason, the tables height seems to be larger (only on the bottom) when I insert an image in one of the cells. See problem.
As you can clearly see, the table height exceeds that of the picture. I can't figure out how to remedy this...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
<style>
table, td, tr {
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
}
table {
width: 400px;
}
img {
padding: 0;
margin: 0;
}
#Avatar {
width: 80px;
height: 80px;
}
#Whitespace {
width: 2px;
}
#BlueBar {
width: 6px;
background-color: #0CF;
margin: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3" id="Avatar"><img id="Avatar" src="enhanced-buzz-16839-1297795475-9.jpg"></td>
<td rowspan="3" id="Whitespace"> </td>
<td rowspan="3" id="BlueBar"> </td>
<td rowspan="3" id="Whitespace"> </td>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>
in terms of solving your problem you may want to re-look at the structure of your table. The development of HTML emails and signatures can be pretty hard to do as many email clients respond different and have different support levels.
A guide to writing HTML, CSS and JS for email client usage has been created by Campaign Monitor and can be found here: https://goo.gl/oo1tcU
Support is so varied and there are very few 'safe' elements and attributes also campaign monitor's guide sadly doesn't include a list of the buggy HTML attributes. For example personally I have experienced rowspan and colspan not working correctly in a lot of email clients therefore I wouldn't suggest using them at all. Instead draw up a grid which has equal structure and use empty tags with defined HTML width and height attributes to make the table work for you.
Unfortunately to make an signature look exactly the same in all clients steps like using empty but defined tags are necessary or some clients will simply ADD the 's the colspans are running over.
In HTML emails/signatures you must define EVERYTHING to make sure nothing changes, a table tag I use at the start of all my projects looks something like this:
<table width="[your desired width]" align="center" cellpadding="0" cellspacing="0" border="0" frame="0" bgcolor="#fff"
style="border-spacing: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;
background-color: #fff; border-collapse: collapse; color: #000; font-size: 16px; line-height: 19px;" >
Also for all images use a tag like below and define the width and height in HTML NOT CSS.
<img src="" alt="" width="" height="" style="display: block; border: none;"/>
Email clients cause you to write HTML like its the 1990s, it's very frustrating but without considerations like these you may get the result you want in one client but if you send to another your signature will look different to a recipient. As you are trying to increase your professionalism I assume this wouldn't be desired!
Another tip I would suggest is using as much imagery as possible (and remember to define the width and height in HTML) because if defined correctly a structure built with every td and img tag width and height defined will almost never change. This is beneficial because text fonts also have low support unless they are standard fonts e.g. Arial!
Finally use ONLY Inline styles, many clients strip anything in a head tag out!
Im very new to html concepts, i've tried to read others articles/posts but i still don't understand something.
I have to format a template mail in a rails app. The template was gived by my boss.
I am currently converting html.erb into html.haml so the syntax will be haml.
Since i'm not a front dev someting is disturbing me.
The templates have many lines like this
<td class="headerContent" style="border-collapse: collapse;color: #202020;font-family: Arial;font-size: 34px;font-weight: bold;line-height: 100%;padding: 0;text-align: center;vertical-align: middle;">
and in the css above something like this
.headerContent {
color: #202020;
font-family: Arial;
font-size: 34px;
font-weight: bold;
line-height: 100%;
padding: 0;
text-align: center;
vertical-align: middle;
}
Why is there style definition inside the <td ...> definition since the .headerContent class is already declared in css block ?
I also have keyword !important declared in many places, i read articles about style overriding , it is still obscure for me.
Why all style definition are all not just in one css block/file ? Mixing html and css is kind of disturbing
It looks like your email template got inlined by something like premailer. This is a "good thing"™, as some email clients don't support <style> tags in the <head> element. It's ugly and gross, but ultimately a necessary evil if you want to support gmail users.
I'm designing an email in Dreamweaver with inline CSS, but every test I make, with Hotmail in Firefox and Chrome always renders header tags as a green font color. I want the font to be normal. Nothing will change it. Why is <h1>-<h6> rendered as a font color?
<div class="blockheader">
<h2>New event starting today!</h2>
</div>
<style>
#block .blockheader {
background-color: #000;
color: #FFF;
font-family: "Arial Black";
display: block;
text-align: left;
padding: 2px 0px 2px 0px;
}
</style>
When writing HTML/CSS for emails, you tend to have to pretend you're going back in time. Meaning, write very basic markup, and use inline styles:
<h1 style="color: #FFF; background: #000">Foo Email</h1>
Additionally, check out the HTML Email Boilerplate. You may also find the Inline Styler to be of help too.
In doing a little research, Hotmail renders h tags green and for no good reason that I see. The fix that I found is using !important in your in-line styles. So like this:
<h4 style="color: #660000 !important;">Awesome Red Header in Hotmail</h4>
Hope this helps.
Yet another "Firefox does not agree with IE9" and the other way around problem.
I could explain what is going on, but an image says more than a thousand words, so I took a screenie of FF and IE:
Here is the markup:
<div align="center" id="cmContainer" style="background-color: #8CFE70; border: 1px solid #2D9500; border-radius: 4px; width: 400px; height: 161px;">
<span style="color: #2C2C2C; font-family: Arial; font-size: 20px; text-align: center;" />
<font size="24">Look!</font>
<br>
See how different IE renders from FF?
<br>
How can I fix this?
</span>
<br>
<input value="CODE" type="text" size="20" style="font: 20px Arial; color: #000000; background-color: #F3F3F3; border: 1px solid #8D8D8D; width: 300px; border-radius: 2px; text-align: center; margin-top: 0px; padding: 5px 3px 5px 3px; " />
<br>
<input type="button" value="I'm a button!" />
</div>
What can be causing it? I have tried several different stuff with Firebug, but to no avail.
Why does web development have to be this annoying? :)
P.S:Before commenting about my use of Inline Styles, please note that it is how my project requires it. :)
EDIT: By using a CSS Reset, as suggested by Cygal and Christophe, and by applying it only on my objects, here is the result:
Cant really ask for anything better, as easwee so nicely pointed out. ;)
I think it comes from border that firefox doesn't count in the global height of the element in opposition to IE that integrate borders in elem height...
So, the difference should be 3px between them because the last border-bottom does not affect the rest.
Edit
Have you tried to use a CSS reset like : http://meyerweb.com/eric/tools/css/reset/
The issue
There is no specification regarding the default margin, padding, border and font-size of default elements. Here, it appears that the margin of your title is bigger in Firefox than in IE9. Note that every solution that only fixes this specific problem will not prevent it from appearing in other places.
The solution
Reset CSS: if you do want to have exactly the same rendering, you can use a technique called "reset CSS" which sets everything to zero everywhere it makes sense. It is then up to you to choose the values you want. You could try the Eric Meyers's reset CSS or other ones.
Base stylesheet: reseting the CSS could and will have unexpected effects on your style: the effects could be surprising and there is a reason why the browser have default values for elements. If you only want to correct "know incompatibility issues", then you can use a simple base stylesheet (this one exists in both compact and full modes).
However, remember that it's OK if every website doesn't appear the same on every browser, and that it won't appear the same anyway due to issues you can't control (mainly due the size of the fonts chosen by users and old browsers). Another solution would then be to let go and use techniques like sizes in em. (and not in piexels) when appropriate. :)
Try specifying the margin on the body tag, that should allow you specify exactly how much of a margin you want on the body of the page for all browsers
<body style="margin: 0px">
What kind of system requires inline styles? Does it "require" font elements, too? (BTW, there is no such size as "24". Valid values are 1 to 6.).
Why would any user care if rendering is off by a few pixels in one browser? It's not like they would actually compare it and then dismiss the site because of it.
Your first span tag is XHTML self-closed (<span ... />). Not only doesn't IE support that, it's simply wrong in this case.
Is the document in standards mode?
-moz-box-sizing:border-box
Should solve your problem altough your html is brutal.
<div align="center" id="cmContainer" style="background-color: #8CFE70; border: 1px solid #2D9500; border-radius: 4px; width: 400px;-moz-box-sizing:border-box;">
<span style="color: #2C2C2C; font-family: Arial; font-size: 20px; text-align: center;">
<font size="24">Look!</font>
<br>
See how different IE renders from FF?
<br>
How can I fix this?
</span>
<br>
<input value="CODE" type="text" size="20" style="font: 20px Arial; color: #000000; background-color: #F3F3F3; border: 1px solid #8D8D8D; width: 300px; border-radius: 2px; text-align: center; margin-top: 0px; padding: 5px 3px 5px 3px; " />
<br>
<input type="button" value="I'm a button!" />
</div>