I have this page (at this URL) that use the following structure.
I have a HEADER.php :
<TABLE>
<TR>
<TD>Link bar (left)</TD>
<TD>
Then, here I put the contents of the page and include a
FOOTER.php
</TD>
</TR>
<TR>
<TD>Footer Contents</TD>
</TR>
</TABLE>
Ok, I should use newer DIV, but I am too affectionate to old table methods ;)
The issue: everything is centered (as you can see)! I tried to put align-left everything with no success. The strange thing, is if I remove that contents (and put just "Hello World") everything is fine.
So I think that the HTML/CSS (content) - copy and pasted from a Blogger post - is the source of the issue.
But was wondering how a "corrupted" HTML/CSS (content) can alter previuos entities (Also 'Link bar' is centered!)
The same header.php/footer.php for other pages works fine
Thank you in advance
"newer DIV", "old table methods"... using tables for your layout is not old, its prehistoric! Please learn how to use div's, you'll see soon enough that it works soooo much easier.
But I also would like to provide an answer, add this to your stylesheet:
table tr td { text-align: left; }
Remove your tr{text-align:center;} line 222 AND line 296 of timer.html
You have it twice on both line so remove them all.
You really should put all your CSS on the same place, it would be easier for you to debug.
Just define this mentioned below css to achieve your desired result.....
CSS
table tr td {
text-align:left;
}
see the attached demo :-
Related
I am building HMTL emails and I use nested tables to layout the email. To change text I apply the styles directly to the < td > tags and this works for the most part across the board. I am noticing though on SOME heavily nested tabled (Greater then 5) the style is being removed completely on Gmail in Internet Explorer, and on Yahoo in various browsers (on a PC). Below is my code:
(This code is ~5 tables deep)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px;font-family:'Century Gothic',Arial, Helvetica, sans-serif; font-size:26px; color:#202020;">The Latest</td>
</tr>
</table>
Has anyone ran into this before or know why they might be stripping the style? It's not only text styles but the padding is also removed on these < td > tags.
I've never had the issue myself, but there is known to be issues with nesting tables too deep. I'm willing to bet that there is a more precise way to layout your email to avoid the issue. Don't be scared to use colspans and rowspans when necessary. Post your code if you like.
I think I may know why this is happening. I've seen issues when using a font-family with quotes throw off the inline CSS. If you move the font-family to the end of your inline styles it may work. See below.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px; font-size:26px; color:#202020; font-family:'Century Gothic',Arial, Helvetica, sans-serif;">The Latest</td>
</tr>
</table>
In case this is useful for anyone: I ran into this problem with a specific <td> that was getting all the inline CSS stripped. After checking it, I found I had an incorrect property declared, like so:
padding-bottom;
Removing that incorrect property resolved the issue.
It seems to me that Gmail somehow validates the css of each element, and strips it all if it finds an error.
Not a direct answer so my apologise, but could you not use CSS instead of HTML tables? You will be able to achieve the same result I would think?
I just tested an html email that works for Gmail.
Generally speaking, I learned that Gmail tends to strip out the whole inline style attribute when you declare font-family, this behavior sometimes happens when:
1) when you declare a custom font using ' or ", es: <span class="small-text" style="font-family:'Titillium Web',Arial,sans-serif;"></span>
2) if don't put spaces between ; , , and : chars, in a font-family declaration.
3) every time you declare 2 <span> with a font-family in the same <td>, Gmail will strip the second's <span> rules
but I don't know what is the general rule, so my solution was: always declare font-family inside a separate tag, at least, in this way you won't lose all the styles.
example:
<span style="color:#8d8c87;display:block;font-size:12px;line-height:120%;text-align:center">
<span style="font-family:'Titillium Web',Arial,sans-serif;">text</span>
</span>
I have created a three page web page and I'm using an external css stylesheet that is adjusting my navigation lists so they go across the top and have a coloured background.
When I try and create a list on a page within a table the indenting and vertical listing don't work.
I traced the issue to the external style sheet.
How do I go about turning off the settings the stylesheet did so I can properly format the list?
[EDIT- Okay, so I did a work around. I removed the external stylesheet link as was suggested and put all the style info into my head. Then I did a div around the ul and another around the li which seems to half way gotten it working. Around the li I set the width:50px and that got my vertical listing working. The list-style-type:square still doesn't do anything but I'm too fed up to care anymore for tonight.]
<!DOCTYPE html>
<html>
<head>
<title>Elex267-Webpage</title>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
<body>
<!-- Banner at Top of Page ***********************************-->
<div style="background-color:blue; color:white;font-size:30px;">
<img src="Pics/camosun-white.png" alt="CamosunPNG" width="200" height="70" align="left">
<div align="center"style="margin-left:50%">Elex 267 Web Demo
<br>
Microchip TCP/IP Stack v3.02</div>
</div>
<!--*********************************************************-->
<!--NavBar Code *********************************************-->
<ul>
<li>Home</li>
<li>Features</li>
<li>About</li>
</ul>
<!--***************************************************-->
<h1>
Welcome to the features page of the website.<br>
</h1>
<p>
This web page is being run on the NM101 NorthMicro Pic Prototype Board with the LCD/Keypad and Network modules.
<br>
Features are:
</p>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
<!-- And the External CSS Stylesheet Code -->
p {color:black;font-size:20px;background-color:white;}
body {background-color:white;}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;}
a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
I just read your edit, and while it seems you're gone I am going to answer anyway. Don't give up. CSS can be frustrating to troubleshoot and troublesome to implement in the beginning. Inline styles, font tags hell it all seems ever so much easier, until you realize the actual power that CSS gives you over your styling. I think what you should do is step away from your work for a little bit and do some reading on CSS so you're better understanding what it is you're doing, I'm going to give you a couple of tips here that should help with the issues at hand, but I still think you need to read more.
Get the styling OUT of the head and back into an external style sheet, that is the worst advice you could have possibly been given.
Read up on specificity first. That is how CSS decides which rule applies if there are conflicting rules. For example take this code:
a{color:blue;text-decoration:underline;font-weight:bold;}
p{color:red;}
a{color:green;font-weight:normal;}
Your links are going to turn out green, underlined and normal weight. This is because the green and normal weight came after the blue and bold in the order of how it was read, this is the simplest of the rules, there are others like is it inline, is it an id or a class etc. Read the rules and you'll understand how to write your CSS to get the rules to apply where you want them. This is where the terrible "put it in the head" advice came from because that CSS will be applied after external CSS. Still doesn't make it the right way to do it.
Learn about Classes and ID's. Just quickly ID's are unique names you can apply to elements for example you could then style just that ID in your CSS with #mainNav{color:blue} the thing to remember about ID's is they are UNIQUE. Do not use 5 UL's with the ID of mainNav (the main reason for this is so you can use them to identify them, say in js or jQuery for example). If you have multiple things that need the same styling you use classes, the nice thing about classes is you can chain them so for an easy example consider the following code:
.blue{color:blue}
.underlined{text-decoration:underline}
.bold{font-weight:bold}
Seems sort of dumb on first reading but now look at how you could apply that.
<p class="bold blue">This is some blue text<span class="underlined"> some of it is underlined</span> and some of it isn't</p>
This is where you need to look to solve your problem. If you wanted to apply those list styles just to your nav, adding a class would solve it cascading to other lists. See the following:
.nav ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
.nav li{float:left;}
.nav a{display:block;width:400px;background-color:#ff0000;color:white;}
.nav a:hover,a:active{background-color:#cc0000;}
<div class="nav">
<ul>
<li></li>
</ul>
</ul>
Any other lists you create wouldn't take on those styles. Basically you want your external style sheet to start with your basics then get more specific as you go. So the styles you want on every list go at the top and go on the ul and li or ol and li elements, then as you go further down the sheet you can get more specific.
Stay away from inline CSS
Stay away from CSS in the head
Trust me, learn to do it right and you'll be so happy you'll never understand why you did it any other way. Make use of the Chrome inspect element to trace down why something is displaying a certain way and then fix the CSS, forget these hack ways of fixing it. Fix it right.
If i know what your asking, you cant do that.
You can inspect with firebug/chrome dev tools and find the properties which are being overwritten.
Once you find them you can then overwrite in your own stylesheet.
Keep in mind that specificity is important here as well.
If it does not work you may need to add weight to your selectors, or use the !important keyword.
So you want to retain the styles in the sheet, just keep it from affecting the list on the page? Why not give that list a particular ID and style differently?
For example, I just called your list #cellul and gave it a 10px margin to demonstrate the different styling:
p {color:black;font-size:20px;background-color:white;}
body {background-color:white;}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;}
a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
#cellul{list-style-type:none;margin:10px;padding:0;overflow:hidden;}
Here's the result: JsFiddle
You can set a class for your <ul> like so:
<ul class="sth">
Then in the CSS stylesheet, put your class name afterthe ul like:
ul.sth {list-style-type:none;margin:0;padding:0;overflow:hidden;}
I have an old version of frontpage I am toying around with. I planned to use django in the background to do the heavy lifting but thought using this old Frontpage software I have would be good for the front end but I am finding it is writing code in an out of date fashion. I was reading that the tag has been deprecated and we should be using "style" now. the example I was reading has it inside the paragraph or header tag. However the code I have from frontpage is using the font tag inside of a table cell tag so I am wondering what is the correct way to write it.
Here is the code generated by Frontpage
<td width="190" align="center" bgcolor="#000080" height="18"><b><a href="index.htm">
<font title="return to main page" color="#00FFFF" face="Verdana">Home</font></a></b></td>
would I just change it so the styles
<td width="190" align="center" bgcolor="#000080" height="18" style="color:#00FFFF;font-family:Verdana">
<b>Home</b>
</td>
My problem with that is now all text in the table cell would be that font right? So if I wanted more things in the table cell than just the link where would I put that? Also I just tried that and the font-family is working but not the color...?
You need to look up and spend some time learning CSS.
You can do something like this with it:
CSS:
.linkstyle
{
font-family: verdana;
color: #00FFFF;
}
CODE:
<span style="linkstyle">Home</span>
Using inline styles like you've posted, this would work.
<td style="width: 190px; height: 18px; text-align: center; background-color: #000080;">
<strong>Home</strong>
</td>
As a side note, you have several very bad practices. Using tables to lay out your website is very outdated and hard to work with (which is why it is outdated). Using inline CSS is confusing to everyone (including yourself). In addition to the references others have posted, I recommend http://htmldog.com/
Why are you using Frontpage?
Grab a free editor (search for one), or just create it yourself using something like Notepad++. The amount of time you will spend cleaning up code will be a total waste of your time when using Frontpage (gui).
Also use CSS styles instead of inline bgcolor / font, etc;
You could use a combination of <span> tags with class attributes and css.
Here are some good references on that stuff:
HTML: http://www.w3schools.com/tags
CSS2: http://www.w3schools.com/css/css_reference.asp
CSS3: http://www.w3schools.com/css3/css3_reference.asp
I have this table in some code;
<table>
<tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
<tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
<tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
</table>
I would like to not use tables and do the alignment and such all in CSS. I tried;
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
Example would be trying to convert this data to CSS to align as the table would;
<table>
<tr><td align="left">Bob</td><td align="center">Dingle</td><td align="right">3923.33</td></tr>
<tr><td align="left">Johann</td><td align="center">Strauss</td><td align="right">33.33</td></tr>
<tr><td align="left">Skip</td><td align="center">Skipperson</td><td align="right">0</td></tr>
</table>
But the text in the middle doesn't align correctly as its jagged (different lengths) and so are the left and right values. Seems this is madness and I am leaning towards "Just Use Tables".
First, get your HTML right: Use the correct tags to contain your data. The information you gave isn't really enough for us to ascertain what type of information you're trying to format. If it is tabular data, then there's no shame in using tables - its what its meant for.
Now the correct manner to using CSS is not to place all of your styles inline like what you are doing. Keep them in a separate CSS file instead, and use selectors to avoid having to repeat yourself so many times.
Here's the solution: http://www.jsfiddle.net/2TDXc/
Oh, and please don't listen to that 'Just Use Table' bullcrap. Really, its better for everyone in the long run.
What do you mean jagged? You mean you want text-align:justify ? Or do you mean you're having trouble with the columns being different heights? If the latter, containing divs might help. For that matter, try using divs instead of spans or setting display:block
Anyway, looking at the CSS templates provided by Matthew James Taylor may help if you mean the latter problem.
You need to make use of the display:inline and display:inline-table css attributes. They're great for forcing any element to sit next to each other on the same line.
<div>
<span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
<span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
<span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
</div>
As for the jagged-ness, you must realize that your columns do not inherit or share anything from each other like they would in a table, so you'll ultimately have to hardcode a width. It looks like a table might be what you need.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I use a carriage return in a HTML tooltip?
I'd like to know if it's possible to force a newline to show in the tooltip when using title property of a TD.
something like
<td title="lineone \n linetwo \n etc...">
Can this be done?
This should now work with Internet Explorer, Firefox v12+ and Chrome 28+
<img src="'../images/foo.gif'"
alt="line 1
line 2" title="line 1
line 2">
Try a JavaScript tooltip library for a better result, something like OverLib.
One way to achieve similar effect would be through CSS:
<td>Cell content.
<div class="popup">
This is the popup.
<br>
Another line of popup.
</div>
</td>
And then use the following in CSS:
td div.popup { display: none; }
td:hover div.popup { display: block; position: absolute; }
You will want to add some borders and background to make the popup look decent, but this should sketch the idea. It has some drawbacks though, for example the popup is not positioned relative to mouse but relative to the containing cell.
The Extensible Markup Language (XML) 1.1 W3C Recommendation say
« All line breaks MUST have been normalized on input to #xA as described in 2.11 End-of-Line Handling, so the rest of this algorithm operates on text normalized in this way. »
The link is http://www.w3.org/TR/2006/REC-xml11-20060816/#AVNormalize
Then you can write :
<td title="lineone
linetwo
etc...">
Using
Works in Chrome to create separate lines in a tooltip.
This should be OK, but is Internet Explorer specific:
<td title="lineone
linetwo
etc...">
As others have mentioned, the only other way is to use an HTML + JavaScript based tooltip if you're only interested in the tooltip. If this is for accessibility then you will probably need to stick to just single lines for consistency.
Using
didn't work in my fb app.
However this did, beautifully (in Chrome FF and IE):
<img src="'../images/foo.gif'" title="line 1<br>line 2">
I use the jQuery clueTip plugin for this.
If you're looking to put line breaks into the tooltip that appears on mouseover, there's no reliable crossbrowser way to do that. You'd have to fall back to one of the many Javascript tooltip code samples
The jquery colortip plugin also supports <br>
tags in the title attribute, you might want to look into that one.