I have this really weird problem, button and input have a same CSS (except background), but Firefox renders those differently. There are no problems in IE or Chrome.
#searchInput {
width: 80%;
margin: 0 auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
}
#searchButton {
width: 80%;
margin: 4px auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
background: #F2F2F2;
cursor: pointer;
}
I have also included container CSS, where they both are.
.section {
width: 100%;
display: inline-block;
margin: 10px auto;
background-color: #FAFAFA;
border-radius: 5px;
border: 1px solid #D8D8D8;
padding: 30px;
position: relative;
}
.toggleIcon {
width: 28px;
height: 20px;
top: 0;
right: 10px;
position: absolute;
border-radius: 5px;
background: #FAFAFA;
margin-top: 10px;
padding: 10px;
border: 1px solid #D8D8D8;
cursor: pointer;
box-sizing: content-box;
}
HTML:
<div id='search' class='section'> <a href="#sidebarNav" class='toggle'><img class = 'toggleIcon' src = 'img/icons/glyphicons_158_show_lines.png' alt = 'Open navigation'></a>
<img id='logo' src='img/logo.png'>
<form id='searchForm'>
<input type='text' id='searchInput' name='searchInput'>
<button type='submit' id='searchButton' name='searchButton' value='Search'>
<img src='img/icons/glyphicons_027_search.png' alt='Search'>
</button>
</form>
<div id='searchResults'></div>
</div>
NB! I use PageSlide for navigation and search is using AJAX
Based on your last comment...
Margin doesn't cause my problems, problem is that input is much wider
and higher
You have to add box-sizing:border-box property to your input#searchInput
Like:
#searchInput {
....
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
}
Working Example: http://jsfiddle.net/XLyBR/1/
Your margin differs in the searchInput and searchButton css classes
Also what about the default css line-height on these elements - do they differ - try specifying line-height.
Wing
BTW - it would help if you tell us how the rendering differs
Related
I am trying to place an image to the right of a pseudo input box using css to imitate Apple's iMessage app. However, the image keeps displaying below the pseudo input box as follows:
Most answers suggest using display:inline-block and I have put this in the class for both the outter and inner div with no luck. (Have also tried float:left, float:right and display:inline-block on image and there is no difference.)
How can I get the arrow to appear to the right of the pseudo input box as the microphone image is below?
Here is my code for the input field:
.inputbox {
border-radius: 20px;
min-height: 30px;
width: 300px;
padding: 8px 15px;
margin-top: 5px;
margin-bottom: 5px;
border: solid 2px #EEE;
display: inline-block;
}
.inputBoxInner {
border-radius: 20px;
min-height: 30px;
width: 240px;
padding: 8px 15px;
margin-top: 5px;
margin-bottom: 5px;
border: solid 2px #EEE;
height:" auto";
display: inline-block;
}
.inputBoxInner:empty:not(:focus):before {
color: lightgrey;
font-family: helvetica;
content: attr(data-placeholder)
display: inline-block;
}
<div class = "inputBox" contentEditable="true"><div class="inputBoxInner" contenteditable="true" data-placeholder="Start typing"></div><input type="image" id="image" alt="Send"
src="/images/arrow.png" width="30" height="30 style="float:right"; "></div>
The code has a problem:
And this code can resolve the problem:
True code:
inputBox {display: grid; grid-template-columns: 100px 100px}
This should do it for you
.inputbox {
border-radius: 20px;
min-height: 30px;
width: 300px;
padding: 8px 15px;
margin-top: 5px;
margin-bottom: 5px;
border: solid 2px rgb(0, 0, 0);
}
.inputBoxInner {
border-radius: 20px;
min-height: 30px;
width: 240px;
padding: 8px 15px;
margin-top: 5px;
margin-bottom: 5px;
border: solid 2px rgb(131, 131, 131);
height: auto;
display: flex;
justify-content: end;
align-content: center;
}
.inputBoxInner:empty:not(:focus):before {
color: rgb(255, 0, 0);
font-family: helvetica;
}
<body>
<div class = "inputBox" contentEditable="true">
<div class="inputBoxInner" contenteditable="true" data-placeholder="Start typing">
<input type="image" id="image" alt="Send" src="image.png" width="30" height="30" style="float:right">
</div>
</div>
</body>
I have a usual search as most websites do. The results are shown below on the div that is visually connected to the search input.
It looks like this:
I need to have one solid shadow for the div parent but can't figure out or find online the way to do this.
I thought that I could either make 2 separate shadows, but that will look inconsistent and just terrible. Or I could make a div below with the same height and width that will act as a shadow but that's a non-necessary complication + the .search-results div's height will change dynamically.
This is an example:
body {
background-color: gray;
}
.search-wrapper {
position: relative;
margin: 100px 100px 0px 100px;
width: 200px;
overflow: initial;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
}
.search {
width: 200px;
height: 30px;
color: white;
border-radius: 4px;
} .search input {
padding: 0;
background-color: #022222;
border: none;
height: 100%;
width: 100%;
color: white;
}
.search-results {
position: absolute;
height: 150px;
width: 200px;
background-color: black;
}
<div class="search-wrapper">
<div class="search">
<input placeholder="air max . . .">
</div>
<div class="search-results">
</div>
</div>
I am sure there must be a clever and simple way to do this.
Please help,
Thank you
You don't need to use positions here and you can use FlexBox instead. It's the best way and a lot easier. Also, you can ignore all of them, they will place on top of each other because they are block-level tags/elements. (divs)
You don't need to put the input in another div parent, use it as I did.
Sorry, I couldn't understand your code, so I must write the whole code from the beginning.
EDIT
I removed display flex, cause it's not necessary.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial;
border-radius: 10px;
background-color: #fff
}
body {
height: 100vh;
background-color: gray;
padding: 30px
}
.search-wrapper {
/* EDITED HERE ADDED HEIGHT */
position: relative;
z-index: 999;
width: 200px;
height: 160px;
box-shadow: 0 0 2px 5px rgba(232, 232, 232, .2)
}
.search-input {
width: 100%;
position: absolute;
padding-block: 5px;
border: none;
outline: none;
padding: 15px
}
.search-result {
/* EDITED HERE */
position: absolute;
z-index: 999;
bottom: 0;
width: 100%;
padding: .5px
}
p {
padding: 10px 0 10px 10px;
}
p:hover {
background-color: #e8e8e8;
cursor: pointer
}
<div class='search-wrapper'>
<input class='search-input' placeholder='Search...'>
<div class='search-result'>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
</div>
</div>
Code
.topnav {
width: 50%;
display: inline-block;
background-color: black;
overflow: hidden;
}
.topnav a {
box-sizing: border-box;
color: white;
display: inline-block;
padding: 16px;
text-decoration: none;
font-size: 17px;
margin: 6px;
}
.topnav a:hover {
background-color: blue;
color: white;
}
.topnav a.active {
background-color: blue;
color: white;
}
.searchbar {
width: 50%;
float: right;
display: inline-block;
background-color: black;
overflow: hidden;
}
.searchbar input[type=text] {
float: right;
width: 80%;
box-sizing: border-box;
color: black;
display: inline-block;
padding: 15.5px;
outline: none;
margin: 6px;
border: 3px solid transparent;
transition: 0.1s;
}
.searchbar input[type=text]:hover {
border: 3px solid blue;
}
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div class='topnav'>
<a href='#abcdefg'>abcdefg</a>
</div>
<div class='searchbar'>
<form>
<input type='text' placeholder='Search here'>
</form>
</div>
</body>
</html>
As the title suggests, in order for both <div class = 'topnav'> and <div class = 'searchbar'> to have the same height, I can set <div class = 'searchbar'> padding to 15.5 pixels each.
padding: 15.5px;
Because of that, I'm having trouble understanding why. That is, I managed to get both<div> height to the same size by guessing the right padding, not something I want to be doing. Therefore, I'm asking for a systematic way to know how much padding I need.
I don't know if that will be good for you about height exactness... But certainly will easier to tweak. I used a CSS grid an just an additional div as a wrapper.
.topNavContainer {
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: 53px;
grid-gap: 6px;
align-items: center;
justify-content: space-between;
background-color: black;
box-sizing: border-box;
overflow: hidden;
border: 6px solid black;
}
.topnav a {
padding: 16px 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.topnav a.active,
.topnav a:hover {
background-color: blue;
color: white;
}
.searchbar input[type="text"] {
width: 100%;
padding: 16px 0;
color: black;
outline: none;
border: 3px solid transparent;
}
.searchbar input[type="text"]:hover {
border: 3px solid blue;
}
<div class="topNavContainer">
<div class='topnav'>
<a href='#abcdefg'>abcdefg</a>
</div>
<div class='searchbar'>
<form>
<input type='text' placeholder='Search here'>
</form>
</div>
</div>
So I think you're missing that border-box does not include margins (which might have thrown off your calculations). So if you look at the dev tools and remove the 15.5px padding style on you input tag, then scroll to the bottom, you'll see this nice looking thing:
Yes there is still padding on it, this is from another style (ignore it). Your counterpart div happens to have a height of 64px (on my browser at least), so let's subtract from 64 all the heights (except for the padding, since we will be replacing that) that the dev tools are showing:
64 - 15 - 3 - 3 - 6 - 6 = 31px <- the remaining space
31px / 2 = 15.5px
However, calculations are not ideal either. Specify your heights directly with pixels or percentages, or consider the other answers here.
hello guys i have a div which contains a link and a div , i gave a width of 70% to the link and a width of 30% to the div (summing it up to 100%). its working fine in chrome , but its not working in safari ..the width property of the link is not taking any effect in safari.Please help
.rec-p-b {
width: 70%;
background-color: #fff;
border-radius: 0px;
padding: 7px 10px;
}
.rec-p-b1 {
width: 30%;
background-color: #02020294;
border: 1px solid #034039;
border-radius: 0px;
padding: 0px 5px;
}
<div class="recomment_profile_b_view">
<a target="_blank" href="" class="recomment_pro_button rec-p-b">Profile View</a>
<button class="recomment_button rec-p-b1">
<img src="images/recommend.png" alt="recomment">
</button>
</div>
The link tag is an inline element, so you should set it display: block, or inline-block, or float: left to floating it as block element.
You had added the padding beside adding the width, the total size will be equal padding + width. To fix it, you should add box-sizing: border-box; to your css to merge the with as 100% of the size:
.rec-p-b {
float: left;
width: 70%;
background-color: #fff;
border-radius: 0px;
padding: 7px 10px;
box-sizing: border-box;
}
.rec-p-b1 {
float: left;
width: 30%;
background-color: #02020294;
border: 1px solid #034039;
border-radius: 0px;
padding: 0px 5px;
box-sizing: border-box;
}
I think the problem is the padding you add. Try use box-sizing: border-box
* { box-sizing: border-box }
.rec-p-b {
width: 70%;
background-color: #fff;
border-radius: 0px;
padding: 7px 10px;
}
.rec-p-b1 {
width: 30%;
background-color: #02020294;
border: 1px solid #034039;
border-radius: 0px;
padding: 0px 5px;
}
<div class="recomment_profile_b_view">
<a target="_blank" href="" class="recomment_pro_button rec-p-b">Profile View</a>
<button class="recomment_button rec-p-b1">
<img src="images/recommend.png" alt="recomment">
</button>
</div>
Apply display: block to anchor tag
Apply following properties to both(anchor & div):
box-sizing: border-box;
float: left;
From below code,
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: absolute;
width: 100%; /* Any problem here? */
top: 40%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>
I would like to understand,
Why inner div container overflows?
This is because the width of an element is actually width + left padding + right padding + left border + right border.
As your width is 100% and additional to this will push it over 100%, making it overflow its parent.
If you use box-sizing: border-box, that will fix this issue.
That's a quick summary, lots more in depth info here: https://css-tricks.com/box-sizing.
The reason it overflows is because position absolute visually speaking, positions your element outside the normal flow of the site. This is intentional and powerful if you use it correctly. However in your case, the parent container of cardtypecontainer was not taking control of the absolute positioned element, therefore it overflowed outside its container.
Then, I changed cardtypecontainer to have relative position, which will work as you intended it to, because relative position does not change the intended layout of the element. For your case it means, cardtypecontainer will stay within the bounds of its parent container.
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: relative;
margin-top: 10px;
width: 100%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>