I have a pure CSS mouseover slider fully functional here http://jsfiddle.net/gU4sw/13/ .
When I add this code to my wordpress page, it doesn't work... :(
Can someone please check to see if there a quick fix or explanation for this?
P.S: By the way, I was able to install the same exact slider code on another wordpress installation without any problems, yet it doesn't work for this installation for some reason :(
Your css rules are missing your wordpress css thats the main issue you are facing. In fiddle the css is working on hover but in wordpress css its not present try to check you css again.
Update:
In you css rule is not closed at line 499. right curly brace } is missing thats why below this rule all css is ignoring.
.abul { list-style-image:url(/wp-content/themes/Chameleon/images/barrow.gif);
try to close this and see whether css will work or not. I have tested in FF firebug your desired css is not including.
Related
After updating to antd 3.10 I'v noticed many of my icons are now misaligned:
Not sure why this is happening, I'v disabled all css besides antd.css but it's happening, even on a blank page (not necessarily in a modal).
Thing is I cannot reproduce this in a codepen with the same version, i've inspected everything in the browser inspector to check all the styles being applied and everything seems the same, and I am all out of troubleshooting idea.
Any ideas as to what could have caused this?
Update:
I rolled back to antd 3.0.0 and everything is fine. It definitely something has to do with the new svg icons. I still cannot replicate this outside of my environment. I am very much still interested in a solution to this.
This issue has nothing to do with webpack config - you need to add <!DOCTYPE html> at the top of your page. This is also why you can't reproduce it in codepen - doctype is specified even inside sandbox frame there.
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
Stewartside helped me use JQuery to create a specific function for my main navigation on my website (thanks again!). I created a child theme to add the changes to my header.php file and it has started to cause a weird layout change. My homepage should have 20px padding, which is NOT a special CSS modification, but the child theme automatically removes it. This doesn't happen with other pages on my site, just the homepage. I have also added/removed the jquery code to make sure that wasn't the problem; the style.css file for the child theme only has the "child theme" coding, no modified CSS.
Homepage: http://bostonirishclothing.com
About Us: http://bostonirishclothing.com/about-us
Is there anything that would cause this?
Get the Firebug add on for your browser (available on Chrome and Firefox). Then right click the section that is causing the issue and you can see the coding and all the relevant CSS functions including the files they are in (to the chosen section). It will also show which CSS function is being prioritised compared to the other. Then you can modify the functions or add new ones to make it work.
A dirty way to do things is to use !important however this should only be used sparingly as it can screw with other pages. An easy way to avoid that is to make the CSS function for example .entry-content { color:#fff; } becomes .post-x .entry-content { color:fff!important; }
Test things out. Firebug is amazing help when editing CSS. You can even do some of the tests in firebug itself.
So I put the ie7 conditional comment in my head tag directly underneath the comment to pull up the original style.css file:
Then I made a css file called ie7.css made a few changes in the css...
Checked IE7 to look at the site http://www.sgconstruction.org and no changes were visible...
I have no idea why it's not making any changes. Any help would be greatly appreciated. Thank you!
You have multiple calls to stylesheet links. After your IE7 conditional, the main style sheet (themes/SG/style.css) is called again, making your conditional stylesheet pointless (at it's current location).
For people who come late, I think this is a better, more up to date way to go about targeting specific versions of IE: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
I installed the latest version of Wordpress and added the WP-Syntax plugin (and also the Markdown Extra plugin, but I think it's unrelated to this issue).
It works perfectly with both themes that ship with Wordpress: looking good using WordPress Default 1.6 and looking equally good with the WordPress Classic 1.5 theme.
However it doesn't work with the excellent LightWord theme, which I would like to use. The code box looks strange with the right border at the end of the actual code:
My thoughts:
I have tried investigating this with Firebug without any success. The CSS from the WP-Syntax plugin should be the same in all three theme cases. So the fact that it looks wierd with this theme has to do with some inherited CSS property from the LightWord theme.
This in turn probably means that the WP-Syntax plugin should reset something more for its CSS to work correctly.
Help!
Advanced CSS isn't something I'm good at. But I would very much like to resolve this problem as soon as possible. I'm also curious from a technical view point what could be causing this behavior? I hope someone with good CSS skills will be able to help out!
We (you if you want to, me if you don't feel like it) could then file a bug report in the appropriate place, to get these components working together.
To resolve this I understand you need more than screenshots. I have a link with the problem theme, which could be used to investigate further.
Web site where the problem may be experienced (Taken down as the problem is solved)
Edit: In response to a comment I'm also including a link to the working web site using the classic theme and the same plugin setup: Link to a working theme with these plugins (Taken down as the problem is solved)
Thank you for reading!
Summary of problems I'd like to solve:
What's the best way to get rid of the right and bottom inner border in the code box? I first noticed the right border, but the bottom border is also an eye sore.
The code box right border isn't visible. It's due to .wp_syntax {width:100%;} and if I set it to 99% it's visible again. Do you consider this to be a problem with the theme or the plugin?
Making changes in the theme (style.css) or the plugin (wp-syntax.css) would be preferred if that's possible, so one of them could be standard. But which one? And how?
The problems you are having are due to the stylesheets of WP-Syntax and LightWord interfering with each other. I don't really think that the problems are with the theme or the plugin, they are just down to how the two interact with each other.
To make all of the required changes, ideally you would edit styles in both wp-syntax.css and style.css. You can however cheat a little.
In style.css add the following:
.wp_syntax { width:auto; }
.wp_syntax table { border:0 !important; }
.wp_syntax table td { border:0 !important; }
These changes should solve all of the problems, with the benefit of keeping all of the changes localised to a single file (style.css of the LightWood theme). The other tables in the example should all remain unchanged as well.