I have a simple input-group which contains a input-field and button.
The strange thing is, it doesn't show up. The color isn't the same as background-color, checked in inspect element.
I've created a JSfiddle, but that doesn't do anything, cause it shows perfectly there...
https://jsfiddle.net/u691aw17/
Maybe you guys have an idea?
<!-- language: lang-css -->
/* CSS */
div.input-group {
width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
input[type="text"]{
width:300px;
height:50px;
font-size: 14px;
}
input[type="text"]::-webkit-input-placeholder{
text-transform: uppercase;
font-size: 14px;
}
input[type="text"]:-moz-placeholder /* Firefox 18- */
{
text-transform: uppercase;
font-size: 14px;
}
input[type="text"]::-moz-placeholder /* Firefox 19+ */
{
text-transform: uppercase;
font-size: 14px;
}
input[type="text"]:-ms-input-placeholder{
text-transform: uppercase;
font-size: 14px;
}
span.input-group-btn button.btn {
width:150px;
height:50px;
line-height: 1em;
padding: 0px;
}
}
.btn {
background-color: green;
color:#ffffff;
}
<!-- language: lang-html -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Email">
<span class="input-group-btn">
<button class="btn" type="button" >Sign up</button>
</span>
</div>
<!-- end snippet -->
Clearly it is a problem with the rest of the styles because in Fiddle works perfectly.
I'm guessing maybe the font-size: inherit is the problem (it's inheriting font size 0 from its parent). Set a font size to the button to override that rule.
Select button text not showing due to its padding. You can set height:auto to show the text of select button. Or set padding of select button to 0 (Zero) to see the text not appearing.
I think it might be working in your fiddle because there's no Bootstrap CSS. You're trying to override the Bootstrap .btn class CSS, but with Bootstrap you often have to be more specific (as in specificity) than that. Add an id to the button and use that as your CSS selector.
Related
I am trying to create a button that has an icon, but when I add the icon the text isnt centered vertically. How can I fix this?
This is the code in HTML & CSS:
<a href="#">
<button class=" account signUp"><span class="icon-profile</span>button</button>
</a>
.signUp {
background-image: var(--orange-background);
border-image: var(--orange-background);
font-family: poppins;
font-weight: 600;
color: white;
}
but when I add the icon the text isnt centered vertically
Put the following two properties on its parent
.parent-of-icon-and-text {
display: grid;
place-content: center;
}
Please don't use a button and a link, choose one that best fits your scenario.
To use a button as a link, you can put it in a form.
.signUp {
background-image: var(--orange-background);
border-image: var(--orange-background);
font-family: poppins;
font-weight: 600;
color: white;
}
<form onsubmit="#">
<button type="submit" class="account signUp"><span class="icon-profile"></span>button</button>
</form>
Corrections
It is invalid HTML to place a <button> inside an <a>nchor. They are both interactive content and should never have inertactive content as a descendant node. <a>nchor has been removed. For more details refer to Can I nest a <button> element inside an <a> using HTML5?.
Typo in HTML, "> missing:
<span class="icon-profile"></span>
In CSS the font-family value of Poppins was misspelt as poppins (font-family values are case-sensitive).
Solution
The OP was incomplete so what is suggested in the example is as generic as possible. In the OP, span.icon-profile needs these two styles:
display: inline-block;
vertical-align: middle
vertical-align will set the tag's contents to a vertical position by either a pre-set value or a legnth value.
display: inline-block or table-cell is required by vertical-align
Further details are commented in the example below
/*
The actual CSS to resolve alignment issues explianed by OP is marked with a ✼ which are `display: inline-block` and `vertical-align: middle`
*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
/*
Global default for font
*/
:root {
font: 2ch/1 Poppins;
}
/*
Any rem unit measurements will reference 1rem to 2ch
*/
body {
font-size: 2ch;
}
button,
b {
display: inline-block; /*✼*/
font-weight: 300;
}
.sign-up {
font: inherit;
border-radius: 4px;
color: white;
background: #333;
}
.btn-link:hover {
outline: 1px solid cyan;
color: cyan;
cursor: pointer;
}
.btn-link:active {
outline: 2px solid cyan;
color: black;
background: white;
}
.icon-profile {
font-size: 1rem;
vertical-align: middle; /*✼*/
}
/*
content: '⚙️'
in HTML it's ⚙️
*/
.icon-profile::before {
content: '\002699\00fe0f';
}
<button class="account sign-up btn-link"><b class="icon-profile"></b> Profile</button>
I have a class that I'm using to make some text navy and large:
.sectiontext {
color: navy !important;
font-size: large;
}
I apply it to elements like so:
<label class="sectiontext">Select a Unit</label>
. . .
<h4 class="sectiontext">Specify Recipients</h4>
The problem is that when I apply it to a label, it makes that text bold. I tried adding the following line to the sectiontext class:
font-weight: normal !important;
...but it makes no difference; I don't want to use "h4" instead of "label" for some bits of text because h4 always contains a "line break"; I wnat to be able to use this text style prior to a "select" element and several checkboxes, too, and thus not have the text "break"
But even with the "!important" added to the sectiontext class, the text remains bold. For example, compare the "Select a Unit" and "Select Report[s]" labels here with the H4 "Specify Recipients" and "Generate and Email Report" text:
What can I do to have a label that is not bold?
UPDATE
The only custom CSS I have is:
body {
padding-top: 50px;
padding-bottom: 20px;
background-color: lightyellow;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.containerforplatypus {
border: 2px solid #ccc;
width: 100%;
height: 100%;
overflow: hidden;
margin-bottom: 8px;
padding: 6px;
}
.margin4horizontal {
margin-left: 4px;
margin-right: 4px;
}
.fancyorangetext {
text-shadow: 0 0 6px orange !important;
font-size: xx-large;
}
.leftmargin8 {
margin-left: 8px !important;
}
.sectiontext {
color: navy !important;
font-size: large;
font-weight: normal !important;
}
...otherwise, it's just these bootstrap classes that are being used:
jumbotron
row
col-md-6
col-md-12
control-label
form-control
h3
h4
btn btn-primary
btn btn-sm
The entire HTML for those two problematic labels (in context) is:
<div class="row">
<div class="col-md-12" name="unitsCheckboxDiv">
<label class="sectiontext">Select a Unit</label>
<select class="form-control, dropdown">
#foreach (var field in units)
{
<option id="selItem_#(field.unit)" value="#field.unit">#field.unit</option>
}
</select>
</div>
</div>
<div class="row">
<div class="col-md-12" name="unitsCheckboxDiv">
<div class="containerforplatypus">
<label class="sectiontext">Select Report[s]</label>
#foreach (var rpt in reports)
{
<input class="leftmargin8" id="ckbx_#(rpt.report)" type="checkbox" value="#rpt.report" />#rpt.report
}
</div>
</div>
</div>
UPDATE 2
It works now, with no change; it first worked on trying fmz's suggestion, but then I tried my previous approach again, and it now works, and even without the "!important" marker:
.sectiontext {
color: navy !important;
font-size: large;
/*font-weight: 400 !important; <= works */
/*font-weight: normal !important; <= works now, as does the rule below */
font-weight: normal;
}
Consider using:
label {font-weight: 400 !important}
Also specify the font-size, as your label appears to be displaying a larger than normal font size.
A label by default is not bold.
Try to overwrite it with:
html label.sectiontext {
font-weight: inherit;
}
The html and tag name will give it some priority. If inherit doesn't work then try "normal".
Can you please include a working sample of your code? (jsfiddle or such)
Without seeing an actual code sample, I'd say that the h4 settings override your sectiontext class settings and you would need to add h4 .sectiontext { font-weight: normal; }
Wanted to add an answer here that's not directly related to OP but took me a moment to realize when using downloaded custom font for the first time. I received a .zip file and followed the instructions here.
My font was heavy and I wasn't sure why I couldn't remove the bold, but if you're working with a font pack read through all the names and make sure you're using the right one in your font declaration.
> ls .\assets\Fonts\Raleway\ | select -Property Name
Name
----
Raleway-Black.ttf <-- I used this first
Raleway-BlackItalic.ttf
Raleway-Bold.ttf
Raleway-BoldItalic.ttf
Raleway-ExtraBold.ttf
Raleway-ExtraBoldItalic.ttf
Raleway-ExtraLight.ttf
Raleway-ExtraLightItalic.ttf
Raleway-Italic.ttf
Raleway-Light.ttf
Raleway-LightItalic.ttf
Raleway-Medium.ttf
Raleway-MediumItalic.ttf
Raleway-Regular.ttf <-- This is the one I wanted
Raleway-SemiBold.ttf
Raleway-SemiBoldItalic.ttf
Raleway-Thin.ttf
Raleway-ThinItalic.ttf
SIL Open Font License.txt
In this case, my font declaration looked like this in the stylesheet.
#font-face {
font-family: "Raleway";
src: url("/assets/Fonts/raleway/Raleway-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
Following annoying problem: jsfiddle.net/f6juduq1
Two buttons, one input type="submit", the other an a tag, should look the same:
HTML:
I'm a button
<br><br><br>
<input type="submit" class="button" value="I'm a button">
CSS:
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
The last line (box-sizing) is needed to achieve the same width. (Or min-width - the buttons should be flexible in width.)
Now the issues:
Firefox 40
The inner box (inspect the first button with Firebug and click the Layout tab) is 150 x 22px.
Second button: 150 x 24px. Why?
Chrome 45
First button (inspect with Chrome's Developer Tools): 150 x 21px.
Second button: 150 x 21px. Okay, but they differ from Firefox. Why?
Internet Explorer 11
First button (inspect with IE's Developer Tools): 150 x 20.7px.
Second button: 150 x 20.7px. Okay, but "20.7" huh? Why?
Safari 5.1.7
(Can't inspect the jsfiddle's result iframe.)
Opera 31
(Same as Chrome.)
Taking a screenshot from Firefox's result and comparing it in Photoshop shows the input (second button) is 2px higher than the a tag (first button):
In Chrome and Safari it looks good:
In IE the a tag is 1px higher.
Now the final question is how to fix this or rather how to prevent those messy issues?
Thanks in advance!
Very interesting observation here. The issue affects both height and width, specifically in Mozilla Firefox, due to built-in CSS style declarations.
Adding the following CSS should fix both height and width discrepancies.
input::-moz-focus-inner { border:0; padding:0 }
Illustration of the bug and fix here (notice, I've taken out your CSS styles for height:
html{font-family: Arial; font-size:0.8em;}
.wrapper {
background: red;
white-space: nowrap;
}
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
input.buttonfix::-moz-focus-inner {
border:0;
padding:0
}
NOTE: Use Firefox browser to see the issue.<br>
<div class="wrapper">
I'm a button
<input type="submit" class="button buttonfix" value="I'm a button">
<input type="submit" class="button" value="I'm a button">
</div>
Notice last button has extra height forcing the container to show top/bottom of other buttons
<br>
<br>Input Button - Fixed<br>
<input type="submit" class="button buttonfix" value="I'm a much longer button">
<br>A Tag - fine<br>
I'm a much longer button
<br>Input button - bug?<br>
<input type="submit" class="button" value="I'm a much longer button">
Read about the issue in detail here: https://css-tricks.com/forums/topic/button-padding-issue/
The solution
Basically there are three issues:
Different box lengths
Different default settings across several browsers
Firefox CSS discrepancies
The solutions are listed below.
1. Different box lengths
An a tag is longer than an input submit:
To solve this you have to add box-sizing: content-box; to the input's CSS. As from now the (short) buttons look like:
2. Different default settings across several browsers
The buttons have different heights thanks to different browser default settings:
The input (second one) is higher.
The solution here: resetting all those defaults. Set line-height and height:
3. Firefox CSS discrepancies
And finally the last one, a pretty annoying behavior just in Firefox.
The buttons above are equal: same height, same width. But if the button text gets longer you might see this:
The input button is wider. This is because Firefox uses pseudo elements within the button elements. To redress this problem reset padding and border for input::-moz-focus-inner:
The code
Here's a sample: http://jsfiddle.net/f6juduq1/12/
CSS
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
line-height: 1.5;
height: 27px; /* 18px x 1.5 = 27px */
}
input[type="submit"].button {
box-sizing: content-box;
}
input.button::-moz-focus-inner {
border:0;
padding:0;
}
Thank you all for help. I hope this answer is concise & clear to help other people finding the solution as soon as possible.
To obtain the same height in all browsers you need to specify the height
and for vertical align center line-height same as height value
for example try this:
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
min-width: 150px;
cursor: pointer;
padding: 0 20px;
/* Adjust your height here */
line-height: 35px;
height: 35px;
}
I was having a problem with <a> being sized differently than <button> only in Safari, and it was caused by having SVG icon buttons.
The SVGs were sized at 35px, and both the anchor and button tags had explicit height of 35px set on them.
The problem was that the buttons were smaller than the anchors only in Safari.
I removed the height declarations on the buttons and it made the button take the size of the SVG inside it.
I am trying to develop a website. I have written styling in CSS. It is working perfectly in Mozilla Firefox and Google Chrome but it is not behaving properly in Internet Explorer 10. I am trying to hover on some carded layout's made using bootstrap and tiles, so if I hover on the card the border color should change and the text inside that card should become bold. I could some how manage to get the text bold but I am not able to see the border color change when I hover.
I need to know what the solution is and figure out something which will make sure that the styling is same across the browsers.
<div class="col-sm-6 col-md-4 col-lg-4" align="center">
<span class="tile tile-account">
<a href="#" onclick="return doubleClick()" class="block">
<strong class="tile-heading landingpageheader tileTextStyle">
Change my name</strong>
</a>
</span>
</div>
The styling in CSS:
.tile {
display: block;
background: #fff;
border: 2px solid;
border-color:#ccc;
border-radius:8px;
cursor: pointer;
margin-bottom: 20px;
;
overflow: hidden
}
.tile>a:HOVER .landingpageheader{
font-weight: bold;
}
.tile>a:hover{
border: 2px solid;
border-color: #00A1D0;
}
.tile-account {
height: 180px;
border-radius: 8px;
}
.tileTextStyle{
text-align: center;
padding-top:12px;
white-space: normal;
word-wrap: noraml;
height: 46%
}
.landingpageheader {
font-size: 20px;
font-style : normal;
font-weight : 400;
font-family : Helvetica;
color: #00A1D0;
}
just try to complete the code in your css
span.tite.tile-account a:hover{
font-weight: bold;
}
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>