Sometimes the dang thing works and at other times it doesn't. I have many tables in my app and the CSS for all of them is working. There's nothing different for this one, except for it, the CSS isn't being applied, God knows why. Help.
table.catalogContainer
{
border: none;
padding: 50px;
margin-left: 100px;
margin-right: 100px;
margin-top: 50px;
margin-bottom: 50px;
}
td.catalogCell
{
border: none;
padding: 30px, 20px, 50px, 20px;
}
<div id = "catalog">
<table class = "catalogContainer">
<% while ((category = Helper.GetNextCategory(categoryIndex++)) != null)
{ %>
<tr>
<td class = "catalogCell">
<img src = "../../Content/Category.gif"
width = "25px" height = "25px" alt = "Category" />
<b>
<%= Html.ActionLink(category.Name,
"DisplayCategory",
"Catalog",
new { id = category.Id },
null) %>
</b>
</td>
<td>
</td>
</tr>
<% } %>
</table>
Update
Ok, I found the problem. The border that was showing in the table still was due to the second on which I did not apply the class yet.
It may be that the CSS isn't being pulled in time while your script is running. Try the following pattern in your style sheet:
#catalog table
{
...
}
#catalog table td
{
...
}
Edit
I see you've found the problem. Still, you can clean up your implementation a bit by using the cascade a bit more effectively as shown above.
What browser are you testing with? When you view the page source does everything look as it should? Maybe try posting the generated source html for that section of the page. It's possible your template code is outputting some bad stuff that is breaking your html for this particular table (which could affect page rendering).
I find firebug invaluable when troubleshooting css. You can easily see which styles are being applied to particular elements. You can use it to select an element and view all sorts of css information, and even try different values on the fly.
Additionally,
the commas in your shorthand padding td.cataglogCellare are unnecessary and may cause some issues in different browsers/versions.
Additionally Additionally,
you really shouldn't be using the <b> tag to markup your content. <em> or <strong> are much better semantically and you can style to create whatever presentation is needed.
Related
Question:
How can I add margins and/or paddings to headings (h1 - h4) that are part of a TD or TH?
Current Situation:
I have a pre-generated HTML document that is being generated by JIRA. The structure of this document is as follows:
<tr class="rowAlternate">
<td class="jira-macro-table-underline-pdfexport">
<h1><a name="StandardizedInterface"></a>Standardized Interface</span></h1>
<h2><a name="ShortDescription"></a>Short Description</h2>
<ul> ... </ul>
</td>
</tr>
I programmatically extend this document with <tocentry> and other mPDF-specific elements so it can be used as a handout, the generated PDF looks quite good but there is one major issue I have with headings in tables.
This is how the document shows up in the browser:
Inside generated PDF:
As can be see the margins of the headings have disappeared in the PDF export. All my tests with adding inline CSS to the headings or to wrap them with other elements have failed so far.
The mPDF documentation says:
Block-level tags (DIV, P etc) are ignored inside tables, including any
CSS styles.
This will most likely mean that this can't be done with pure CSS or wrapping.
I hope that someone else encountered this problem before and could share some insights as how to achieve spacing around block elements.
You'll want to convert the mark-up to a format similar to the following:
<table>
<tr>
<td class="h1">Report</td>
</tr>
<tr>
<td class="h2">Description</td>
</tr>
<tr>
<td>Body</td>
</tr>
</table>
You can then apply appropriate padding to the <td> elements by targeting the class name:
<style>
table, th, td {
border: none;
}
td.h1 {
padding: 30px 0;
}
td.h2 {
padding: 15px 0;
}
</style>
Use a DOM parser like the one from Symfony to help you traverse your current mark-up and rebuild it in the proper format automatically.
Workaround / solution
I used a workaround that solved the problem in my case by using preg_replace_callback() that I needed anyways to format my document properly. Whenever the callback handles a heading, I add a transparent image right after the text of the heading whose height I define by doing a bit of math.
Code
function formatHeading($p) {
// I only want headings for h1-h3:
$tocEntry= '';
if (is_numeric($p[2]) && $p[2] >= 1 && $p[2] <= 3) {
$tocEntry= "<tocentry level=\"{$p[2]}\" content=\"{$p[3]}\" />";
}
// calculates the heights of the vertical spacer
$spacerHeight= ((6-$p[2]) * 10);
return
"{$p[1]}{$tocEntry} {$p[3]} {$p[4]}
<img src=\"../assets/images/transparent.png\" height=\"{$spacerHeight}\" style=\"vertical-align:middle;\" width=\"1\" border=\"0\"/>";
}
// Matches e.g. "<h2><a name="SimpleTest"></a>Simple test</h2>"
$buffered= preg_replace_callback('|(<h(\d)+>?<a?[\w\s\d="%>]+<\/a>)(.+?[\s\r\n\']*.*)(<\/h\d+>)|',
"formatHeading", $buffered);
Result
To illustrate the position of the spacer I used a non-transparent image to generate the PDF:
I am trying to have two different Font Sizes in the same Table th cell
My code is as below but does not appear to work i.e. the (Frm) stays at font 14
Please help
echo "<th width='70%' style='background-color:#FFD8D8;font-size:14px' colspan=\"14\"><left>".$startlocation."<style='font-size:8px'>"."(Frm)"."</left></th>";
There is no such element called <left>. What I would recommend you do, is add classes to your elements instead of using inline styling through style=.
th {
width: 70%;
background-color: #FFD8D8;
}
.left {
font-size: 8px;
}
.right {
font-size: 14px;
}
Then you can add a <span> tag around your text, which can look something like this as your final code:
echo "<th colspan=\"14\"><span class=\"left\">".$startlocation."</span><span class=\"right\">(Frm)"."</span></th>";
I'm not sure what your other text is inside the <th> element, but doing what I did will solve it. It's also best practise to use classes and IDs instead of inline styling, as it's easier to change in the future.
EDIT: If you absolutely need to to inline styling, this will work:
echo "<th colspan=\"14\"><span style=\"font-size:14px\">".$startlocation."</span><span style=\"font-size:8px\">(Frm)"."</span></th>";
Insert <span> like this:
...$startlocation."<span style='font-size:8px'>"."(Frm)"."</span></left></th>"
so that you can specify style of some element the way you tried.
I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});
How does the Block component handle CSS classes? I have code like this:
<style type="text/css">
.nameColumnHeader { width: 30%; }
.nameColumnValue { width: 30%; vertical-align:top; }
</style>
...
<table>
<tr>
<th><span jwcid="nameColumnHeader#Block">...</span></th>
<th><span jwcid="nameColumnValue#Block">...</span</th>
</tr>
...
</table>
Ultimately, this seems to work. The styles seem to be applied even though the class attribute is not specified.
Why does this work? And wouldn't it be better form to specify the class attribute (in terms of maintainability)? At this point, however, this kind of code is all over the app, is it worth it to 'fix' it?
You're probably using the contrib:Table component - by default it applies classes to the and it generates (or perhaps in the , check the generated markup).
The value for those classes are generated from each column name, so for the 'phone' column they should be: phoneColumnHeader and phoneColumnValue... It just happens that you have a similarly named jwcid (nameColumnHeader) which added to the confusion.
How do I change the style (color) of a div such as the following?
"<div id=foo class="ed" style="display: <%= ((foo.isTrue) ? string.Empty : "none") %>">
<%= ((foo.isTrue) ? foo.Name: "false foo") %>"`
Try this:
in the .aspx file put thees lines
<div id="myDiv" runat="server">
Some text
</div>
then you can use for example
myDiv.Style["color"] = "red";
If you want to alter the color of the div with client side code (javascript) running in the browser, you do something like the following:
<script>
var fooElement = document.getElementById("foo");
fooElement.style.color = "red"; //to change the font color
</script>
If you wanted to change the class instead of the style directly:
ie.. create another class with the styling you want...
myDiv.Attributes["class"] = "otherClassName"
You should set your colors in CSS, and then change the CSS class programatically. For example:
(CSS)
div.Error {
color:red;
}
(ASP.NET/VB)
<div class='<%=Iif(HasError, "Error", "")%>'> .... </div>
Generally, you can do it directly
document.getElementById("myDiv").style.color = "red";
There's a reference here.
It looks like you are writing ASP, or maybe JSP. I'm not too familiar with either language, but the principles are the same no matter what language you are working in.
If you are working with a limited number of colours, then the usual option is to create a number of classes and write rule-sets for them in your stylesheet:
.important { background: red; }
.todo { background: blue; }
And so on.
Then have your server side script generate the HTML to make the CSS match:
<div class="important">
You should, of course, ensure that the information is available through means other than colour as well.
If the colours are determined at run time, then you can generate style attributes:
<div style="background-color: red;">
That code fragment doesn't say much - if the code is server-side why don't you change e.g. the class of the HTML element there?
IMO this is the better way to do it. I found some of this in other posts but this one comes up first in google search.
This part works for standard JavaScript. I am pretty sure you can use it to remove all styles as well as add/overwite.
var div = document.createElement('div');
div.style.cssText = "border-radius: 6px 6px 6px 6px; height: 250px; width: 600px";
OR
var div = document.getElementById('foo');
div.style.cssText = "background-color: red;";
This works for jQuery only
$("#" + TDDeviceTicketID).attr("style", "padding: 10px;");
$("#" + TDDeviceTicketID).attr("class", "roundbox1");
This works for removing it JQUERY
$("#" + TDDeviceTicketID).removeAttr("style");
$("#" + TDDeviceTicketID).removeAttr("class");