Obviously for Chrome, Firefox, and Safari (which use CSS 3) you would do
margin-left:auto;
margin-right:auto;
But how can I perfectly center in IE8?
This code already works in IE8, IE7 and IE6, and people have been using them to center things for a good long while now. Have you tried your code before assuming that the margin properties are new to CSS3 (when in actual fact they have been around since CSS1) or that just because something is part of CSS3 automatically means IE8 and older won't recognize it?
If that code doesn't work for you in IE, your page is probably being displayed in quirks mode.
Related
I'm using a responsively-sized SVG clipPath to mask fixed-position divs with image backgrounds. This was all working fine (Firefox, Chrome, IE & Opera) until it was pointed out to me that it was failing in Safari. After several hours, I realised that Safari was only applying the SVG clipPath to one of the three divs it was supposed to. I googled it on Bing and found this question which is essentially the same thing but with no answer; just a comment to try forcing CSS hardware acceleration (-webkit-transform:translateZ(1px) / -webkit-transform:translate3d(0, 0, 0)).
I did that, and POW! it totally works for Safari... but now looks utterly messed up in Chrome. It's as if the repainting has gone totally out of whack (I scroll up and down, and the distorted, choppy effect in Chrome is different every time).
The problem is that both Chrome & Safari are WebKit-based, so I guess vendor prefixes aren't really going to help me here?
For reference, here's how it should look (screenshot from FF, currently looks the same in Safari):
And here's how it looks in Chrome with CSS hardware acceleration:
Ideally, I need to either a) stop the awful repaint issue in Chrome, or b) find an alternate fix for the clipPath not working on multiple elements in Safari.
Although it is a bit hacky, I found a Chrome-specific #supports query on BrowserHacks:
#supports (-webkit-appearance:none) {
#introwrapper .slide:not(:last-child) {
-webkit-transform: none;
}
}
This #supports query only targets Chrome >28 and Opera >14, and removes the translate3d(0, 0, 0) transform that was screwing up Chrome's repaints, but retains the CSS hardware acceleration for Safari.
I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox.
I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though.
I was checking the site on Safari and I noticed that my menu bar, which uses an unordered list with column-count (both -moz- and -webkit- with the same value), and noticed that there is a difference between the filling of the columns.
Chrome seems to fill the columns evenly while Safari just fills the columns one by one. The images below illustrate this.
Chrome renders:
Safari renders:
I very much like the Chrome way of rendering the columns, so I was wondering if there is a way to force Safari to render the site this way, possibly without altering the html layout at all.
notes: Firefox renders the same as Chrome and needs no fixing. I'm not developing for IE, so I don't know how that renders.
I had the same issue but min-height didn't work. I had the column-count set on a Bootstrap .col-md-12 container and this was the issue for me.
I added a child div with the class required and it worked perfectly
add a min-height to <ul> seems to fix the issue
nav ul { ... min-height:50px; } /* < add */
tested on Safari 5.1.7 (7534.57.2) for PC
bug is referenced here too: http://css-tricks.com/forums/discussion/12904/safari-5-1-multi-column-bug-extra-columns-appear-/p1
I had a similar problem with the columns content showing up on Safari with a height of 1px. I added "min-height: 100%" to the element and all looks good. I also have "height: 100%" on the body/html and containing elements, assuming this is how I got it to work properly.
I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. Can´t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.
I am using a custom scrollbar for webkit browsers. The thing is that when the browser supports webkit. I want it to remove the border I have around the entire body.
I got it to work by using -webkit-box-sizing on the right div and a negative margin value as you can see in the fiddle: http://jsfiddle.net/Yfw49/1/
And it works really great except for browsers that supports box-sizing but not webkit scrollbars. For example mobile browsers that don't have scrollbars at all.
Is there a way to make it work? I tried a jQuery method that asked if the browser supported webkit, and if so, remove the div. But that made the div appear for a short while and then removed it. It looked bad.
Please have a look at the jsfiddle http://jsfiddle.net/Yfw49/1/
(I know I could make the markup cleaner without all the elements. But let's focus on the other problem)
In the photography portfolio linked below, clicking on individual images renders the photo at a max-height of 90% of the browser window. In Safari, Firefox, and Chrome. But IE9 seems to ignore this command entirely and the user must scroll to see any portrait oriented photo in its entirety.
I've googled workarounds, but haven't found any that apply to IE9. Mostly I found Javacript expressions in the stylesheet suggested as workarounds for IE6. Is there a less "expensive" workaround for IE9? Or is it no longer a problem (which is why I can't find anything) and I just have a browser setting wrong?
Here's an example of an image that renders properly in Chrome, Firefox, & Safari - but you have to scroll in IE9: http://russmoorephotography.com/#/portfolio/state-capitol-aisle-capitol-dome/
Edit: this actually doesn't work in Firefox either. Just Chrome & Safari.