Hey guys Im currently trying to get a textbox a select menu and a button all into one sized div cleanly but im running into an issue where each element has odd borders/margins which prevent it from rendering properly (the button appears below the text box and select menu)
Heres the html Im currently using
<div class="content">
<div class="search-panel">
<div class="search-panel-logo">
<img src="img.png" class="search-panel-logo-img" />
</div>
<div class="search-panel-searchbar">
<form class="search-panel-frm" action="" id="fsearchbar">
<input class="search-panel-frm" type="text" id="tseachtext" name="tsearchtext" value="Search" />
<select class="search-panel-frm" id="ssearchselect" name="ssearchselect">
<option value="Cars">Cars</option>
</select>
<input class="search-panel-frm" type="button" id="bsearchgo" name="bsearchgo" value="Search!" />
</form>
</div>
</div>
</div>
and heres the CSS:
.content {
background:inherit;
width:950px;
height:600px;
margin: 0 auto;
}
.search-panel {
width:inherit;
height:500px;
background:#093;
margin:0 auto;
}
.search-panel-searchbar {
width:inherit;
height:30px;
}
.search-panel-searchbar-frm {
width:inherit;
height:inherit;
}
.search-panel-searchbar-frm-text {
width:60%;
height:70%;
}
.search-panel-searchbar-frm-select {
width:20%;
height:80%;
}
.search-panel-searchbar-frm-go {
width:20%;
height:80%;
}
any idea what I can add to get all the elements to appear in one line as opposed to two, Ive already tried
border:0;
margin:0;
and it didnt fix the problem.
To achieve your goal, some CSS tricks had to be applied, see below the CSS:
CSS
/* wrapper */
.search-panel-searchbar {
width: 100%;
height: 30px;
overflow: hidden;
}
/* form elements must be wrapped and not a direct child of the form tag */
.search-panel-searchbar > form > div {
background-color: #fff;
width: 100%;
height:30px;
}
/* input[type="text"] */
.search-panel-searchbar-frm-text {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 16px;
height: 16px; /* necessary to fix height issue on windows browsers */
padding: 6px 0;
display: block;
border: 1px solid #ccc;
background-color:#fff;
width: 60%;
text-indent: 4px;
float: left;
}
/* select */
.search-panel-searchbar-frm-select {
margin: 0;
padding: 0;
font-size: 12px;
height: 30px;
padding: 6px 4px;
display: block;
border: 1px solid #ccc;
background-color:#fff;
width: 20%;
float: left;
margin-left:-1px; /* pull to prevent border overflow issue with % */
}
/* input[type="button"] */
.search-panel-searchbar-frm-go {
margin: 0;
padding: 0;
font-size: 12px;
height: 30px;
padding: 6px 0;
display: block;
border: 1px solid #ccc;
background-color:#fff;
width: 20%;
float: left;
text-align:center;
margin-left:-1px; /* pull to prevent border overflow issue with % */
cursor: pointer;
}
Note:
CSS does not include style given on the Fiddle example to a visual demonstration, like the button hover and body background.
Please take note that unfortunately, each browser (and OS!) deals with the select in different ways, and it's likely that on one or two browsers, the style may differ.
The working Fiddle example!
Screen shot matches tests performed on:
Linux Ubuntu 12.04
Firefox 12.0
Chromium 18.0.1025.151 (Developer Build 130497 Linux)
Windows XP Profissional versão 2002 Service Pack 3
Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2 (only select box height fail)
Google Chrome 18.0.1025.168 m
K-Meleon 1.5.4 (fail due to font-family)
Windows 7 Home Edition Service Pack 1
Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m
The font-family that you will use must contain a font family declaration at the end to prevent line-height and text-size issues. e.g., font-family: Helvetica, Arial, sans-serif
Remove the whitespace between the elements.
Also, using width: inherit is probably not a good idea - try width: 100% instead or something along those lines. height: inherit can be replaced with height: auto; (or just omitted).
You've posted some CSS classes that doesn't apply to the HTML you posted (eg. .search-panel-searchbar-frm-go)
You're applying the class search-panel-frm to your form element as well as elements within the form. Are you sure this is what you want?
I'm not seeing the same problem: The input, select and input:button all appear on the same line for me.
You can try adding this simple fix to keep everything on one line which may give you some ideas.
.search-panel-frm *
{
white-space:nowrap;
}
If all your elements are already on the same line and you want them to line up better try different values for vertical-align, such as:
.search-panel-frm *
{
vertical-align:top;
}
Related
I created multi-line-padded text based on Matthew Pennell's solution (codepen by CSS Tricks). In Chrome all looks fine, but in Firefox height of span elements bigger than height of their ancestor. If I adjust vertical padding for Firefox, in Chrome will be same problem, and vice versa.
Why it happens? What the real technical reasons of this problem?
HTML Code:
<div class="padded-multiline">
<h1>
<strong>How do I add padding to subsequent lines of an inline text element?</strong>
</h1>
</div>
CSS Code:
:root {
font-family: Arial, sans-serif;
font-size: 20px;
}
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
Setting a line-height: 1; on strong will fix the problem also read my comment.
Chrome and Firefox seems to use different text layout system.
In Chrome it will floor the line-height attribute and Firefox seems to use the correct one.
To achieve the same effect for title, just use only the outline.
H1 does not need strong.
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding:1px;
color: #fff;
display: inline;
outline: 10px solid #c0c;
margin: 0;
font-size:16px;
}
<div class="padded-multiline">
<h1>How do I add padding to subsequent lines of an inline text element?</h1>
</div>
Here is codepen: http://codepen.io/anon/pen/vgRvjM
If you need exactly visual (that means less purple space from top and bottom, you can use for example border from after and before):
.padded-multiline:before{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
top:-3px;
}
.padded-multiline:after{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
bottom:-3px;
}
Codepen for this solution: http://codepen.io/anon/pen/QdmzxK
Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.
Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL
HTML:
<p class="multiline-text">
<span class="multiline-text__wrapper multiline-text__wrapper--outer">
<span class="multiline-text__wrapper multiline-text__wrapper--left">
<span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
</span>
</span>
</p>
SCSS:
/*
Variables
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;
$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);
$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;
/*
= Snippet Styles
This code is required
*/
.multiline-text {
color: $multiline-font-color;
padding: 0px $multiline-padding-horizontal;
// hide line-height artefacts
overflow: hidden;
position: relative;
}
.multiline-text__wrapper {
background-color: $multiline-bg-color;
padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer {
// Inner padding between text lines
line-height: $base-line-height;
}
.multiline-text__wrapper--left {
position: relative;
left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
position: relative;
right: -($multiline-padding-horizontal / 2);
}
After the chrome 32 update, the width of the html elements (input, select,..)
defined by a css with these properties does not work:
position:absolute;
left:10px;
right:20px;
In chrome 31 and all others browsers it works.
Look at this with chrome 32
http://jsfiddle.net/EAkLb/7/
I guess this is what W3C says as the correct way of rendering input elements (I said I guess and I dindn't put the W3C spec link because I didn't found the official link for it)
A simple workarround is to create container div with the position absolute and the left and right attributes and create an input inside with width: 100%;
<div class="container">
<input type="text"/>
</div>
<style type="text/css">
.container {
position:absolute;
left:10px;
right:20px;
}
.container input {
width: 100%;
}
</style>
like in http://jsfiddle.net/pjK8s/1/
If you need to put padding than you need to style the container to looks like the input and let the input be transparent
<div class="container">
<input type="text"/>
</div>
<style type="text/css">
.container {
position:absolute;
left:10px;
right:20px;
padding: 1px 8px;
margin: 2px 0px;
-webkit-appearance: textfield;
}
.container input {
width: 100%;
border: 0px;
margin: 0px;
padding: 0px;
background: transparent;
outline: none;
}
</style>
like in http://jsfiddle.net/Vyj22/1/
I'm using the following code to customize my select dropdown arrow:
HTML:
<span class="selectWrapper">
<select id="rowselect" class="pageinfoselect input-mini">
<option>...</option>
</select>
</span>
CSS:
span.selectWrapper {
position: relative;
display: inline-block;
width:65px;
}
span.selectWrapper select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #f5f5f5;
height:30px;
color:#666666;
border:1px solid #dddddd;
}
/* Select arrow styling */
span.selectWrapper:after {
content: url("../images/arrow_down.png");
position: absolute;
top: 0;
right: 0;
bottom: 0;
line-height: 30px;
padding: 0 7px;
background: #f5f5f5;
color: white;
border:1px solid #dddddd;
border-left:0px;
}
This works fine and replaces the default dropdown arrow but the problem is that the arrow image is not clickable. If I click on the select box it opens but I want it to open when I click the arrow image as well
Add the following rule
pointer-events:none;
EDIT:
It should be noted though that IE doesn't yet support this property (Although according to caniuse - It will be supported in IE11)
BUT, If you still want to this method you can use Modernizer or conditional comments (For IE < 10) and this css hack (for IE10) to make IE revert to the standard built in arrow.
/*target Internet Explorer 9 and Internet Explorer 10:*/
#media screen and (min-width:0\0) {
span.selectWrapper:after
{
display:none;
}
}
There is however a workaround (and also a different solution) for this, which I mention in my answer here - which also contains this Codepen
I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding style.
I'm at a total loss on why I can't align the Search box to the left
The Search and RSS feed align on the test page:
http://scottjaxon.com/devsite/testnivo48.html
As it is on the home page (with a pic instead of nivo slider)
http://scottjaxon.com/devsite/index.html
I don't get it. I gotta be missing the smallest thing!
#wrapper #user1 #feahome #searchhome {
float: right;
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Or is it something with the NivoSlider CSS?
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
Your index.html and testnivo48.html have different dom structures.
In index.html, the feahome div tag is the parent of rsshome and searchhome div tags; but in the testnivo48.html, they are all on the same level.
That's why the following css rule (in http://scottjaxon.com/devsite/css/style.css) gets applied on index.html, but ignored in testnivo48.html
#wrapper #user1 #feahome #searchhome {
...
}
After you fix the html, your problem might get solved.
I was looking at the CSS for both and the only thing I saw that was different in your
CSS compared to the CSS for http://scottjaxon.com/devsite/index.html is this:
#wrapper #user1 #feahome #searchhome {
float: LEFT; // the working version has it floated left as well
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Give it a shot and see if that works.
It may be a prioritizing problem. Using div#searchhome will give it a higher priority.