Are there any way to use border-radius with IE6-9 ?
CSS Pie does a good job at this (and other css3 features) in IE 6-8.
IE9 supports border-radius natively.
http://css3pie.com/
Is as of yet one of the only ways, also if you are using border radius make sure you declare all 4 sides of the border like so,
border-radius: 5px 5px 5px 5px;
As this is how IE9 reads them.
Good luck.
I suggest using IE-CSS3 its very effective in working with IE6, IE7 and IE8.
Related
I have a header-menue in HTML and CSS. The left and right ending of the vertical menue should have rounded borders and a different background-image. Without the rounded-borders feature it works fine and (the right end of the menue) looks like this:
The problem occurs, when i add the "border-radius:" features in css:
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
Now the sample looks like this:
As you can see here, the colors between the allover-menue-background (comming from the left) and the right-part-background do not fit like they should (for unknown reasons only in bottom part) I have tested it with Firefox 22, Safari 6 and IE 10 - all with the same result.
Does anybody know, why this happens and how to fix it?
Thank you
Probably you will keep this kinda solution.
Otherwise - you can also achieve round corners with img's as corners...
Thank you for all your answers! I have made a jsfiddle and found out the reason for the problem myself:
Here is the jsfiddle: http://jsfiddle.net/vFTYh/
The problem is, that i have a div-container 20px below the menu. This div has a 50px shadow.
-moz-box-shadow: 0 0 50px #000;
-webkit-box-shadow: 0 0 50px#000;
box-shadow: 0 0 50px #000;
If i add this shadow, the menu-background and the left part of the menu-background get affected differently.
Given that I'm not really bothered about backwards compatibility (I'm exploring CSS3 and HTML5 based design, rather than relying on on graphics and such) what are the benefits of using css like:
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
Over just using:
box-shadow: 3px 3px 5px 6px #ccc;
The latter appears to work fine in most modern browsers (except the obvious! :p looking at you IE! Although I'll assume it probably works in IE9, but I can't test as I'm on a Mac at the moment).
Am I seeing things? Do we need to use the browser specific code above? Or are all browsers moving towards supporting the standards?
It really depends on which features and which browsers you want to fully support. Even now some browsers are lagging.
Here is a really excellent guide: http://caniuse.com/
All browsers generally move towards standards support.
There are two issues
A lot of the CSS3 rules available to us to use are still under review - i.e. not part of any standard yet.
Some people persist in using older versions of a browser, which may not have support for non-prefixed rules.
For these two reasons, we continue to use vendor-prefixed CSS rules in our stylesheets.
The only prefix you need right now is the -webkit for chrome and safari support.
Webkit is needed for -webkit-animation, -webkit-font-feature-settings, display: -webkit-flex, -webkit-filter etc..
-ms, -o and -moz provide support for browsers that even their own companies have stopped supporting.
Hey folks, I'm attempting to style a client's article h1's with a simple background color and padding. I need the text to be centered vertically and horizontally within the padding, but I'm finding there's a baseline difference between OS X and Windows. At least that's my best guess. Here's the specific code for the offending elements:
.entry-title {
color: #fff;
background: #A3BCC3;
font-size: 24px;
text-transform: uppercase;
text-align: center;
}
.normal .entry-title {
float: left;
width: 100%;
padding: 10px;
margin-bottom: 30px;
}
Here are the screenshots:
OS X: http://i54.tinypic.com/2a0bx1v.png
Windows: http://i56.tinypic.com/2gv4vie.png
You'll notice it's rendering just fine on Windows, but it's a few px too high on OS X. They render the same throughout browsers, the only difference is between the operating systems. The font is Quicksand Book, and is being implemented via #font-face. If you need to see a working version of the site, it's available at http: // angryg.nom.es/rosebud. If you do manage to check it out, you'll notice I'm having the same problem on the static content footer at the bottom of the home page.
Anyway, any help would be greatly appreciated.
You need to specify a line-height for the specific browser (painfull) use this type of properties: 1.1, etc over specifying pixels, from my experience it works better.
Also, still in the Mac, between Safari and Firefox you'll notice a difference between line-heights! So this isn't just OSX vs Windows.
Your font-files may be incorrect.
I had the same issue with a local installed webfont too.
Thankfully Google provided the same font as a webfont, solved the problem for me.
Default font of operating systems is different so add a font-family: Arial to your elements css. It should work in OSX and Windows because Arial is supported by both of them.
I am getting a horizontal scroll bar in IE6. Attached the path to zip folder. Download and open index.html page in IE6. Let me know how to remove the scroll bar.IE6-horizontal-scroll bar
Its one or more bad values in paddings. Try replacing all "padding" with "xxx" for a moment and you'll see that the problem disappears.
You also need to study the broken box model on IE.
Solution:
Replace all padding: 10px with padding: 10px 0;
Fix what does not look right (padding wise)
You need to set the horizontal padding of div#container to zero too. You're only setting the top padding in skin-ie.css to zero now. Change padding-top: 0px in skin-ie.css to padding: 0 (the px is unnecessary for zero).
tried
html{
width:100%;
overflow-x: hidden;
}
body{
width:100%;
overflow-x: hidden;
}
yet?
EDIT:
This works but hides right side edge content. See the link screenshot. http://shivanand.in/temp/rightside-edges-hidden.gif – Shivanand
Hmm, that is weird. Are you using any position: absolute DIVs with width set in pixels (not %) that are causing this to happen?
I have a website that is perfectely centered aligned. The CSS code works fine. The problem doesn't really have to do with CSS. I have headers for each page that perfectely match eachother.
However, when the content gets larger, Opera and FireFox show a scrollbar at the left so you can scroll to the content not on the screen. This makes my site jump a few pixels to the left. Thus the headers are not perfectely aligned anymore.
IE always has a scrollbar, so the site never jumps around in IE.
Does anyone know a JavaScript/CSS/HTML solution for this problem?
I use
html { overflow-y: scroll; }
To standardize the scrollbar behavior in IE and FF
FWIW: I use
html { height: 101%; }
to force scrollbars to always appear in Firefox.
Are you aligning with percentage widths or fixed widths? I'm also guessing you're applying a background to the body - I've had this problem myself.
It'll be much easier to help you if you upload the page so we can see the source code however.
#middle
{
position: relative;
margin: 0px auto 0px auto;
width: 1000px;
max-width: 1000px;
}
is my centered DIV
Well you don't need the position: relative; - it should work fine without it.
I take it that div has to be 1000px wide? It would still be a lot easier to answer this with the actual website.