Image alignment changed in IE (edge) and google Chrome - html

I have been creating this website and it came along just fine. And then I tried to add a modal to it and everything kinda went downhill. The issue is that after adding the modal the image alignment changed in Chrome. It works fine in Edge. Now I am aware that this could be because whatever element I added might not be supported in IE thus making it look ok. The first image shown here is in IE and how I want it to look like
The second image is how it looks on Google Chrome
Here is the Html related to the images
<div class="coverimage">
<img src="https://imgur.com/cHmH0K5" name="currentimage" id="currentimage" alt="Jurassic World-Fallen Kingdom" style="width:1350px;height:780px;display:block;">
<h2><span id="main1"> JURASSIC WORLD:<br>FALLEN <br>KINGDOM(3D)</span></h2>
</div>
<div class="container">
<div class="submovies" style="float:left;">
<img src="https://imgur.com/GmqzA9C" name="submovie1" id="submovie1" alt="Hotel Transylvania 3" style="width:600px;height:400px;float:left;display:block;">
<img src="https://imgur.com/WGLHxcf" name="submovie2" id="submovie2" alt="Skyscraper" style="width:300px;height:400px;display:block;">
<h4 id="upcoming1"><span> ANT-MAN AND THE WASP</h4>
<span id="subspan1"> IN THEATERS 10TH JULY</span></span>
<h4 id="upcoming2"><span> SKYSCRAPER</h4>
<span id="subspan2"> IN THEATERS 13TH JULY</span></span>
<h4 id="upcoming3"><span> The EQUALIZER 2</h4>
<span id="subspan3"> IN THEATERS 20TH JULY</span></span>
<h4 id="upcoming4"><span> HOTEL TRANSYLVANIA 3</h4>
<span id="subspan4"> IN THEATERS 13TH JULY</span></span>
</div>
<img src="https://imgur.com/cHmH0K5" name="submovie3" id="submovie3" alt="The Equalizer 2" style="width:449px;height:200px;vertical-align:top;max-width:449;display:block;">
<img src="https://imgur.com/hcIgMdJ" name="submovie4" id="submovie4" alt="Hotel Transylvania 3" style="width:449px;height:200px;display:block;">
</div>
Here is the CSS related to these image alignment.
.coverimage {
position: relative;
padding-bottom: 10px;
background-color: #06c6da;
padding-top: 10px;
}
.description {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #000;
color: #FFF;
padding-left: 20px;
padding-right: 20px;
}
h2 {
position: absolute;
top: 180px;
left: 910px;
width: 100%;
font-size: 40px;
color: #FFF;
}
h2 span {
color: #FFF;
display: inline-block;
background: rgba(0, 0, 0, 0.7);
padding: 48px 48px 48px 20px;
}
.submovies {
position: relative;
}
#upcoming1 {
position: absolute;
top: 300px;
left: 20px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan1 {
position: absolute;
top: 340px;
left: 20px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
#upcoming2 {
position: absolute;
top: 300px;
left: 620px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan2 {
position: absolute;
top: 340px;
left: 620px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
#upcoming3 {
position: absolute;
top: 110px;
left: 920px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan3 {
position: absolute;
top: 150px;
left: 922px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
#upcoming4 {
position: absolute;
top: 300px;
left: 920px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan4 {
position: absolute;
top: 340px;
left: 920px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
Heres the Modal HTML i recently added
<div class="feedback">
<button type="button" id="feedbacksubmit"onclick="">Give us your FeedBack !</button>
</div>
<div class="feedback-background">
<div class="feedback-content">
<div class="close">+</div>
<img src="https://imgur.com/vm4mf6W" alt="Givefeedback" style="width:100px;height:100px;">
<form action="">
Name:
<input type="text" placeholder="Name">
E-Mail:
<input type="text" placeholder="E-mail">
What do you think about us?<br>
<textarea rows="6" cols="33" "name="comment"></textarea>
<br>
How would you rate us ?
<br>
<label><input type ="radio" name="rating" id="rating" value="Excellent">Excellent</label>
<label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
<label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
<label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
<label><input type ="radio" name="rating" id="rating" value="Extreamly Poor">Extremely Poor</label>
<br>
SUBMIT
</form>
</div>
</div>
And here is the CSS it's related with
.feedback-background {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.feedback-content {
width: 500px;
height: 550px;
background-color: white;
border-radius: 4px;
padding: 20px;
position: relative;
}
input {
width: 50%;
display: block;
margin: 10px 0px;
}
label {
display: block;
}
input[type="radio"] {
width: auto;
display: inline;
}
.close {
position: absolute;
top: 0px;
right: 14px;
transform: rotate(45deg);
font-size: 42px;
}
#feedbacksubmit {
margin-left: 600px;
margin-bottom: 50px;
background-color: #484848;
border-radius: 14px;
padding: 10px;
cursor: pointer;
color: white;
outline: none;
}

your page is a little disaster... (^_^;) No responsive at all. You have to study hard to understand, for example, how flots works or how absolute position works with its relative block. Inline style are a Css old school and you have to evoid them, if it's possible (and here it is possible!).
However, I aligned every images you post, but please (please!!), redo the work. Consider to use flexbox or grid to transform your page in a 2018 web page.
Best reguards to you, your study and web designer career! ;)
.coverimage{
position:relative;
padding-bottom:10px;
background-color:#06c6da;
padding-top:10px;
}
.description {
position: absolute;
bottom: 20px;
right: 20px;
background-color:black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
h2 {
position: absolute;
top: 180px;
left: 910px;
width: 100%;
font-size:40px;
color:white;
}
h2 span {
color: white;
display:inline-block;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding:48px;
padding-left:20px;
}
.submovies{
position:relative;
}
#upcoming1 {
position: absolute;
top: 300px;
left: 20px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan1{
position: absolute;
top: 340px;
left:20px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming2
{
position: absolute;
top: 300px;
left: 620px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan2{
position: absolute;
top: 340px;
left:620px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming3 {
position: absolute;
top: 110px;
left: 920px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan3{
position: absolute;
top: 150px;
left:922px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming4 {
position: absolute;
top: 300px;
left: 920px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan4{
position: absolute;
top: 340px;
left:920px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
<div class="coverimage">
<img src="https://imgur.com/cHmH0K5.jpg" name="currentimage" id="currentimage" alt="Jurassic World-Fallen Kingdom" style="width:1350px;height:780px;display:block;">
<h2><span id="main1"> JURASSIC WORLD:<br>FALLEN <br>KINGDOM(3D)</span></h2>
</div>
<div class="container">
<div class="submovies" style="float:left;width:1449px">
<img src="https://imgur.com/GmqzA9C.jpg" name="submovie1" id="submovie1" alt="Hotel Transylvania 3" style="width:600px;height:400px;float:left;display:block;">
<img src="https://imgur.com/WGLHxcf.jpg" name="submovie2" id="submovie2" alt="Skyscraper" style="width:300px;height:400px;display:block;float:left;">
<h4 id="upcoming1"><span> ANT-MAN AND THE WASP</span></h4><span id="subspan1"> IN THEATERS 10TH JULY</span>
<h4 id="upcoming2"><span> SKYSCRAPER</span></h4><span id="subspan2"> IN THEATERS 13TH JULY</span>
<h4 id="upcoming3"><span> The EQUALIZER 2</span></h4><span id="subspan3"> IN THEATERS 20TH JULY</span>
<h4 id="upcoming4"><span> HOTEL TRANSYLVANIA 3</span></h4><span id="subspan4"> IN THEATERS 13TH JULY</span>
<div style="float:left">
<img src="https://imgur.com/cHmH0K5.jpg" name="submovie3" id="submovie3" alt="The Equalizer 2" style="width:449px;height:200px;vertical-align:top;max-width:449;display:block;">
<img src="https://imgur.com/hcIgMdJ.jpg" name="submovie4" id="submovie4" alt="Hotel Transylvania 3" style="width:449px;height:200px;display:block;">
</div>
</div>
</div>

Related

White area at the bottom of my webpage when i try to create a responsive design

I'm trying to make my webpage responsive to fit on an ipad and mobile, as i adjust my media query, i noticed this white area at the bottom, the body element when highlighted, it doesnt reach that area, so i dont know where it came from, anyhelp would be appreaciated. thanksenter image description here
enter image description here
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 100%;
}
.content {
max-width: 100%;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
div.navi {
background-color: rgb(228, 226, 217);
width: 100%;
height: 50px;
margin-top: 15px;
text-align: center;
font-size: 19px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 1px;
margin-bottom: 1px;
}
p {
color: rgb(97, 87, 226);
}
.para2{
color: black;
}
p.nav {
position: relative;
bottom: 5px;
border-style: solid;
}
a:link {
text-decoration: none;
color: rgb(97, 87, 226);
}
img {
margin-left: 20px;
width: 400px;
}
/* inner body styling */
div.inner-body {
background-image: url(image/book2.png);
margin-bottom: 20px;
margin-right: 0px;
max-width: 100%;
border-style: solid;
margin-top: 20px;
height: 1200px;
position: relative;
}
.header {
width: 700px;
position: relative;
left:1000px;
left: 338px;
font-size: 30px;
}
.para {
width: 800px;
position: relative;
left:345px;
top:74px;
background-color: rgb(206, 200, 180);
font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;
padding: 5px;
}
form {
padding: 20px;
border-radius: 20px;
width: fit-content;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: relative;
left:350px;
top:100px;
background-color: rgb(240, 239, 228);
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 15px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navi2 {
width: fit-content;
width: 300px;
height: 600px;
position:absolute;
bottom: 600px;
background-color: cadetblue;
font-size: 20px;
border-radius: 20px;
top:300px;
}
.user-links {
position: relative;
left:20px;
bottom:30px;
}
.user-links:link{
color: brown;
}
.userlogo {
width: 200px;
border-radius: 100px;
position: relative;
left: 30px;
bottom: 100px;
}
.btn {
width: 100px;
border-radius: 5px;
margin-top: 10px;
}
/* footer styling */
.emaillogo, .telelogo {
width: 20px;
}
div.foot {
background-color: brown;
}
footer{
background-color: rgb(126, 226, 230);
height: 200px;
}
.footimage {
width: 400px;
height: fit-content;
margin: 0;
}
div.contact{
width: fit-content;
height: 200px;
height: fit-content;
position: relative;
left: 400px;
bottom: 185px;
font-size: 12px;
}
.usefullinks {
width: fit-content;
font-size: 12px;
position: relative;
left:750px;
bottom:280px;
height: fit-content;
}
.connect {
width: fit-content;
position: relative;
left: 1000px ;
bottom: 400px;
font-size: 12px;
height: fit-content;
}
.fb, .tw, .yt, .ln {
width: 50px;
border-radius: 10px;
}
/* Media Queries */
#media screen and (max-width:915px) {
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
.content{
width: 100%;
margin: 10px;
padding: 0;
}
div.inner-body {
background-image: url(image/book2.png);
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 100%;
position: relative;
}
div.navi {
width: 980px;
font-size: 30px;
padding-bottom: 90px;
}
.inner-body {
width: 100%;
}
.header{
left:50px;
}
.para{
width: 700px;
display: block;
left: 25px;
font-size: 35px;
padding:30px;
top:20px;
}
form {
width: 600px;
left: 60px;
font-size: 20px;
}
.navi2 {
display: none;
}
.usefullinks{
display: inline-block;
}
.connect{
display: none;
}
.contact {
display: block;
}
}
#media screen and (max-width:415px) {
.content{
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.inner-body {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="log-it-reports.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="logo">
<img src="image/logo1.png" alt="Academy Logo" >
</div>
<div class="navi">
<p id="nav">
Home |
Academics |
Services |
Covid-19 |
Students & Parents |
Transcripts |
Staff |
Career |
Events |
Student Account |
</p>
</div>
<div class="inner-body">
<div class = "header" >
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p class="para2">Please read the following instructions before submitting a report:</p>
<ol>
<li>Fill out all of the fields.</li>
<li>Use a valid email.</li>
<li>Select a problem type.</li>
<li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters minumum).</li>
<li>Normally most issues get addressed within 2 hours, please be patient.</li>
</ol>
</div>
<div class="form1">
<form method="GET" onsubmit=" return formValidations() " action="log-it-reports.html"><br>
<div class="error1" id= "errorMsg"></div>
<div>
<label for="subject"><b>Subject:</label>
<input id="subject" type="text" placeholder="Subject Title" >
</div><br>
<div class="error" id= "errorMsg2"></div>
<div>
<label for="email"><b>Email:</label>
<input id="email" type="email" placeholder="staff#wearview.com">
</div><br>
<div class="error" id= "errorMsg3"></div>
<div>
<select name="techtype" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id= "errorMsg4"></div>
<div>
<textarea id="description" placeholder="Description goes here" name="descript" rows="15" cols="50"></textarea>
</div>
<div>
<button type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>
</div>
<div class="navi2">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="User Image">
</div>
<div class="user-links">
<navi>
<a class="staffname" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
Inbox <br><br>
Notifications <br><br>
Files <br><br>
Settings <br><br>
Help <br><br>
QR For Mobile <br><br>
Log Out
</navi>
</div>
</div>
</div>
<div class="foot">
<footer id = "footy">
<div>
<img class="footimage" src="image/logo1.png" alt="Academy Logo" width="400px">
</div>
<div class="contact">
<h3>Contact Us</h3>
<p><img class="emaillogo" src="image/email (2).png" alt="emaillogo"> :wearview_academy#wearview.com</p>
<p><img class="telelogo" src="image/tele.png" alt="telelogo"> :+2499100000000</p>
</div>
<div class="usefullinks">
<h3>Useful Links</h3>
<ul>
<li>Career</li>
<li>Report A Website Issue</li>
<li>About Us</li>
<li>Covid-19</li>
<li>Events</li>
</ul>
</div>
<div class="connect">
<h3>Connect With Us </h3><br>
<img class="fb" src="image/fb.png" alt = "Facebook" />
<img class="tw" src="image/tw.jpg" alt = "Twitter" />
<img class="yt" src="image/you.png" alt = "Youtube" />
<img class="ln" src="image/linkd.png" alt = "LinkedIn" />
</div>
</footer>
</div>
</div>
</body>
</html>
Because of the default browser stylesheet, the body has a margin set. You can remove it with the following CSS reset:
body {
margin: 0;
}
Also, your .content has a margin set to 10px, which adds space to the bottom, remove it when you don't want it or only apply it to the top, right and left using:
margin: 10px 10px 0 10px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="log-it-reports.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 100%;
margin: 0
}
.content {
max-width: 100%;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
div.navi {
background-color: rgb(228, 226, 217);
width: 100%;
height: 50px;
margin-top: 15px;
text-align: center;
font-size: 19px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 1px;
margin-bottom: 1px;
}
p {
color: rgb(97, 87, 226);
}
.para2 {
color: black;
}
p.nav {
position: relative;
bottom: 5px;
border-style: solid;
}
a:link {
text-decoration: none;
color: rgb(97, 87, 226);
}
img {
margin-left: 20px;
width: 400px;
}
/* inner body styling */
div.inner-body {
background-image: url(image/book2.png);
margin-bottom: 20px;
margin-right: 0px;
max-width: 100%;
border-style: solid;
margin-top: 20px;
height: 1200px;
position: relative;
}
.header {
width: 700px;
position: relative;
left: 1000px;
left: 338px;
font-size: 30px;
}
.para {
width: 800px;
position: relative;
left: 345px;
top: 74px;
background-color: rgb(206, 200, 180);
font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;
padding: 5px;
}
form {
padding: 20px;
border-radius: 20px;
width: fit-content;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: relative;
left: 350px;
top: 100px;
background-color: rgb(240, 239, 228);
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.navi2 {
width: fit-content;
width: 300px;
height: 600px;
position: absolute;
bottom: 600px;
background-color: cadetblue;
font-size: 20px;
border-radius: 20px;
top: 300px;
}
.user-links {
position: relative;
left: 20px;
bottom: 30px;
}
.user-links:link {
color: brown;
}
.userlogo {
width: 200px;
border-radius: 100px;
position: relative;
left: 30px;
bottom: 100px;
}
.btn {
width: 100px;
border-radius: 5px;
margin-top: 10px;
}
/* footer styling */
.emaillogo,
.telelogo {
width: 20px;
}
div.foot {
background-color: brown;
}
footer {
background-color: rgb(126, 226, 230);
/* height: 200px; */
}
.footimage {
width: 400px;
height: fit-content;
margin: 0;
}
div.contact {
width: fit-content;
height: 200px;
height: fit-content;
position: relative;
left: 400px;
bottom: 185px;
font-size: 12px;
}
.usefullinks {
width: fit-content;
font-size: 12px;
position: relative;
left: 750px;
bottom: 280px;
height: fit-content;
}
.connect {
width: fit-content;
position: relative;
left: 1000px;
bottom: 400px;
font-size: 12px;
height: fit-content;
}
.fb,
.tw,
.yt,
.ln {
width: 50px;
border-radius: 10px;
}
/* Media Queries */
#media screen and (max-width:915px) {
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
.content {
width: 100%;
/* margin: 10px; */
padding: 0;
}
div.inner-body {
background-image: url(image/book2.png);
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 100%;
position: relative;
}
div.navi {
width: 980px;
font-size: 30px;
padding-bottom: 90px;
}
.inner-body {
width: 100%;
}
.header {
left: 50px;
}
.para {
width: 700px;
display: block;
left: 25px;
font-size: 35px;
padding: 30px;
top: 20px;
}
form {
width: 600px;
left: 60px;
font-size: 20px;
}
.navi2 {
display: none;
}
.usefullinks {
display: inline-block;
}
.connect {
display: none;
}
.contact {
display: block;
}
}
#media screen and (max-width:415px) {
.content {
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.inner-body {
width: 100%;
}
}
</style>
</head>
<body>
<div class="content">
<div class="logo">
<img src="image/logo1.png" alt="Academy Logo">
</div>
<div class="navi">
<p id="nav">
Home |
Academics |
Services |
Covid-19 |
Students & Parents |
Transcripts |
Staff |
Career |
Events |
Student Account |
</p>
</div>
<div class="inner-body">
<div class="header">
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p class="para2">Please read the following instructions before submitting a report:</p>
<ol>
<li>Fill out all of the fields.</li>
<li>Use a valid email.</li>
<li>Select a problem type.</li>
<li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters
minumum).</li>
<li>Normally most issues get addressed within 2 hours, please be patient.</li>
</ol>
</div>
<div class="form1">
<form method="GET" onsubmit=" return formValidations() " action="log-it-reports.html"><br>
<div class="error1" id="errorMsg"></div>
<div>
<label for="subject"><b>Subject:</label>
<input id="subject" type="text" placeholder="Subject Title">
</div><br>
<div class="error" id="errorMsg2"></div>
<div>
<label for="email"><b>Email:</label>
<input id="email" type="email" placeholder="staff#wearview.com">
</div><br>
<div class="error" id="errorMsg3"></div>
<div>
<select name="techtype" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id="errorMsg4"></div>
<div>
<textarea id="description" placeholder="Description goes here" name="descript" rows="15"
cols="50"></textarea>
</div>
<div>
<button type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>
</div>
<div class="navi2">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="User Image">
</div>
<div class="user-links">
<navi>
<a class="staffname" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
Inbox <br><br>
Notifications <br><br>
Files <br><br>
Settings <br><br>
Help <br><br>
QR For Mobile <br><br>
Log Out
</navi>
</div>
</div>
</div>
<div class="foot">
<footer id="footy">
<div>
<img class="footimage" src="image/logo1.png" alt="Academy Logo" width="400px">
</div>
<div class="contact">
<h3>Contact Us</h3>
<p><img class="emaillogo" src="image/email (2).png" alt="emaillogo"> :wearview_academy#wearview.com
</p>
<p><img class="telelogo" src="image/tele.png" alt="telelogo"> :+2499100000000</p>
</div>
<div class="usefullinks">
<h3>Useful Links</h3>
<ul>
<li>Career</li>
<li>Report A Website Issue</li>
<li>About Us</li>
<li>Covid-19</li>
<li>Events</li>
</ul>
</div>
<div class="connect">
<h3>Connect With Us </h3><br>
<a href="https://www.facebook.com" title="facebook"><img class="fb" src="image/fb.png"
alt="Facebook" /></a>
<a href="https://www.twitter.com" title="twitter"><img class="tw" src="image/tw.jpg"
alt="Twitter" /></a>
<a href="https://www.youtube.com" title="youtube"><img class="yt" src="image/you.png"
alt="Youtube" /></a>
<a href="https://www.linkedin.com" title="linkedin"><img class="ln" src="image/linkd.png"
alt="LinkedIn" /></a>
</div>
</footer>
</div>
</div>
</body>
</html>
Note that I also removed the height of the footer in the example above, since it causes some spacing as well.

Foundation / troble with HTML coding

Can anyone help me with my product cart page? I can't find where I'm making a mistake.
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.main {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.mainWrapper {
position: relative;
width: 100%;
min-width: 320px;
min-height: 1000px;
padding: 0;
margin: 0 !important;
background: radial-gradient(#303d55, #2f3352);
}
.wrappen_block {
position: relative;
width: 100%;
height: 100%;
}
.mainBackground {
width: 100%;
min-height: 1000px;
background: url("../img/bgRectangl.png") left center no-repeat, url("../img/bgPhons.png") center center no-repeat, url("../img/layer-3-copy-2.png") center center no-repeat, url("../img/mainBg.png") center center no-repeat;
}
.productCard_block {
position: relative;
margin: 190px auto 0;
max-width: 800px;
min-height: 600px;
box-shadow: 0 5px 21px rgba(0, 0, 0, 0.08);
background-color: #fff;
}
/* LEFT SIDE */
.productCard_leftSide {
position: relative;
width: 100%;
min-height: 600px;
}
.productCard_brendBlock {
width: 100%;
height: 75px;
position: absolute;
top: 0;
left: 0;
max-width: 184px;
max-height: 75px;
background-color: #272727;
z-index: 2;
}
.productCard_brendBlock__imageBlock {
display: block;
height: 100%;
}
.productCard_brendBlock__imageBlock img {
position: absolute;
display: block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.sliderBlock {
position: relative;
height: 100%;
margin-left: 70px;
margin-top: 89px;
margin-bottom: 46px;
overflow: hidden;
}
.sliderBlock_items {
position: relative;
display: block;
width: 100%;
height: 403px;
}
.sliderBlock_items__itemPhoto {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
transition: opacity 1s;
}
.sliderBlock_items__showing {
opacity: 1;
z-index: 3;
}
.sliderBlock_items:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("../img/decorElements/DecorRectangle.png") 50% 50% no-repeat;
opacity: 0.2;
z-index: 4;
}
.sliderBlock_controls {
width: 100%;
}
.sliderBlock_controls__navigatin {
margin-top: 8px;
width: 100%;
}
.sliderBlock_controls__wrapper {
margin: 1% auto;
width: 110px;
height: 20px;
}
.sliderBlock_controls__arrow {
position: relative;
width: 24px;
height: 24px;
cursor: pointer;
border: 1px solid #536dfe;
transition: 300ms all;
background-color: #0d2660;
border-radius: 50%;
}
.sliderBlock_controls__arrow:hover {
background-color: #536dfe;
}
.sliderBlock_controls__arrow i {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
margin-left: -50%;
margin-top: -50%;
color: #fff;
transition: 300ms all;
font-weight: bold;
text-align: center;
font-size: 20px;
}
.sliderBlock_controls__arrowBackward {
float: left;
}
.sliderBlock_controls__arrowForward {
float: right;
}
.sliderBlock_positionControls {
display: block;
width: 100%;
height: 3px;
margin: 30px auto 0;
}
.sliderBlock_positionControls__paginatorItem {
float: left;
width: 18px;
height: 10px;
margin-left: 5px;
background-color: #D7D7D7;
cursor: pointer;
}
.sliderBlock_positionControls__paginatorItem:first-child {
margin-left: 31%;
}
.sliderBlock_positionControls__active {
background-color: #536dfe;
}
/* RIGHT SIDE */
.productCard_rightSide {
position: relative;
padding-top: 34px;
padding-left: 27px;
padding-right: 40px;
width: 100%;
min-height: 600px;
}
.block_specification {
float: right;
margin-top: 8px;
cursor: pointer;
color: #536dfe;
transition: all 0.5s;
}
.block_specification__button {
display: inline-block;
margin-right: 7px;
height: 100%;
font-size: 17px;
text-transform: uppercase;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
}
.block_specification:hover .block_specification__button__rotate {
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn);
}
.block_specification:hover {
color: #f1425d;
}
.block_specification__text {
width: 30px;
height: 11px;
font-family: 'Titillium Web', sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.block_model {
display: inline-block;
color: #263238;
font-size: 12px;
opacity: 0.9;
}
.block_name {
width: 100%;
color: #263238;
font-weight: 400;
line-height: 35px;
}
.block_name__mainName {
margin: 0;
padding: 0;
font-size: 29px;
}
.block_name__addName {
margin: 0;
padding: 0;
font-size: 24px;
}
.block_product {
position: relative;
width: 100%;
}
.block_product__advantagesProduct {
width: 271px;
height: 41px;
margin-top: 14px;
color: #646b6f;
font-size: 17px;
line-height: 24px;
}
.block_product__link {
line-height: 23px;
color: #536dfe;
}
.block_informationAboutDevice {
position: relative;
width: 100%;
overflow: hidden;
}
.block_descriptionInformation {
width: 304px;
height: 104px;
margin-top: 10px;
font-size: 14px;
font-weight: 400;
line-height: 23px;
color: #263238;
}
.block_descriptionCharacteristic {
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
z-index: 30;
transition: left, ease-out, 0.5s;
}
.block_descriptionCharacteristic__active {
left: 0;
}
#-webkit-keyframes moveCharackeristic {
0% {
left: 100%;
}
100% {
left: 0;
}
}
#keyframes moveCharackeristic {
0% {
left: 100%;
}
100% {
left: 0;
}
}
.block_specificationInformation_table {
position: relative;
height: 99.9%;
background-color: #fff;
}
.block_specificationInformation_table tr {
border-collapse: collapse;
border: 1px solid #000;
}
.block_specificationInformation_table th {
border: 1px solid #000;
font-weight: bold;
}
.block_specificationInformation_table td {
border-collapse: collapse;
text-align: center;
border: 1px solid #000;
}
.block_rating {
width: 100%;
margin-top: 33px;
}
fieldset,
label {
margin: 0;
padding: 0;
}
.block_rating__stars {
border: none;
float: left;
width: auto;
margin: 0;
padding: 0;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
margin: 0;
}
.block_rating__stars>input {
display: none;
}
.block_rating__stars>label:before {
margin: 5px;
font-size: 15px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.block_rating__stars>.half:before {
content: "\f089";
position: absolute;
}
.block_rating__stars>label {
color: #c9c9c9;
float: right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.block_rating__stars>input:checked~label,
.block_rating__stars:not(:checked)>label:hover,
.block_rating__stars:not(:checked)>label:hover~label {
color: #fccf47;
}
/* hover previous stars in list */
.block_rating__stars>input:checked+label:hover,
.block_rating__stars>input:checked~label:hover,
.block_rating__stars>label:hover~input:checked~label,
.block_rating__stars>input:checked~label:hover~label {
color: #FFED85;
}
.block_rating__avarage {
margin-left: 31px;
color: #f1425d;
font-size: 15px;
line-height: 35px;
}
.block_rating__reviews {
margin-left: 6px;
color: #656c6f;
font-size: 13px;
}
.block_price {
margin-top: 29px;
width: 100%;
}
.block_price__currency {
padding: 0;
margin: 0;
vertical-align: top;
color: #f1425d;
font-size: 26px;
font-weight: 600;
}
.block_price__shipping {
padding: 0;
margin: 0;
color: #A2A9AD;
font-size: 12px;
}
.radio_button {
position: absolute;
opacity: 0;
}
.block_goodColor {
margin-top: 29px;
width: 100%;
}
.block_goodColor__allColors {
width: 100%;
margin-top: 14px;
}
.block_goodColor__radio {
display: inline-block;
width: 21px;
height: 21px;
border-radius: 50%;
margin-left: 10% !important;
background-color: #e8e6e3;
cursor: pointer;
}
.radio_button:checked+.block_goodColor__radio {
width: 25px;
height: 25px;
box-shadow: 0 0 5px 3px rgba(83, 109, 254, 0.5);
border: 2px solid #fff;
}
.block_goodColor__black {
background-color: #3c383a;
}
.block_goodColor__silver {
background-color: silver;
}
.text_specification {
padding: 0;
color: #37474f;
font-size: 13px;
}
.block_quantity {
position: relative;
height: 46px;
margin-top: 45px;
}
.block_quantity span {
display: inline-block;
float: left;
margin-top: 15px;
margin-right: 10px;
}
.block_quantity__chooseBlock {
vertical-align: top;
height: 100%;
margin: 0;
padding: 0;
}
.block_quantity__number {
display: inline-block;
float: left;
width: 52px;
height: 46px;
border: 1px solid #ddd;
font-size: 18px;
}
.block_quantity__number::-webkit-input-placeholder {
color: #403f40;
font-size: 18px;
line-height: 35px;
}
.block_quantity__number::-moz-placeholder {
color: #403f40;
font-size: 18px;
line-height: 35px;
}
.block_quantity__number:-ms-input-placeholder {
color: #403f40;
font-size: 18px;
line-height: 35px;
}
.block_quantity__number::placeholder {
color: #403f40;
font-size: 18px;
line-height: 35px;
}
.block_quantity__button {
display: inline-block;
position: relative;
float: left;
width: 20px;
height: 50%;
margin: 0;
padding: 0;
margin-left: 11px;
font-size: 0;
cursor: pointer;
}
.block_quantity__button:hover,
.block_quantity__button:focus {
background-color: transparent;
}
.block_quantity__button:hover:before,
.block_quantity__button:focus:before {
color: #536dfe;
}
.block_quantity__up:before {
content: "\f106";
width: 11px;
height: 6px;
font-family: "FontAwesome";
color: #37474f;
font-size: 18px;
}
.block_quantity__down:before {
content: "\f107";
width: 11px;
height: 6px;
font-family: "FontAwesome";
color: #37474f;
font-size: 18px;
}
.button.button_addToCard {
width: 147px;
height: 46px;
margin-top: 43px;
margin-bottom: 0;
padding: 0;
color: #fff;
background-color: #536dfe;
font-size: 17px;
transition: all 0.3s;
}
.button.button_addToCard:hover {
background-color: #0d2660;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />
<main class="main">
<div class="mainWrapper">
<div class="mainBackground clearfix">
<div class="row">
<div class="column small-centered">
<div class="productCard_block">
<div class="row">
<div class="small-12 large-6 columns">
<div class="productCard_leftSide clearfix">
<div class="productCard_brendBlock">
<a class="productCard_brendBlock__imageBlock" href="#">
<img src="img/brtendsLogos/logo_sennheiser.png" alt="sennheiser">
</a>
</div>
<div class="sliderBlock">
<ul class="sliderBlock_items">
<li class="sliderBlock_items__itemPhoto sliderBlock_items__showing">
<img src="img/goods/item1/phones1.png" alt="headphones">
</li>
<li class="sliderBlock_items__itemPhoto">
<img src="img/goods/item1/phones2.png" alt="headphones">
</li>
<li class="sliderBlock_items__itemPhoto">
<img src="img/goods/item1/phones3.png" alt="headphones">
</li>
<li class="sliderBlock_items__itemPhoto">
<img src="img/goods/item1/phones4.png" alt="headphones">
</li>
<li class="sliderBlock_items__itemPhoto">
<img src="img/goods/item1/phones5.png" alt="headphones">
</li>
</ul>
<div class="sliderBlock_controls">
<div class="sliderBlock_controls__navigatin">
<div class="sliderBlock_controls__wrapper">
<div class="sliderBlock_controls__arrow sliderBlock_controls__arrowBackward">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</div>
<div class="sliderBlock_controls__arrow sliderBlock_controls__arrowForward">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
</div>
</div>
<ul class="sliderBlock_positionControls">
<li class="sliderBlock_positionControls__paginatorItem sliderBlock_positionControls__active"></li>
<li class="sliderBlock_positionControls__paginatorItem"></li>
<li class="sliderBlock_positionControls__paginatorItem"></li>
<li class="sliderBlock_positionControls__paginatorItem"></li>
<li class="sliderBlock_positionControls__paginatorItem"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="small-12 large-6 columns">
<div class="productCard_rightSide">
<div class="block_specification">
<div class="block_specification__specificationShow">
<i class="fa fa-cog block_specification__button block_specification__button__rotate" aria-hidden="true"></i>
<span class="block_specification__text">spec</span>
</div>
<div class="block_specification__informationShow hide">
<i class="fa fa-info-circle block_specification__button block_specification__button__jump" aria-hidden="true"></i>
<span class="block_specification__text">inform</span>
</div>
</div>
<p class="block_model">
<span class="block_model__text">Model: </span>
<span class="block_model__number">505795</span>
</p>
<div class="block_product">
<h2 class="block_name block_name__mainName">MOMENTUM<sup>® </sup></h2>
<h2 class="block_name block_name__addName">Wireless Black</h2>
<p class="block_product__advantagesProduct">
Wireless headphones with integrated microphone
</p>
<div class="block_informationAboutDevice">
<div class="block_descriptionCharacteristic block_descriptionCharacteristic__disActive">
<table class="block_specificationInformation_table">
<tr>
<th>Characteristic</th>
<th>Value</th>
</tr>
<tr>
<td>Ear Coupling</td>
<td>Around Ear</td>
</tr>
<tr>
<td>Transducer Principle</td>
<td>Dynamic, Closed-back</td>
</tr>
<tr>
<td>Frequency Response</td>
<td>16Hz – 22kHz</td>
</tr>
<tr>
<td>Sound Pressure Level (SPL)</td>
<td>113 dB (Passive: 1 kHz/1 Vrms)</td>
</tr>
<tr>
<td>Total Harmonic Distortion (THD)</td>
<td><0.5% (1 kHz, 100 dB SPL)</td>
</tr>
<tr>
<td>Volume Control</td>
<td>Earcup control when Bluetooth connected</td>
</tr>
<tr>
<td>Microphone Type</td>
<td>Dual omni-directional microphone <br>(2 mic beam forming array)
</td>
</tr>
<tr>
<td>Cable / Connector</td>
<td>1.4m (Detachable) / 3.5mm Angled</td>
</tr>
<tr>
<td>Weight</td>
<td>260g (9.17 oz)</td>
</tr>
</table>
</div>
<div class="block_descriptionInformation">
<span>Peak performance with active noise cancelation. Sennheiser's new MOMENTUM Wireless
- Closed circumauralheadphone featuring <a class="block_product__link"
href="#">Bluetooth<sup>®</sup></a> wireless technology and NoiseGard Hybrid active noise cancelation
</span>
</div>
<div class="block_rating">
<fieldset class="block_rating__stars">
<input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Above average - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Average - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="block_rating__avarage">4.25</span>
<span class="block_rating__reviews">(153 reviews)</span>
</div>
<div class="row">
<div class="large-6 small-12 column">
<div class="block_price">
<p class="block_price__currency">$499.95</p>
<p class="block_price__shipping">Shipping and taxes extra</p>
</div>
<div class="block_quantity">
<span class="text_specification">Quantity</span>
<div class="block_quantity__chooseBlock">
<input class="block_quantity__number" name="quantityNumber" type="text" min="1" value="1">
<button class="block_quantity__button block_quantity__up"></button>
<button class="block_quantity__button block_quantity__down"></button>
</div>
</div>
</div>
<div class="large-6 small-12 end column">
<div class="block_goodColor">
<span class="text_specification">Choose your colors:</span>
<div class="block_goodColor__allColors">
<input type="radio" name="colorOfItem" class="radio_button" id="radioColor" checked/>
<label for="radioColor" class="block_goodColor__radio block_goodColor__black"></label>
<input type="radio" name="colorOfItem" class="radio_button" id="radioColor2" />
<label for="radioColor2" class="block_goodColor__radio block_goodColor__silver"></label>
</div>
</div>
<button class="button button_addToCard">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
For clarification, I'll show you two photos. On the first photo as it now looks, and on the second, how it should look like
[] Picture with problem1
[]2
You just need to add the class clearfix to the block_rating div, because the floating elements in that div are causing the preceding floating elements to stack up next to them.
https://codepen.io/anon/pen/XgXqqd
Thanks for posting such great info to troubleshoot with, but without a little bit more it'll be hard for me to help. Have you thought of installing a chrome extension like Pesticide? It'll help you actually see outlines of what is where so you can figure out what happened. You can right click on elements and left click inspect to then see them in Chrome Developer Tools and actually look at what CSS is applying to them. You can then add in-line styles to style them manually while the window it open to try out solutions before returning to your CSS document and finalizing them (by adding them more permanently). Take caution when using !important though as it's kind of bringing a gun to a knife fight imho. Good luck and feel free to post screens of your site once pesticide is running and drawing boxes.
Here goes my two cents... when you use any grid framework (Foundation in this case, but could be any other), please try to achieve all the layout just using the grid... when you put between grid hierarchy other divs with margin, padding, sizing, weird things can happen (like this bug).
As far as I can see, right side layout can be solved just using the grid, would be something like:
<div class="row">
<div class="column medium-6"> Stars goes here </div>
<div class="column medium-6"> Point rating and review count </div>
</div>
<div class="row price-holder">
<div class="column medium-6"> Price goes here </div>
<div class="column medium-6"> Color selector </div>
</div>
<div class="row">
<div class="column medium-6"> Quantity selector </div>
<div class="column medium-6"> Add to cart button </div>
</div>
BTW, I added the class price-holder, where you could add a top-padding to make some space, if you want it that way (no need of additional elements). If you want to keep the layout on mobile, please use small-6 instead of medium-6.
You could use additional containers inside the columns, so you can style elements like pricing and so, although you could add the classes to the columns, as long as you don't add rules for width, margin or padding (again, weird things could happen).
Hope this helps.

Change cursor in file type input

I have an input element for file uploading (type='file'). I'm trying to put some style in it and it almost works. I just can't get to change the cursor to a pointer when hover over the image. It only appears when the cursor is over the bottom of the image.
div.wrapper{
position:relative;
height: 40px;
}
div.upload {position:absolute;
background: url('https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png') 0 0 no-repeat;
}
div.upload input {
width: 40px;
height: 40px;
opacity: 0;
cursor: pointer;
}
#fileDesc{
top:10px;
position:relative;
margin-left:0px;
font-family: Trebuchet MS,Helvetica,Arial,sans-serif;
font-size:18px;
color:#3383bb;
}
<div class="wrapper">
<div class="upload">
<input type="file" name="upload" id="uploader"><span id="fileDesc">No file selected...</span>
</div>
</div>
<input id="parseXml" type="button" value="Load file" onClick="parseXml()" style="vertical-align: top" />
Below code might help
<div class="wrapper">
<input type="file" name="photo" id="uploader-photo" />
<label for="uploader-photo"></label>
<label class="nostyle">No file selected...</label>
</div>
label {
cursor: pointer;
width: 50px;
height: 40px;
display: inline-block;
background: url(https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png) 0 0 no-repeat;
}
label.nostyle {
background: none;
height: auto;
padding: 0;
cursor: initial;
width: auto;
vertical-align: top;
}
#uploader-photo {
opacity: 0;
position: absolute;
z-index: -1;
}
div.wrapper{
position:relative;
height: 40px;
}
div.upload {position:absolute;
background: url('https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png') 0 0 no-repeat;
}
div.upload input {
width: 40px;
height: 40px;
opacity: 0;
}
div.upload {
cursor: pointer;
}
#fileDesc{
top:10px;
position:relative;
margin-left:0px;
font-family: Trebuchet MS,Helvetica,Arial,sans-serif;
font-size:18px;
color:#3383bb;
}
<div class="wrapper">
<div class="upload">
<input type="file" name="upload" id="uploader"><span id="fileDesc">No file selected...</span>
</div>
</div>
<input id="parseXml" type="button" value="Load file" onClick="parseXml()" style="vertical-align: top" />
These css changes above make the label also clickable.
div.upload input {
width: 40px;
height: 40px;
opacity: 0;
cursor: pointer;
padding-right: 200px;
}
#fileDesc {
top: 10px;
position: absolute;
margin-left: 0px;
font-family: Trebuchet MS,Helvetica,Arial,sans-serif;
font-size: 18px;
color: #3383bb;
left: 50px;
z-index: -1;
}
div.wrapper {
position: relative;
height: 40px;
}
div.upload {
position: absolute;
background: url('https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png') 0 0 no-repeat;
}
div.upload input {
width: 40px;
height: 40px;
opacity: 0;
cursor: pointer;
padding-right: 200px;
}
#fileDesc {
top: 10px;
position: absolute;
margin-left: 0px;
font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
font-size: 18px;
color: #3383bb;
left: 50px;
z-index: -1;
}
<div class="wrapper">
<div class="upload">
<input type="file" name="upload" id="uploader"><span id="fileDesc">No file selected...</span>
</div>
</div>
<input id="parseXml" type="button" value="Load file" onClick="parseXml()" style="vertical-align: top" />
You can add the following css to your existing code. This will get the job done.
div.upload input {
cursor: pointer;
margin-left: -100px;}

ionic - input box width

I am having a problem with the input boxes in my login.html. I am not able to increase the width of the input boxes. If I am increasing the width to 100%, the height is increasing with it.
Here is an image showing the width.
I want the width to be almost double of it.
Here is a link to my html and css:
https://jsfiddle.net/ybkjv8uw/
item.item-input {
border: none;
position: relative;
left: 0px;
top: 135px;
background-color: transparent;
}
.item.item-input {
border: none;
position: relative;
top: 135px;
background-color: transparent;
width:100%;
}
.item.item-input>span{
width:auto;
}
.item.item-input>input{
width:68%;
}
.view-content {
background-color:#85b818;
}
.img-div {
position: relative;
left: 110px;
top: 35px;
}
.item.item-input {
border: none;
position: relative;
left: 0px;
top: 135px;
background-color: transparent;
width:100%;
}
.item.item-input span{width:auto;}
.item.item-input input{width:68%;}
/*.item-input-inset .item-input-wrapper input {
padding-left: 4px;
height: 29px;
background: transparent;
line-height: 18px;
// you should add the following:
box-sizing: border-box;
width: 100%;
}*/
input::-webkit-input-placeholder {
color: white;
}
label {
/*display: block; width: 100%;*/
width:200px;
float: left;
/*clear:left;*/
text-align:right;
/*padding-right:10px;*/
}
input{
/*float:left;*/
}
.enter-div {
text-align: center;
}
.enter-button {
position: relative;
top: 170px;
width: 280px;
height: 50px;
border-radius: 25px;
border: none;
background-color: green;
color: white;
}
.foyopass-div {
position: relative;
text-align: center;
top: 200px;
color: white;
}
<ion-view class="view-content">
<div class="img-div">
<img src="img/main_logo_icon.png" style="width : 40% ; height : 20%" >
</div>
<div>
<label class="item item-input">
<span class="input-label" ><img src="img/email_icon.png" style="width: 30%" ></span>
<input type="email" placeholder="Email">
</label>
</div>
<div>
<label class="item item-input">
<span class="input-label" ><img src="img/password_icon.png" style="width: 25%"></span>
<input type="password" placeholder="Password">
</label>
</div>
<div class="enter-div">
<button class="enter-button">
Enter
</button>
</div>
<div class="enter-div">
forgot your password?
</div>
</ion-view>

CSS elements bleeding into eachother

There's one very big problem I'm having with my CSS:
The Problem: The text is bleeding into the header element, which is fixed and is supposed to overlap like a navigation bar should, particluarly observed with the #media rule "only screen and (min-width: 320px) and (max-width:568px)"
I want it to neatly tuck under the element, that I've set to be fixed just like a navigation bar.
If it helps, here's a code snippet:
#media all {
body {
font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
#media screen and (min-width: 1240px) {
body {
font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
.header-container {
position: relative;
font-size: 72px;
height: 1em;
}
.header {
position: absolute;
display: block;
font-size: 72px;
top: 0px;
left: 0px;
width: 100%;
height: 1em;
background-color: rgba(255, 255, 255, 1);
display: table;
}
.header_img {
height: 1em;
text-align: left;
top: 50%;
left: 5px;
width: auto;
margin: 0;
transform: translate(0%, 0%);
}
.enter_sale {
background: rgba(19, 134, 129, 1);
position: absolute;
top: 0em;
left: 0%;
height: 1.01em;
width: 33%;
color: white;
}
.barometer {
background: rgba(172, 24, 117, .8);
position: absolute;
top: 0em;
left: 33%;
height: 1.01em;
width: 33%;
color: white;
}
.barometer:hover {
background: rgba(172, 24, 117, 1);
}
.finance {
background: rgba(220, 118, 31, .8);
position: absolute;
top: 0em;
left: 66%;
height: 1.01em;
width: 34%;
color: white;
}
.finance:hover {
background: rgba(220, 118, 31, 1);
}
.content {
position: absolute;
font-size: 72px;
display: block;
top: 1em;
left: 12.5%;
height: auto;
width: 75%;
padding: .1em;
border-left: solid;
border-right: solid;
border-color: rgba(19, 134, 129, 1);
}
.enter_sale_text {
text-align: center;
position: absolute;
top: 50%;
left: 80px;
height: auto;
width: auto;
margin: 0;
transform: translate(0%, -50%);
font-size: 60px;
}
.barometer_text {
text-align: center;
position: absolute;
top: 50%;
left: 80px;
height: auto;
width: auto;
margin: 0;
transform: translate(0%, -50%);
font-size: 60px;
}
.finance_text {
text-align: center;
position: absolute;
top: 50%;
left: 80px;
height: auto;
width: auto;
margin: 0;
transform: translate(0%, -50%);
font-size: 60px;
}
.content_newrules {
font-size: 14px;
}
}
#media only screen and (min-width: 320px) and (max-width: 568px) {
.header-container {
position: relative;
font-size: 72px;
height: 1em;
}
.content {
position: absolute;
font-size: 72px;
display: block;
top: 1em;
height: auto;
width: 94%;
padding: .1em;
border-color: rgba(19, 134, 129, 1);
}
.header {
position: fixed;
font-size: 72px;
top: 0px;
left: 0px;
width: 100%;
height: 1em;
}
.header_img {
display: block;
height: 100%;
width: auto;
margin-left: auto;
margin-right: auto;
/*transform: translate(0%, -50%);*/
font-size: 60px;
}
.enter_sale {
background-color: #9C2329;
/*text-align: center;*/
position: absolute;
top: 0em;
left: 0%;
height: 1.01em;
width: 33%;
color: white;
}
.barometer {
background: #27821D;
/*text-align: center;*/
position: absolute;
top: 0em;
left: 33%;
height: 1.01em;
width: 33%;
color: white;
}
.barometer:hover {
background: rgba(172, 24, 117, 1);
}
.finance {
background: #307CA9;
/*text-align: center;*/
position: absolute;
top: 0em;
left: 66%;
height: 1.01em;
width: 34%;
color: white;
}
.enter_sale_text {
display: none;
/*text-align: center;
position: absolute;
top: 50%;
left: 80px;
height: auto;
width: auto;
margin: 0;
transform: translate(0%, -50%);
font-size: 60px;*/
}
.barometer_text {
display: none;
/*text-align: center;
position: absolute;
top: 50%;
left: 80px;
height: auto;
width: auto;
margin: 0;
transform: translate(0%, -50%);
font-size: 60px;*/
}
.finance_text {
display: none;
/*text-align: center;
position: absolute;
top: 50%;
left: 80px;
height: auto;
width: auto;
margin: 0;
transform: translate(0%, -50%);
font-size: 60px;*/
}
.content_newrules {
font-size: 14px;
}
}
<body onload="lookup_zip('init')">
<script type="text/javascript" src="resources/enter_sale.js">
</script>
<div class="header_container">
<span class="header">
<span class="enter_sale">
<img src="resources/enter_sale.png" class="header_img"></img>
<span class="enter_sale_text">
Enter Sale
</span>
</span>
<span class="barometer">
<img src="resources/barometer.png" class="header_img"></img>
<span class="barometer_text">
Dashboard
</span>
</span>
<span class="finance">
<img src="resources/finance.png" class="header_img"></img>
<span class="finance_text">
Finance
</span>
</span>
</span>
</div>
<div class="content">
<span class="content_newrules">
<h3>
Sales Represenative(s)
</h3>
<form action="resources/submit_form.php" method="post">
Sales Representative: <select id="sales_rep" onchange="checkForm()" name="sales_rep">
<option selected="selected" name="no_select" value="">Select a Rep</option>
<option name="Kerry Kennicutt">Kerry Kennicutt</option>
<!-- The rest are to be determined by PHP -->
</select>
</br>
<span id="secondary_sales_rep_container">
Add a secondary sales rep...
</br>
</span>
<!-- </br> -->
<h3>
Customer Information
</h3>
<!-- </br> -->
<!-- Note: The following textbox uses CSS to ensure that all the entered characters are UPPERCASE -->
First Name:
<input type="text" id="c_first_name" name="c_first_name" style="text-transform: uppercase;" onchange="validate_text(1)">
</br>
Last Name:
<input type="text" id="c_last_name" name="c_last_name" style="text-transform: uppercase;" onchange="validate_text(2)">
</br>
Street Address:
<input type="text" id="c_address" name="c_address" style="text-transform: uppercase;" onchange="validate_text(3)">
</br>
Zip Code:
<input type="text" id="c_zip" name="c_zip" style="text-transform: uppercase" onchange="lookup_zip()">
</br>
City/St: <span id="cityst"><!-- This information will be filled in by function lookup_zip() --></span>
</br>
<h3>
Deal Information
</h3>
<!-- </br> -->
Deal Number:
<input type="text" id="deal_number" name="deal_number">
</br>
Stock Number:
<input type="text" id="deal_stock_number" name="deal_stock_number">
</br>
Selling Model:
<input type="text" id="deal_selling_model" name="deal_selling_model" style="text-transform: uppercase;">
</br>
Trade in 1 Model:
<input type="text" id="deal_trade_in_model_1" name="deal_trade_in_model_1" style="text-transform: uppercase;">
</br>
Trade in 1 Amount:
<input type="text" id="deal_trade_in_amount_1" name="deal_trade_in_amount_1" onchange="picky_currency('deal_trade_in_amount_1')">
</br>
<span id="second_tradein">
<a href="javascript:show_tradein_2()">
There's more than one trade in...
</a>
</span>
</br>
New/Used:
<select name="deal_new_status">
<option>New</option>
<option>Used</option>
</select>
</br>
D&H:
<input type="text" id="deal_dh" name="deal_dh" onchange="picky_currency('deal_dh')">
</br>
Finance Amount:
<input type="text" id="deal_finance_amount" name="deal_finance_amount" onchange="picky_currency('deal_finance_amount')">
</br>
Pack Amount:
<input type="text" id="deal_pack" name="deal_pack" onchange="picky_currency('deal_pack')">
</br>
Retro Amount:
<input type="text" id="deal_retro" name="deal_retro" onchange="picky_currency('deal_retro')">
</br>
Holdback Amount:
<input type="text" id="deal_holdback" name="deal_holdback" onchange="picky_currency('deal_holdback')">
</br>
</br>
<input type="checkbox" id="finance_toggle" onchange="show_finance_information()">I want to add financing information now.
<span id="finance_information" style="display:none;">
</br>
</br>
Reserve Amount: <input type="text" id="deal_reserve_amount" name="deal_reserve_amount" onchange="picky_currency('deal_reserve_amount')">
</br>
Warrantee Amount: <input type="text" id="deal_warrantee" name="deal_warrantee" onchange="picky_currency('deal_warrantee')">
</br>
Gap Amount: <input type="text" id="deal_gap" name="deal_gap" onchange="picky_currency('deal_gap')">
</br>
Etch Amount: <input type="text" id="deal_etch" name="deal_etch" onchange="picky_currency('deal_etch')">
</br>
Maintenence Amount: <input type="text" id="deal_maintenence" name="deal_maintenence" onchange="picky_currency('deal_maintenence')">
</br>
Gross Amount: <input type="text" id="deal_gross" name="deal_gross" onchange="picky_currency('deal_gross')">
</br>
</span>
</br>
</br>
<input type="submit" value="Confirm Sales Information">
</form>
</div>
</span>
After looking at your code in a JSFiddle, it is just a z-index issue where the content is overlaying the header tabs. If you add z-index: 5; to your .content and z-index: 10; to your .header.
z-index defines the "layering" of your objects. Lower numbers are "under" higher z-index numbers.
JSFiddle
Yep, its bleeding because you use position: absolute; for header, barometer and finance. you can use display: inline-block or float: left for each element.
maybe it can help you
http://learnlayout.com/inline-block.html