How is should be:
http://thc-cup.ucoz.com/How_is_should_be_Chrome_and_Firefox.png
How bad it is on IE:
http://thc-cup.ucoz.com/How_bad_it_is_on_IE.png
Is there any way to make the avatar area display like on Chrome and Firefox?
Link: thc-cup.ucoz.com/forum/2-1-1
CSS from that box:
.postTdInfo {
text-align:center;
background:#e0e0e0;
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
Thanks!
I think this script can help you out CSS3 PIE
Related
I have added button with rounded corner. It will be little bit blurred with circle button.
.btn {
border: 1px solid #4278ae;
display: inline-block;
vertical-align: middle;
padding: 10px;
margin: 10px;
border-radius: 100%;
}
Test
I want look like this flat and smooth. How can i achieve this?
1px is just not visible to our eyes. The code has no issue but you can use 2px for it to look better.
As you know pixels work like this,
Therefore we see it as if the curve is not smooth/clear.
.btn {
border: 2px solid #4278ae;
display: inline-block;
vertical-align: middle;
padding: 10px;
margin: 10px;
border-radius: 100%;
}
Test
Use Box-Shadow property in place of border:
box-shadow: 0px 0px 3px 0px #4278ae;
in place of
border: 1px solid #4278ae;
It looks more clear
How do I make the link outline (blue) conform to the CSS shape? I mean the outline should be in the same shape as the link border.
Would you mind linking, or helping me find the right words to describe it, so I can properly research it, or maybe some basic fixes?
You can use box-shadow (Hover to see it )
button {
width: 200px;
height: 100px;
background: cornflowerblue;
border-radius: 5px 25px 5px 25px;
border-bottom: 2px solid black;
border-top: 2px solid black;
border-left:0;
border-right:0;
outline: 0;
}
button:hover {
box-shadow: 0 0 0 5px orange;
}
<button></button>
I think your referring to the outline property. I think this would helps on your problem :)
button:focus{
outline: none;
}
I've created a shape using below css which displays fine in chrome like this:
But this appears broken in IE9 like this:
How do i fix this?
Here is my css/html used for generating this.
.arrow-head {
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
float: left;
}
.arrow-mid {
background: blue;
height: 20px;
width: 80px;
font-size: 12px;
color: white;
text-align: center;
float: left;
}
.arrow-tail {
width: 0px;
height: 0px;
border-top: 10px solid blue;
border-bottom: 10px solid blue;
border-left: 10px solid transparent;
float: left;
}
<div class="arrow-tail"></div>
<div class="arrow-mid"></div>
<div class="arrow-head"></div>
I used IE9 using Developer Tools and seems like it's working perfectly for me.
Guess you messed up your developer tools and I assume you have IE8 Standards View turned on...
Use the below meta and see it will work
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Demo (This is only for OP, as the code runs pefectly on IE9 Standards Mode)
I have a circle created using CSS, as you can see below:
.circle {
width: 40px;
height: 40px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
text-align: center;
margin-left:auto;
margin-right:auto;
color: #555555;
line-height: 40px;
font-weight: bold;
border: 4px solid #333;
}
How can I create a shadow/brightness around this circle using CSS, as you can see in the sample image below?
Thanks in advance!
box-shadow is what you want. Add this to your .circle class:
box-shadow: 0 0 30px #FFE8AE;
See https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow for more details about the various properties.
You can use the box-shadow property which respects the border-radius property.
Something like this jsFiddle
box-shadow: 0 0 1em #FFD800;
Try the box-shadow property:
box-shadow:0px 0px 10px 10px #faa;
jsFiddle example
the link: http://xanlz.com/test/test.html
the css:
.hot-version, .week-down, .total-down, .tag {
border: 1px solid #D4D4D4;
height: 286px;
margin-top: 10px;
padding: 1px;
}
the red part margin-top is larger in IE8 and ok under firefox,IE7. why? how to correct it?
Use css hacks:
IE7 and below can parse *property: value
.hot-version, .week-down, .total-down, .tag {
border: 1px solid #D4D4D4;
height: 286px;
margin-top: 10px; //for IE8
*margin-top: //another value for IE7;
padding: 1px;
}
EDIT:
These two links provide more hacks for IE6/7/8:
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
http://www.webdevout.net/css-hacks#in_css