I have a table that is being generated where one of the columns needs its text to be aligned right. So right it looks something like this:
<td class="generatedClass" id="generatedId" style="width:20px; text-align:right;">
<label id="generatedRowId"> some text here </label>
</td>
It works in IE9 and IE8, but for some reason not IE7. Anyone have an idea as to why this might not be working? To note, the inline styles are being created as json objects. I don't like having inline styles, but it wasn't my call.
Your code looks like it should work. Probably, IE7 is not updating the DOM after these inline styles are being applied.
I recommend opening the page in IE10 and then going to IE7 Page mode. You should then be able to inspect the styles on your element and find out if they're being applied, overridden, etc.
Its seems like width property of your inline style casing problem in IE7. Try to eliminate to apply with in inline style.
<html>
<head>
<title></title>
</head>
<body>
<table width="400">
<tr>
<td class="generatedClass" id="generatedId" style="text-align:right;">
<label id="generatedRowId"> some text here </label>
</td>
</tr>
</table>
</body>
</html>
Related
I have two JSP pages with the following code:
A.jsp
<fieldset>
<legend class="noBold" >Datos generales</legend>
<table>
<tr>
<td class="etiqueta" colspan="5">
<label for="fxPresentacion">Fecha presentación:</label>
</td>
</tr>
... more code ...
</table>
</fieldset>
B.jsp
<fieldset>
<legend class="">Datos generales</legend>
<table class="estiloTabla">
<tr>
<td class="etiqueta">
<label for="fxSolicitud">Fecha solicitud:</label>
</td>
</tr>
... more code ...
</table>
Both pages uses the same CSS:
label {
color: inherit;
font-size: 0.98em;
border: 0px;
}
And when you open it in a web browser, label tags looks with different font sizes:
A.jsp
B.jsp
Someone knows what's happen?
P.S: I have a web filter in my PC and I can't show the images. Here are the URL's:
A.jsp: http://i.stack.imgur.com/hbxBQ.png
B.jsp: http://i.stack.imgur.com/hbxBQ.png
ZOOM LEVEL - Embarrassing, but my issue turned out to be that I had one browser window zoom level set above 100% whereas the other browser window had a zoom level of exactly 100%. I don't know why I didn't think to check that first, but I'll post the answer here in case it helps someone else who didn't think of it.
I recommend using the browser's devtools for checking the "computed style".
There you can see...
The calculated font-size
The cascading rules which are respected
Without the complete page and the complete stylesheet it is only possible to guess.
using root-ems rem instead of em could do the trick.
If you want to support older browsers you can use fallbacks. In this case it would look like this:
label{
font-size:15px;
font-size:1rem;
}
They work like this:
Older browsers will ignore the css rule they don't know (in this case rem). While newer browsers, which know the css rule, will simply overwrite the previous one.
we have a pretty complex HTML application which also supports RTL.
However when switching the HTML to RTL by using the <html dir='rtl'> attribute not everything is reversed.
Especially elements that were aligned previously by CSS do NOT reverse.
Simple example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<table>
<tr><td>Some text long text</td><td>Even More long text</td></tr>
<tr><td style='text-align:right;'>aligned to right</td><td>aligned to left</td></tr>
</table>
</body>
</html>
When setting
<html dir='rtl>
on this example I would expect the text-align to switch direction, too. But it doesn't. For this reason we currently load a 2nd template CSS file after the default one that overwrites the necessary alignments. I feel that this is not optimal.
Is there is easier way to reverse/flip alignment stuff for RTL?
You want something like this
html[dir="rtl"]
Example : http://jsfiddle.net/3UsyS/
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;}
EDIT: I should mention that the layout was done with tables. I've even tried styling the parent <td> element to get the desired appearance. Still, no bananas.
How do you change the font color of text in an HTML email in AOL's client?
I've tried the following code:
<td>
<span style="color:#FFFFFF;">My Text</span>
</td>
After some suggestions from the community, I've also tried the following approach:
<td>
<font color="white">My Text</font>
</td>
Unfortunately, the text color doesn't change at all. In fact, when viewing the computed styles in Firebug, it doesn't show any color being applied to the element.
I'd expect this to work since all other inline styles work fine and the email is rendered beautifully in every other major client.
Thanks in advance for your help.
Try using the <font> tag. This site doesn't list <span> as a supported tag.
<font color='#FFFFFF'>My Text</font>
font tag is one option, but if possible in your layout, you might want to break out the text into a td and call something like <td style="color:#FFFFFF;">My Text</td>
AOL provides a format icon. Click on that and use the eyedropper on the Format Banner to select color for your text.
try <td><span style="color:#990011;">Text</span></td> (eg. uses some shade of red to stand out)
<a style="text-decoration: none;" href="{$shareWithFriendsLink}">
<span style="text-decoration: none; color: #ffffff;">
htt<span></span>{$shareWithFriendsLink|substr:3} </span></a>
Empty <span></span> prevent mail client for recognizing string as link.
|substr:3 are in use for Smartys variables for cut off first 3 symbols (htt) added before manually.
I have tried and isolated the problem below after spending hours on this. First link is not underlined on hover in FF but works in all the other browsers I have tried. The second link properly works in Firefox too. Most of the existing html on the site is structured in the below way so a site wide fix will be appreciated.
HTML: (pasting as code here removes tags) http://pastebin.com/duqfKGeY
<!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>
FF test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="ff.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<tbody>
<tr>
<td>
<ul type="disc">
<li>
<a target="_blank" href="http://example1.com">
<font size="2" color="#b80000"><b>Example Link 1</b></font></a>
<br>
<font size="2" face="Verdana">
example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text
<a target="_blank" href="http://example2.com/">
<font size="2" face="Verdana" color="#b80000">Example link 2</font>
</a>
example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text .
</font>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
a{color:#b80000;}
a:link{color:#b80000;text-decoration:none;}
a:visited{color:#b80000;text-decoration:none;}
a:hover{color:#b80000;text-decoration:underline;}
a:active{color:#b80000;}
Edit: Validates without any errors on W3C Validator
The <B> tag is overriding the text-decoration. Just add this:
a:hover b{text-decoration:underline;}
If there are others you could probably even do:
a:hover > *{text-decoration:underline;}
This is all a bit over kill I would just use:
a{text-decoration:none;}
a:hover{text-decoration:underline;}
There should be no reason why this doesn't work.
Okay first things first,
Tables for layout - educate yourself please:
http://shouldiusetablesforlayout.com
http://www.hotdesign.com/seybold/
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
<font> tags were deprecated LONG ago, we now use CSS and <span> tags for all our styling needs.
The most likely reason why stuff doesn't work is because your HTML is basically completely wrong, yes it works but it is killing the interwebz - Here is your layout redone with <div> tags and CSS - nice and clean and everyone is happy:
Live Demo
Also - validation - It is just a tool, not a standard to aspire to, sure it helps fish out bugs but it could end up causing you hassle trying to be 100% compliant (Stares at XHTML Strict) more on that here:
http://net.tutsplus.com/articles/general/but-it-doesnt-validate/
I see the :hover underline on both links in FF 3.6/Mac, even when they are visited links.
As Alex Thomas pointed out, your CSS can be more concise--consider that all the link states are the same color, and only the :hover state differs by having an underline.
Even though the crummy HTML from Google Docs has the color stated on those font tags (retro, eh?), duplicate the color rule in your CSS so the :hover underline appears in the correct color:
a {
color: #b80000;
text-decoration:none;
}
a:hover{ text-decoration:underline;}
The problem may be with the text-decoration: underline; CSS statement. Firefox ignores this in version 3.6. I know by version 7.0 it works just fine, but I don't know when it was actually fixed.
What version of Firefox are you working with?