How to stop all CSS overrides on a container DIV?

Tags: javascript,html,css

Problem :

I have a container div which i add to external websites using a bookmarklet to do some functions, the problem i face that this div contains some elements and each element has its inline style, but when i put in the external site, sometimes it overrides styles from the site CSS.

There is a way to stop any overrides on this div?

Solution :

you can define css properites within the element to be able to display your div properly e.g.

<div style="margin:0;border:1px solid red;">

Or additionally you can supply your css styles with your Div html as well.

I know its a pain when the "external" site has css global rules; e.g

ul ( margin-left: 5px; } 

the best I could do was to reset all these things for my div id.


Yes, I understand that he has inline styles but the problem is caused by global rules. So e.g. if @Amr ElGarhy's div has ULs, they will all get left margin of 5px (as I exampled above). and Amr ElGarhy has to reset this margin in inline styles as well.

    CSS Howto..

    How to get the first parent that has a certain CSS property using jQuery?

    How can one create horizontal tree view using CSS and HTML?

    How to set a CSS property with a variable in JQuery?

    How can I create a searchbar like this?

    How to make an overlay using css hover on another element and pseudo class ::before

    how to indent html output using CSS

    How should I escape image URLs for CSS?

    How to modify “sign in” page using CSS?

    How to push image (behind canvas) to front in order for its onclick function to work

    How do you make HTML elements appear on a vertical line using CSS?

    How can I center my text on top of an image, given that it's responsive?

    How to add objects in a DIV and appear above the DIV

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    HTML/CSS How to auto-adjust the width of my container in order to show several images horizontally displayed?

    How to put the div at the center with css?

    How to exclude an HTML element form Ionic CSS

    How to clear the (CSS) visited history of an Android WebView?

    How to keep div same height at all times

    How to properly use CSS in GWTP?

    Disappearing div using JQuery - how do I stop it from reloading next time a page is opened

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    How to wrap a div vertically and then horizontally

    Showing images in placeholder on focus

    CSS How to make element in the middle to shrink before its sibling jumps down

    how to remain the style of GUI component after disabling it in javafx?

    How to break CSS inheritance?

    How can I change color of visited cgridview row?

    image carousel showing all images

    how to create arrow between two background images in css

    How to develop a solid CSS strategy?