Only half of these are actually being applied!
.btn{
background-color: darkorange;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10x 25px;
border-radius: 30px;
Any Ideas
Check if it’s being overruled by CSS specificity.
You can try to override the specificity using
!important
I created an anchor tag with .btn class. and use your css I made only one important changes. after this changes all css property is working.
Displays an element as an inline element (like <a>). Any height and width properties will have no effect.
so I did set display:inline-block; because The element itself is formatted as an inline element, but you can apply height and width values
.btn{
background-color: darkorange;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 100px;
border-radius: 30px;
display: inline-block;
}
if it is helpful for you let me know.
Related
I am experiencing weird behavior of input when it is focused. As you can see through the images below, an extra white border appears whatever its outline-color is.
I tried setting padding: 0px; and box-shadow: none; too, but still I could not remove it. One thing I realized is that setting outline-style: solid; does the trick, but then I couldn't see rounded corner anymore.
The image below is the same input element which has completely same css rulesets:
input {
flex: auto;
border: 1px solid darkgrey;
border-radius: 4px;
background-color: transparent;
color: white;
font-size: 42px;
}
input:focus {
outline-style: auto;
outline-color: orange;
}
body {
background-color: #383838;
}
<input>
Don't use the auto value. Use solid instead
input {
flex: auto;
border: 1px solid darkgrey;
border-radius: 4px;
background-color: transparent;
color: white;
font-size: 42px;
}
input:focus {
outline-style: solid;
outline-color: orange;
}
body {
background-color: #383838;
}
<input>
In addition, in CSS3, outline-style accepts the value auto. The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. ref
input[type=submit] {
float: left;
font-size: 14px;
width: 30%;
height: auto;
text-align: center;
font-weight: normal;
line-height: 30px;
word-wrap: break-word;
margin-left: 34.998721%;
margin-top: 20px;
clear: both;
min-height: 0px;
font-family: helvetica;
color: rgb(255, 255, 255);
background-color: rgb(0, 154, 222);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
So when I apply this styles to the <p> tag it looks:
but when I apply it for submit button it looks with some borders around it:
How to remove this border?
try adding this property to the css rule:
border: none;
if it didn't work then also add:
outline: none;
Try to add the following for the active state:
outline: none;
Since button elements do have a border on it's own, you have to disable it in order to get get it not shown.
To achieve this, you can rely on the border-style option found here.
So if you want to disable the standard-border of your submit button, you can simply add this line to your CSS.
border-style: none;
border-style property is set to be none by default, it seems that by defining border-top-left-radius property and so on the border-style is alternated to be solid thus you have the unwanted border. You can simply add border-color property and set it as transparent, then you should have got your desired result
I was trying to create a circle with i icon in it for with CSS. However, when page is first rendered the circle looks like an inverted egg and covers the border around it slightly. (Zoom in the browser to see issue in more details)
The tricky part is, if you open Dev Tools and change any value related to it's position(width, height, whatever), everything will snap back to normal and it will become a circle.
https://jsfiddle.net/2yjashje/
<div class="round-egg">
i
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 10px;
cursor: help;
border-bottom: none !important;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
}
What is going on here?
I put the letter "i" in its own span and increased the margin from top to vertically centre it. As for the circle, I modified the border-radius property, and then removed the border-bottom: none; property as well. Assuming you want a circle, you need the bottom border.
https://jsfiddle.net/2yjashje/3/
<div class="round-egg">
<span class="icon">i</span>
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 30px;
cursor: help;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
display: table-cell;
}
.icon {
display: block;
margin-top: 2px;
}
I want to remove the space between tab and horizontal line displayed. Please find the fiddle http://jsfiddle.net/yy1t6w1f/ .
Sample code to create horizontal line:
div.hr {
background: #fff no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}
div.hr hr {
display: none;
}
The created tab's should touch the horizontal line and their should be no space between tab and div.Thanks.
Adding
hr { margin: 0; }
will do the trick. The hr tag in HTML has default margins, which are causing that space between those two elements. Note that the above code will remove all margins. If you only want the top margin removed, you can use margin-top instead of margin.
In fact, in your case, you need not use hr tag at all; you can remove it and simply add:
border-bottom: 1px solid #888888;
to your .tabDiv CSS selector; that should also serve your purpose here.
table, table td {
border-spacing: 0px;
padding: 0px;
}
hr { margin: 0; }
http://jsfiddle.net/yy1t6w1f/6/
Unless I’m misunderstanding what you are building, there is a far better way to write this.
See below:
nav a {
display: inline-block;
background-color: #efefef;
border: 1px solid #888;
border-top: 2px solid #888;
border-top-left-radius: 10px 5px;
min-width: 96px;
padding: 0 4px;
text-align: center;
font: 18px impact;
letter-spacing: 2px;
color: #3B0B17;
text-transform: uppercase;
text-decoration: none;
}
<nav>
FirstTab
SecondTab
ThirdTab
</nav>
I have looked for other ways to fix this including display:block; but none seem to work,
can any one tell me what I'm doing wrong?
Here's my code:
HTML:
<header>
<div id="menu">
<div id="item"><b>HOME</b></div>
<div id="login"><b>LOGIN</b></div>
<div>
</header>
CSS:
#login {
background-color: white;
color: black;
font-size: 20px;
line-height: 30px;
height: 30px;
width: auto;
border: 3px solid white;
border-radius: 30px;
text-align: center;
float: right;
margin-left: 10px;
margin-right: 10px;
padding-left: 10px;
padding-right: 10px;}
#login :hover {
background-color: black;
color: white;}
Here's the JSFiddle
The main problem I'm having is that for me in Chrome, the text background color changes but the padding does not, as I expected. I wish to find a way to do so.
If you want to change the background color of the div and not the text you should remove the space between #login :hover so that it is #login:hover
White-space matters for CSS selectors. If you put a space between it mean the next selector is for any descendant of the first selector.
When you have #login :hover it means that any hovered child/descendant element will be affected by the style rule but not #login itself.
Remove the space between the #login :hover so it will be #login:hover .