I have a gridview in asp.net. When I zoom out the page a blank space seems in the gridview as in this image. How to fix it?
The css code:
.module {
border: 1px solid #9BA0AF;
margin: 0;
margin-top: 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 15px;
background: #ffffff;
position:static;
height: 100%;
width:100px;
background-size: contain;
}
.moduleheader {
height: 38px;
width: 100%;
background: #F1F1F4 url(../images/secondary_bar.png) repeat-x;
background-position: left top;
background-repeat: repeat-x;
background-size: 100% 100%;
}
I also have css code above the gridview inside a div element.
<div style="border: 1px solid #9BA0AF; width:30%; margin: 20px 3% 0 3%; background-color:white;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
overflow: hidden !important; position:static; background-size: 100% 100%;">
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" GridLines="None" RowStyle-Wrap="false">
Thanks in advance.
I have found the solution! I added the max-width property to the div as below:
<div style="border: 1px solid #9BA0AF; width:30%; margin: 20px 3% 0 3%; background-color:white;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
overflow: hidden !important; position:static; background-size: 100% 100%; max-width: 500px;">
Related
I have a square div with rounded corners. Inside this div, I need to make this shape:
I want to do it with pure css, but there are two problems:
Little 1px green artifacts I can't get rid off (you can see them on the bottom and right sides)
I need a 1px red border around #login_form to also appear on top of my oval shapes.
Maybe there is a better way to cut the ovals.
Here is a jsfiddle of the below:
#login_form {
margin-left: auto;
margin-right: auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border: 1px solid black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#white_ovale {
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
-webkit-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
-moz-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
#green_ovale {
position: absolute;
right: -21px;
bottom: -21px;
width: 139px;
height: 75px;
border: 0px;
background: #72B038;
-webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-webkit-box-shadow: inset -10px -10px 0px 10px white;
-moz-box-shadow: inset -10px -10px 0px 10px white;
box-shadow: inset -10px -10px 0px 10px white;
}
<div id="login_form">
<div id="white_ovale"></div>
<div id="green_ovale"></div>
</div>
you need overflow: hidden
you need a 3rd inner div which adds the border (Just think of an independent border that stacks i top of the others)
BTW: Don't id everthing. Use classes. Use id only if you need to. And try not the nest ids.
As a rule of thumb I use only class for CSS and idfor JS only
http://jsfiddle.net/Lt4x3ufg/1/
.login_form {
margin-left:auto;
margin-right:auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border:1px solid red;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
overflow: hidden;
}
.login_form .border {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 1px solid red;
border-radius: 10px;
}
.login_form .white_ovale {
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
-webkit-border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
-moz-border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form .green_ovale {
position: absolute;
right: -21px;
bottom: -21px;
width: 139px;
height: 75px;
border: 0px;
background: #72B038;
-webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-webkit-box-shadow: inset -10px -10px 0px 10px white;
-moz-box-shadow: inset -10px -10px 0px 10px white;
box-shadow: inset -10px -10px 0px 10px white;
}
<div class="login_form">
<div class="white_ovale"></div>
<div class="green_ovale"></div>
<div class="border"></div>
</div>
Single element solution
There is no need for extra markup. We can create:
the two shapes inside the div with ::before and ::after
the red border with the containing div itself
The excess background is cut off with overflow: hidden
Nice Advantage: Because IE 8 does not support the border-radius property, and will render an ugly square, we can use the double colon (::) for the pseudo elements. IE 8 does not recognise this syntax and will render just the red box. This is the modern syntax and valid CSS.
Note: For child elements to overlap the green shape, they should be given position: relative and z-index: 1
Browser Compatibility: Due to the border-radius property, IE 9 +. It is unlikely that you need the browser prefixes for the border-radius property.
Complete Example
I have condensed the CSS as much as possible.
.login_form {
margin: auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border-radius: 10px;
overflow: hidden;
border: 1px solid red;
}
.login_form::before,
.login_form::after {
content: '';
display: block;
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form::after {
right: -31px;
bottom: -21px;
width: 149px;
height: 75px;
background: #72B038;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
}
<div class="login_form"></div>
I have used CSS border-image to attain certain effect in the menu bar. Its working good in Firefox. But doesn't work in Chrome.
See www.imptools.com. Is there any workaround for chrome?
CSS
nav.mainMenu{
width:#16cols; height: 50px;
margin:0 auto; position: relative;
top:-25px;
ul{
width:100%; height:50px; overflow: visible;
background: url('../imgs/gun_metal.png');
border-radius: 15px; box-shadow: 0px 3px 3px #dark;
li{
float:left; width: auto;
margin: 0 20px; overflow: visible;
height: 80px; position:relative; top:-15px;
a{
width: auto; height: auto;
float:left; padding: 0 15px;
font-family: #sansSec;
color:#light;
line-height: 80px;
font-size: 24px;
font-weight: bold;
text-shadow: 3px 3px 3px #dark;
}
}
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
border-image:url(../imgs/menu_active_bg.png);
border-image-width:15px 15px 0px 0px;
border-image-outset: 0px 15px;
}
}
Try setting the border before setting the image like so
border: 50px solid transparent;
I have noticed that in Safari this statement doesn't matter but it does matter in chrome
According to chrome platform status,
Blink will begin to require a border style in order to paint border images. This has always been required by the spec, but has not been enforced. In order to not be affected by this change, add e.g. 'border-style: solid' where border-image is used.
so adding
border-style: solid;
should fix your issue.
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
-webkit-border-radius: 15px 0 15px 15px;
-moz-border-radius: 15px 0 15px 15px;
-khtml-border-radius: 15px 0 15px 15px;
border-image:url(../imgs/menu_active_bg.png);
-webkit-border-image:url(../imgs/menu_active_bg.png);
-moz-border-image:url(../imgs/menu_active_bg.png);
-khtml-border-image:url(../imgs/menu_active_bg.png);
border-image-width:15px 15px 0px 0px;
-webkit-border-image-width:15px 15px 0px 0px;
-moz-border-image-width:15px 15px 0px 0px;
-khtml-border-image-width:15px 15px 0px 0px;
border-image-outset: 0px 15px;
-webkit-border-image-outset: 0px 15px;
-moz-border-image-outset: 0px 15px;
-khtml-border-image-outset: 0px 15px;
}
Try it like below.
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
-webkit-border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
}
I've tried to create a button like this in CSS and the pointy part of the button not as pointy?
Here is CSS:
.home_icon { width: 40px; height: 25px; margin-left:10px; margin-top:8px; background: #FFCC05 url(../images/home_icon.svg) no-repeat 12px 4px; -webkit-border-radius: 11px 5px 5px 11px/17px 5px 5px 17px; -moz-border-radius: 11px 5px 5px 11px/17px 5px 5px 17px; border-radius: 11px 5px 5px 11px/17px 5px 5px 17px;}
Can anyone have a solution? I'm prepared to change the css code as long I've 'Equilateral' triangle of the pointy (on left) of a button?
(source: kerrydeaf.com)
UPDATE:
Here is my jsfiddle: http://jsfiddle.net/alma/eBtY4/1/
Can you try something like this
.home_icon
{
width: 120px;
height: 80px;
background:red;
position: relative;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
.home_icon:before
{
content:"";
position:absolute;
right: 100%;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 26px solid red;
border-bottom: 40px solid transparent;
}
I have two overlapping divs that have css3 box shadows. The trouble is that even when I set the z-index I will still need to eliminate one of the div's box-shadow. I have seen cases where negative spreads and zero values are used but I don't think that would work here.
The code I have now is:
#bulb-top {
position: relative;
width: 280px;
height: 280px;
background-color: #E5F7A3;
-webkit-border-radius: 280px;
-moz-border-radius: 280px;
border-radius: 280px;
border: 8px solid #FFF40C;
top: -430px;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
-moz-box-shadow: 0px 0px 15px 1px #FFF40C;
box-shadow: 0px 0px 15px 1px #FFF40C;
z-index: 4;
}
#bulb-bottom {
position: relative;
width: 140px;
height: 120px;
background-color: #E5F7A3;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
-webkit-border-radius: 0px 0px 30px 30px;
border-radius: 0px 0px 30px 30px;
border-left: 8px solid #FFF40C;
border-right: 8px solid #FFF40C;
border-bottom: 8px solid #FFF40C;
top: -455px;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
-moz-box-shadow: 0px 0px 15px 1px #FFF40C;
box-shadow: 0px 0px 15px 1px #FFF40C;
z-index: 5;
}
http://jsfiddle.net/minitech/g42vq/3/
You can use the ::before pseudo-element to block out one side of the box shadow. It's not perfect, but it might be enough for your situation. Here's the updated jsFiddle.
#bulb-bottom:before {
background-color: #E5F7A3;
content: '';
display: block;
height: 30px;
margin: 0 auto;
position: relative;
top: -10px;
width: 140px;
}
I am having problems centering 3 divs that are within a "container" so to say.
It should basically look something like this (forgive my crude example):
______________________
| ___ ___ ___ |
| |___| |___| |___| |
|______________________|
The problem that i am having though, is that i cant seem to figure out the css to get these 3 divs to be laid out as in my crude example.
Because the design is supposed to be elastic and expand or contract over different resolutions, thus presenting roughly the same appearance over varying resolutions.
At the moment the div's are floated left and there is a larger gap between the last div and the container, compared to the first div. I am trying to get them all to fit snugly in the middle...
Here is the code relating to this:
.searchResult {
padding: 1% 2% 1% 2%;
margin: 2% 2.5%;
width: auto;
height: 200px;
-webkit-border-radius: 10px 10px;
-moz-border-radius: 10px / 10px;
-o-border-radius: 10px / 10px;
-ms-border-radius: 10px / 10px;
-khtml-border-radius: 10px / 10px;
border-radius: 10px 10px 10px 10px;
border: 2px outset #003399;
-moz-box-shadow: 5px 5px 5px #666666;
-webkit-box-shadow: 5px 5px 5px #666666;
-o-box-shadow: 5px 5px 5px #666666;
-ms-box-shadow: 5px 5px 5px #666666;
-khtml-box-shadow: 5px 5px 5px #666666;
box-shadow: 5px 5px 5px #666666;
}
.bizDesc {
margin-right: 2%;
text-align: left;
float: left;
width: 35.5%;
height: 140px;
padding: 5px 0 0 0;
-webkit-border-radius: 10px 10px;
-moz-border-radius: 10px / 10px;
-o-border-radius: 10px / 10px;
-ms-border-radius: 10px / 10px;
-khtml-border-radius: 10px / 10px;
border-radius: 10px 10px 10px 10px;
border: 2px outset #003399;
-moz-box-shadow: 5px 5px 5px #666666;
-webkit-box-shadow: 5px 5px 5px #666666;
-o-box-shadow: 5px 5px 5px #666666;
-ms-box-shadow: 5px 5px 5px #666666;
-khtml-box-shadow: 5px 5px 5px #666666;
box-shadow: 5px 5px 5px #666666;
}
.bizAddr {
margin-right: 2%;
text-align: left;
float: left;
width: 28%;
height: 140px;
padding: 5px 0 0 0;
-webkit-border-radius: 10px 10px;
-moz-border-radius: 10px / 10px;
-o-border-radius: 10px / 10px;
-ms-border-radius: 10px / 10px;
-khtml-border-radius: 10px / 10px;
border-radius: 10px 10px 10px 10px;
border: 2px outset #003399;
-moz-box-shadow: 5px 5px 5px #666666;
-webkit-box-shadow: 5px 5px 5px #666666;
-o-box-shadow: 5px 5px 5px #666666;
-ms-box-shadow: 5px 5px 5px #666666;
-khtml-box-shadow: 5px 5px 5px #666666;
box-shadow: 5px 5px 5px #666666;
}
.bizCont {
text-align: left;
float: left;
width: 28%;
height: 140px;
padding: 5px 0 0 0;
-webkit-border-radius: 10px 10px;
-moz-border-radius: 10px / 10px;
-o-border-radius: 10px / 10px;
-ms-border-radius: 10px / 10px;
-khtml-border-radius: 10px / 10px;
border-radius: 10px 10px 10px 10px;
border: 2px outset #003399;
-moz-box-shadow: 5px 5px 5px #666666;
-webkit-box-shadow: 5px 5px 5px #666666;
-o-box-shadow: 5px 5px 5px #666666;
-ms-box-shadow: 5px 5px 5px #666666;
-khtml-box-shadow: 5px 5px 5px #666666;
box-shadow: 5px 5px 5px #666666;
}
The first bit of css relates to the container, the next 3, relate to the 3 divs in order from left to right. So that my example comes out something like this:
______________________
| ___ ___ ___ |
||___| |___| |___| |
|______________________|
If anyone would spare some wisdom and provide me with some input into this, as i am sure that the answer is quite simple, it would be greatly appreciated, thank you!!
I think it'd be easiest to add one more div in there... That way, the outer div in your diagram would control how the div acts in the container/tag that contains it. The div you would add would surround the 3 boxes and would then have flexibility to the margins/float/etc to the outer div.
Assuming that "searchResult" is the outer div, a structure like so:
<div class="searchResult">
<div class="divClassToAdd">
<div class="bizDesc">...</div>
<div class="bizAddr">...</div>
<div class="bizCont">...</div>
</div>
</div>
This should do it:
HTML
<div id="dialogbox">
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
CSS
#container{
margin: 0 auto;
}
.box{
width: 200px; height: 200px;
}
Whatever you do with the inner boxes is irrelevant, as long as the container has margin auto