Aligning an input with a button in Firefox - html

I'm having trouble aligning a regular <button> beside an input in Firefox. I get the following output in Firefox:
The input class is university and the button class is next and the CSS code is the following:
.university {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-transform: uppercase;
padding: 20px;
width: 400px;
display: block;
border: none;
color: #000;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
outline-style: none;
outline-width: 0px;
outline-color: #000;
}
#next {
background-color: #C44D58;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-transform: uppercase;
width: 150px;
padding: 20px;
margin: 0;
color: #FFF;
border: none;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
outline-style: none;
outline-width: 0px;
outline-color: #000;
}
And the HTML is:
<div class="universityContainer">
<input type="text" class="university typeahead" placeholder="University Name">
<button id="next">NEXT</button>
</div>
The CSS for .universityContainer is:
.universityContainer {
display: table-cell;
vertical-align: middle;
}
Note: It should be noted that it renders correctly in every browser except for Firefox.


Remove display: block from the .university. Fiddle: http://jsfiddle.net/gf9Tr/


You can remove display: block; or you can use display: inline-block; in class university instead.


You need to change display:block on the input element to display: inline-block.
Here is a jsbin to show them lining up correctly.

Related

How to use css classes in Best way without redundant?

I had a email textbox with default,success,error css class.
<input id="emailInput" class="sansserif inputuser" style=" margin-top: 5px;" type="text" placeholder="Enter Email.."/>
.default{
width: 306px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.error{
width: 306px;
box-sizing: border-box;
border: 2px solid #ff0000;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.success{
width: 306px;
box-sizing: border-box;
border: 2px solid #00b33c;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
here i'm applying following css classes default ,error and success while validating email text box but only difference from the above three classes is border property only .how to reduce the redundant css properties is there any better way to achieve this.

You can define similar css at one place with joining multiple selectors and overriding later if necessary:
Note: The styles that you are overriding i.e for .error and .success must come after the generic styles otherwise they will be overridden by default styles and you won't see any change.
.default,
.error,
.success {
width: 306px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.error {
border-color: #ff0000;
}
.success {
border-color: #00b33c;
}

Why is this div not the same height as the input? (In Firefox)

I've created a div and input and given both exactly the same borders, padding, margins, fonts and font-sizes. But they're still not the same height. Why?
Edit: Using Firefox
Example: http://jsfiddle.net/a8n6qxaz/
HTML:
<div class="close">X</div>
<input type="submit" value="TEST" />
CSS:
input[type="submit"]
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
.close
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: red;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: #3e3f39;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}

The problem is that you didn't specify any height, so use e.g.
height: 1em;
However, by default the height of the input is considered using the border-box model, and the height of the div using the content-box model. Use the box-sizing property to specify the same model for both elements:
box-sizing: content-box;
input[type="submit"], .close {
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
height: 1em;
box-sizing: content-box;
}
<div class="close">TEST</div>
<input type="submit" value="TEST" />

For some reason, in Firefox, padding is applied differently in an input than a div even if they're both display: block and you remove the appearance of the input. line-height also messes up in an input.
Removing the top/bottom padding from both and line-height from the input, allows making them the same height:
http://jsfiddle.net/a8n6qxaz/4/
input[type="submit"]
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
height: 1.5em;
padding: 0em;
font-family: Arial, Helvetica;
font-size: 1.25em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
vertical-align: middle;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
.close
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
height: 1.5em;
padding: 0em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1.5em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}

Because you don't specify the height, and firefox applies different default height for div and for input than chrome

If you want to force the input to behave like the div, you must change the box-model of the input:
box-sizing: content-box;
Add that CSS property to the input, and then in firefox both div and input will consider the padding in the same manner.

Child divs going outside of parent divs

My code: https://jsfiddle.net/k0hqzcwg/
I'm not understanding why the message button is moving outside of the parent div. I've tried clearing floats both with adding clear: both, and adding a clearfix class but have not gotten any results.
In summary, I am trying to start a competing video sharing service with Youtube, my immense skill in CSS and Html are sure to pull through and give me the one up. Sarcasm
Any tips are welcome, I know I have a lot to learn.
For those who dont want to click the link:
Html:
<body>
<div id="headingbarholder">
<div id="headingbar">
<div id="heading-submit-avatarholder">
<div id="headingmessagebutton">
<span id="messagebuttoncontent" style = text-align: middle;>Message</span>
</div>
<div id="headingavatar">
<img id="heading-avatar" src="Removed Link" width = 45px; height = 45px;></img>
</div>
</div>
<img id="logo" src="Remove Link" width = 45px; height = 45px; display = inline-block;></img>
</div>
</div>
</body>
Css:
body {
color: White
font-size: 11px;
font-family: arial,sans-serif;
line-height: 15px;
background-color: #F1F1F1;
margin: 0 -8px 0 -8px;
}
#headingbarholder{
position:fixed;
left:0;
width: 100%;
}
#headingbar{
position: relative;
background-color: #fff;
padding:7px 30px 8px 30px;
border-bottom: 1px solid #E8E8E8;
}
#heading-submit-avatarholder{
float: right;
right: 0px;
width: 160px;
}
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display:inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height:normal;
}
#headingavatar{
width: 45px;
height: 45px;
display:inline-block;
}

