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.
Related
I would like to bold the border of a div.
My problem is that i need to bold only the top and bottom borders.
For example: if i have a div as a shape of a square it should look:
_______________
_______________
How can i do it in css?
In CSS
border-top:3px solid #000;
border-bottom:3px solid #000;
and then if you want borders on left and right just make them 1 px instead of 3
Set the width of the bottom and top borders higher.
#element {
border-top: 5px solid #000;
border-bottom: 5px solid #000;
}
Try:
border: 2px 0px 2px 0px #000;
Edit:
Quick explanation of border shorthand properties. The order of elements is width style color, where the width is in the order of Top Left Bottom Right. So in the above example it will set the top and bottom borders to 2px with the left and right being 0px. It will default the style of the border to solid and the color will be black. To create a dashed border on the left and right instead you would use:
border: 0px 2px 0px 2px dashed #000;
You can do it with:
border-top: 1px solid black;
border-bottom: 1px solid black;
Try something like:
border-top: 2px solid black;
border-bottom: 2px solid black;
For more info, see https://developer.mozilla.org/en-US/docs/CSS/border-top and https://developer.mozilla.org/en-US/docs/CSS/border-bottom.
How can I make border-left the same height as border-right? In other words, how to change the order of the borders? Border-left is taller than border-right. Which results in a 1px "gap".
.tab-header > ul > li
{
display: inline-block;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
border-top: 1px solid #cecece;
padding: 8px;
font-size: 10px;
text-transform: uppercase;
}
What is happening, is that the css tries to make a nice diagonal colour change in the border. If you change all the 1px to 10px, you see the problem. (Image, see: http://jsfiddle.net/DaTCy/1/)
If you are using 1px widths of the borders, the bottom and the right border will always overlap in the bottom-right pixel.
EDIT: As a solution, you can try giving the bottom border a width of 0px, and solving the height problem in the container you put the button in.
The simplest solution is to explicitly use:
border-bottom-width: 0;
JS Fiddle demo.
Use border-left/-top/-right and border-bottom for different [nested] elements.
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'm wondering if it's possible to achieve this effect only with css. As you probably noticed the image have 4 borders if you zoom in a little bit(without that bottom shadow, I don't want to use that).
img http://img265.imageshack.us/img265/192/version203.jpg
It appears that the most outward border is already done using CSS with a simple border effect. The outermost border would be a box with a border and some padding to push the image inside. Then going down to the grey box, you could use another box with border: 3px double since the border color is the same as the background color, and adding background-clip: padding-box so that the background will not cover the white line between the double border. It also appears there would be around a 3px border radius on that box and some padding until you get to the actual image which simply has a white border around it.
A simple example of CSS:
span.imgbox {
background: #CCC;
background-clip: padding-box;
border: 3px double #CCC;
border-radius: 3px;
display: inline-block;
padding: 10px;
}
span.imgbox > img {
border: 1px solid #FFF;
}
This is generally what would be involved, assuming you don't want the white box with black border as shown in the actual website view, but just the borders you want that are shown in the image itself.
With box-shadow you can emulate multiple borders. This is exactly what you're looking for:
http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/
you could mix box-shadow, outline, border, and padding/background-color... but this wouldn't be cross browser..
border: 4px solid #000;
outline: 4px solid #f00;
background-color: #ff0;
padding: 10px;
box-shadow: 0px 0px 0px 4px #333;
demo
I think the only way is to have nested elements.
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.