Everything is great on all browsers on OS X, I come to test on windows, and it seems my webkit elements, ie gradient backgrounds and radius borders do not show up - in chrome, firefox or ie. (so it isn't a problem with chrome exclusively but perhaps Windows 7?) I should not i'm on chrome 27 and ie 10. On another windows pc with an earlier chrome and ie 8 it looks as it should.
So, I go into chrome developer mode to take a look, and when I rollover the 'element', I can actually see the webkit items as they should be under the highlighted colour. Does that make sense?
Anyone experienced this before and know what it means?
For example, the following will be invisible in all windows browsers, but when I hover over it in chrome it shows up:
.example .example1 li {
float: left;
padding: 0px 5px;
width: 120px;
height: 60px;
border: 1px solid #e6e6e6;
margin-left: 14px;
margin-bottom: 10px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
text-align: center;
font-size: 16px;
font-weight: 500; }
Maby you need to run your code through a Prefixer, http://prefixr.com/
Related
I am having an issue making my a drop down menu visible over the content below it. I have tried using the overflow: visible; command but it doesn't seem to work so I presume there is some sort of conflict going on. The other issue I have encountered is when you move down the menu to click on the options it closes once you get to the the point where it is not visible. I presume though that both issues are interlinked.
JSfiddle: http://jsfiddle.net/aXcje/
#menu {
height: 44px;
font-family: otto;
font-size: 42px;
word-spacing:15px;
text-shadow: 0px 0px 1px #000;
border:1px solid #1a1a1a;
margin-bottom: -1px;
margin-top: -1px;
background-image: url("images/menu.png");
background-repeat:repeat-x;
box-shadow: 2px 2px 2px #000000;
}
Website: http://www.debbie.travismoore.co.uk/
Any help is appreciated,
Cheers,
Travis
Resolved by using the z-index property on the drop down menu
I'm try to use border-radius on a website, but firefox keeps doing this:
Firefox CSS.
Everything is good except the top left corner.
This is my css for the border-radius:
border-radius:10px 0px 0px 0px;
border:1px solid #FFF;
border-bottom:2px solid #000;
width:400px;
It works fine on any other browser but not on firefox 24.
Is there a way to fix/work around this with only css?
Try adding: the background-clip property:
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
Im struggling with this for the past 3 months!! - how to adapt css3 to IE7,8 and 9??
this is my page
I am using buttons there, I want to make rounded corners (basic, no?)
so I have used this css
body .main_title {
font-size: 16px;
padding: 0.3em 1.5em;
display: inline-block;
cursor: pointer;
line-height: 1.5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background-color: #222222;
color: white;
behavior: url(PIE.htc);
}
and the button is
<button type="submit" id="1" class="main_title">מאפיינים</button>
as you noticed, I also used an "extention" called css3pie to make it work but nothing!!
any suggestion?
any suggestion?
Sit back. Relax. Don't worry about minor cosmetic details in old browsers with falling marketshare.
CSS3 pie is kind of buggy. Try putting a position:relative; on it. Also make sure that's the correct path to PIE.htc — if I remember correctly, it may help to link to it absolutely.
I think you can probably use jquery for this http://jquery.malsup.com/corner/ in your javascript.
Anything from IE9 onwards will be ok with this in the css
border-radius:10px
http://caniuse.com/#search=border-radius
i have this code:
<style type="text/css">
div {
margin: 100px auto;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
border-bottom: 30px solid transparent;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
</style>
<div></div>
that produce:
in firefox,
but in chrome (linux, and windows - didnt try in mac) i see nothing why?
I believe it is some sort of bug, actually. It works for me if you change the height and width to 1px. This leaves a little white dot, unfortunately, but that can be fixed by changing the background to red and the background-clip to content.
JSFiddle example.
Because you gave 0px width and 0px height to the div so you see nothing.
width: 0px;
height: 0px;
Change this, hope it'll be visible.
maybe anyone have an idea why this is happening and how to fix it ?
p
{
display: block;
margin: 1em 0px;
}
p.description
{
color: #969797;
font-family: Calibri, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: lighter;
letter-spacing: -0.05em;
line-height: 1em;
text-decoration: none;
text-shadow: none;
text-transform: none;
word-spacing: 0em;
}
You mean why FF displays things bold?
I'd have to see your code i suppose...
Special characters, though, are usually a bit tricky. If your character encoding type is not set right, or the visitor has the right font not installed, the browser may just pick another font that looks like it.
The difference between the browsers is caused by Webkit (at least so I think).
Safari and Chrome use Webkit, maybe that's it...