I have a fixed header on my site that I'm working on. So the content of my page flows under the header and the header stays fixed at the top of the page. I can't use the border-radius function in css to create my rounded corners that I want because the page content background color shows on the outside of my rounded corners. So I have implemented two rounded corner images, one for the left and one for the right. My problem is, the images move a total of 1px when I zoom. No matter how much I zoom, it only moves a total of 1px and for the life of me, I can't seem to figure out the problem. I'm going to post a link to my site and maybe somebody can go through the html and css and try to figure this out. I also put a link to download my VB project to look at in Visual Studio. Any help would be appreciated thanks a lot.
Link to Webpage
http://aspspider.info/speeddemon8406/Default.aspx
Link to download VB project
http://www1.datafilehost.com/d/46288e83
#header {
background-color: #ddd;
height: 125px;
left: 50%;
margin-left: -480px;
position: fixed;
width: 960px;
}
#header-top {
background-color: #fff;
border-left: 1px solid #aaa;
border-radius: 25px 25px 0 0;
border-right: 1px solid #aaa;
border-top: 1px solid #aaa;
height: 85px;
width: 958px;
}
#nav-wrapper {
background-color: #fff;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
width: 958px;
}
#nav {
background-color: Orange;
border-radius: 15px 15px 0 0;
height: 40px;
margin: 0 1px;
width: 956px;
}
#topleftcorner,#toprightcorner,#nav-corner-left,#nav-corner-right{display:none;}
The basic idea is that I put a #ddd color on #header (the page background color). I then use border-radius on #header-top to round the corners. I also apply a white background to #nav-wrapper. Then I just fix up the borders, and remove the unnecessary images.
As for your 1px off problem, it's a rounding error. I removed left:0;right:0 from #header and replaced it with left:50%;margin-left: -480px so that it doesn't happen.
Related
I try to create a handwritten looked underline to input.
With this complex border-radius, Chrome looks great. In Safari, however, these artifacts appear.
I tried to fix it with
-webkit-background-clip: padding-box;
from: https://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
input {
border: none;
border-bottom: 2px solid;
border-radius: 130px 50px/4px 2px;
}
https://codepen.io/matzR/pen/dybpXgO
Safari: artefacts over the input
Safari seems to have some interesting decisions as far as figuring out the border color goes. Try zooming at this, for instance:
input {
border: 0.001px solid white;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
I guess the linked workaround doesn't work because the border isn't inside the element?
But this is OK (codepen):
input {
border: 1px solid transparent;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
<input>
My other considerations were using a SVG element for background and/or using border-image-slice to simulate the behaviour.
Soo ive tried this code
.itemselected {
Width: 150px;
height: 150px;
border-bottom: 1px solid #111;
}
But when i use that it loks very weird like theres a border around the Whole thing, i only want the border at the bottom.
.itemselected {
Width: 150px;
height: 150px;
border-bottom: 1px solid #111;
border-top: 0;
border-left: 0;
border-right: 0;
}
That should fix it, i had the same problem before but when i used that code to set the other borders to 0 it worked perfectly :)
Ok, so for the sake of argument i have a box with a grey left and right border with an 8 pixel border bottom with a different colour.
The way borders display is showing the bottom border inside the left and right border. Ive done some research but i cannot find a way that is possible for the bottom border to display under the side borders as apposed to inside them. Sorry if i have not explained this too well please feel free to ask if you need any more information. Please follow the link below to a quick fiddle i have created.
<div class="bg">
<div class="box">
Box
</div>
</div>
.bg {
background-color: #fff;
width: 72%;
float: left;
height: 100%;
padding: 100px;
}
.box {
background-color: #fff;
height: 200px;
width: 200px;
float: left;
margin-left: 100px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 8px solid black;
}
http://jsfiddle.net/L06s4k50/
Thanks in advance people.
I think the best way of going about this is to forgo the border-bottom completely, and instead use a box-shadow property:
.box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 8px black;
}
This is more of a curiosity question than something I really need to know.
On this page:
http://twitter.github.com/bootstrap/components.html#buttonDropdowns
How is the little caret / down arrow thing constructed? Poking around with Firebug it looks like it's just made with transparent borders but ... I must be missing something.
Bootstrap is very cool. I just got it going with Symfony.
It is only with borders. When you see arrows like this, the developer most likely used pseudo elements to create them. Basically what happens is you create a transparent box without content, and since there is nothing there, all you see is the one corner of the border. This conveniently looks just like an arrow.
How to do it:
.foo:before {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-left-color: #333;
}
http://jsfiddle.net/fGSZx/
Here are some resources to help:
CSS Triangle from CSS-Tricks (this should clear everything up)
Smashing Mag article about :before and :after
Here is the CSS for an upward facing caret, based on the CSS from bootstrap:
.caret-up {
display: inline-block;
width: 0px;
height: 0px;
margin-left: 2px;
vertical-align: middle;
border-top: none;
border-bottom: 4px solid #FFFFFF;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top-width: 0px;
border-top-style: dotted;
content: "";
}
I have inherited a legacy app for a rewrite and have run across a curious problem. There is tabular data displayed on the page where the title of the table is within a trapezoidal shape that resembles a manila envelope tab. At the bottom of such tables, there is usually a button row that is the same shape as the table title but rotated 180°. Currently, this effect is being pulled off by using a square image with a white triangle in one half on a transparent background as a background image in the corner of a rectangular block to achieve the look of a trapezoid. However, this technique is prone to flickering when the page is refreshed.
As an exercise, I have tried to see if I can replace this with a pure CSS technique. I found this link to different shapes in CSS and have emulated the trapezoid to look as I need. I am able to place the table title text within a trapezoid correctly. However, when I need the look of the 180° rotated trapezoid, I am unable to get the text to place within the shape. My code is included below and here is a jsFiddle showing what I have accomplished so far. I understand that the text shows below the rotated trapezoid because the height is set to 0 and I'm using border-top to build the shape. Is there anything I can do to get this to work correctly?
Please keep in mind that I need this to display in IE8 (and possibly also IE8 in compatibility mode -- IE7). Also, I'd like to keep additional HTML elements to a minimum because I want to keep this as semantic as possible. I know I can place a span inside the div and absolutely position that span so that it displays the text within the shape, but when I do that I have to manually set a width on the trapezoid and when the width can vary from button row to button row, I'd rather not go down that path.
Thanks.
HTML:
<div class="trap">Title Text</div>
<div class="trap180">Button Row</div>
CSS:
.trap {
color: black;
font: normal bold 13px Arial;
border-bottom: 27px solid #F00;
border-right: 27px solid transparent;
height: 0px;
float: left;
line-height: 27px;
padding: 0 4px;
}
.trap180 {
clear: both;
color: black;
font: normal bold 13px Arial;
border-top: 27px solid #F00;
border-left: 27px solid transparent;
height: 0px;
float: right;
margin: 20px 0 0 0;
line-height: 27px;
padding: 0px 4px 0;
}
It's possible with pseudo-elements. But I don't have access to those old browsers to test.
.trap, .trap180 {
color: black;
font: normal bold 13px Arial;
float: left;
line-height: 30px;
height: 30px;
padding: 0 4px;
background: salmon;
position: relative;
}
.trap180 {
float: right;
margin: 20px 0 0 0;
}
.trap:after,.trap180:after {
content: '';
position: absolute;
height: 0px;
width: 40px;
top: 0;
}
.trap:after {
right: -30px;
border-bottom: 30px solid salmon;
border-right: 30px solid transparent;
z-index: -10;
}
.trap180:after {
left: -30px;
border-top: 30px solid salmon;
border-left: 30px solid transparent;
z-index: -10;
}
Demo
Frankly, if you need to still support IE7, I would just use images or allow a little graceful degradation.