I have what seems like a bug in a Django CMS website -- below a certain breakpoint (±730) all text content inside placeholder tags turns red. I have commented out all custom CSS stylesheets, removed links to external style sheets and all inline styling to try and pinpoint what is causing it by process of elimination, but no luck. I've stripped the website down to its bare bones but the text is still red. Is there maybe a specific way to style placeholders that I'm not familiar with??
ETA: I've hard refreshed after removing CSS and tried different browsers too. I've also pinned down the line which is responsible for this behaviour - the content placeholder tag underlined here. If the line is there, all the text on the page is red, if it's commented out the text on the rest of the page is normal (but the actual block content is missing). Any ideas why this is happening/how to fix? click here for the code causing the bahaviour
Related
I can't figure out this issue and I have tried looking this up and it is hard to find any one with this scenario. I am using a master page with two content pages. The first content page is default.aspx, of course. The master page has a png that is a banner. This has a rule that makes it responsive in a separate CSS file. This works fine.
For the first content page, I have three buttons that are styled using CSS ( they are custom buttons I made in a vector graphics program that change appearance when they are pressed, all using CSS ) and they are responsive. There is also a listbox that is styled and responsive with CSS.
The layout of the default page is like this: Two div containers: one that floats left and one that floats right. CSS is used to make these containers responsive. In the right div, I have my buttons and they are enclosed in their own divs. So .. and so on. Of course, the listbox is handled the same way with a div that encloses that as well.
Moving on to the second page, I have the same basic structure as the default page. My intention is to have in the right div an image, followed by a text box, then an image, and a text box. The left div will contain the same content that the default page has.
At this point, I have added to the second content page the list box and the CSS is working as expected. The list box looks just like it did on the default page and is responsive as well. So the CSS is working. For the first image, I need a new CSS rule. So I go to my CSS rule and add a new rule .image{ width: 100%; height: auto; } and then I add my image and set it up with the class reference and the image. It does not work. This image is in it's own div. If I change the class of the image to another class that was created previously, the image is responsive. So I can use the banner CSS rule and the image is responsive, I can use the button CSS rules and the image is responsive, it behaves like a button ( clicking on it makes it change its appearance, that kind of thing ), I can even add the rules for the list box and the image is responsive. If I then go back and try to use the rule for image, it doesn't work anymore.
Any ideas on what is going on. It is not making any sense what so ever. I added the rule to the CSS file just like I did with all the other rules but for some reason, this rule is not working at all.
Thank you guys for any help. I can post code if you guys need it, but I don't see how that would help. My image for the second content page is identical to how I did the banner and the rules for the banner and the image are virtually identical, except percentages are different. This is just super weird.
To improve the performance, browsers save the css files in their cache and use their cache. If they don't do that, the browser has to keep loading the css file every time a page is using the css file.
If you clear your browser cache, you will notice that the new style gets applied.
If you are developing commercial software, you probably don't want to tell every user to clear their browser cache and you prefer to force the browser to load the new css file. On the other hand, once the css is loaded you would like the browser to cache it, because it will improve the performance.
There is a trick to achieve that!
Let's say your style file is called mystyle.css and you have a link to the style file in your web site like this:
<link rel="stylesheet" type="text/css" href="~/mystyle.css">
To force the browser to load the file again, you need to change link and the standard practice is to use a parameter in the url (usually a version number).
like this:
<link rel="stylesheet" type="text/css" href="~/mystyle.css?version=1.00">
Your style file is going to ignore that version parameter but the browser will notice a change in the link and will load the new style file. Basically, the browser stores the link to the file and if you change the version number, since the link does not match with what your browser has in its cache, it will force the browser to load the file again.
Whenever I am trying to include an .html page (which contain a navigation bar in bootstrap code) in my jsp page, then it doesn't show all the details on navigation bar. But whenever I tried to include it in a separate single page, it shows everything. It is clear that there might be a conflicting .css file, because I have some code in my jsp file.
How can I fix this?
Without being able to examine the css in question myself (which might help matters) all I can really do is advise how to examine CSS.
Using Google Chrome, the best way to figure out CSS conflicts is to right click on an element - e.g. the problematic nav bar - and click Inspect Element.
This should bring up a bar similar to the one shown here:
Note the styling details on the left - it allows you to easily trace where the CSS that affects the element you've inspected comes from. More importantly, it also has a line through 'padding:.6em .8em;' - this is an overridden style, and the padding a bit further below which has no underlines is the style that overrides it.
If you're having CSS problems like this, you should be able to trace which styles are being overridden using the chrome inspect window. If you post your CSS, I might be able to be a bit more specific.
I've been encountering a strange glitch in TinyMCE on WordPress; it will add it's own inline stylings to elements, particularly when I change the block type of it's parent. It appears to be due in part to having a custom editor stylesheet; as disabling it negates the problem.
Example case: I had a number of links, one per line, all with a special class on them (the class is configured to only apply to anchor tags). When I select that list of links and convert it to an unordered list, it applies inline styles to the links themselves, hard coding an (inaccurate) font size and adding a background colour to match that of the body.
I've added save filters that strip it out when being saved, but I'm baffled as to how it's doing this in the first place.
Any ideas?
Use this :
var textContent = tinymce.activeEditor.getContent();
to get html content from editor and then save. It will give you filtered html content.
I was also facing the same issue but after using this everything is working fine.
I cannot get hyperlinks to show up as an overlay (or watermark) in front of an image, as they should. Instead, I believe something is being overwritten by my WordPress theme's CSS, leaving plain HTML hyperlinks below the image.
Here is what my page looks like:
But here's what it's supposed to look like:
Here is what Chrome Inspect Element is telling me (Full image):
Here is what Firebug is telling me (Full image):
Unfortunately, I'm clueless with CSS. I believe my WordPress default theme is overriding some important settings, but I'm unsure what/how to adjust things. I can simply add !important clauses to things in my custom CSS, but I'm unsure as to what to put or how to put it.
Here is the stylesheet associated with my website, and here is a website that has the exact same thing I have, except it's functioning properly.
Any guidance in this regard would be greatly appreciated!
I've ported the Wordpress app from wordpress.org to my web site. I've changed the html and the css to conform to my existing design. I've placed the entry data in my 'main' div, which has a left margin of 19em to keep it to the right of my navigation div. This margin appears to be overridden somehow by the generated html within the 'main' div. I've patched some of the elements by adding the margin back to them, but would prefer a cleaner fix. I've looked at the page using Firebug, but I can't identify the appropriate entry. What is overriding my margin setting?
The problem page is here. Notice the Tags at the bottom.
Another page that doesn't use WordPress code doesn't have this problem. It is here.
Thanks for any help
I want to keep my acceptance rate high so I don't appear ungrateful for all the great help on this site. The answer was that the css was defined as a class and the html was using 'id='. Sometimes it helps to make sure the computer is plugged in.