Float the button left.
Here:
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
float: left;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display: inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height: normal;
}

I would use a button instead and float it: Fiddle

CSS displaces two line strings

Have a look at this fiddle
http://jsfiddle.net/ArvindSadasivam/v8dtj2ke/1/
divs:
<button class="typeBtn" id="">
<img class="iconTick" src="images/buttons/iconTick.png" alt="tickIcon" />Flatfront</button>
<button class="typeBtn" id="">Flatfront TWICE
<img class="iconTick" src="images/buttons/iconTick.png" alt="tickIcon" />
</button>
CSS:
.typeDiv {
position : relative;
margin : 20px 0 0 20px;
font-family : OpenSans-Regular;
}
.typeBtn {
position: relative;
width: 110px;
height: 40px;
box-shadow: 0 1px 3px #424242;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #D7D7D7;
color: #000000;
text-align: right;
font-family: OpenSans-Regular;
font-size: 0.7em;
padding: 0px 40px;
margin: 15px 10px 0px 0px;
}
.iconTick {
position : absolute;
width : 25px;
left : 5%;
top : 20%;
}
I want the Flatfront twice to be on the same position vertically.
Basically align them properly.
How do I do it?

Add
vertical-align: top;
Into your .typeBtn Class
Your Class should looks like this
.typeBtn {
position: relative;
width: 110px;
height: 40px;
box-shadow: 0 1px 3px #424242;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #D7D7D7;
color: #000000;
text-align: right;
font-family: OpenSans-Regular;
font-size: 0.7em;
padding: 0px 40px;
margin: 15px 10px 0px 0px;
vertical-align: top; /*Changed this */
}

Change the following styles in .typeBtn like
padding:0px;
text-align:center;

moz-document url-prefix not working for hyperlink

I have css called action1 and i trying to remove outline property from it just for firefox browser. Here is the class
a.action1,a.action1:link,a.action1:visited {
display: block;
height: 27px;
width: 200px;
color: #FFFFFF;
background-color: #666633;
font-family: Century Gothic, sans-serif;
font-size: 13px;
text-align: center;
vertical-align:middle;
padding: 1px 2px;
border: 1px solid #FFFFFF;
outline: 1px solid #666633;
text-decoration: none;
margin: 1px;
cursor: pointer;
-moz-box-shadow: 0px 0px 6px 0px #888;
-webkit-box-shadow: 0px 0px 6px 0px #888;
box-shadow: 0px 0px 6px 0px #888;
}
and here is the code i am using in my jsp to remove the outline property
<style>
#-moz-document url-prefix() {
a.action1 {
outline: 0px;
}
}
</style>
This is not working for.
<a class="action1" onclick="dosomething()" href="gosomewhere">somename</a>
Although moz-document is working perfectly fine for input type button.

Use Firebug to check whether the css is applied, whether it has lower priority level than others.
Try
<style>
#-moz-document url-prefix() {
a.action1 {
outline: 0 none !important;
}
}
</style>