FontAwsome icon location not displaying correctly on firefox - html

i use FontAwsome icon to put it in a login form, so a user and password icon appear when user enter the sign in form.
the form work correctly with chrome: http://im85.gulfup.com/4Q9sj9.png
but icons appear likes this in firefox: http://im79.gulfup.com/WFKCvm.png
html code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="login panel">
<meta name="author" content="WhiteOne">
<title>Login</title>
<!-- Bootstrap Core CSS -->
<link href="css/flatly/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- icon location -->
<link rel="stylesheet" type="text/css" href="styles/icon.css" />
<!-- Set Full Background -->
<link rel="stylesheet" type="text/css" href="styles/background.css" />
</head>
<body>
<div id="bg">
<img src="login-image.jpg" alt="login screen background">
</div>
<div style="margin: 100px auto 0 auto;">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="checklogin.php">
<fieldset>
<div class="form-group">
<span class="usericon">
<input class="form-control" placeholder="Username" name="username" type="text" autofocus>
</span>
</div>
<div class="form-group">
<span class="passwordicon">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</span>
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<input type="submit" name="Login" value="Login" class="btn btn-lg btn-success btn-block">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/plugins/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>
</body>
</html>
css code for icon: icon.css
.usericon input{
padding-left:25px;
}
.usericon:before{
opacity:.8;
height:11%;
width:25px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
position: absolute;
content:"\f007";
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
pointer-events: none;
-webkit-font-smoothing: antialiased;
}
.passwordicon input{
padding-left:25px;
}
.passwordicon:before{
opacity:.8;
height:11%;
width:25px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
position: absolute;
content:"\f023";
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
pointer-events: none;
-webkit-font-smoothing: antialiased;
}
aslo when i try to change the css code using developer tools or even from the css file nothing changed in firefox, that somehow strange!
anyone know how can i solve this problem?

I think it's a bad idea to break the FontAwesome encapsulation the way your rules do. You can position the conventional <i> elements and get the result you want:
<span class=usericon>
<i class="fa fa-user"></i>
<input>
</span>
Simplified from yours, but the same idea. The CSS:
.usericon {
padding: 1px 5px;
position: relative;
display: inline-block;
}
.usericon i {
position: absolute;
top: 4px; left: 10px;
}
.usericon input {
border: 1px solid #bbb;
border-radius: 5px;
padding: 2px 2px 2px 20px;
width: 15em;
}
Here's the CodePen for it. That looks fine to me in both Firefox and Chrome.

Related

Make materilize css dropdown smaller in size

