I have a external css for reset that apply to all table, td, div, etc..
In my website, there is a customer template that allow user to create their desire content in html.
When view this customer template in webpage, I don't want to apply above external css.
So I put this customer template content into a div, and trying to exclude this div and all childs of it from css.
Is it possible to write css selector to select all table, td, div, etc... which are not child of given div id?
Below is my testing html code and reset.css
The content of div customtemplate is dynamic enter by user.
User try border=1 to table, it apply all table cell to border 1 without reset.css.
But with reset css, there is no border appears.
My users are not html/css professional, so they will create simple html and expect to display as they write in their test page.
If their html not appear exactly the same for all browsers, it is up to them.
I have no responsible for it. I just need to display their html in div without reset.css.
Anyway to solve ?
<html>
<head>
<link href="reset.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="customtemplate">
<table border="1" cellpadding="10px">
<tr>
<td>abcd</td><td>def</td>
</tr>
<tr>
<td>hello</td><td>world</td>
</tr>
</table>
</div>
<br><br>
<table>
<tr>
<td>default</td><td>reset</td>
</tr>
<tr>
<td>style</td><td>using</td>
</tr>
</table>
</body>
</html>
table, td {
border: 0;
padding: 0;
}
The right way would be to define YOUR defaults for that div. The reset CSS helps you avoid the problems that are caused by different default values in browsers. So for that div with the given ID, you should define some sensible defaults, which are different from the defaults used on the site, but still can be expected to be the same default on every browser.
For example:
/* reset.css */
p { margin: 0; }
/* yourdefaults.css */
#yourdiv p { margin-bottom: 10px; }
Related
Hello I am trying to make an online chat application.
I have the html:
<body>
<table align="center" width="80%">
<tbody class="scroll">
<!--All of the chat-->
</tbody>
<tbody class="formheight" style="width:100%">
<tr>
<td>
<form style="width:100%" action="Write-to.php" method="post">
<input autocomplete="off" name="txt" type="text" id="usermsg" style="font-size:2.4vw;" value="" />
</form>
</td>
</tr>
</tbody>
</table>
</body>
And the css:
html, body
{
height: 100%;
max-height:100%;
overflow: hidden;
}
table
{
height: 100%;
}
tbody {
overflow: auto;
width:100%;
}
thead > tr, tbody{
display:block;
}
I want the 2nd tbody (The one that contains the form) to lie at the bottom of the page and the first to fill the rest of the page upwards.
Currently I am having to use jquery to (kind of) do what I want. Currently the form is half hidden. I would rather do this all with CSS so that it works better with mobile devices.
How could I do that?
Jquery:
var heighty = $(window).height();
var height = $('.formheight').height();
$(".scroll").css("height", heighty - height + "px");
I also can't for the life of me get the form text input to be 100% width?
Please see JSfiddle
I am also very open to another way of laying out this chat app all together!
This is possible in CSS, but would be very difficult to get working across all browsers. Instead, here is my recommendation:
Create an element that fills up 100% height with a bottom padding set to X px.
Create an element with position:fixed and a height of X px.
Give the latter element a z-index:2 and the former a z-index:1. z-index doesn't need to be assigned manually, elements further down in source code automatically have a higher priority and are displayed over previous elements (if they overlay visually).
If you want, you could use a different unit. Percents are very easy because you can have them add up to 100%, so no need for a margin. Of course each has its respective drawbacks, but in my experience what I've described generally has good compatibility and displays comparably on all devices. You could even use CSS #media queries to change the height, X, for different devices.
You need to use something what we call a "Sticky Footer", In your case, your second body goes in the sticky footer. Have a look at this http://ryanfait.com/sticky-footer/ or this http://www.cssstickyfooter.com/ for the css+html for a sticky footer
According to W3.org, the style page-break-after applies to block level elements (http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props)
<tr> is a block level element (according to this: http://www.htmlhelp.com/reference/html40/block.html, it is)
I'm doing this, but the page break is not creating an actual page break when printing:
<table>
<tr><td>blah</td></tr>
<tr><td>blah</td></tr>
<tr style="page-break-after: always"><td>blah</td></tr>
<tr><td>blah</td></tr>
</table>
Am I doing this the correct way?
If <tr> wasn't a block level element: how am I suppose to achieve this page break?
Note: the before code is just an example, but what I'm trying to do is to put a page-break every 5 rows of the table, so if you know any tips for that case, will be appreciated
Inside <head>, set this style in your CSS stylesheet
<head>
<style>
#media print {
tr.page-break { display: block; page-break-before: always; }
}
</style>
</head>
That way, it will produce a page break during printing right before this table row.
<tr class="page-break">
</tr>
The site you referenced states that <tr> "may also be considered a block-level element since it may contain block-level elements." Neither the W3.org or Mozilla docs state that <tr> is a block-level element.
Some Possible Solutions
Based on the wording and your example, I would ensure that the cell contains a true block-level element. Here are two examples using <h1> and <p> which are block-level text elements.
<tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr>
<tr style="page-break-after: always"><td><p>This will be a new page.</p></td></tr>
Others have reported similar problems and one of the solutions might work for you.
How to apply CSS page-break to print a table with lots of rows?
Google Chrome Printing Page Breaks
Printing a Gridview - how to print n rows on each page using page break
page-break-inside doesn't work in Chrome?
As mentioned by My Lister, you could attempt to catch the printing action or generate a print version of the page that would separate the table out so you can obtain the desired page break after every five rows.
Set all <tr> tags with display:block and define the page format and the size in mm for the table and cells.
Here <td> tag width is set to 23mm as there are 10 td tag with 2mm padding each side (23+2+2)*10=270 which is <table> width.
You can adjust word-break depending on how you want to break the words.
#media print {
#page {
size:A4 landscape;
margin: 5mm 5mm 5mm 5mm;
padding: 0mm 0mm 0mm 0mm;
}
.table{
width:270mm;
min-width:270mm;
}
td, th{
padding: 2mm 2mm 2mm 2mm !important;
display: table-cell;
word-break:break-all;
width:23mm;
min-width:23mm;
}
tr{
display:block;
}
tr.page-break {
page-break-before: always;
}
}
I am trying to figure out how to make this work. Shouldn't the background:red of the outer table's td overwrite all other ones? And why does this example end up with a yellow background although that's the element nested furthest down in the DOM?
<style type="text/css">
table, td, div {
height: 200px;
width: 400px;
}
</style>
<table class="outer" cellpadding="0" cellspacing="0">
<tr>
<td style="background: red">
<div style="overflow:auto;background:green">
<table class="inner" style="width:800px">
<tr>
<td style="background:yellow"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Here's a JSFiddle for this.
To wrap up... I am trying to overwrite the inner table cells' background color with a background in the parent div as well as the parent td of the outer table. Is that possible at all?
the background in the Td has the last say. so you technically can't do it with css alone. even if you put an !important in the div style it won't work.
anyways, you can probably fix that via js and replace the color of the td with another one.
bcz its css default behavior if u give style to parent tag than it automatically inherits by child html
if u want other css in child tag than u have to give style to that particular tag
which override ur parent style
The second td is always drawn above, and therefore over the top of, the background of the first td. As you are using the style attribute, which always takes precedence over any CSS applied in a style block or external CSS file, you will not be able to change this behaviour without resorting to JavaScript or moving the styles from the style attribute to a style block.
Using jQuery, you could achieve this with something similar to the following:
$('.inner td').css({
'background' : 'colour or image here'
});
I've got a multi-column panelGrid setup, with dataTables as each of the columns. Each of the dataTables is a different length. This results in the panelGrid stretching out to fit the largest dataTable (so far, that's good). The remaining dataTables are centered vertically (this is not good as it looks horrible on screen) instead of being top justified.
How can I tell panelGrid to top-justify contents? Or, is my approach completely wrong and I need to do something different (if so, suggestions are welcome)?
JSF renders as HTML and can be styled with CSS. Inspect the element as follows:
View the JSF page in a browser.
Right-click the page.
Choose View Source.
The <h:panelGrid> renders an HTML <table> element; the <h:dataTable> renders as an HTML <table> element, as well. The data elements are nested inside the <td> element, rendered by the <h:panelGrid>. So, set the vertical-align of the <td> of the <h:panelGrid> to top.
Assuming that the <h:panelGrid> has an id which ends up as <table id="panelGridId"> in HTML, use the following CSS:
#panelGridId>tbody>tr>td {
vertical-align: top;
}
Forms
If the grid is part of a form, then the CSS will need to include the form's ID. For example:
<form id="amazingForm">
<h:panelGrid id="amazingGrid">
...
</h:panelGrid>
</form>
The CSS will resemble:
#amazingForm\:amazingGrid > tbody > tr > td {
vertical-align: top;
}
Example
Here's an example HTML document that shows vertical alignment working within a table configured using CSS:
<!-- language: html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3547485</title>
<style>#myid>tbody>tr>td { vertical-align: top; }</style>
</head>
<body>
<table id="myid">
<tbody>
<tr>
<td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
</tr>
</tbody>
</table>
</body>
</html>
All get aligned to top. Without the rule, all get centered. It's hard to tell what rule exacty you need to apply since it's unclear how your generated markup look like.
Tutorials
See also:
HTMLDog CSS tutorial
CSSTutorial.net
you can use CSS to make the panelgrids to top align.
.mystyle {
vertical-align: top;
horizontal-align: center;
}
include in your xhtml files.
<link href="#{resource['css:style.css']}" rel="stylesheet" type="text/css"/>
and add this code in parent panelgrid.
<h:panelGrid columns="3" columnClasses="mystyle, mystyle, mystyle">
Note:for 3 columns you hav to include it 3 times
You can avoid applying it to every td, only inside panelGrid and datatable inside that.
I had the same problem and the following worked for me:
.pgstyle td{
vertical-align: top;
}
Where pgstyle is the styleClass you give to every panelGrid contains a datatable, like:
<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
....
</rich:dataTable>
</h:panelGrid>
I have the following code that I am using to display a search tool with a scrolling results section. In IE the code works fine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="background:black;height:100%;width:100%;">
<head>
<title>Report</title>
</head>
<body style="background:black;">
<table HEIGHT="100%" WIDTH="100%" style="background:red;">
<tr>
<td>
Search Area
</td>
</tr>
<tr>
<td HEIGHT="100%" WIDTH="100%" style="background:orange;">
<div style="overflow-y:scroll;height:100%;">
<table style="width:100px;height:1000px;">
<tr>
<td style="background:white;">
Results Area
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
But when I set the meta tag to use IE8 formatting by adding:
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
The bottom DIV tag expands beyond the page. I have tried a number of options though and can't find a way around it without actually specifying a height for the values. Which will not work as I want the page to take up 100% of the screen no matter the size of the browser window.
Any help would be much appreciated.
This metatag enables correct CSS rendering, and in CSS – by design – height:100% basically doesn't work.
You need to give specific height to every single ancestor of the element, including <body>, <table>, <tr> and even <tbody> element that's automatically inserted by the parser.
Anyway, this layout can be achieved in easier way:
.topBanner {
position:absolute; position:fixed;
height:2em;
top:0; left:0; width:100%;
}
body {padding-top: 2em}
this will degrade nicely in IE6, and unlike overflow, will work properly in Mobile Safari.
Edit:
Removing the DOCTYPE declaration will make height="100%" work but it puts the browser in quirks mode though, which is not desirable.
Generally speaking using tables for layout is discouraged, you should use CSS instead.
For example: http://jsfiddle.net/rf649/7/
HTML
<div id="search">Search Area</div>
<div id="results">Results Area</div>
CSS:
#search {
background-color: red;
position: fixed;
height: 150px;
width: 100%;
}
#results{
background-color: orange;
position: fixed;
top: 150px;
width: 100%;
bottom: 0;
overflow: auto;
}
You should set all margins and paddings for the parent elements to zero in order to get what you want.
Update: Sorry, didn't understand the problem at once. Ben's hint should be the better one I assume. :)
Update 2: Oops, since Ben has deleted his answer my first update doesn't make any sense. Try setting the body's height to 100%, that should solve the problem.
My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.
As far as I've seen, you always have to set the height/width of the container that you want to overflow, so you need to set them.
To deal with the resolution I would suggest you to add a jQuery script at the onReady event that dynamically would fix the height and width making the overflow work.
I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !important modificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the height assigned to 100%, but the CSS applied the !important during the style loading.