I just updated to firefox 4, and it's messing up my sidebar. I have a contact form in my sidebar. If i give 1px margin to my texarea, it aligns fine in all browsers except firefox 4. It looks fine in FF 4 if i give it a 3 px margin. How can I solve it? my css for textarea:
textarea {
background: #0D1E2A;
border: 1px solid #102B3E;
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-border-radius: 2px 2px 2px 2px;
padding: 1px;
margin-left:1px;
width:145px;
overflow:auto;}
It might have to do with applying border-radius to only Firefox and no others but without a link or the complete markup, it's all a wild guess. I also don't recall which browsers support box-shadow.
Related
I'm using the jQuery Validation Engine to validate some form fields. Everything's working well except in IE7 and IE8.
The style sheet has a :focus class, which gives them a blue box-shadow when the form field is focussed on:
input:focus { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #06c !important; -moz-box-shadow: 0px 0px 1px 1px #06c; box-shadow: 0px 0px 1px 1px #06c; }
I'm using jQuery to add a class to the form fields when they're not valid (as defined by the jQuery Validation Engine,) so that those fields can have a red box-shadow:
input.error { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #c00 !important; -moz-box-shadow: 0px 0px 1px 1px #c00; box-shadow: 0px 0px 1px 1px #c00; }
This works great...in IE9, Firefox, and Chrome. It doesn't work in IE8 or 7. (There was a party when we stopped supporting IE6.) I tried installing PIE.htc and adding a style option that indicated a border for those elements, rather than a box-shadow, but that didn't seem to help and it caused some other display weirdness with the error-bubbles, so I removed PIE.htc. Then I tried having a separate style definition, enclosed in IE-conditional tags, that specified borders for those inputs, but still it didn't work. Here's my conditional-CSS:
<!--[if lte IE 8]>
<style type="text/css">
input:focus { border: 1px solid #06c; }
input.error { border: 1px solid #c00; }
</style>
<![endif]-->
...help?
Not everything is supported in those browsers. Just live with it and find an alternative, like showing an additional message. Or you could embed the input element inside a div:
div.invalid {
display: inline-block;
border: 1px solid red;
}
<div class="invalid">
<input type="text"/>
</div>
If you start adding element like this, I would do that though JQuery too, and preferably in a separate piece of code that is included only in IE7 and 8, so you can easily drop it once you don't need it anymore. Or you could choose to always use the div, and just style div.invalid input{...} for other browsers.
Using the following css, I get a slight jagged or non-smooth circle rendered in the iOS webview browser. Anyone know of a fix? It shows up at any border width, and can event be detected as low as 1px with the high density retina display on the iPhone.
a.circle {
display: block;
position:absolute;
z-index:10000;
border: 6px solid #000;
box-shadow:inset 0px 0px 0px 1px #ccc;
width:54px;
height:54px;
top:352px;
left:123px;
border-radius: 99px;
background-color: #fff;
}
a.circle:active {
box-shadow:inset 0px 0px 0px 1px #fff;
}
Notice the slight hard and somewhat angled lines on both the border and inner 1px shadow:
http://www.css-101.org/articles/-webkit-transform-rotate-and-anti-aliasing/rotate-creates-jagged-border-image.php
This is a slightly different issue, but it directly relates to iOS.
I specify a box shadow for a span. The shadow only shows on the right. Something seems to cover the bottom side of the shadow. I tried resizing the span but this doesn't do it. I have this in the style specifications.
#feastsaint:hover span {
display:block;
width:385px;
height:65px;
margin-left: 120px;
border:1px solid #808080;
padding:2px;
font-size:11px;
border-radius: 5px;
box-shadow: 3px 5px 8px #888;
-moz-border-radius: 5px;
-moz-box-shadow: 3px 5px 8px #888;
padding: 5px 5px 5px 15px;
background:#CCFFCC;
/* border:1px solid #404040;
background-color:#FFCCCF; */
color:#404040;
white-space: normal;
z-index:99;
}
What could be the problem?
NOTE: Couldn't upload the image for the box shadow.
Add some margin-bottom to your span.
#feastsaint:hover span {
....
margin-bottom: 5px; // (play with this a bit till you get the desired effect)
}
you really should post more info about your problem such as the html code your trying to affect, that said try:
change
#feastsaint:hover span
to
span#feastsaint:hover
I recently experienced some problems with Chrome on MAC. I just had to restart Chrome several times until it worked again. For me bitmaps and some images online were messed up (no vectors). Maybe just restart Chrome and look if it works. Otherwise just revise your CSS as the other answers suggest. Good Luck
I am creating a menu with 4 different color borders. When viewed in Safari 5, the left and right borders go from top to bottom with no angles around the box. When viewed in FF 4, there is a border angle at the border-bottom and border-right elements. This makes the menu look different in different browsers. Here is the CSS for the menu item:
ul#mainnav a {
display: block;
text-decoration: none;
color: #b0c9da;
padding: 7px 7px 7px 14px;
border-bottom: 1px solid #01304f;
border-top: 1px solid #1a74af;
border-right: 1px solid #fff;
border-left: 1px solid #246792; }
Please advise. Thanks
This is caused by the browsers' determination of where to begin the border line and where to end it. Unfortunately there is no fix for this. Your best bet is to pick border colors that are similar enough that they will not stand out so tremendously.
Another option, requiring modern browsers / CSS3 support, would be to use a box-shadow on the element. For example:
box-shadow: inset 1px 1px 1px rgba(255,0,0,1),
inset 1px -1px 1px rgba(0,255,0,1);
You can add multiple layers of box shadows of only 1px width, and specify the direction that they "drop". Could be fun to play with.
I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of some sort? I tried a background image but the number of suggests can vary from 1 to 10 or 15.
I'd prefer something that works in IE6+ and FF2+ if possible. Thanks!
This works for me on all my browsers:
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
then just give any div the shadow class, no jQuery required.
CSS3 has a box-shadow property. Vendor prefixes are required at the moment for maximum browser compatibility.
div.box-shadow {
-webkit-box-shadow: 2px 2px 4px 1px #fff;
box-shadow: 2px 2px 4px 1px #fff;
}
There is a generator available at css3please.
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
The most widely compatible way of doing this is likely going to be creating a second div under your auto-suggest box the same size as the box itself, nudged a few pixels down and to the right. You can use JS to create and position it, which shouldn't be terribly difficult if you're using a fairly modern framework.
you might want to try this. Seems to be pretty easy and works on IE6 and Moz atleast.
<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>
The general syntax is :
border-[postion]:[border-style] [border-width] [border-color] | inherit
The list of available [border-style]s are :
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
inherit
You can try using the PNG drop shadows. IE6 doesn't support it, however it will degrade nicely.
http://www.positioniseverything.net/articles/dropshadows.html