I need to make the drop down of the materialize css smaller in size.
The font the spacing and everything. I have trued with width: 50%; height: 50% but this doesnt reduce the size
Now:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div>
<div class="col s12">
<div class="col s6">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col s6">
<select id="select">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div class="col l4">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col l4" ">
<select id="select ">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
try to refer grid layout of there..
You can just scale it?
.select-wrapper {
transform: scale(0.7);
}
You probably need to override the fixed width in the ul on smaller screens to make it wider.
.select-wrapper {
transform: scale(0.7);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div>
<div class="col s12">
<div class="col s6">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col s6">
<select id="select">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
You need to override the li and the nested a. These are the default applied styles:
// The <li>
.dropdown-content li {
clear: both;
color: rgba(0,0,0,0.87);
cursor: pointer;
min-height: 50px;
line-height: 1.5rem;
width: 100%;
text-align: left;
}
// The nested <a>
.dropdown-content li>a, .dropdown-content li>span {
font-size: 16px;
color: #26a69a;
display: block;
line-height: 22px;
padding: 14px 16px;
}
Something like this would be a quick reduction from 50px to 40px:
.dropdown-content li,
.dropdown-content li>a {
height: 40px;
line-height: 0.9rem;
min-height: unset;
}
As a final note - if you use SASS in your projects, you can define the dropdown height (as well as the value of everything else in the framework) at the start of your project, rather than override it later down the line.
Codepen
Final final note!
The materialize select is a dropdown, in case you're wondering why I'm talking about dropdowns. Materialize hides the native select, replacing it with a text input that triggers a dropdown. Both a dropdown and a select will be affected by the style declarations above.

Removing Blue Border around a Button After Click

here is the problematic bit of code
:root {
--color-foreground-text-main: rgb(255, 72, 142);
--color-foreground-text-sub: rgb(0, 114, 153);
}
html,
body {
height: 100%;
}
img {
max-width: 100%;
}
#cover {
background: #222 url('Resources/img/cover.jpg') center center no-repeat;
background-size: cover;
color: var(--color-foreground-text-main);
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
#subscribe-button {
text-align: center;
background: var(--color-foreground-text-main);
color: white;
outline: 0;
}
#subscribe-button:hover {
background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Mandatory meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--Custom Styles-->
<link rel="stylesheet" href="SP_BaseStyle.css" />
<title>School Project</title>
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-12">
<br>
<div class="row">
<div class="p-0 pr-1 pb-1 m-0
col-12 col-sm-6 col-md-5">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="George Smith">
</div>
<div class="p-0 m-0 pr-1 pb-1
col-12 col-sm-6 col-md-5">
<label class="sr-only">Email</label>
<input type="text" class="form-control form-control-lg" placeholder="george.smith#email.com">
</div>
<button type="submit" class="btn btn-lg mb-1
col-12 col-md-2" id="subscribe-button">Subscribe!</button>
</div>
↓
</div>
</div>
</div>
</section>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
after clicking the button out of nowhere a dark blue outline appears around the button. I looked around forums and the Bootstrap Docs about it but I cannot seem to find a way to change it's color or remove it altogether
I have tried setting the outline and the box shadow without any success.
NOTE: I know it is a visual queue that should not be removed and prefer just changing the color of it but if I cannot do it other way I would want to remove it internally and add it in CSS.
EDIT: Just for clarification we are talking about the 'subscribe' button not the arrow button. I am adding the code with the suggested changes. Also removing the border for clarity.
I thought it was outline but not, of course i didn't saw your code, but after i see, the problem is here:
border: 2px var(--color-foreground-text-sub) solid;
remove this line. that's all.
Edit: and after click, override this:
.btn.focus, .btn:focus {
outline: 0;
box-shadow: none!important;
}
:root {
--color-foreground-text-main: rgb(255, 72, 142);
--color-foreground-text-sub: rgb(0, 114, 153);
}
.btn.focus, .btn:focus {
outline: 0;
box-shadow: none!important;
}
html,
body {
height: 100%;
}
img {
max-width: 100%;
}
#cover {
background: #222 url('Resources/img/cover.jpg') center center no-repeat;
background-size: cover;
color: var(--color-foreground-text-main);
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
#subscribe-button {
text-align: center;
background: var(--color-foreground-text-main);
color: white;
outline: 0;
}
#subscribe-button:hover {
background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Mandatory meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--Custom Styles-->
<link rel="stylesheet" href="SP_BaseStyle.css" />
<title>School Project</title>
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-12">
<br>
<div class="row">
<div class="p-0 pr-1 pb-1 m-0
col-12 col-sm-6 col-md-5">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="George Smith">
</div>
<div class="p-0 m-0 pr-1 pb-1
col-12 col-sm-6 col-md-5">
<label class="sr-only">Email</label>
<input type="text" class="form-control form-control-lg" placeholder="george.smith#email.com">
</div>
<button type="submit" class="btn btn-lg mb-1
col-12 col-md-2" id="subscribe-button">Subscribe!</button>
</div>
↓
</div>
</div>
</div>
</section>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
Just add this to your css:
button:focus {outline:0;}
That's small property named "outline" is mostly placed in pseudo classes. So to avoid it you may use outline:none or outline:0

Align a horizontal form at the center of the webpage

I have a form whose input fields are all aligned horizontally end to end. I want it to be aligned at the center of the webpage.I have tried using margin: 0 auto. That didnt help. I have also tried position: absolute and left top but that didn't give me desire results.
also submit button aligned at the center.
here's my code:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>APT - Aviation | Travel | Hospitality</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div class="background-wrap">
<video id="video-bg-elem" poster="images/clouds-from-an-airplane-window-picjumbo-com.gif" preload="auto" autoplay="true" loop muted>
<source src="video/clouds.mp4" type="video/mp4">
</video>
</div>
<div id="logo">
<img src="images/APT-LOGO-PNG.png" >
</div>
</div>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<input type="tel" class="form-control" id="contact" name="contact" placeholder="Enter contact">
</div>
<button style="display:block;" type="submit" class="btn btn-default">Submit</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Use the following css for the form :
position:absolute;
left: 50%;
top : 50%;
transform: translate(-50%, -50%);
You can use the following css snippet, which follows latest feature of flexbox styling:
body {
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
}
input {
width: 200px;
margin-top: 25px;
}

How to make my words clickable and direct it to another HTML file?

