I have tried as hard as I could but I can't figure out why this page hasn't any chance of scrolling (mouse, keys, scrollbars missing) in Chrome. In other major browsers everything seems fine.
You should be try with:
Create new id next <body>
<div id="container">
<div class="bloque_superior">...</div>
<div class="contenido">...</div>
...
</div>
css
body {
font-family: Tahoma,Arial, Helvetica, sans-serif;
font-size: 12px;
color: black;
background-color: white;
background-image: url(img/bg.png);
background-repeat: repeat-x;
}
#container {
margin-left: auto;
margin-right: auto;
width: 970px;
}
On line 62 in ui.checkbox.css, change
.ui-checkbox input, .ui-radio input {
position: absolute;
visibility: visible;
left: -99999999px;
top: -99999999px;
width: 14px;
height: 13px;
margin: 0px;
border: 0px none;
padding: 0px;
}
to
.ui-checkbox input, .ui-radio input {
visibility: visible;
left: -9999px;
top: -9999px;
width: 14px;
height: 13px;
margin: 0px;
border: 0px none;
padding: 0px;
}
This works for me.
Related
I'm trying to create the image in the link with only html and css. There are a number of elements that would need to "stack" on top of one another.
I am having a difficult time understanding inheritance, nesting, etc. Here's the code I've written so far:
.heart {
position: relative;
margin-top: 20px;
background-color: #000000;
opacity: .8;
width: 65px;
height: 30px;
border-radius: 15px;
display: inline;
}
.box {
margin: 75px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
display: flex;
}
.thumbnail_image {
position: absolute;
float: left;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
top: 60px;
left: 200px;
right: 100px;
width: 400px;
height: 338px;
position: relative;
display: flex;
}
h1 {
font-color: #ffffff !important;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
<div class="box">
<div class="heart">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
</div>
My concern is how to properly place the heart dialog, the text container, and the image overlay. I seem to be misunderstanding proper inheritance syntax or structure.
Use position:absolute; on heart dialog, text container, and image overlay elements and then position them correctly with the left and right properties.
Absolute positioning and z-index are the key words involved in stacking images with HTML and CSS.
I went ahead and mocked up your image with some html/css to give you an idea of implementation.
Z-index is not relevant in this particular example since you only require one layer above the base, which is automatically given to you with absolute positioning, however if you had multiple layers you would need to set the z-index to a number value where lower numbered z-indexes appear at the bottom and higher z-indexes appear at the top.
Here's my code, hope it helps:
body {
background-color: grey;
}
.container {
position:fixed;
height: 500px;
width: 700px;
background-image: url(http://i.stack.imgur.com/MS8X8.png);
background-position: 46% 52%;
background-size: 150%
}
.hearts {
position: absolute;
background-color: rgba(149, 165, 166,.5);
color: white;
right: 40px;
top: 15px;
padding: 15px 25px 15px 25px;
border-radius: 15px
}
.blue {
width: 550px;
height: 500px;
background-color: rgb(102,173,255);
float: right;
}
h1, h5 {
position: absolute;
font-family: sans-serif;
color: white;
text-transform: uppercase;
}
#quote {
left: 200px;
top: 30px;
font-size: 60px;
}
#attr {
left: 200px;
top: 450px;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "main.css">
</head>
<body>
<div class = "container">
<div class = "hearts">423</div>
<div class = "blue">
<h1 id = "quote">don't you <br> think that <br> if i were </br>wrong,<br> i'd know it?</h1>
<h5 id = "attr">-Sheldon Cooper</h5>
</div>
</div>
</body>
</html>
Understanding the stacking order
In your case, the natural stacking order will do the job; this is nicely explained over on the MDN. The main thing to understand is that elements will overlap those that come before them in the markup. This is better explained with a simple example:
div {
position: absolute;
background: red;
height: 100px;
width: 100px;
top: 0;
left: 0;
}
.two {
background: blue;
top: 10px;
left: 20px;
}
.three {
background: green;
top: 20px;
left: 40px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
With that out of the way...
Let's make these!
Feel free to jump to the complete example at the end of this answer!
Want to use some pedantic semantics?
A <blockquote> element to wrap everything together in a semantic container.
A <nav> element to contain the back and forward navigation
A <cite> element that contains the name of the person quoted
Our markup now looks like this:
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<a href="#" class="love-counter">
<3 123
</a>
<nav>
Previous
Next
</nav>
</blockquote>
The CSS
Main background image and color
These can be placed as a background on the blockquote itself. You can use background-size to ensure that the image always has the same dimensions. (It will obviously distort images which have an incorrect size)
blockquote {
background: #18a0ff url(image-url) no-repeat;
background-size: 170px 490px;
}
Add the transparent grey background and quotation character
This can be added with a absolutely positioned before pseudo-element of blockquote. The element is stretched out with left / right / bottom along with a width that matches the image. The transparent grey overlay and transparent text is provided by rgba color.
blockquote:before {
content: '\201C';
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-top: 30px;
font-size: 2.4em;
text-align: center;
background: rgba(0,0,0,0.7);
width: 170px;
color: rgba(255,255,255,0.3);
}
Align the main quote text along with its citation
In order to incorporate smaller quotes, it could be more visually pleasing to vertically center the main text. We can use the display: flex property along with justify-content to easily achieve this; the flex-direction: column property stacks the main quote over the top of the citation. The blockquote is also given left and right padding to appropriately position it horizontally.
blockquote {
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
}
Position the back / forward navigation and love counter
These are easily located with position: absolute along with the appropriate left / right / bottom / top properties. They will look something like this:
.love-counter {
position: absolute;
right: 20px;
top: 20px;
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
}
Complete example
Compatibility: IE 11+ and all modern browsers.
You might consider a javascript method to shrink the font size for larger quotes.
#import url(https://fonts.googleapis.com/css?family=Passion+One:400,700);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
blockquote {
background: #18a0ff url(http://i.stack.imgur.com/e3nDc.jpg) no-repeat;
background-size: 170px 490px;
height: 490px;
color: #FFF;
font-family: 'Passion One', cursive;
font-size: 4.2em;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
font-weight: 400;
line-height: 1;
width: 650px;
text-transform: uppercase;
}
blockquote p {
margin: 0;
margin-top: 0.75em;
}
cite {
font-size: 0.25em;
font-weight: 400;
margin-top: 2em;
}
cite:before {
content: '\2014 '
}
blockquote:before {
content: '\201C';
font-size: 2.4em;
padding-top: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
width: 170px;
color: rgba(255, 255, 255, 0.3);
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.love-counter {
color: #FFF;
text-decoration: none;
font-size: 0.2em;
position: absolute;
right: 20px;
top: 20px;
font-family: helvetica;
font-weight: bold;
background: rgba(0, 0, 0, 0.2);
padding: 0 10px;
border-radius: 10px;
height: 30px;
line-height: 30px;
min-width: 60px
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
font-size: 0;
width: 170px;
text-align: center;
}
nav a:before,
nav a:after {
font-size: 36px;
width: 50%;
display: inline-block;
color: #FFF;
}
nav a:first-child:before {
content: '<';
}
nav a:last-child:after {
content: '>';
}
.x-large {
background-image: url(http://i.stack.imgur.com/qWm5m.jpg);
}
.x-large p {
font-size: 0.62em;
}
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
<h2>Larger quote</h2>
<blockquote class="x-large">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
<cite>Albert Einstein</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
heart_button:hover,
heart_button:active,
heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 30px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 22px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
</div>
</body>
<footer>
<div>
<h6>A Project by Charles Bateman</h6>
</div>
</footer>
I've already run my code through a validator, so there are no syntax errors, but I can't figure out what's going on. Nothing I do changes the "p" elements in my code. I've tried styling the p class. I've tried wrapping them in a "div" tag and stylizing that, but it just seems to keep inheriting the body properties. If I want to style the text at all, I have to do it through the body properties.
Here's the HTML.
<div id="topBar"><img src="images/logo.png" alt="Escaping Shapes"/></div>
<div id="rope"><img src="images/rope2.png" alt="Bottom of logo border"/></div>
<p>Yarrrrgh! Shapes be escaping from below the surface of the Web! Push'em back down below the page as fast as ye can!</p>
<p class="bold">Your time: <span id="time">(not attempted yet)</span></p>
<div id="box">
</div>
Here's the CSS for the body:
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
Here's the CSS for the "p" element that does NOTHING for me lol.
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
}
Not sure what's going on, but any help would be greatly appreciated. I can provide more of my code if necessary.
EDIT My Entire CSS:
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
#topBar {
background-color: #2980b9;
height: 120px;
width: 100%;
position: relative;
}
#topBar img {
display: block;
margin: 0 auto;
width: 600px;
position: relative;
top: 25px;
left: -85px;
}
#box {
background-color: #0ff;
height: 150px;
width: 150px;
display: none;
position: relative;
top: 0;
margin-top: 0;
margin-bottom: 10px;
opacity: 0.9;
box-shadow: 10px 10px 5px #7e7e7e;
-webkit-transition:all 0.1s linear;
-moz-transition:all 0.1s linear ;
-ms-width:all 0.1s linear ;
-o-width:all 0.1s
}
#box:active {
box-shadow: none;
top: 10px;
margin-bottom: 0;
-webkit-transform:scale(0.25, 0.25);
-moz-transform:scale(0.25, 0.25) ;
-ms-width:scale(0.25, 0.25) ;
-o-width:scale(0.25, 0.25) ;
}
#box:hover {
opacity: 1;
}
#rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
.bold {
font-weight: bold;
}
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
}
You have not closed off -o-width:all 0.1s
with a semi-colon under your #box css properties This is your problem.
You also haven't closed off your #rope properties }
It seems that the p styles are being applied to the p. I tried by setting the font color via the p rule and it works: http://jsfiddle.net/L2q1Lbzj/
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
color: red;
}
There is no problem in your css.
The <p> is working good enough in your given code.
CSS properties overlap each other.So be careful about this.
jsfiddle
edit:
as your new edit
you are missing closing }
write
#rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
}
instead of
rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
link
I am displaying a progress bar(loading gif) while my screen loads.
my css entries are as below
.hiddenDiv {
display: none;
}
.visibleDiv {
display: none;
}
.hiddenStyle {
cursor: wait;
z-index: 99999;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: alpha(opacity=80);
}
.busyStyle {
position: absolute;
top: 300px;
left: 580px;
text-align: center;
vertical-align: middle;
font-family: arial, helvetica, verdana, sans - serif;
color: red;
font-size: 16px;
font-weight: bold;
}
when I include background-color: white; in hiddenStyle, then the main screen behind is replaced by a white background while the page is loading.
If I remove that entry, then the progress bar is displayed with main screen behind.
I would like to grey out the main screen behind while the progress bar is displayed. How do I achieve this by changing CSS entries ?
Achieved this by changing CSS entries as
.visibleDiv {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: alpha(opacity=50);
opacity: 0.6;
background-color: white;
}
in JS
document.getElementById('mask').className = 'visibleDiv';
so opacity did the trick
Hopefully, this can help as I have it implemented and working on a website:
HTML
<div id="divLoading">
<div class="page-center">
<div class="loadingBox">
<div class="centered">
Loading...
</div>
</div>
</div>
</div>
Put this anywhere on your page.
CSS
#divLoading {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%; height: 100%;
background-color: #666666;
z-index: 30001;
opacity: .9;
filter: alpha(opacity=90);
display: none;
}
.page-center {
display: inline;
top: 50%;
left: 50%;
position: relative;
}
.loadingBox {
border: 2px solid black;
border-radius: 20px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
width: 300px;
height: 100px;
background-color: white;
}
.centered {
text-align: center;
}
And when you call the said loading method (the one which shows the progress bar) also call this:
$("#divLoading").show();
It will show a div in front of everything else. When the progress is done, call:
$("#divLoading").hide();
You can have following set at the loading time of document:
<html><body>
<script>
document.body.style.backgroundColor='gray';
</script>
</body>
</html>
Once your progress is loaded you can reset the body color:
document.body.style.backgroundColor='#fff';
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
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