I'm having issues with rounded corners in IE8. I've tried a few methods without success.
Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 2px;
margin: 2px;
color: #505050;
line-height: normal;
}
p {
margin: 4px;
}
.categoryheading3 {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background-color: #297BB6;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
padding: 8px 0;
text-align: center;
margin: 0px;
}
.leftcolumn {
width: 174px;
padding: 8px;
float: left;
display: inline-block;
background-color: transparent;
/*--min-height: 500px*/
overflow: hidden;
}
.lefttop {
display: inline-block;
width: inherit;
margin: 0 5px 2em 0;
float: left;
width: 160px;
background-color: #FFFFFF;
border: 2px solid #297BB6;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="leftcolumn">
<div class="lefttop">
<H4 class="categoryheading3">Heading</H4>
<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
</div>
</div>
</body>
</html>
Which produces this in Firefox:
But this in IE8:
If anyone has any tips I'd be very grateful!
edit: Joseph helped by suggesting to use pie.htc, however I'm still struggling with this element not working:
.categoryheading3 {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
behavior: url(PIE.htc);
background-color: #297BB6;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
padding: 8px 0;
text-align: center;
margin: 0px;
}
Internet Explorer (under version 9) does not natively support rounded corners.
There's an amazing script that will magically add it for you: CSS3 PIE.
I've used it a lot of times, with amazing results.
Rounded corners in IE8
Internet Explorer 8 (and earlier versions) doesn't support rounded corners, however there are few other solutions you may consider:
Use Rounded Corners Images instead (this generator is a good resource)
Use a jQuery Corner plugin from here
Use a very good script called CSS3 PIE from here (Pro's & Con's here)
Checkout CSS Juice from here
Another good script is IE-CSS3 from here
Even though CSS PIE is the most popular solution, I'm suggesting you to review all other solutions and choose what works best for your needs.
Hope it was useful. Good Luck!
I didnt know about css3pie.com, a very useful site after seeing this post:
But what after testing it out it didnt work for me either. However I found that wrapping it in the .PHP file worked fine. So instead of:
behavior: url(PIE.htc);
use this:
behavior: url(PIE.php);
I put mine in a folder called jquery, so mine was:
behavior: url(jquery/PIE.php);
So goto their downloads or get it here:
http://css3pie.com/download-latest
And use their PHP file. Inside the PHP file it explains that some servers are not configured for proper .HTC usage. And that was the problem I had.
Try it! I did, it works. Hope this helps others out too.
http://fetchak.com/ie-css3/ works for IE 6+. Use this if css3pie doesn't work for you.
PIE.htc worked for me great (http://css3pie.com/), but with one issue:
You should write absolute path to PIE.htc. It hasn't worked for me when I used relative path.
As Internet Explorer doesn't natively support rounded corners.
So a better cross-browser way to handle it would be to use rounded-corner images at the corners. Many famous websites use this approach.
You can also find rounded image generators around the web. One such link is http://www.generateit.net/rounded-corner/
Related
if Chrome is look like this:
.text-center {
text-align: -webkit-center;
}
and firefox:
.text-center {
text-align: -moz-center;
}
how about in opera?
.text-center {
text-align: -o-center;
}
is not working.
UPDATE:
HTML:
.container
.text-center.label-margin
%h3
.bubble LEADERSHIP
CSS of my bubble class.
.bubble {
position: relative;
width: 170px;
height: 45px;
padding: 11px 0 0 0 !important;
background-color: #333333 !important;
font-style: normal !important;
font-family: 'Fira Sans', sans-serif;
font-size: 25px;
font-weight: 600;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
}
it looks like in OPera
You do not need to prefix the text-align property. You can simply use:
text-align:center;
instead (which should work on all browsers).
Further Reading:
W3.org documentation on the text-align property.
Here's quite a nice CSS-Tricks article that you might find useful.
If we're talking about any property, caniuse... is one of the 'best' browser compatibility websites out there, with info on nearly all css properties.
Please also note: Border-radius does not require prefixing (and hasn't done for quite some time now), whilst using !important is considered bad practise, so I would personally advise to get out of the habit of using it.
Try like this: Demo
.center{
text-align-center;
}
No need to use specifically for all the browsers,as its almost accepted by all browser
Is it possible to create a border like the flowing image with css? Any hints will be appreciated
#sidebar h4, #sidebar-alt h4 {
background:url('images/widget-title-bg.png');
color: #333333;
font-size: 22px;
font-family: Arial, sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
padding: 7px 0px 11px 0px;
}
EDIT: Made some changes according to your comments. Try:
<h1 id="progress">
<i></i>Recent Posts
</h1>
#progress {
display: block;
max-width: 200px;
min-width: 150px;
position: relative;
margin: 50px auto 0;
padding: 0 3px;
border-bottom: 10px solid #ECECEC;
font: bold 26px 'Dancing Script', cursive;
}
#progress i {
display: block;
position: absolute;
width: .8em;
height: 10px;
left: 0;
bottom: -10px;
background-color: #4287F4;
}
http://jsfiddle.net/userdude/z45QJ/4/
I'm not a big fan of the position manipulation, but all browsers should support and display this nearly identically, the only possible problem being the font's displa may be slightly differently in different browsers. However, IE7-9 should interpret everything else just fine.
Too bad the whole wuuurld isn't on WebKit:
<div id="progress"></div>
#progress {
width: 300px;
height: 10px;
border: none;
background-color: #ECECEC;
border-left: solid #4287F4;
box-shadow:inset 2px 0 white;
-webkit-animation: slide 10s linear infinite;
}
#-webkit-keyframes slide {
from {
border-left-width: 0;
width: 300px;
} to {
border-left-width: 300px;
width: 0;
}
}
http://jsfiddle.net/userdude/z45QJ/1
It could be adjusted to go both ways. However, it only works on WebKit browsers (Chrome, Safari [?]). If that's ok, let me know and I'll add the return trip.
There are four ways to do it. I demonstrate four ways in this JSFiddle, and here are some explanations.
If you're not sure, just use Method B.
Method A
Method A has the advantage that it's the most compatible but the disadvantage that it requires extra HTML. Basically, you're giving an outer div the blue border and an inner div the white border. Your HTML will look something like this:
<div class="methodA">
<div class="container">
Method A
</div>
</div>
Your CSS will look like this:
.methodA {
border-left: 10px solid blue;
}
.methodA .container {
height: 100%;
border-left: 10px solid white;
}
Method B
Method B has the advantage that there's no extra HTML, but the disadvantage is that it won't work in IE before version 9.
.methodB {
border-left: 10px solid blue;
-webkit-box-shadow: inset 10px 0 white;
-moz-box-shadow: inset 10px 0 white;
box-shadow: inset 10px 0 white;
}
You can mitigate IE's compatibility issues using CSS3 PIE, which makes box shadows behave in Internet Explorer (along with other CSS3 features).
Methods C and D
This JSFiddle shows two other methods, which I won't describe in as much detail, but...
Method C makes the blue border a shadow. As a result, it can "cover" other elements and it also changes the size of the element. I don't love this solution, but it might work for you. It also suffers the compatibility issues of Method B.
Method D puts two divs inside of the element: one for the blue border and one for the right border.
it is not really complicate and no extra HTML is needed.
h4:after {
display:block;
content: '';
height:4px;
width: 1px;
border:0px solid #ececec;
border-left-width: 10px;
border-left-color:#4287F4;
border-right-width: 90px;
}
http://jsfiddle.net/N27CH/
Check this link Visit
(http://jsfiddle.net/qD4zd/1/).
See if it helps. This tells you about the application of gradient. See how it is done.
Also why not use directly the images that you want as the border.
Check out for "Gradient" in Css. This might answer your question.
I studied some usage of "canvas" tag in HTML5. That is preety much informative about gradient specification and is also more readable than the traditionl HTML4. So for this question i also want to request the questioner to look at the "canvas" tag in HTML5. check the link below.
Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers
Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas
Second link is more awesome. Cheers.:)
I need some advice on a simple CSS tooltip. I have a calendar on a site that is rendered within a table. People can add events to this calendar. I have added CSS so that when you hover over a date, it will display the event, or events for that date. Within the table, I have this for each date cell with an "event":
<td class="eventDate" id="2011-08-24" title="2011-08-24">
24
<span class="tooltip">
<img class="infoImg" src="./images/info.png" width="16" height="16">
<i>Today's Events</i>:
<br>
This is an event.
<span class="noOfDays">[ 3 days ]</span>
</span>
</td>
And, this is what I have for my CSS (found the technique via a Google search):
td.eventDate {
position: relative;
z-index: 24;
background-color: #afafaf;
color: #000;
padding: 2px 4px 2px 4px;
text-align: right;
font-size: 36px;
font-family: Georgia;
}
td.eventDate:hover {
z-index: 25;
cursor: default;
}
td.eventDate span.tooltip {
display: none;
}
td.eventDate:hover span.tooltip {
display: block;
position: absolute;
top: 5.3em;
left: 28.5em;
width: auto;
color:#3e3e3e;
border:1px solid #3e3e3e;
background-color: #efefef;
padding: 4px 8px 4px 8px;
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: .4em;
font-weight: 700;
text-align: left;
z-index: 100;
}
span.noOfDays {
font-size: 11px;
padding: 0px 0px 0px 6px;
}
This works perfectly for any Mozilla based web browser; however, when I move to Safari, Chrome or IE (I haven't tried it in Opera yet), it is all wonky. For one thing. the size of the tooltip box seems constrained to the size of the table cell, making my events wrap all over the place. Also, the positioning of the tooltip box when it is "revealed" seems relative to the table cell in which the event span is placed, and not aligned with the top-right of the calendar table.
Can anybody see what I am doing wrong? Should this not be working in Mozilla either? Are there any other very simple, and lightweight tooltip techniques I can use that you would suggest? I was trying to stay away from JavaScript/JQuery/etc. as I wanted to keep this pretty light, but I may have to switch over if I cannot get this to work with CSS. Any, and all advice is appreciated.
Thanks for taking the time to read, and have a great day. :-)
Why not use a simple jquery tooltip script. easy to implement and will be set up under 1 minute.
try Tiptip or Qtip in google. Will safe you some time
i wanted to know if i can change the background color of the of hovering option using css only. I am not bothered about browser compatibility. But give me a solution that works across most browser.
I think the best solution first is to know that you DON'T have to expect that you page look the same in all browser. A good clean solution is use the power of each browser to do this. for example build a css for chrome/safari, another for IE and a last one for Firefox, you can do it as the follow example:
and I think use JAVASCRIPT for this purpose is NOT the best solution.
for web-kit safari/chrome
select{
-webkit-appearance: button;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../img/forms/arrow_blue.png),
-webkit-linear-gradient(#E1E1E1, #FFF 30%, #FFF);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
height:40px;
}
For firefox:
#-moz-document url-prefix() {
select{
border-radius: 5px;
background-image: url(../img/forms/arrow_blue.png),
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
height:auto;
padding:10px;
}
}
And you can target each IE in each version as example
<!-- cause not every body is pretty -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="frontend/css/ie8-and-down.css" />
<![endif]-->
select{ border:1px solid #EEE;
width:auto !important;
height:35px !important;
padding:5px !important;
margin:5px !important;
line-height:1 !important;
}
I thinks in this way you will have nice dropdowns in all browser, while only safari/Chrome will be look exactly as you like, the other ones will behave as the user expect and you will not have to use javascript
Hmmm... you can use the :hover pseudo class to change the background-color of a select element but I just tried:
option:hover {
background-color: #F00;
}
with no result. However:
select:hover option {
background-color: #F00;
}
will change the background color of options when you hover of the select menu but as far as I can tell using option:hover itself won't work
The select tag depends on the OS you're on,
and you can't style it the way you want
the best solution is to use jquery to replace the select with a styled list (editable with css)
take a look:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
is this the sort of thing your after?
select:hover { background-color: red; }
I know this is an old question, but since I had tryed to implement this in the past and although I came to the conclusion that is not worth it most of the time, I realize sometimes it really affects the design idea (i'm not a designer but they get very frustrated about details like that), I thought I would share a resource I found that actually suggests ways to work around the fact that it is very difficult (if not impossible) to get a consistent enough look and feel by just applying css to the tag. Hope it helps somebody.
The html select tag styling challenge
My CSS for the website all looks fine in Firefox but in both Chrome and Safari, my fonts are coming out looking black color instead of the grey color as is in Firefox.
Why might the fonts/color be different in Safari and Chrome - it looks like bold black.
Header style I am using within my content div, i.e.:
#content {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #990;
border-bottom-color: #990;
border-left-color: #990;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #FFF;
width: 973px;
text-align: left;
display: block;
background-image: url(images/bgcontent.jpg);
background-repeat: repeat;
}
h1 {
font-family: "Lucida Grande";
background-color: transparent;
height: 20px;
width: 650px;
color: #FF9904;
font-size: 36px;
text-align: left;
float: none;
vertical-align: top;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #999;
letter-spacing: normal;
margin: 0;
padding: 0.5em 0;
}
I also found this link relating to Google Chrome, i.e about using:
#charset "xxx"
http://www.google.com/chrome/intl/en/webmasters-faq.html#fontspecs
I just checked my computer, and there appears to be no difference in color between Firefox and Chrome. I am running Windows (for both of those), and it should be noted that there will always be a difference in color between Macs and PCs as they are calibrated with different gamma values. Read more about gamma stuff here, though note that you can't do much about it from a CSS perspective.
Another possible problem is that it could be just your computer... have you tried this issue on multiple computers? You can always try using a tool such as Browsershots or Browserlab.
Finally, it's possible that there is some relevant code that is triggering some cross browser differences.... is this all of your code or is there more CSS somewhere? Can you provide a live link to the page you're having problems with?
Does it also happen if you make them a color, for example red? If it's not, then it's just the anti aliasing of webkit which is more agressive.
But if it still happens, you can check with the chrome inspector and firebug if the way safari/chrome and firefox interpret the CSS is different. Which color selector they choose
The sample css you posted is ok. Try adding !important to color attribute.
color: #FF9904 !important;
At the time of writing (June 2015) there is a bug in OS X Chrome that means it doesn't apply colour correction to CSS-colours or untagged images. Safari (since OS X 10.9) applies colour correction to both CSS colours and images.