I want to show a popup with content in random websites.
The popup is a div I create and the content is coming from an editor with its own CSS.
Since I dont want the site CSS to effect the look of the popup I have some css to reset general things like table width inside the div that runs before the div content css.
The problem is what to do when the site uses !important on some general css like table width. I know I can add !important to the reset css so table width will reset inside the div but the content includes html/css I take from the editor which doesnt include !important. so adding !important to reset the site CSS will kill also the content CSS.
Any solution to this dreadful situation?
Related
I am using Bartik sub-them on Drupal7 and I am currently changing styles. What I have got is a n unwanted paralax-type of effect on the page. You can try it here just scroll down and you will see how the header is left in the background while the other part of the page covers it.
What do I need to chnge in the CSS to make the header stick with the page?
The position of the header on your CSS should be identified. Try making it static, absolute, relative or inherit. I'm sure that your problem concerns the position.
Im having problems with superfish menu displaying inline with "responsive design" I would like to have all superfish menu links displayed inline but im having problems that superfish for submenu override all styling that i tried and always display dropdown.
Anyone know how can i disable superfish animated dropdown on mouse hover when im browsing with less than 700 px device and display all elements inline-block of superfish menu elements, submenu and submenu elements.
Current code from website is too messy so i uploaded it here http://pastebin.com/mwPjVEPX
This is directly from site.
For first ul li elements i added display:inline-block and it works but in submenu elements, first javascript from superfish add element style display:none and visibility:hidden, and when i try to add display:inline-block to override it on first hover it went back to display none.
And here is css of superfish menu http://pastebin.com/vmYkGVx4
First of all you didn't specifically mention your code here or any link. But as i guess, all the properties you specifies to a parent, they automatically appends to its child element.
So, If you give display: inline; then its all children will get it and behave as if they are inline. So It is better to go display: inline-block;. In this case this element will behave as an inline element but itself showing as a block level element. And child will never be inline .
Despite your CSS, the Superfish JavaScript continues to run at small screen sizes. JavaScript hides and reveals things by attaching an inline style attributes to alter the CSS display property. Inline styles will always trump CSS from any other source unless you add the !important keyword like so: display: inline-block !important. That will be worth trying. However, as the JavaScript will still be trying to act on the elements, you may still find other weird behaviour arising. Please let us know how you go.
Well at the end i ended up using mobilemenu . It's javascript code that on selected width hide superfish menu and display dropdown select box. From all searches it's most reasonable to use. There are some developments on superfish menu to support touch devices but still it's not supported for "responsive design" although there are posts on various blogs talking that next step is to make it responsive, untill than i used this addon https://github.com/mattkersley/Responsive-Menu
i am creating a single TinyMCE toolbar for multiple containers & fixed it at top of all containers area, inside a div wrapper, but i have found that entire CSS of toolbar is lost,after wrapping. It appears like hyperlink urls only. Is there anyway i can apply CSS(Ui.css) link to toolbar inside a div Or any other workaround
You will need to apply the css to your main page (that is whre your toolbar is located at).
I am using Struts tiles. I have a header, menu and body. I want to have scrollbars for the menu section only. I am getting scrollbar for the whole page but want it just for the menu section.
Sounds like what you want is a scrollable div. Take a look at the following link from w3schools which provides code and an example of this very problem.
CSS solution by w3schools
Example, which you can modify, by w3schools
In the example, try changing the width of the div to 100% instead of 100px to have it be the entire width of the page.
https://gist.github.com/2354116
If you view the above page in Chrome/Firefox then everything seems to be fine. The divs at the bottom (the two headings and the social icons) are wrapped in a container div and center without issue.
If it's viewed in Safari though then these three divs are not centered at all :/
I'm not sure why this is.... can anyone help?
Note: had to assume a lot with your design so modify anything that does not fit your original design.
First off, you are not properly containing your page elements (content, carousel, footer), you currently have multiple width containers trying to reside side-by-side and that is breaking your design in multiple places.
Your content container is width:940px, your .wrapper div is width:750px, your .paramWrapper div is width:870px, your .carousel div is width:735px. You have to pick one width and stick to it and just use margin to push content accordingly across your page. I used 860px, which is the width of the span11 class.
Next, you're modifying the bootstrap.css stylesheet directly, that means that whenever the bootstrap gets updated all of your changes will be lost if you overwrite the bootstrap stylesheet, so create a another stylesheet and put all of your custom styles there and just load it "after" the bootstrap stylesheet in your header.
Now onto your original issue, the bottom .paraWrapper div is not properly stacking because you have a width of 870px set in your container and the elements within do not add up to that width:
span3 + span3 + span2 + margin = 640px
So it was not an issue or a bug, its just your layout.
Here is a fixed version that i very quickly put up so you're going to have to modify the elements to fit your design once again: http://jsfiddle.net/rzSFa/3/, here is a demo of what it looks like.
By the way, you're using the responsive bootstrap stylesheet for naught, it is currently not doing much in your case so why even use it? You can easily modify a few media queries to support my fixed version though, but yours will not work at all because you're declaring all of your own classes with custom widths so there is no point in including it.