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.
Related
I have a website which was created by someone else and I have been tasked with taking over. On this website there was a sandwich style menu and a search bar in the navigation.
I have since created a mega menu (WordPress Plugin). Now the older icons are redundant and useless therefore I have applied a display: none; rule to the CSS to remove them from the frontend.
This works correctly on Safari and Chrome on Mac however it seems as though Windows users on Firefox and Chrome as well as users of Firefox on Mac can still see the icons.
Can anyone help? The website is www.quanser.com. You will see the icons in the header to the right.
header.site-header .badge-links {
display: none !important;
}
I'm using Firefox on Windows and still can see the Search and Hamburger menu icon (my first time visiting your site), this means this has nothing to do with cache. Though usually working with Wordpress, you should clear the cache after changing some CSS.
So far, I've inspected the CSS and see that this CSS block is repeated 3 times, which the last block will look like:
.header.site-header .badge-links {
position: absolute;
top: -3px;
right: -.625rem;
}
Try to find this block in your CSS, and add something like this:
.header.site-header .badge-links {
position: absolute;
top: -3px;
right: -.625rem;
display: none;
}
You don't need to `!important` in your CSS in this case.
There is a pretty efficient way for solving this:
header.site-header .badge-links {
z-index:-100;
}
#media screen and (max-width: 992px) {
header.site-header .badge-links {
z-index:100;
}
#
}
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;
}
}
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!
I have a Wordpress website built using the Sterling theme and I'm having issues with the menu displaying vertically instead of horizontally in Internet Explorer. I asked about it before here and ended up focusing on jquery errors that didn't fix the problem.
Here's a screenshot of how its showing up on IE9 for me.
Since then I tried changing the doctype to force the site to display properly but I've now realized that all the computers at work have IE9 permanently set to compatibility mode and changing that would mean going through the IT department.
I can't exactly tell my company the website looks wrong on your computers but right everywhere else and I do want to avoid errors for people using old versions of IE since the target market isn't tech savvy people, so could anyone offer advice on how I can get my menu to work right in quirks / compatibility mode?
I don't care if other aspects of the site aren't perfect but its practically unusable with the menu like that. I basically just need it to display horizontally instead of vertically, which I'm assuming is related to the CSS somehow.
EDIT: Added my CSS
The original code in the stylesheet is this
nav > ul > li {
display:inline-block;
position:relative;
}
nav > ul > li+li {
margin-left:28px;
}
And then I customised it slightly in the site options part of the theme (basically means my changes won't get overwritten when I update the theme) and my customization is:
nav > ul > li+li {
font-size:14px;
margin-left:10px
}
I think its something to do with display:inline-block; but nothing I've tried seems to make the menu horizontal again.
What css properties have you used for that ? You should do something like
#menu li {
display: block;
float: left;
width: 200px;
height: 40px;
}
#menu {
overflow: hidden;
}
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.