I'm using this free template for a study project: jsFiddle
My problem appears when I'm using IE7, because the botton margin of the DIV with id="outerwrapper" totally disappear.
Here you can find the css code for the outerwrapper:
div#outerwrapper {
margin: 20px auto;
width: 960px;
margin-bottom: 20px;
background-color: #CEC7AA;
-moz-box-shadow: 0 0 3px 3px #333;
-webkit-box-shadow: 0 0 3px 3px #333;
box-shadow: 0 0 3px 3px #333;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
Any suggestions?
A margin needs something to "bounce" on. It can't "bounce" against the body. So instead of using a margin-bottom to the child, rather use a padding-bottom to the parent:
body {
padding-bottom: 50px;
}
Related
I am using this code:
border-right:0px solid #ddd;
height:85px;
box-shadow :5px 5px 10px 1px #eaeaea;
but i just got this results http://codepen.io/anon/pen/MpmPYq
I want to add the same width with shadow at left, buttom and the right side
I'll add this shadow to the dropdown menu at this site http://94.247.169.169/~welloteket/
If you want all four sides shadowed, try this following code:
div {
-webkit-box-shadow: 0 0 100px #000;
box-shadow: 0 0 100px #000;
}
I tested this on CodePen aswell, http://codepen.io/anon/pen/RpVeRG, It is because your Y and X is offset.
If you are looking for the left, right and bottom to be shadowed.
You can use the following code instead:
-moz-box-shadow: 0px 3px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
box-shadow: 0px 3px 8px rgb(100,100,100);
http://codepen.io/anon/pen/Ppmxoa
Try this code :
div {
height: 200px;
width: 300px;
margin: 50px auto 0;
border-right: 0px solid #ddd;
height: 85px;
box-shadow: 5px 5px 10px 1px #eaeaea, -5px 5px 10px #eaeaea;
}
<div></div>
Is there a way to make my #inner_div stop appearing behind the #main_div if it exceeds a certain width? I tried removing the overflow:hidden from #main_div in css but that causes the background of the #main_div to load very slowly, so I would like to find another solution if possible. Thanks
Main div css:
#main_div {
-moz-border-radius:5px;
-moz-box-shadow: 0 3px 3px rgba(255, 255, 255, 0.1), 0 3px 0 #BBBBBB, 0 4px 0 #AAAAAA, 0 5px 3px #444444;
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #FFFFFF;
margin: 20px auto;
overflow: hidden;
padding: 10px;
width: 970px;
}
Inner div css:
.inner_div{
font-size:12px;
font-weight:normal;
font-style:normal;
margin: 5px 0px 0px 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
z-index: 0;
visibility: hidden;
position: absolute;
/* white-space: nowrap;*/
text-align: left;
padding: 5px 5px 5px 5px;
width:200px;
}
Instead of using overflow:hidden, you should use the new "micro clearfix".
Go here: http://nicolasgallagher.com/micro-clearfix-hack/
In your markup, you simply just add the class "cf" on #main_div
I have the following css:
fieldset ul li input {
width: 96%;
margin: 0;
padding: 6px;
font-size: 13px;
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
-webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}
Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can't see it completely. As you can see is hidden in the half of it:
Either increase the height or the padding.
input {
padding: 10px;
}
Is there any way to add a glow around the div? Look at twitter login and how there is a blue glow around the input box, can that be done for the div?
CSS3 can do that
-webkit-box-shadow:0 0 20px blue;
-moz-box-shadow: 0 0 20px blue;
box-shadow:0 0 20px blue;
Working JSFiddle.
Here is the complete code to style a div exactly like the twitter login input. The styles for the blue border are the box-shadow and border styles for the selector div[contenteditable]:focus. Live demo here (click).
Markup:
<div contenteditable="true">Username or email</div>
CSS:
div[contenteditable]:focus {
border: 1px solid rgb(86, 180, 239);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}
div[contenteditable] {
width: 97%;
max-width: 280px;
margin-right: 10px;
font-family: Arial,sans-serif;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
display: inline-block;
padding: 4px;
margin: 0;
outline: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
line-height: 20px;
}
As shown before, use css: focus, border and box-shadow.
If using IE, make sure <doctype> is specified.
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
jsFiddle example.
Also you will face some problem with Internet Explorer while dealing this issue. IE-9 How ever supports box-shadow but the previous versions don't, Check it out here for making it work in all versions of IE
We are using posts and gets, which out-of-the box appear as links (gets) and buttons (posts). In an effort to provide a pleasant and consistent look to the UI, we have button themed all UI click interactions to look the same using css:
.minimal
{
background: #e3e3e3;
border: 1px solid #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
font: bold 12px "helvetica neue" , helvetica, arial, sans-serif;
padding: 5px 20px 5px 20px;
text-align: center;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
}
.minimal:hover
{
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}
.minimal:active
{
background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: #000;
}
...and used this way:
#Html.ActionLink("Edit", "Edit", new { id = Model.ID }, new {#class = "minimal"})
<input type="submit" class = "minimal" value="submit" />
The problem is with the padding statement in .minimal, it seems that depending on the length of text contained in the ActionLink you will get a longer or shorter button. I would use the 'width' tag but in only has effect on the posts... not on the ActionLinks. Has anyone successfully addressed this issue?
width only works on block elements. Try to add this:
a.minimal {
display: inline-block;
padding: 5px 0;
width: 198px; /* subtract border */
}
and add width to .minimal:
width: 200px;
(or style for links in general and treat the submit button in a special way)
For better cross-browser compatibility you might also need to do some trickery according to this (old) article:
a.minimal {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
padding: 5px 0;
width: 198px; /* subtract border */
}
You need to try what works for your target browsers. I tried the first (simpler) solution and it works on all current browsers and IE7 + IE8.