How do I make the radio button shadow to be rounded in Chrome like how it is displayed in IE? Any help will be appreciated!
IE: (like this)
CHROME: (not like this)
HTML:
<div class="radio"><input type="radio"><label>C#</label></div>
<div class="radio"><input type="radio"><label>Java</label></div>
CSS
input[type="radio"] {
box-shadow: -4px 0 0 maroon;
border-radius: 10px;
}
JS FIDDLE:
http://jsfiddle.net/nikib/b85zpgu5/
You could change the -webkit-appearance property of the input element to get initial or inherit. Then style is according to your need.
input[type="radio"] {
width:15px;
height:15px;
box-shadow: -4px 0 0 maroon;
border-radius: 999px;
-webkit-appearance: inherit;
border:1px solid #999999;
position:relative;
box-sizing:border-box;
}
input[type="radio"]:checked:before {
content:"";
position:absolute;
border-radius: 999px;
left:25%;
top:25%;
width:50%;
height:50%;
background:#999999;
}
Updated Fiddle
Apparently my brain has turned to mush this morning. I feel certain the answer is obvious but I can't figure out what I'm doing dumb. I'd guess it's something wrong with the CSS so here's that:
.fulldiv {
border:2px solid green;
background:white;
margin: 10px 0 10px 5px;
width:97.5%;
}
.fulldiv h2 {
background:green;
padding: 10px 5px;
margin:0;
}
.fulldiv p {
padding: 5px 5px;
margin:0;
}
.thirds {
border:2px solid cyan;
background:white;
margin: 10px 0;
width:31.5%;
float:left;
margin-left:5px;
}
.thirds h2 {
padding: 10px 5px;
background:cyan;
margin:0;
}
.thirds p {
margin:0;
padding: 5px 5px;
}
The full shenannigans can be seen at this
JS Fiddle.
Shouldn't the third .hicon div be separate from the the previous one? Why are the three thirds divs chilling inside the final div? What am I overlooking?
You need to add:
<div style='clear:both;'></div>
After the final .thirds div in order to clear the floats you have in place and resume the document flow.
Alternatively you can use a css clearfix on the nth-child(3) of .thirds (or add a clearfix class directly)
Looks like a case for clear fix! I've added in the microclearfix by Nicolas Gallagher, but there are plenty out there.
http://jsfiddle.net/C9MZp/4/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
I am trying to give the #page div an inner border that is in line with the grey border around the top part: http://www.designated.net.au/testbed/testpage/
I realise I could just add another div, but that is not the solution I'm looking for as there will be other content within #page. Is this possible?
This follows on from this question: Border-box CSS not working properly
If you don't mind it not working in older browsers you could just use a .box-shadow. This can be done without having to add extra markup. You could also use :before or :after pseudo css classes as well but box-shadow is cleaner IMO.
-webkit-box-shadow(inset 0 0 1px #000);
-moz-box-shadow(inset 0 0 1px #000);
-o-box-shadow(inset 0 0 1px #000);
box-shadow(inset 0 0 1px #000);
You can leverage the relative positioning you are already using to align your images with the border.
Example: http://jsfiddle.net/zbrcb/
Merge these definitions with your existing definitions.
#page {
border: 10px solid #333;
}
#spotlight-main-top-left { z-index:3; position:relative; float:left; width:40px; height:40px; left: -10px; top: -10px; }
#spotlight-main-top-top { z-index:2; position:relative; width:100%; height:10px; background-color:#333333; top: -10px; }
#spotlight-main-top-right { z-index:3; position:relative; float:right; width:40px; height:40px; right: -10px; top: -10px; }
#spotlight-main-top-title { z-index:3; position:relative; margin:0 auto; width:200px; height:30px; top: -10px; }
#spotlight-main-top-title-left { position:relative; float:left; width:30px; height:30px; }
#spotlight-main-top-title-right { position:relative; float:right; width:30px; height:30px; }
#spotlight-main-top-title-middle { position:relative; margin:0 30px 10px; width:140px; height:20px; background-color:#333333; }
#spotlight-main-top-title-text { position:relative; width:140px; height:18px; text-align:center; }
​Works in Chrome, FF, Safari, IE 8/9 (7 could probably be made to work as well; your header is misaligned in IE7 even without this change).
Personally, I would try to reduce the number of elements you are using to create the top of the site, but to be fair it works fine.
So I am trying to get this to working somthing like a List Bullet, but at the END of the Navigation Button.
I am having PROBLEMS WITH the Black Triangle positioning itself too far up. It raises higher than the text I have (w/ black BG).
Below is an example of my issue.
http://dabblet.com/gist/3483670
I have tried alot of different things, but I am completely stumped.
Probably something silly I am overlooking, but it might need a serious of work arounds I am not aware of.
Thanks for all the help.
Incase the Link does not work for you. See Below.
CSS
a {font: 19px/26px 'Exo',Arial,sans-serif;
list-style: none outside none;
margin: 0 0 0 -10px;
padding: 0 0 58px;
font-weight:100;
text-transform: uppercase;
width: 100%;
text-decoration:none;}
a[rel="catagory"] { background:#000000; padding:0 5px 0 5px; color:#BAFF32;}
.triangle { width: 0;
height: 0;
background:no-repeat right center;
border-top: 0px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid black;
display:inline-block;}
HTML
<span class="plus">+</span> <span>HOME</span><span class="triangle"></span>
You can add
a[rel="catagory"] {
vertical-align:middle;
display:inline-block;
width:auto;
line-height:25px;
}
.triangle {
vertical-align:middle
}
Explanation:
The part which aligns them is
a[rel="catagory"] {vertical-align:middle;}
.triangle {vertical-align:middle}
But anchor's height is 22px, so we need
a[rel="catagory"] {
display:inline-block;
line-height:25px;
}
in order to make the height 25px.
But you have another rule (I wonder why):
a{width:100%}
Before setting display:inline-block the anchor has display:inline, so that rule does nothing.
But now it works and we want to disable it, so we need
a[rel="catagory"] {
width:auto;
}
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
div a:visited, #homeheader a{
text-decoration:none;
color:black;
margin-right:5px;
}
div a:hover{
background-color:#D0DDF2;
border-radius:5px;
border:1px solid #102447;
}
div li{
padding:0;
margin:0px 10px;
display:inline;
font-size:1em;
}
<div>
<ul>
<li>this</li>
<li>that</li>
<li>this again</li>
<li>that again</li>
</ul>
</div>
I made a JS Fiddle demo here.
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
http://jsfiddle.net/TEUhM/3/
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
You can also use outline, which won't affect the width i.e. so no "jump" effect. However,support for a rounded outline may be limited.
You could use a box shadow, rather than a border for this sort of functionality.
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
Try using a declaration like
box-shadow:0 0 1px 1px #102447;
instead of your
border:1px solid #102447;
on your hover state.
Below is a quick demo of this in action:
DEMO
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}
<div id="homecontainer">
<div id="homeheader">
<ul>
<li>this
</li>
<li>that
</li>
<li>this again
</li>
<li>that again
</li>
</ul>
</div>
</div>
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
http://jsfiddle.net/TEUhM/4/
After taking a long time pressure i found a cool solution.
Hope that it will help others.
on the add the folloing code :
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
Hope it will help.
No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.
box-shadow: inset 0 -3px 0 0 red;
You can offset the X or Y to change top/bottom and use -negative value for opposite sides.
.button {
width: 200px;
height: 50px;
padding: auto;
background-color: grey;
text-align: center;
}
.button:hover {
box-shadow: inset 0 -3px 0 0 red;
background-color: lightgrey;
}
<div class="button"> Button </div>
You can use box-shadow which does not change your box-size, unlike border.
Here is a little tutorial.
Just add the following code into your css file
#homeheader a {
border:1px solid transparent;
}
The CSS "box-sizing" attribute fixed this problem for me. If you give your element
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
The easiest method I found was using 'outline' instead of 'border'.
#home:hover{
outline:1px solid white;
}
instead of
#home:hover{
border:1px solid white;
}
Works the best!
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
Add a negative margin on hover to compensate:
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
updated fiddle
In the fiddle the margin: -1px; is a little more complex because there was a margin-right getting overridden, but it's still just a matter of subtracting the newly-occupied space.
I too was facing the same problem. The fix mentioned by Wesley Murch works! i.e. adding a transparent border around the element to be hovered.
I had a ul on which :hover was added to every li. Every time, I hovered on each list item, the elements contained inside li too moved.
Here is the relevant code:
html
<ul>
<li class="connectionsListItem" id="connectionsListItem-0">
<div class="listItemContentDiv" id="listItemContentDiv-0">
<span class="connectionIconSpan"></span>
<div class="connectListAnchorDiv">
Test1
</div>
</div>
</li>
</ul>
css
.listItemContentDiv
{
display: inline-block;
padding: 8px;
right: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
.connectionIconSpan
{
background-image: url("../images/connection4.png");
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 0;
background-color: transparent;
border: medium none;
clear: both;
float: left;
height: 32px;
width: 32px;
}
.connectListAnchorDiv
{
float: right;
margin-top: 4px;
}
The hover defn on each list item:
.connectionsListItem:hover
{
background-color: #F0F0F0;
background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
box-shadow: none;
text-shadow: none;
border-radius: 10px 10px 10px 10px;
border-color: #AAAAAA;
border-style: solid;
}
The above code used to make the containing elements shift, whenever I hovered over connectionsListItem. The fix was this added to the css as:
.connectionsListItem
{
border:1px solid transparent;
}
Use :before to create the border, that way it won't modify the actual content and gives you more freedom. Check it out here:
http://codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div>
<div class='before'>Before</div>
div{
width:300px;
height:100px;
text-align:center;
margin:1rem;
position:relative;
display:flex;
justify-content:center;
align-items: center;
background-color:#eee;
}
.border{
border-left:10px solid deepPink;
}
.before{
&:before{
content:"";
position:absolute;
background-color:deepPink;
width:10px;
height:100%;
left:0;
top:0;
}
&:hover{
background-color:#ccc;
&:before{
width:0px;
transition:0.2s;
}
}
}
Be careful if you also use padding.
In my case, I had a 5px padding inside the hover defn. It should be moved inside the actual class of the element you want to hover over.
Code snippet