Here's what I've got. I have a tree in GWT set up to process only a certain level depth of children, retrieving from the server and only updating according to which children one clicks. I am familiar with addStyleName() functions and I have used this to style the foreground color of certain tree nodes, and it has appeared successfully on previous versions of my project (without the server calls).
The question boils down to if any of you familiar with GWT know any reason why my custom CSS would be overridden on a child update of a node. So for example, when the server processes a node, it shows up in my proper CSS color, but once the server shows that it has children, it does the addItem() to that node and the CSS of the text color of the parent is reverted back to default.
This is all under the assumption that I have no removeStyleName() calls or any deleting/recreating going on. Anyone familiar with a situation like this?
Thanks!
EDIT: Here's some code I've narrowed it down to
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body>
<p>blaghblagh</p>
<div class="Foreground1">
hey
<table style="white-space: nowrap;">
<tbody>
<td style="vertical-align: middle;">
<div style="display: inline;">
ContinuingPromise '08
</div>
</td>
</tbody>
</table>
CSS:
body{
color: black;
}
.Foreground1{
color: green;
}
If you put this code up, you'll see the ContinuingPromise as black, although it is within the foreground div which should be green. Also, the word 'hey' will appear green. Am I missing something basic? Thanks again
I'm not sure if this solved your original question, but the color problem is very likely caused by the doctype you're using. If the html page uses quirks mode, the style properties are not correctly inherited by the table. See http://reference.sitepoint.com/css/inheritance. Setting a doctype or different doctype might solve your problem. If you are using any of the GWT layout panels you need to set the doctype to <!DOCTYPE html>, see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Standards
Related
I've used gridsetapp.com in the past to create responsive grids, but on the one I've recently tried creating just isn't working and I can't figure out why.
The link to the css is here; https://get.gridsetapp.com/37722/
Just trying to get something basic:
<html><head>
<link href="https://get.gridsetapp.com/37722/" rel="stylesheet" />
</head>
<body>
<div class="d1-d5" style="background:#aaa">ffggg</div>
</body>
</html>
Any thoughts?
Despite an unusual CSS link, the browser should recognize the CSS file your referenced.
However, looking at your reference, you are just trying to apply CSS to the class d1-d5. However, as best I can tell, there is no exact match in the CSS file to Just d1-d5. Use the Development tools (F12 on most browsers); they are your friend. It will show you what CSS is applied at that moment including, any applied through JavaScript or Linked files.
With CSS, you need to make sure that you call out exactly what the browser can identify, but not more (unless going for a higher order of precedence). For example, the most you could call out to select your d1-d5 is:
html body div.d1-d5{...}
Whereas in you linked CSS file, I see a lot of parents or children when searching d1-d5, such as .d1-d5 .d1,.d1-d5 .d2,.d1-d5 .d3,.d1-d5 .d4,.d1-d5 .d5.
If you wanted the last one in this chain (.d1-d5 .d5), you would need an HTML such as:
<html>
<body>
<div class='d1-d5'>
<div class='d5'>
This text will have the CSS applied.
</div>
</div>
</body>
</html>
The CSS written as .d1-d5 .d5 literally means "select the element with class d5 as a descendent of an element with class .d1-d5". Your HTML doesn't match any of the classes in the CSS file, including the parent and child selectors. If you were to try the above HTML, you would see width:18.05273834%; applied (which isn't a very obvious thing to see... why not try background:yellow; or something like that for an easy verification).
Finally, why are you inline styling when you have the CSS? This is bad form, and only appropriate if you can't control the CSS file.
Consider the following HTML code:
<style>
td {
padding: 5px;
}
</style>
<p>
1233
</p>
<table>
<tr>
<td>
<h3>Some text</h3>
</td>
</tr>
</table>
If I use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">, the margin of <p> and <h3> does not work, but if I use <!DOCTYPE HTML>, the margin works.
What's more, when I add
h3 {
margin: 25px 0;
}
to the style, the margin of them suddenly works even using HTML 4.0 doctype!
Why does this strange behavior happen? IE and Chrome behave the same on this issue, is this by design or something, it really confuse me.
I have a lot of pages written depend on this strange behavior, when I brought some CSS from other new components they defined margin then suddenly all these old pages broke. So I want to know what really happened.
The issue is the suppression of default top margins in some contexts in Quirks Mode. Thus, if you use Quirks Mode for some reason (and working with legacy pages is often a very good reason), you should explicitly set any vertical margins you want to have for elements. The other solution is to move away from Quirks Mode, slapping <!doctype html> at the very start, but this may completely ruin (or maybe just disturb a little) your pages, if they have been created so that their rendering relies on buggy behavior and oddities in browsers.
The issue can be demonstrated with a simple standalone document (with no CSS):
<!doctype html>
<p>
1233
</p>
<table border>
<tr>
<td>
<h3>Some text</h3>
</td>
</tr>
</table>
There is empty space, about one empty line, at the beginning before “123” as well as inside the cell before “Some text”. If <!doctype html> is removed, that spacing disappears (but other margins are retained).
The issue is well described in section 10.3.10 Margin collapsing quirks in HTML5 CR: “In quirks mode, any element with default margins [such as p or h3] that is the child of a body, td, or th element and has no substantial previous siblings is expected to have a user-agent level style sheet rule that sets its 'margin-top' property to zero.”
This feature relates to the browser tradition of suppressing top margins in contexts where they are normally useless or even disturbing. For example, if a heading element or a p element is the very first element in document body, or in a table cell, there is no need to separate it from the preceding content. The practice predates general availability of CSS.
I'm don't really know what hapening but, thats what you see in chrome at HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" is not real margins it's a some browser initial styles you can see them in chrome dev tools: -webkit-margin-before, and -webkit-margin-after; this styles ovverides by margin.
For more information you better read specs on W3C, and use doctype html, or maybe html 4.0 strict.
I have an unusual problem that's driving me crazy! I haven't found a question posted yet that pertains to this exact issue.
I have a page on my site where certain elements render incorrectly on random page loads. Using chrome for example, the page will render normally but after a number of refreshes a basic ul in the header will shift down into the body. Sometimes a carousel won't appear, or a navigation block will slide to the next row. I have duplicated this behavior on Firefox as well.
I can't really give a snippet of code for anyone to look at because I have no idea where the issue is originating from. The page with the issue is the index of www.Calibrus.com.
What's really amazing is that by using Chrome Dev Tools I can set display:none to the incorrect ul, then set display back to normal, and the ul renders where it should again. This suggests to me that the exact same html and css is somehow rendering differently (regardless of any scripts being used).
Also, this isn't an issue with the server. I have the same problem when running the code locally.
Does anyone have any idea whats going on here?
I believe the issue is tied to floats and the slideshow javascript.
Whenever I triggered the layout bug on the live site, it was accompanied by the first slide not rendering correctly. This would cause <div id="r1"> to have a height of 0 which in turn seems to aggravate the afore mentioned float bug. There seems to be some tension between the <ul> which is floated and the <a> which is not.
This is the solution that worked for me:
In index.html add a class (or ID if you prefer) to allow yourself to target the link within the CSS. In this example I have simply given it a class of logo:
<a class="logo" href="index.html">
<img src="images/Calibrus_logo.png" alt="logo" border="0">
</a>
Then, in your CSS:
// target the link using your chosen selector
.logo {
display: block;
float: left;
}
Once I added those rules, I could no longer replicate the rendering bug.
Side note:
I would recommend declaring your character encoding just after the opening <head> tag with <meta charset="utf-8">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calibrus</title>
Also, the border attribute for images has become obsolete. So rather than:
<img src="images/Calibrus_logo.png" alt="logo" border="0">
Simply target the <img> with CSS and declare:
.logo img {
border: none;
}
I'm building a table cell using two bound ember.js views on data. When I do that, ember.js inserts its metamorph tags such that it can update the view later.
<td>
<a data-ember-action="14">
<div id="ember2065" class="ember-view">
<script id="metamorph-102-start" type="text/x-placeholder"></script>
02/04/2012
<script id="metamorph-102-end" type="text/x-placeholder"></script>
</div>
#
<div id="ember2072" class="ember-view">
<script id="metamorph-103-start" type="text/x-placeholder"></script>
$61.81
<script id="metamorph-103-end" type="text/x-placeholder"></script>
</div>
</a>
</td>
These tags cause the date and the price below to line wrap within the cell. Is there a CSS styling that I can apply to these tags to make them not effect line breaking?
It strongly depend on your full case. It seems to me that using views is superfluous here, but maybe I am missing some information.
Here are some working samples: http://jsfiddle.net/MikeAski/QCbGN/
Maybe providing more context would help to have better sample.
Put this in your stylesheet to prevent line breaks from ember views:
div .ember-view {
display: inline;
}
I have a situation that I am looking at where certain CSS properties will not be inherited. This revolves around tables and IE8. Using the sample HTML below I cannot get the text within the table to inherit the green colour.
This works in Firefox and Chrome, but not IE8 and from reading up this seems to have always been a problem in IE but was meant to be working in version 8 from what I read.
I have tried to specify the inherit value everywhere possible, but to no avail so the question is whether the CSS inheritance support in IE8 is buggy, or am I missing something?
I don't want answer changing inline CSS to be classes and I certainly dont wan't any comments on tables as this all stems from building and designing HTML emails where inline CSS and tables are essential.
<html>
<head></head>
<body>
<table style="color: green;">
<tr>
<td>
<span>Span</span>
<p>Paragraph</p>
<div>Div</div>
<table style="color:inherit;">
<tr>
<td>Table</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You're right, this is pretty odd, although I find that adding a valid doctype solves the problem. http://jsbin.com/etuti/2
I've never had a problem with inheritance in any of the IEs. I usually have problems with lack of selector and property support, as well as positioning bugs etc.
Could it be you don't have the correct specificity with your selectors? I'm pretty sure they go in this order (from most specific to less)
Inline style attribute (style="color: green;")
Id selector (#bob)
Class selector (.jill)
Element selector (body)
If that all fails, could adding !important help? I'd use this as a last resort, as usually you can just give specificity by providing a more specific selector.