How can I find the source for some CSS styles being applied to my page in IE8? Specifically, my <legend> is orange and has a size of about 1px unless I set a style on it (even on the <fieldset> doesn't work)
EDIT :
Here is an example to show what I mean. The markup is:
<html>
<head>
</head>
<body>
<form>
<fieldset>
<legend>test1</legend>
</fieldset>
</form>
</body>
</html>
And the result in my IE8 is
If you look closely you can see the tiny orange spec that is the legend.
EDIT 2:
I just noticed that the fieldset has round corners. Is this odd, or am I wrong and this is how fieldsets look in IE?
Hit f12 and you will get the developer tools. Click the arrow button and then click on the element in question. You will get a list of all styles applied to the element and where they are coming from.
The tricky part about background though is that you could have a transparent background on your element and one of its ancestors may have the background color. So you may need to traverse the tree.
You can use the DOM inspector of Firebug Lite.
Related
Can't find anything on the topic, no idea if this is something old or new.
Basically, given an input[text] with adjacent div for a label which has any color besides pure black/white -- when selected (and caret is flickering inside) input somehow affects surrounding elements and visually dims them. Like some kind of filter is applied? Like a shadow or a blur or something, but it affects the entire parent' render stack no matter how far elements are from the input distance wise. TLDR: everything visually below the input is affected.
I tried checking computed props on labels and found nothing. CSSOM does not changes for them in any way.
You can try codepen, or any other sandbox.
The code is very simple:
<html style="color: #ffffff; background-color: #1e1e1e">
<head></head>
<body>
<div>
<input type="text" />
<div style="color: #f54562">Error 1</div>
<div style="color: #f54562">Error 2</div>
</div>
</body>
</html>;
I made a gif here:
Moving input into an absolute position helps isolating the effect, but obviously working with inputs like that would be very tiresome.
Checked on 2 different machines.
Reproducible in Chrome: Version 107.0.5304.107 (Official Build) (64-bit);
Edge also;
Works fine in Firefox;
So, some kind of bug or known quirk?
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.
I have finally figured out how to use the Twitter Bootstrap Tooltips, and I am trying to style it. I have asked similar questions about other plugins, and they all ended up being specific CSS selectors. For jScrollPane, the track's selector was .jspTrack.
Fiddle
My question is, what is the CSS selector for the Twitter Bootstrap tooltips?
The documentation linked in the comments shows you a sample of the markup that's produced when a tooltip is generated:
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
It should be fairly easy to determine the CSS selector based on this.
There are additional class names attached to .tooltip that you can see if you open your browser's DOM inspector and then hover your form element. The one in your example generates the following .tooltip element:
<div class="tooltip fade right in" style="…">
If you need to select only the tooltip belonging to a specific trigger element, that depends on where exactly the tooltip is placed in the DOM. The documentation says (just above the first section I quoted):
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
So the selector would be .mytrigger + .tooltip where .mytrigger is the form element triggering that tooltip. The DOM position is determined by the container option, otherwise it's the default as stated.
If text is positioned off display, is there any way to convince browsers to copy text only visible on the screen when user selects text using ctrl-a or select all. In the example that follows, I don't want to copy text for the absolute positioned div.
<html>
<body>
<div style="position:absolute;top:30;left:-300">This should not be copied</div>
<div>Only this should be copied</div>
</body>
</html>
Some more information:
Ideally I am looking for solution for webkit/gtk, but this applies to firefox/chrome as well. Both browsers exhibit same behavior.
I don't control the page getting displayed. Page is displayed in webkit window for automated tool which tries to analyse contents of the page. Part of the algorithm looks at the text available by select all/copy
I have access to full API webkit/gtk exposes.
Why not just do display: none; instead of moving it to the left?
<html>
<body>
<div style="display: none;">This should not be copied</div>
<div>Only this should be copied</div>
</body>
</html>
I see no reason why you need to move it off the screen.
User can always use firebug to copy whatever they want.
I see in Firebug that my style (background-color) is apparently on the element in html view, but not in element.style in the style tab. In the document I do not see the effect of the style, however if I manually add it in the style tab on a class that is present, it works.
How can this be?
I have !important on the style on the element, and don't see anything that could override it
Edit, even with the value stated literally here, no dice:
<div class="fl oh rounded" data-bind="attr:{style:'display:block, background-color:#ff0000 !important;'}">
However, this works.
<div class="fl oh rounded" style="background-color:#ff0000 !important;">
So, if I add the style inline and not in a knockout binding, it works... However, I can see that the binding is working as the bound color appears in the html in firebug (but not in element.style in the style tab, but the ko bound color is not seen)
I have no idea why, but it was that out-of-place looking display:block that caused this oddity.