How do I make it so when I click a word in my footer, it takes the user to another page that has information related to what they clicked? The help I need is how do I link HTML files appropriately and how do I make a word clickable that will take me from HTML file #1 to HTML file #2.
Do I just have to make a new file and link rel it in my first HTML page and then place the HTML name (of HTML file #2) in a href with a word?
If you are confused, look at the footer on https://gotinder.com I essentially want to be able to do something like that.
An important note I should add is that I'm using bootstrap.
Here's a link to what my page look like https://gyazo.com/2e012e31ed40f419c702121ec42d9a8e
<!DOCTYPE html>
<html>
<head>
<!-- If IE use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Set the page to the width of the device and set the zoon level -->
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>
title
</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>
<div class="wrapper">
<button type="button" class="btn btn-primary">Login with Facebook</button>
</div>
<div class="footer">
<div class="row">
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Download</h4>
Download for Android (Cooming Soon) <br>
Download for iOS (Coming Soon)
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Company</h4>
Jobs (Unavailable)<br>
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Support</h4>
For support purposes,
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Legal</h4>
Privacy<br>Terms<br>Safety<br>Go to Google
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
<!-- Problems to fix include:
- Move the Piddash logo to the left.
-->
then
html,body{
height:100%;
width:100%;
}
.wrapper {
display:flex;
align-items:center;
width:100%;
height:100%;
background-image: url("../img/space.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.button {
width:100px;
margin:auto;
}
.footer {
padding-bottom: 50px;
padding-left: auto;
padding-right: auto;
}
.btn {
margin:0 auto;
}
.row {
vertical-align: center;
text-align: center;
}
.h4 {
font-family: Arial, Sans-serif;
}
I don't know if I did not understand your question but is this what you want?
<a href="nameoffileyouwanttolink.html">Text that will display as link<a>
If you are not using backend routing and only HTML & CSS:
Click Here
You can use Link text tag with custom styling options using a class
You can learn more about HTML a tag from W3C
html,
body {
height: 100%;
width: 100%;
}
.wrapper {
display: flex;
align-items: center;
width: 100%;
height: 100%;
background-image: url("../img/space.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.button {
width: 100px;
margin: auto;
}
.footer {
padding-bottom: 50px;
padding-left: auto;
padding-right: auto;
}
.btn {
margin: 0 auto;
}
.row {
vertical-align: center;
text-align: center;
}
.h4 {
font-family: Arial, Sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- If IE use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Set the page to the width of the device and set the zoon level -->
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>
title
</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>
<div class="wrapper">
<button type="button" class="btn btn-primary">Login with Facebook</button>
</div>
<div class="footer">
<div class="row">
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Download</h4>
Download for Android (Cooming Soon)
<br> Download for iOS (Coming Soon)
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Company</h4>
Jobs (Unavailable)
<br>
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Support</h4>
For support purposes,
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Legal</h4>
Privacy
<br> Terms
<br> Safety
<br>Go to Google
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
<!-- Problems to fix include:
- Move the Piddash logo to the left.
-->

CSS not being applied to ID

My css isn't being applied to a specific img id element on page. I have spent about 30 minutes trying to figure this thing out to no avail. I have 2 other elements with the exact same html and css being applied correctly. Image in question: http://i.imgur.com/Lrtucyo.gif The other two images are just like that one as far as i can tell.
body{
font-family: 'Montserrat', sans-serif;
background: url(/img/body_bg.jpg);
color:#ddd;
font-weight: 700;
font size: 30px;
}
.container{
margin: 0 auto;
}
#blue{
height:8px;
background-color: #4eb1ba;
margin-bottom: 45px;
}
#img{
border-bottom: 2px solid #4eb1ba;
}
/*BOTTLE*/
}
#spray{
border: 1px solid #4eb1ba;
}
/*/BOTTLE*/
/*Vacuum*/
#vacuum{
border: 1px solid #4eb1ba;
margin-left: 400px;
margin-top: -130px;
}
/*Vacuum*/
/*MOP*/
#mop{
border: 1px solid #4eb1ba;
margin-left: 630px;
margin-top: -130px;
}
#portfolio{
margin-top:100px;
}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" </a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Get In Touch</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="row-fluid">
<h4 class="underline"><span>Recent images</span></h4>
<img src="img/clean-home1.jpg" width="960" height="540" alt="">
<div id="portfolio">
<div class="row-fluid">
<div class="span4">
<img src="img/bottle.gif" id="spray" width="180" height="130">
</div>
<div class="row-fluid">
<div class="span4">
<img src="img/vacuum.gif" id="vacuum" width="180" height="130"></img>
</div>
<div class="row-fluid">
<div class="span3">
<img src="img/mop.gif" id="mop" width="180" height="130" ></img>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
You have a random closing brace before the #spray{} rule. Not sure if that is the problem, but maybe.
As I saw your codes, you don't have any element with id img in your HTML codes. I think you likely want to apply this CSS rule for all img elements, if so, replace your #img with img in your CSS style
Replace
#img {
border-bottom: 2px solid #4eb1ba;
}
with
img {
border-bottom: 2px solid #4eb1ba;
}