This site produces an unwanted display in Firefox but fine everywhere else, i've narrowed it down to the display: block - in the element.style for the DIV Slides_Container, but can't seem to edit it no matter how hard I try. Any ideas would be great! Cheers.
While you didn't include any code. Which is very naughty:
.slides_container {
display: inline-block !important;
}
Is what you'll be wanting to add!
Related
I'm having some cross browser styling issues with a site I've just loaded up onto a wordpress html5blank child theme.
For example, here's an image layout as it is showing in Chrome -
And this is in Firefox & Safari (how it should look) -
The style code is set correctly as display: inline-block; but Chrome isn't having it.
I also have issues in Safari and Chrome regarding font-weight (showing much lighter than is set) and font-size (smaller than it should be). Is there some method and/or plugin that stops all the compatibility issues?
UPDATE -
I've placed the code on a codepen here
With some help from the responses to this, I figured it out -
.staff .brick {
display: flex;
}
You just need to add
.brick { float: left;}
I tested it in your code pen, and when I inspected the element float: left; was greyed out for some reason. Then I just added the above to your code, and it worked.
Add this to target firefox
#-moz-document url-prefix() {
.brick {
float: none;
}
}
So, the title of this question might not be very clear, but have a look at this fiddle which illustrates the problem:
http://jsfiddle.net/kcXmV/
When you run the script in a webkit browser, you'll see the .overlay div animating upwards. However, this is currently not working on Firefox. It does work in Firefox when I remove the overflow:hidden in the state-overlay class. This is necessary however for other reasons not shown in the example.
Does anyone know why this is happening and if there's a way to work around this?
If you just need the body has overflow: hidden then maybe this helps you:
body { overflow:hidden; }
body.state-overlay .overlay {
transform: none;
}
I changed the
body.state-overlay { overflow: hidden; }
to:
body { overflow: hidden; }
I tested it and it works fine, hope it helps you
i changed body.state-overlay to body .state-overlay
and now it working on chrome and firefox
Demo
I'm debugging this site and trying to sort out some issues that arise in Internet Explorer (big surprise).
I'm adding a sub-title to several links as follows:
.subtitle a:after {
content:"The Subtitle Here";
}
On all modern browsers (and IE9) the content is center aligned because the container uses text-align:center;. However, in IE8 "The Subtitle Here" is flushed left.
Is there any way to control that with CSS?
Thanks.
Turns out you can do it easily:
I added another style rule that targets the added content...
.subtitle a:after {
text-align:center;
}
I guess IE9 and other browsers inherit the text-align property for :after content but IE8 doesn't. IE always keeps it interesting...
text-align:center
didn't work for me. This is how i got it fixed in IE8. (I have a seperate style sheet for IE8)
.printIcon:after {
content: "Print" !important;
text-align: center !important;
margin-top: 25px !important;
position:relative !important;
left:25px !important;
}
Hope this helps someone.
Neither of the answers above worked for me because of an underlying issue I had. Apparently IE8 does not support ::after, I changed it to :after and it worked just as intended.
Worth checking for!
I am having an IE8 css problem on a WordPress site. The layout keeps breaking and everything shifts to the left on the home page. Of course it is driving the client crazy and I need a fix this morning. Any IE8 gurus out there that can help? http://stat-management.net
IE should have been taken out back and shot. Try adding:
body {
text-align: center;
}
#page {
text-align: left;
}
And this will fix the (quirks mode) problem.
For some reason, I have some problem with my CSS positioning on a social networking sharing tray on my site..
The even odder aspect of the problem is that it's only showing up in IE and FF..
I've tried playing with the CSS properties in FireBugg, but to no avail.
The link is here:
http://www.marioplanet.com/index.asp
The look in FF and IE makes the icons look all jumbled, while in Safari and Chrome, you can see that they are all lined up properly.
Could anyone help explain this odd phenomenon?
Try add this rule, it's image border when I view it in FF.
a.trayIcon img { border: 0px; }
I changed line 85 in default.css:
#facebookicon, #youtubeicon {
margin-left: 22.5px;
}
to
#facebookicon, #youtubeicon {
margin-left: 17px;
}
and it looks like chrome.