I am developing a Google Chrome extension.
Extension shows a dialog box (jquery ui, as a div) inside any webpage, in the dialog box user can add some content [HTML content without body, without styles info].
The problem i am facing is, that the styles specified in the webpage are getting applied to the jquery dialog and the content user is adding.
For ex. when i launch my plugin on stackoverflow webpage, all text become center aligned, etc etc.
What is the best way to get rid of parent styles inside a div?
you should look into the reset stylesheets almost every CSS framework comes with. You can take that reset stylesheet and apply all of the reset styles to your specific DIV:
div.YourDiv, div.YourDiv * {
margin:0;
padding:0;
border:0;
...
}
which should reset both YourDiv and all elements below. After that, you can get started w/ styling the sub elements as you see fit.
I've done that using an IFRAME, which basically creates a whole new html document inside a box, without the styles from the "parent" page. The other option is to redefine all the styles in your div, but that's very tedious and ugly.
Related
I'm trying to get this style to work for the body of the HTML page, it works when the style is applied within the tags but not when used with an external style sheet.
CSS Doesn't work with this code.
body {
background-image:url(img/geometric.jpg);
}
HTML Works here.
<body style="background-image:url('img/geometric.jpg');">
</body>
I want to use external styling for the whole page. I'm curious on how to fix this odd issue.
The path to the image must be relative to the CSS file that references it, not the HTML file that it will appear in.
I want to change the way Tumblr default theme shows the pages links (just under the Title and Description.
Some time ago it just showed all the links and if they didn't fit on one line, they just went to the next line.
Currently there is only one line of links that needs to be scrolled horizontaly using click n drag (or sliding with the finger in smartphones).
I want to change it as before so all the links can be shown without needing to scroll.
I am having to guess here as you have not provided any code or an example, but if you want to show post tags stacked on top of one another (like a list).
Then change this code:
.inline-meta .meta-item {
display:inline-block;
...
}
to this:
.inline-meta .meta-item {
display:block;
...
}
Or write your own style tags as this css is inherited I believe.
So at the bottom of your style tag just add the property display:block to the .inline-meta .meta-item element.
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 using a cms system that allows me to write html in a source box, a bit like wordpress. There is a div currently showing on my site that i cannot directly access the html or css of so i am un-able to get rid of it. Is it possible for me to write something with html that will allow me to hide this div ?
You can try using document.addEventListener inside a <script> tag to change the properties of the interested <div> block after the page is completed loaded.
Considering your below line:
.......css of so i am un-able to get rid of it.
lets say id of div is div1 then on the main HTML page which you have access to, add below lines :
<style>
#div1 { display:none }
</style>
Not very sure on this but logically this should work!!
I have created a website for a guesthouse. www.excelhome.co.in
In it I have 4 hyperlinks in the menu bar and all of them works fine in the home page. But the same hyperlinks don't work in any other pages and this issue is only with Google chrome.
Below is the hyperlink code:
a.one
{
color:#ddd;
text-decoration:none;
}
<td align="center"; style="width:10%;">
<a class="one"; href ="Index.htm">Home</a>
</td>
With all other browsers all pages and links work fine.
You've covered the links up with a massive, positioned element with id="Layer1". The clicks aren't reaching the links because they are being intercepted by it.
Absolute positioning is something that should be used with a very, very light touch.
Remove the semi-colon from within the a (anchor) element, it is invalid and may well be causing problems.
Looking through the source code and validation summary (see http://validator.w3.org/), the majority of errors are related to misplaced semicolons within element declarations. There are also a number of obsolete attributes used which should be replaced by CSS properties (either using an inline style attribute, or external stylesheet).
I only have a tablet with me at the moment, so can't inspect in more detail, but you certainly want to look into how you manage your layout - the twenty-four non-breaking spaces should probably be replaced with margin or padding for example.