I have a small template that displays a textarea and a close block.
I used Chrome to develop, but it looks different in other browsers.
That close button changes its location in FF and Opera.
<div class="video-box">
<textarea id="id_video" rows="10" cols="40" name="video" placeholder="Embed your video here." class="has- placeholder" style="display: inline-block;"></textarea>
<div class="close" style="display: block;">close</div>
</div>
CSS:
.video-box {
position: absolute;
margin-top: 25px;
}
textarea {
width: 256px;
border: 1px solid #C7C6C6;
height: 100px;
resize: none;
}
.close {
position: absolute;
font-family: Arial, Verdana, sans-serif;
top: 94px;
left: 222px;
z-index: 10;
font-size: 8px;
cursor: pointer;
background: white;
border: 1px solid #808080;
padding-top: 1px;
padding-left: 1px;
text-transform: uppercase;
letter-spacing: 2px;
}
What can cause this problem?
http://jsfiddle.net/3hTH2/
Couple of things to change.
First of all set font-size: 0; on .video-box, because it is inline-block extra whitespace can be added after the element:
.video-box {
position: absolute;
margin-top: 25px;
font-size: 0;
}
Next, set margin: 0; on text-area to reset the default margin added to the element by browsers:
textarea {
width: 256px;
border: 1px solid #C7C6C6;
height: 100px;
resize: none;
margin: 0;
}
Finally, use bottom: 0; and right: 0; instead of top and left on .close as it will ensure the button is positioned at the bottom right of the container no matter what size it is:
.close {
position: absolute;
font-family: Arial, Verdana, sans-serif;
bottom: 0;
right: 0;
z-index: 10;
font-size: 8px;
cursor: pointer;
background: white;
border: 1px solid #808080;
padding-top: 1px;
padding-left: 1px;
text-transform: uppercase;
letter-spacing: 2px;
}
http://jsfiddle.net/FVP6T/
All those browsers have different HTML rendering engines, so some minor changes are inevitable. It's almost impossible to get everything looking exactly the same in every browser; I wouldn't even try.
Try positioning from the right and bottom instead:
.close {
position: absolute;
right: 0;
bottom: 4px;
/* etc. */
}
Hidden Hobbes's solution is/was the closest but it may still be treated incorrectly by Firefox - at least in my case, 'cause I see it is placing the .close button 1px lower.
So check this solution. At least another one :) I changed the font size on .close button to 30px just to see the difference better.
#-moz-document url-prefix() {
.close {
margin-bottom: 1px !important; /* !important may be omitted */
}
}
.video-box {
position: absolute;
margin-top: 25px;
font-size: 0px;
}
textarea {
width: 256px;
border: 1px solid #C7C6C6;
height: 100px;
resize: none;
}
.close {
position: absolute;
font-family: Arial, Verdana, sans-serif;
bottom: 0px;
right: 0px;
z-index: 10;
font-size: 30px;
cursor: pointer;
background: white;
border: 1px solid #808080;
padding-top: 1px;
padding-left: 1px;
text-transform: uppercase;
letter-spacing: 2px;
}
.close:hover {
background: grey;
}
Check the working fiddle
Related
I'm creating a small data tooltip on my website so whenever someone hovers the word Gig the data tooltip appears. I'm using ::after pseudo-element for it.
Here is my HTML:
Gigs
Here is my CSS:
a[data-tool-tip] {
position: relative;
color: #ffffff;
}
a[data-tool-tip]::after {
position: absolute;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: Playfair Display;
padding: 1em 3em;
font-size: .5em;
border-radius: .5em;
bottom: 100%;
left: 0;
}
The result coming out has a lot of line breaks. It is showing as below:
Products
are
called
as Gigs
on Fiverr
When I use white-space: no-wrap; then it whole becomes one line.
I WANT IT TO BE IN 2 LINES.
What Should I Do?
Thank You.
I'm seeing just one posibility is to had a fixed width to the ::after element like this :
a[data-tool-tip] {
position: relative;
color: black;
}
a[data-tool-tip]:hover::after {
position: absolute;
width: 80px;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: Playfair Display;
padding: 1em 3em;
font-size: 0.5em;
border-radius: 0.5em;
bottom: 100%;
left: 0;
}
I put the width to 80px to be on 2 lines
But I don't unterstand why thewhite-space: nowrap haven't work on your side (it will be one line with it unless you add a max-width size on it and use white-space: pre-wrap)
You will either have to set the width of the tooltip-elements or use a different approach.
a[data-tool-tip] {
position: relative;
top: 2em;
font-size: 200%;
}
a[data-tool-tip]:hover::after {
position: absolute;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: 'Playfair Display';
padding: 1em;
font-size: .5em;
border-radius: .5em;
min-width: 10em;
bottom: 100%;
left: 0;
}
Gigs
I created a container which is fixed at the bottom of the page. However, the container then overflows off the page and the padding rules are completely ignored. I have searched around the forum but cannot find a solution in my problems context. I have tried using position absolute, and also tried using Javascript to calculate the scrollbar width to no avail.
.restaurant-page {
height: 100%;
}
.restaurant-page .book-table-container {
position: fixed;
width: 100%;
bottom: 0;
background-color: white;
border-top: solid 1px #f2f2f2;
padding-top: 12px;
padding-bottom: 12px;
}
.restaurant-page .book-table-container button {
width: 100%;
border: 0;
border-radius: 4px;
background-color: #00ccbc;
padding-top: 14px;
padding-bottom: 14px;
color: white;
font-size: 16px;
font-weight: 600;
}
<div class="restaurant-page">
<div class="book-table-container">
<button>Book Table</button>
</div>
</div>
I suppose you mean that the button is cutoff to the right. You can prevent that by adding: .restaurant-page .book-table-container { left: 0; right: 0; }.
However the button wil then touch directly the left and right side of the screen. To prevent that I added a padding of 5px to the left and right and shortended the padding code from: padding-top: 12px; padding-bottom: 12px; padding-left: 5px; padding-right: 5px; to: padding: 12px 5px;.
.restaurant-page {
height: 100%;
}
.restaurant-page .book-table-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: white;
border-top: solid 1px #f2f2f2;
padding: 12px 5px;
}
.restaurant-page .book-table-container button {
width: 100%;
border: 0;
border-radius: 4px;
background-color: #00ccbc;
padding-top: 14px;
padding-bottom: 14px;
color: white;
font-size: 16px;
font-weight: 600;
}
/* for demonstration only */
body {
overflow-y: scroll;
}
<div class="restaurant-page">
<div class="book-table-container">
<button>Book Table</button>
</div>
</div>
I have a button that needs to be centered in it's div class ex. div="sanfrancisco-image". It's placed 17px from the bottom of the box, however it will appear center, even though I've placed justify-self:center; and align-items: center; tabs.
Here's the codepen link: https://codepen.io/holmedw/pen/KrvJEb
.btn {
align-items: center;
position: absolute;
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
bottom: 17px;
justify-self: center;
}
No need for the align-items and justify-self. not sure they do any good, so try to remove them. on the css of the button? => set the following:
margin: 0px auto 0px auto;
try that and let me know if it works.
The quickest way to get what you want is to add position: relative to the .our-story-block, .our-dna-block, .sanfrancisco-block then you add a new div to include your button, like <div class="btn"><button>See More</button></div>. Set that div to position: absolute; bottom: 17px; width: 100%; left: 0; so it would center the absolute div inside a relative element. You won't need to include those values in your .btn css class anymore so just remove them.
.btn {
position: absolute;
width: 100%;
left: 0;
bottom: 17px;
}
.btn > button{
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
}
This is how my input and button looks like. The CSS code looks like this:
button._searchfrontpage
{
margin: 0 auto;
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
}
.sp-module_searchfrontpage input[type="text"] {
background: #f0dbc5;
height: 53px;
width: 50%;
margin: 0 auto;
border-radius: 6px;
margin-bottom: 40px;
line-height: normal;
color: #444;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
}
I dont seem to figure out a way to drag the grey button into the right side of my input box. Are there someone who can figure me an idea to work from?
EDIT: after implementing the code #Jai gave me, it looks fine, but when i make the browser smaller, it gets out of its place and looks like this:
Obviously its like that, because the input width is 50%. are there any solutions for that?
For your div:
.sp-module_searchfrontpage{
/* other CSS as is*/
position: relative;
}
Now the button:
button._searchfrontpage {
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
/* add these properties */
position: absolute;
top:0;
right:0;
z-index:100; /* <=====choose the correct value*/
}
But you have to make sure that the parent div has same height as the input and button does and relatively positioned.
If it is not possible then you can wrap them into another div or better with label and style it with same height property of the input and button but the div still needs the relative position and button should be absolutely positioned. I would do it with label:
<label>
<input type="text" />
<button>search</button>
</label>
Then in the CSS:
.sp-module_searchfrontpage label{
width: 100%;
height: 53px;
position: relative;
}
button._searchfrontpage {
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
/* add these properties */
position: absolute;
top:0;
right:0;
z-index:100; /* <=====choose the correct value*/
}
I have a padding on my textarea element and I would like the content to remain padded as you scroll within the textarea. It is working as expected in Firefox but not in Chrome. The below image shows the difference in output:
CSS:
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
}
In Chrome, the top and bottom padding only appears at the beginning and end of the text content. Here is a jsfiddle to demonstrate:
http://jsfiddle.net/LkE6f/
How can I make the padding in Chrome appear/render in the same way as it does in Firefox?
You could do something like this, it's not very flexible (fixed width), but you can expand on it. It fixes the issue in Chrome and doesn't break Firefox. It uses pseudo-elements on #container, which work in IE8+
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
width: 225px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 6px;
}
Here's a jsFiddle.
Update: Added display: block to textarea to fix IE positioning issue.
Update 2: Alternative solution which takes its width from the #container div and for which you'd need to set the right value based on the width of the scrollbar of the browser, the 17px value is ok in Chrome at the moment. A pro with this solution is that you can set the width of the textarea to anything by changing the width of the #container, and the pseudo-elements will scale accordingly. jsFiddle.
#container {
width: 260px;
margin: 20px auto;
position: relative;
}
textarea {
width: 100%;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
right: 17px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 1px;
}
Best answer:
Embrace the difference between browsers; the web is not uniform and your design will never be 100% identical across browsers.
Work around answers:
If you don't care about the scrollbar having a gap at the top and bottom, you can use borders and an outline like this.
OR
This can be achieved with a pseudo element, if you are happy wrapping each textarea in a div. Should display correctly on IE8+, FF and Chrome.
Have a fiddle!
HTML
<div class="textareaWrap">
<textarea>Content</textarea>
</div>
CSS
textarea {
position: relative;
width: 250px;
height: 160px;
font-family: Arial;
padding: 15px;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
resize: none;
}
.textareaWrap {
position: relative;
}
.textareaWrap:after {
position: absolute;
content:'';
display: block;
width: 232px;
height: 15px;
background: #FFF;
z-index: 1;
bottom: 5px;
left: 1px;
}
.textareaWrap:before {
position: absolute;
content:'';
display: block;
width: 232px;
height: 15px;
background: #FFF;
z-index: 1;
top:1px;
left: 1px;
}
Try the below solution for the textarea
textarea {
-moz-appearance: textfield;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
-moz-user-select: text;
background-color: -moz-field;
border: 2px inset threedface;
color: -moz-fieldtext;
cursor: text;
font: -moz-field;
width:250px;
height:150px;
letter-spacing: normal;
line-height: normal !important;
padding: 1px 0;
text-align: start;
text-indent: 0;
text-rendering: optimizelegibility;
text-shadow: none;
text-transform: none;
word-spacing: normal;
}
Fiddle link Link
Regards
Mahadevan