I am wanting to implement Thickbox, which I have done a number of times.
My issue is that I am doing some jQuery like:
$('#txtData').load('aerialProductListing.inc');
and when this happens, the CSS is lost.
How can I get the stylesheet recognized again? or can i do something inline to work around?
Edit: txtData is simple:
<div id='txtData'><p></p></div>
aerialproductListing.inc is simple HTML and PHP, nothing fancy and to long to post, but the Thickbox piece isL
US Tip Chart
If a <style type="text/css"></style> element is declared inside the #txtData element, it will be gone after $('#txtData').load(...).
Related
html
<div id="mydiv"></div>
I want to add HTML code into this div (see following result I want) using ONLY CSS
<div id="mydiv">Lorem</div>
I think :after and :before are not helpful here!
CSS is not HTML. It is not possible to achieve that as CSS is not a markup language.
Just to add you can add content but not the element using :before or :after pseudo-element. Refer the specs
You shouldn't do this for many reasons.
Firstly its just wrong.
Secondly it is not possible.
Css is not for markup html is.
and I dont even understand why you would want to do this at all.
You can use content (just for text) in a couple of browsers but it's a really bad idea. Please solve this differently e.g. with Javascript, you'll need to for HTML anyway.
I want a background image on my page (background.png), but some rogue CSS is thwarting me.
I can see that my style.css from line 39 is being overwritten. I would think this is being done by something like style.css. I search and do not find anything but my original desired specification in that file. I can not find out what css is doing the overriding.
I have searched all the css files I can think of for the specified image (bg_p2_28.jpg). I have searched all the css files for background, nothing seems to come up. It is not being specified in the main HTML
I am barely struggling through as a reasonably competent programmer that has not used HTML since the mid 1990's. I am just trying to modify a template I bought.
What techniques can I use, or how do I interpret what I have here shown here to figure out what CSS override is ultimately being pushed into the page?
EDIT:
Adding the !important; works. It feels very dirty for some reason. I do not know why. I have tried following the javascript in, but the debugger is confusing to the uninitiated. Is the Important! a terrible thing to do, or reasonable? I think it would be useful to understand where these are being set in the java code, but when I search the code, I think the values are stored in variable, so can only be caught at run time.
That's coming from the inline style="" attribute.
If you don't see it in the HTML source, it's probably being set by Javascript.
You can right-click the element in the inspector and click Break on Attribute Modifications to find out where.
You could try background: url(src) !important;, not the perfect solution, but i think it will work for you in this case.
The grey element.style means that it's a style attribute directly on the element itself. Any style on an element will override styles from style sheets unless the sytlesheet style is marked with !important
I know that's a switch eh?
But here's the page:
http://www.websitessandiego.com/UBHS/StoriesandPeople/CaseJames&Helena.html
I just cannot figure out why the tag isn't coming out. When I look at it using firebug I see all the cufon crap... what is that?
I used a template I bought off of themeforest.net
I've never seen anything like this... any ideas?
thanks
turns out - it's cufon. it's a js script that is over-riding the css.
I have a web application made in ASP.Net. Well, I have a few jquery server controls I made. Well, I just now started to bother with getting a "proper" jquery running with a theme and everything. So I replaced my old default jquery theme with a custom one and such and now everything is completely different.
From firebug it says that everything I assign just about is getting reset by .ui-helper-reset inside of jquery. How do I prevent this from happening? I would like to be able to set like font-size and such as the <body> level and not have to worry about it for each individual element, but it seems to reset the font size to something much larger than I use. the computed font-height is 17px!
I'm not understanding why it would do a CSS reset on each individual element that I add with jquery...
Edit:
Ok, I just figured out some silly mistake for why my site "was" working. Well, I didn't include the theme's style sheet in the page. Now I have it included and thus I have the problems. But my problem still stands. I don't understand why the CSS Reset is happening on each element.
Just a wild guess ...
How about applying your css AFTER it has been reset with jquery? Perhaps with:
$(document).ready(function() {
var mycss = document.createElement("link");
$(mycss).attr("rel", "stylesheet").attr("type", "text/css").attr("href", 'your-css-filename');
});
If $(document).ready is still early, you can put the code inside a function and call it with setTimeout().
For the past few years, I've been developing sites with Eric Meyer's CSS resets. I love it and will never look back. I never even thought of looking back. But then today, we implemented a Telerik Rad Editor control. Unfortunately the CSS resets break the internal layout of the Rad Editor as well. Is there some way to prevent the resets from cascading down into the Rad Editor.
Thanks in advance.
We use the RadEditor extensively in our application, and have found similar issues with it. I've been working with the editor CSS code for almost 2 years now, and have found it to be fairly easy to overcome these issues.
Firstly, are you using a custom skin for the editor? This is the best way to overcome these issues. If you aren't you can simply add one by copying an existing theme and renaming it. This will allow you to modify the CSS in an external file, rather than trying to fiddle with overriding the stylesheet the is embedded in the Telerik assembly.
After that, it's going to be a simple matter of isolating which styles are causing the issues. I'm guessing from your comments that the buttons are not rendering correctly, most likely because your reset stylesheet is overriding the default list styles. I would use firebug to see where the reset file is overriding styles defined in the stylesheet.
Most likely it's because there is no style definition at all for things that are being reset, as anything defined in the Telerik stylesheets would be more specific than the reset styles, as they would contain a preceeding class name, which would increase the CSS specificity by 10.
If you could provide more specifics, I'd be happy to try to help more.
Hardly, as there are no "excluding" statements in CSS. You would have to re-introduce the things the reset stylesheet removes.
But from experience, I'm quite sure the reason for the screwup is just one or two things going awry. It may be possible to examine and fix them in reasonable time.
You could use an iframe to delineate the CSS contexts. But, it makes some things harder.
No. That's one of inherent problems with CSS reset.
That's a $1000 control?! Perhaps you should give them a call and request making it compatible with CSS reset.
Reset makes some deprecated attributes from Transitional HTML unusable, but "industry's best" editor shouldn't be relying on these. Everything else is fixable with appropriate stylesheet.
Actually, you can specifiy specific CSS files for the RAD Editor to reference when it loads up. Just create a CSS file that adds in what the reset takes away and only the RAD Editor will reference that CSS file.
For example this editor will refence a specific file called 'radEditor.css" when it loads on a page.
<telerik:RadEditor ID="RadEditor1" runat="server" AllowScripts="True">
<Content>
</Content>
<CssFiles>
<telerik:EditorCssFile Value="~/css/radEditor.css" />
</CssFiles>
</telerik:RadEditor>
Good luck, and hope this helps some.
You can find out what are the default values for the element (make an unstyled page with only the element and check with Firefox's DOM Inspector), then add the rules again at the end of your stylesheet with !important added to every rule.
If you're trying to work out the styles the elements started with you could refer to one of the popular browser's default stylesheets - for example, here's the WebKit one for HTML. I presume from the markup you can narrow it down to just a few elements?
Edit: Here's the Gecko one.
I'm just adding this here for reference. Twitter Bootstrap makes most of the buttons disappear. Here is the fix. The EditorCssFile is just used to change the background color of the editor back to white.
<style type="text/css">
.telerik img {
max-width:none;
}
</style>
<div class="telerik">
<telerik:RadEditor ID="RadEditor1" BackColor="White" ToolbarMode="RibbonBar" runat="server">
<CssFiles>
<telerik:EditorCssFile Value="/assets/css/editorContentArea.css" />
</CssFiles>
</telerik:RadEditor>
</div>