I'm trying to add some very basic css to a list on a wordpress page where I remove the bullets and add a little padding between each list item. The list is generated by shortcode from a plugin called List-category-posts. The css works as expected on a Mac in Safari and Firefox but not Chrome.
https://annamaltz.com/writings/
.lcp_catlist li {
list-style: none;
padding-bottom: 30px;
}
When I inspect the page in Chrome, I can see that its pulling from the parent theme's style.css file but not seeing my adjustments in the child's file.
On one machine, the Empty cache and hard reload feature in Chrome reset the cached style sheet. The other machine needed to have the ~/library/Google/Chrome dumped to correct the issue.
Thanks to ty2k for the answer and j08691 for having a look.
Related
Large amounts of white-space in the body of this page - something is setting height: 4148.21875px; but cant find what.
http://wp.ewsproduction.com/backtohealth/
Wordpress site using woothemes.
Fonts don't render until developer tools are opened.
Site only behaves this way in webkit (tested in chrome, safari)
We can't seem to find the issue.
Any one have an idea?
I found one line at 2159 in style.css.
.widget_woothemes_features .features .feature .feature-content { overflow: hidden; }
It gives to feature block some 3000px height.
If I remove this rule evething is perfect!
Hope this helps!
Also I found the source of the issue with the fonts not loading until inspector is opened:
https://code.google.com/p/chromium/issues/detail?id=336476
I have created a CSS rule that's being applied to a SPAN element residing within a TD element.
The rule is supposed to add content to the span. I'm using the :after selector for doing this.
So far so good. IE8 displays everything correctly. But with my IE10 I don't see the content added to the SPAN element.
Using Internet Explorer Development Tools (F12), I can see that both rules have been disabled by IE10:
What's causing this to happen? Why are these rules disabled? There are no overriding substitution rules defined in the stylesheet to do this.
Your help is appreciated.
Inserted elements are inline by default. Try setting it to inline-block.
I ran into a similar problem today with IE10 with an :after setting for an image. Turns out I had two errors; I didn't have <!DOCTYPE html> at the top of the file, and in Compatibility View Settings the Display intranet sites in Compatibility View option was checked. After I fixed my webpage and unchecked the value the page displayed as expected.
Here is the css I am using:
.foo:after {
content: url(images/foo.png);
position: relative;
top: 2px;
left: 8px;
}
I am trying to resolve an issue with an image slider in IE9.
Please see http://betelec2.placeneuve.com/index.html
The same page is rendered using php at http://betelec2.placeneuve.com/index.php and it works fine, but the load time is slow, so the home page has been "recreated" using static content with the .html file extension.
The site is htpassword protected and the username and password are placeneuve and patali123 respectively.
The issue I am having is that in IE9, the slider is disregarding the list styles. It is displaying the images stacked one above the other (rather than in a row with overflow hidden) and it is using default unordered list styles (with bullets). Furthermore, it is ignoring the positioning of the text overlay. Finally, it is doing the same thing to the image thumbnails that appear below the slider.
If you look at the site in Chrome, FF or Safari, it works without a glitch.
IE9's developer tools are not very useful, at least for me, and I am a bit lost as to how to resolve this.
Unfortunately, I received this site from someone else who had concatenated and minified the CSS and didn't provide the original CSS, so finding the selectors is pain as well. However, the relevant CSS selectors start with .rg-ss-
Anyone able to assist would be most appreciated.
Use following:
.fatfooter2 ul li {
list-style: none outside none;
margin-bottom: 0;
display: inline; /* display inline should put your list items in line *\
}
I just finished my portfolio site, which is my first attempt with html5 and it looks great in Chrome. But when I tested it in IE and FF, exept IE9, there are some major differences that all occur in the header. I think this is because the header has a fixed position. I did this because of the menu. I created a one pager and if I didn't set the position on fixed, the menu disappeared when you clicked on a menu item.
A second error is that with IE all the images get a blue border, which doesn't appear on Chrome.
And a third error is the font in the header is also different with IE. I used an #font-face font for it.
My HTML and CSs code validates on W3C.
You can find the website at www.nathaliedehertogh.be
Can someone please help me out with this one.
All you need to do is add clear:both to #menu, and border:0 to img.
The blue outline is default in some browsers to show that the images are links.
You need a clear in your header to allow the content to flow as wanted after.
The blue border for IE simply needs a CSS setting:
img {
border: 0;
}
As for the font, some fonts don't read correctly in IE. The error I get is:
#font-face failed OpenType embedding permission check. Permission must be Installable.
You don't have a height defined in your div 'kopregel'.. this is causing an issue since you have elements with heights defined inside it.
NOTE: I see it all broken in FF, stuff is being smooshed to the right.
The problem with your header is you need the clear function in your css.
Here is the new and edited code.
#content, hr {
clear: left;
margin-left: auto;
margin-right: auto;
width: 80%;
}
No issue with fixed positions this is just a common issue, hope this helps let me know!
Another major Difference Chrome vs IE check this out
http://technofizzle.blogspot.in/2013/04/chrome-and-ie-display-image-completely.html
I'm having a problem in Google Chrome. I'm using a simple hover state on a display:block; link to change only the background:url(); property on the hover.
Google Chrome shows the actual hover change ok, but when I mouse out of the area, the background goes transparent/disappears.
Here's my CSS:
#branding #logo a {
width: 259px;
height: 201px;
border:none;
display: block;
background:url(images/logo.png) top left;
}
#branding #logo a:hover {
background:url(images/logo_hover.png) top left;
}
The actual site is here: http://beerblestudy.org. Again this is only happening for me in Chrome. Any thoughts?
It's working for me an all browsers. Try deleting your cache because it's working normally. I recomment you to delete the lines top left since they aren't necessary
Your background is disappearing in chrome here too.
I know I shouldn't "me too" on here, but this is odd and what brought me here was the same problem I'm having on a site I built recently: http://macvillain.com - the right hand column image blocks.
I tested thoroughly on most browsers (not ie6 or 7 - I've banished them) and has been fine in chrome for the past two weeks until today. Sometimes clearing cache etc works for a little while then it comes back. I don't get it...
UPDATE:
Hi I got an answer on the Google Chrome forum which said:
"Chrome uses strictly HTML5. Validate HTML code http://validator.w3.org/"
I had forgotten to do this and there were a couple of invalid things which I fixed and now all is fine and dandy.
I suggest you do the same.
Try this technique: I saw a JQuery plugin that automatically download images specified in CSS style sheets.
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/