I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
Related
I've builded banner for my home page and I want to hide a few HTML element in the responsive mode. When I run it on chrome browser and then I got an issue. This is css property which has been blocked by another css class. I can't figure it out where this css class is ? Anybody can help me to give me solution?
I agree with Cheslab, I think this is inline style resulting from javascript.
css with a viewport property will show its source of the top right side of the style section in the console.
Try putting in any css file:
img.imgSGHN {display:none;}
If this doensn't make any changes, you should be able to override the inline style by adding "!important" (not recommended) in your custom style.
img.imgSGHN {display:none!important;}
will get rid of .imgSGHN element.
The best way to approach the problem would be finding the script where it creates the inline css style and changing its behavior. Simply making it not override "display: " property will do.
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
UPDATE Support for this feature has been dropped. Please seek other options
Original Post:
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
The basic idea is
<div>
<style scoped>
#import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
One alternative would be to use an iframe.
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:
div#foo{
//All your css
}
And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like #media queries and so on.
While writing this, the <style scoped> is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
A simple way is adding pre-class before all selector in css file.
I find a grunt script can do this:
https://github.com/ericf/grunt-css-selectors
This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id
.parent{
// copy paste here
}
Example
Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.
I had a similar issue and found that Shadow DOMÂ can solve it easily.
let output = d.querySelector('#output')
let shadow = output.attachShadow({
mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTMLÂ content and style injected
Source
I have a large HTML page, which includes many CSS files.
When I try to debug that HTML page with Firebug, it shows more <div>s than what I see in source code. Also, there are some tags that are greyed out. In the pictures what is underlined with green color are elements that don't exist in the source code.
Why is that? Is it because CSS files are "including" those "new" <div>s?
I've never seen that CSS files can insert <div>s or <a>s into an HTML page.
Source code edited with Notepad:
Firebug does not change your HTML, nor does CSS add <div>s (though it can create pseudo-elements like e.g. ::before).
If the additional elements are not included in your HTML output, they must be created dynamically through a JavaScript on your page.
Are you using any libraries? If so, which ones are you using? Sometimes libraries add elements to perform whatever actions they were created to do.
These elements that you can see here, is the added elements by either JavaScript or any other library based on Javascript.
Ex:
suppose we have a div in HTML like this
<div id="example"></div>
and we have written a code,
<script>
$( document ).ready(function() {
$('#example').html('<p>example html</p>')
});
</script>
Then in this case if you check the source code you will get.
<div id="example"></div>
and if you check the same page using Firebug or Inspect Element you will get
<div id="example"><p>example html</p></div>
Hope its clear now.
I am working on a mobile site which is linked to online css which I cannot change. I added twitter bootstrap to that site. Bootstrap is applying but not 100% on all FORM HTML tags like select. All I want that if styling is not applying i'll force it somehow on that element, kindly let me know how can i do that. On form tag select the down arrow is not comming which is quite irritating. Kindly let me know how can I force the select to behave like the by default random styling.
You'll probably have to put your own stylesheet embedded into the of your document. Maybe use !important if it doesn't overwrite
Dumb question with a simple answer, I think.
I am building a site that has a completely different layout on one page from the rest. On one page, the design requires a liquid vertical layout, so I need the following code: *{height:100%;}On the other pages I just want the default height.
I tried to add a class to the html tag, which works in the html, but not in the CSS file. I tried:
*.myClass
and
html.myClass
but it doesn't seem to work.
I can't seem to find any info on this online. Is it even possible to add classes to the html tag?
I am using wordpress, so I can easily check to see which page I'm on and add myClass.
I guess I could also use #import to get a different style sheet based on the page I'm on, but that seems like a longwinded way of doing things.
How can I specify height:100% as a value of the html tag on specific pages only?
Can anyone point me in the right direction?
Thanks,
J
Perhaps .myClass, .myClass body {height: 100%}?
It is indeed possible to add a class to the <html> tag.
Live Demo (see code)
This will work, because I just applied this in one of my projects earlier today. :)
html,body {
height:100%
}
If you have pages that require the default height, then don't load this css style. You can place it in a separate CSS file.