When using html tables and css. I have used rowspan="2" to combine to rows together, but when i use background in the css, its not going right to the edges of the table.
Where am i going wrong? This is a really simple question i know.
Then the CSS is
#messages th{
background-color:#f0f0f0;
color: #FF9912;
font-size:14px;
font-weight:bold;
font-family: Arial, sans-serif;
border-right: solid 1px #666666;
}
#messages td{
font-family: Arial, sans-serif;
font-size: 14px;
}
I'm just guessing here, but aren't you coloring only the cells of the table, and not the spacing between the cells?
See this page:
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_color
If you are trying to set the background on a th element, Tom Haws is probably correct that there is some sort of cell margin or padding in effect. If you use firebug for Firefox or "inspect element" in chrome you can find out everything that is impacting th and turn them on and off. You could also use <thead> to surround the headers, and assign the background color to that instead of th
Related
I would like content of my anchor links to be consistenly bold and underlined, but spans inside anchor tag should not be bold.
Sample markup:
<a>Hello, <span>fooooo</span> bar</a>
Styles:
a {
font-weight: bold;
text-decoration: underline;
}
span {
font-weight: normal;
}
(right click on image and select view/open in new tab to get a better view)
In IE8+, underline thickness is inconsistent: apparently it is determined by percentage of bold text inside link. Is there a way to make underlining look exactly the same for every link on the page?
Fiddle: http://jsfiddle.net/FfBGn/
Kinda hack-ish, but instead of text-decoration:underline, you could use this instead:
border-bottom:1px solid #000;
demo
Alternatively, if you have to use text-decoration:underline,
you could just make bold bolder.
font-weight:800;
demo
Maybe an easier way could be to set the border of the anchor instead of underline? That way you can dictate the thickness yourself?
border-bottom: 1px solid #000000;
Yahoo keeps inserting blue dotted links within our HTML emails on plain text within a <p> tag. It seems to be doing this to locations mostly.
I've tried to override this using inline styles like:
style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt; text-decoration:none; outline: none; -moz-outline-style: none;"
I've done a bit of research on this and it seems like it may not be possible to remove them, but I'm just looking to confirm that.
Have you tried adding the following to the CSS before </head>:
.yshortcuts {border-bottom: none !important; color: #000000 !important}
There is a little bit more info on this over at Exact Target's blog.
I'm trying to force the text color in the option of a select input and it's working on every browser in the world but guest what, yeah IE still don't give a damn about the color in the stylesheet.
Do you guys know how to force IE to make my text color like I wish
Here's what I expect
and this is what IE does
CSS
#footer .findProduct select{background: transparent; border:0; color:#fff!important; font-weight:700; text-transform: uppercase; font-family: 'Crimson Text',serif; }
#footer .findProduct select option{color:#000!important; text-transform: uppercase;}
Styling selects with css is just a bad idea. It is impossible to get them styled correctly in all browsers. All you can do is mimic the select box with js. There are frameworks and plugins availble. Basicly they will hide the select and replace them with a list or something that acts like a select, and wich you can style completly. In the background they will update the select in sync with the list to still make your form work on submit. You could also do something similar yourself (best to use jQuery), it should not be to hard if you are a bit familiar with it.
I guess the custom arrow button you use in your screenshot is not working eather...
Your css rules contradict each other change them to this:
#footer .findProduct select{background: transparent; color: #fff; border:0; font-weight:700; text-transform: uppercase; font-family: 'Crimson Text',serif; }
#footer .findProduct select option{color:#000 !important; text-transform: uppercase;}
Demo: http://jsfiddle.net/dan_barzilay/tJZek/
I can not figure out why the below css will not do what it appears to do, if anyone can explain why or help show what I am doing wrong, would greatly appreciate.
<style>
.button-blue a:link{
text-decoration: underline overline; color: red!;
background: #55a4f2!;
padding: 12px 24px!;
-webkit-border-radius: 6px!;
-moz-border-radius: 6px!;
border-radius: 6px!;
color: white!;
font-size: 16px!;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif!;
text-decoration: none!;
vertical-align: middle!;
font-weight:bold!;
}
.button-blue a:hover {
background: #1071d1;
color: #fff;
}
.button-blue a:active {
background: #3e779d;
}
</style>
<div class="button-blue">
Post Comment
</div>
<span class="button-blue">
Post Comment
</span>
http://jsbin.com/etijiz
It doesn't do what you expect it to do because you have syntax errors. You appear to have used ! instead of !important. If you remove the exclamation marks it will look a little more like you expected it to.
Generally it is a bad idea to use !important and if you find yourself using it you probably need to refactor something. It would be a good idea to learn more about how CSS selector specificity works.
Basically it's because you're applying the style to the span/div and not the anchor and a span/div doesn't have an a.hover etc etc.
A quick test by removing the .blue-button from each of the a: style definitions shows it working more correctly.
Here's the fiddle I set up based on your sample.
http://jsfiddle.net/tS9vt/
Added a comment with a new link showing better behaviour without the exclamation marks.
Edit: here's that link http://jsfiddle.net/LuaAv/
I'm trying to have table borders in my PDF using pisa to generate the PDF from my html page. According to the documentation, I should use CSS to display borders in my table. However this is not working out. I can see the borders on my webpage, but on the generated PDF there's absent. Is there something I'm missing or doing wrong? I'm using the following styles for the table:
table { border: 1px solid #666666; border-collapse:collapse; border-color:#ccc; }
td, th { border: 1px solid #666666; font-size:11px; line-height:13px; border-bottom:1px solid #666666; vertical-align:top; padding:5px; font-family:"Lucida Grande", Verdana, Arial, sans-serif; }
I forgot to update this question after I got the answer....the CSS should be in the HTML page that'll be used by pisa. Apparently external CSS stylesheets don't work. Hope this will someday help someone else
Just to correct this - external css does work in PISA but you need to ensure it can locate the css at render time. See django - pisa : adding images to PDF output for more infor on how to do this.
Regards
Tim
For me, it worked if i assigned a class for it.
for example to draw a border around the cell, use below css class:
td.box{
border: 1px solid #666666;
}
in td, add the class:
<td class="box"> Something </td>
I had the same problem.
the solution was:
1 - CSS should be in the HTML page,
2 - CSS should be out of #page attribute.
Setting display:block for <table> and <td> elements solved this problem for me.