I'm trying to make a text field and a button appear like they are part of a joint element, so that they look like this (screenshot from Chrome Linux):
However in Firefox Linux the button is two pixels too tall:
Example CSS: http://dabblet.com/gist/1603701
I have set the font size of both elements to 16px in the hope that they will display the same, giving a line-height of 19px - but in Firefox the button has a height of 21px instead! Setting an explicit height can lead the vertical alignment to become incorrect in Firefox unless I shrink the font (not sure why that is).
Apparently you can't set the line-height on inputs in Firefox (see article and bug report), so how else can I force the elements to be the right height?
Any suggestions?
Here's a cross-browser solution:
<!doctype html>
<html lang="en">
<head>
<style>
html, body{
padding: 50px;
}
.inputWrapper{
display:inline-block;
font-size:16px;
padding:0px;
border:1px solid #000000;
border-radius:6px;
background-color:#ffffff;
}
.email{
margin:0px;
margin-left:1px;
padding:5px;
border-width:0px;
border-radius: 6px 0px 0px 6px;
}
.submit{
margin: -1px;
margin-left: -5px;
padding: 6px;
border-width:0px;
border-radius: 0px 6px 6px 0px;
color:#ffffff;
background-color:#D94E35;
}
</style>
</head>
<body>
<div class="inputWrapper">
<input class="email" type="email" value="" placeholder="email address"/>
<input class="submit" type="submit" value="Subscribe" />
</div>
</body>
</html>
You can see it working here: http://dabblet.com/gist/1604595
you have two different paddings on your form boxes, very easy fix.
Change your CSS from this >
input[type="submit"] {
margin: 0;
padding: 6px 15px; /* Padding set 1px to high, so your getting 2px total extra space */
border: none;
border-radius: 0 6px 6px 0;
font-size: 16px;
line-height: normal;
color: white;
background: #D94E35;
}
To This >
input[type="submit"] {
margin: 0;
padding: 5px 15px; /* Now you should have even paddings */
border: none;
border-radius: 0 6px 6px 0;
font-size: 16px;
line-height: normal;
color: white;
background: #D94E35;
}
Related
First of, I know there are many similar questions to this, but none of the articles I have read has helped me. Somehow this won't work..
I want to make the area inside the class="downloadBoks" to be clickable, and not just the text within <a></a>. Not using JavaScript.
HTML:
<div class="sideboks">
<div class="downloadBoks">
Prosjektbeskrivelse
</div>
<div class="downloadBoks">
Statusrapport
</div>
</div>
CSS:
.downloadBoks {
height: 23px;
width: 150px;
font-size: 14px;
border-style: solid;
border-color: #000000;
border-width: 0px 0px 2px 0px;
margin-top: 0px;
margin-bottom:0px;
line-height: 25px;
vertical-align:middle;
box-shadow: inset 0px 0 2px 2px #777777;
}
div.sideboks{
width: 150px;
height: 50px;
margin-top: 150px;
margin-left: 54px;
position: fixed;
background-color: #B7AFA3;
border:solid;
border-width: 5px 0px 5px 5px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: inset 1px 0 0px 0px #777777;
}
This is the code I have so far. Right now the "downloadBoks" is purely looks.
edit: So I realised that having the div, within another div might have something to do with it? So updated with that code as well. Thanks for all the responses so far!
.downloadBoks a {
display: block;
height: 100%;
}
This will make the entire square clickable. DEMO
With HTML5, you can put blocks in a tags:
<a href="Prosjektplan.pdf">
<p class="downloadBoks">
Prosjektbeskrivelse
</p>
</a>
You need to make the <a> inside of the div's have 100% height and width. This way they take all the interior of the div and thus the div is "clickable":
.downloadBoks a
{
display:inline-block;
height:100%;
width:100%;
}
I'm quite new to CSS so I just testing and experimenting to see how it works
In this example we have the selector .box h3 that has padding: 6px 10px 4px 10px;,
so padding-right here is 10px. But actually, this padding-right can be 0 without
cause any difference in the layout.
Also in the selector .box ul we have padding: 14px 10px 14px 10px;, so we can set
padding-right: 0 without cause any change in layout.
What is the best practice to use when for example setting padding-right in this example?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Chapter 5: Indestructible Boxes</title>
<style type="text/css" media="screen">
body
{
font-family: Arial, sans-serif;
font-size: small;
}
a
{
color: #00458B;
}
.box
{
width: 273px;
}
.box h3
{
margin: 0;
padding: 6px 10px 4px 10px;
font-size: 130%;
color: #333;
background:#e3e3e3;
}
.box ul
{
margin: 0;
padding: 14px 10px 14px 10px;
list-style: none;
}
.box ul li
{
margin:0 0 6px;
padding:0;
}
</style>
</head>
<body>
<div class="box">
<h3>Gifts and Special Offers</h3>
<ul>
<li>Purchase Gift Subscription</li>
<li>Redeem Gift Subscription</li>
<li>View Purchase History</li>
</ul>
</div>
</body>
</html>
I think it's better to keep in the padding-right:10px. that way if you ever give the box a background-color, you'll be able to see that the content does not hit the edge of the box (even if you make the links longer, or if the user increases the font size).
you should keep it just in case, you dont want to have to edit code later on.
anyway padding: 14px 10px 14px 10px; could be padding: 14px 10px; saves space, and padding: 6px 10px 4px 10px; can also be padding: 6px 10px 4px; see here.
Padding-left will be sufficient and padding-right will not be needed for most of the cases, since .box has only width: 273px;
Hi all and good morning!
The issue I'm having today is with IE7's rendering (shock, horror) of my work in progress website. Below is some code that is intended to create a page wide <div> that has an image on the left hand side (an arrow) and then 2 lines of text to the right of the image, then a progress bar holder <div> with another <div> inside that will be widened and narrowed to fill the progress bar.
<div class="courseItem">
<img src="images/courses-arrow.jpg" width="41" height="41" alt="->" />
<p><span class="title">Intermediate Microsoft Excel 2010</span><br />
<strong>Last accessed:</strong> 21st September 2011</p>
<div class="courseProgress">
<div class="progressContainer">
<div class="progressFill" style="width: 60px">
</div>
</div>
<p>50%</p>
</div>
<div class="clearBoth"></div>
</div>
Now, what's the problem you ask? Well the issue is that for some reason, and this has really stumped me, the first of these bar divs (there are 4 in total, all exactly the same as the code above, no changes what so ever) has a massive white space between itself and its border which forces the other 3 bars below to be pushed away.
Here's the css;
.courseItem {
margin: 0px 0px 15px 0px;
border-bottom: 1px solid #b0dff7;}
.courseItem img {
float: left;
margin: 0px 20px 15px 0px;}
.courseItem p {
font-size: 11px;
color: #999999;
margin: 5px 0px 0px 0px;
padding: 0;
float: left;}
.courseItem p span.title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 12px;
color: #00154d}
.courseItem .courseProgress {
float: right;}
.courseItem .courseProgress p {
width: 50px;
font-size: 20px;
color: #52b9ed;
margin: 7px 0px 0px 10px;}
.courseItem .courseProgress .progressContainer {
margin: 15px 0px 0px 0px;
padding: 0;
width: 120px;
height: 12px;
background: url(../images/courses-empytprogress.jpg) no-repeat;
float: left;}
.courseItem .courseProgress .progressContainer .progressFill {
margin: 1px 0px 0px 0px;
height: 10px;
max-width: 120px;
background: url(../images/courses-fillprogress.jpg) repeat-x;
float: left;}
This is the visual representation
http://img1.uploadscreenshot.com/images/orig/10/29204251178-orig.jpg
Thanks in advance.
(Sorry for long windedness, just trying to paint a picture)
Remove the float:left property of .div p, and add display:inline-block;. Then, define the clear:both CSS property for the .clearBoth class.
Fiddle: http://jsfiddle.net/Jqhe8/
Fixed CSS:
.courseItem p {
font-size: 11px;
color: #999999;
margin: 5px 0px 0px 0px;
padding: 0;
display: inline-block; /*Removed float, added display*/
}
.clearBoth { /*Define clear:both!!!*/
clear: both;
}
In your code you didn't clear it's parent div & you .clear class is not working so; first clear the parent div because the child div's have float in it. Write like this
.courseItem {
border-bottom: 1px solid #B0DFF7;
margin: 0 0 15px;
overflow: hidden;
}
i have this problem with fieldsets... have a look at
http://i.imgur.com/IRrXB.png
is it possible to achieve what i want with css??? believe me, i tried!
as you can see on the img, i just want the look of the legend to be consistent across browsers, i want it to use the width of the fieldset no more (like chrome and ie) no less (like firefox), dont worry about the rounded corners and other issues, thats taken care of.
heres the the core i'm using.
CSS
<style type="text/css">
fieldset {margin: 0 0 10px 0;padding: 0; border:1px solid silver; background-color: #f9f9f9; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px}
fieldset p{clear:both;margin:.3em 0;overflow:hidden;}
fieldset label{float:left;width:140px;display:block;text-align:right;padding-right:8px;margin-right: 2px;color: #4a4a4a;}
fieldset input, fieldset textarea {margin:0;border:1px solid #ddd;padding:3px 5px 3px 5px;}
fieldset legend {
background: #C6D1E8;
position:relative;
left: -1px;
margin: 0;
width: 100%;
padding: 0px 5px;
font-size: 1.11em;
font-weight: bold;
text-align:left;
border: 1px solid silver;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#md {width: 400px;}
</style>
HTML
<div id="md">
<fieldset>
<legend>some title</legend>
<p>
<label>Login</label>
<input type="text" />
</p>
<p>
<label>Password</label>
<input type="text" />
</p>
<p><label> </label>
<input type="submit">
</p>
</fieldset>
</div>
Fieldsets and legends are notorious for being hard/impossible to style, especially cross browser. It looks like the IE problem may be partially due to the Color Bleed Bug.
Personally, I would admit defeat and set the legend to display: hidden; while creating a header inside the fieldset to style with rounded corners.
I'm having a major headache trying to align some and elements in ie6. It looks fine in ie7 and firefox but the dt elements don't appear in ie6. can anyone help? here is the code..
<div id="listMembers">
<h3>Members</h3>
<dl class="myDL">
<dt>Name</dt>
<dd>John Smith</dd>
<dt>Address</dt>
<dd>the street</dd>
...
</dl>
<div id="listOptions">
<div>
<table>...</table>
</div>
</div>
<div>
and the css:-
DL.myDL {
BORDER-RIGHT: black 2px outset; PADDING-RIGHT: 2px; BORDER-TOP: black 2px outset; DISPLAY: block; PADDING-LEFT: 2px; BACKGROUND: #ccbe99; PADDING-BOTTOM: 2px; BORDER-LEFT: black 2px outset; WIDTH: auto; PADDING-TOP: 2px; BORDER-BOTTOM: black 2px outset; FONT-FAMILY: "Trebuchet MS", Arial, sans-serif
}
DL.myDL DT {
CLEAR: both; PADDING-RIGHT: 3px; DISPLAY: inline;
FLOAT: left;
WIDTH: 250px; TEXT-ALIGN: right
}
I basically want the dt text aligned to the right and the dd on the right hand side with left align text. I reset the margin on all elements to be 0 before anything else in the css and the elements are within a dive with position relative.
You need to force hasLayout on the DL. For example add DL.myDL { zoom:1 }