ok so im working on a website for a friend and she is wanting a login that when they login and if the information is correct it will redirect them to that page and only members could see that page. so far this is the what i have.
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #0361A8; border- radius: 5px; box-shadow: 0px 0px 8px #0361A8; margin: 50px auto auto;">
<div style="background: #0361A8; border-radius: 5px 5px 0px 0px; padding: 15px;"><span style="font-family: verdana,arial; color: #D4D4D4; font-size: 1.00em; font-weight:bold;">Login to Members Section</span></div>
<div style="background: ; padding: 15px">
<style type="text/css" scoped="">
td { text-align:left; font-family: verdana,arial; color: #064073; font-size: 1.00em; }
input { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; padding: 5px; width: 100%; }
input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #0361A8; float: right; text-align:right; margin-top: 10px; margin-left:7px;}
table.center { margin-left:auto; margin-right:auto; }
.error { font-family: verdana,arial; color: #D41313; font-size: 1.00em; }
</style>
<form method="post" action="http://www.authpro.com/auth/deluxe/" name="aform" target="_top">
<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<table class='center'>
<tr><td>Login:</td><td><input type="text" name="login"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"></td> </tr>
<tr><td> </td><td><input type="submit" value="Login"></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td colspan="2">Lost your username or password? Find it here!</td></tr>
<tr><td colspan="2">Not member yet? Click here to register. </td></tr>
</table>
</form>
</div></div></div>
every thing is working like it should. The script that is run when you press the login but is what will redirect you
Related
I'm building a simple Web UI for an embedded system.
I have a couple of buttons to upload a file to the server, the code of the buttons is the following
.button {
background-color: #009999;
border: 0.5px solid #F0F0F0;
border-radius: 0px;
color: white;
display: inline-block;
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 4px 4px;
text-decoration: none;
text-shadow: 0px 1px 0px #197276;
text-align: left;
}
<td style="width: 20%; vertical-align:top; background-color:#FFFFFF;">
<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input class="button" type="file" name="file">
<input class="button" type="submit" name="Submit" value="Upload">
</form>
</td>
The problem that I noticed is that the file buttons is always slightly bigger than the submit button.
Is there a way to align them? What am I doing wrong?
Thanks!
EDIT:
After trying Yasaman Mansouri (thanks) suggestion (overflow: hidden) i get the follwing output (on the right).
It's much better but still not aligned with the other button.
you can hide your form overflow
.button {
background-color:#009999;
border:0.5px solid #F0F0F0;
border-radius:0px;
color:white;
display:inline-block;
font-family:Open Sans, Helvetica, Arial;
font-size:14px;
font-weight:bold;
width:100%;
padding:4px 4px;
text-decoration:none;
text-shadow:0px 1px 0px #197276;
text-align:left;
}
form{
width: 200px;
overflow: hidden;
}
<td style="width: 20%; vertical-align:top; background-color:#FFFFFF;">
<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input class="button" type="file" name="file" >
<input class="button" type="submit" name="Submit" value="Upload">
</p>
</form>
</td>
We got it answered on Reddit, by adding "box-sizing:border-box;" to the button css
the alignment is OK.
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
.button {
background-color: #009999;
border: 0.5px solid #F0F0F0;
border-radius: 0px;
box-sizing:border-box;
color: white;
display: inline-block;
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 4px 4px;
text-decoration: none;
text-shadow: 0px 1px 0px #197276;
text-align: left;
}
Thanks!
The layout of my form is three columns: the first the label, the second for the input, and the third for the units (cm, kg etc.). Everything has been given inside a table in the form. But the first column takes more more (horizontal) space than it should. It has no padding, margin nor border. Here's my code:
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
color: #222222;
}
table {
width: 100%;
white-space: nowrap;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 91.5%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#wgCalc, #hsCalc, #bfCalc, #ccCalc, #apCalc {
height: 33px;
width: 16.5%;
z-index: 2;
float: left;
margin-left: 8px;
}
#container {
background-color: #EEEEEE;
padding: 10px 10px 10px 10px;
border: 3px solid #888888;
width: 30%;
z-index: 1;
margin: 0px auto;
}
#container h3 {
text-align: center;
}
.menu {
width: 30%;
height: 35px;
margin: 60px auto;
margin-bottom: 0px;
}
.tabOn {
background-color: #EEEEEE;
border-bottom: 3px solid #EEEEEE !important;
border: 2px solid blue;
font-weight: bold;
text-align: center;
}
.tabOff {
background-color: #BBBBBB;
border-bottom: 3px solid #888888 !important;
border: 2px solid navy;
text-align: center;
}
.tabOff a {
color: #4422FF;
text-decoration: none;
}
.tabOff a:hover {
color: #4691A4;
}
.image-holder {
width: 40%;
margin: 0px auto;
}
.warning {
font-weight: bold;
color: #FF0000;
}
.result {
font-weight: bold;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Body Fat Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="fcalc.js"></script>
</head>
<body>
<div class="menu">
<div id="wgCalc" class="tabOff">Weight Goal</div>
<div id="hsCalc" class="tabOff">How Sexy</div>
<div id="bfCalc" class="tabOn">Body Fat</div>
<div id="ccCalc" class="tabOff">Circ. Expect.</div>
<div id="apCalc" class="tabOff">Absolute Power</div>
</div>
<div id="container">
<div class="image-holder">
<img src="EnData.png" width="100%" />
</div>
<h3>BODY FAT CALCULATOR</h3>
<form id="bodyFatCalc" name="bodyFatCalc" method="post" autocomplete="off" onSubmit="formData(); return false;">
<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr><tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr><tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>
</form>
<p id="warning" class="warning"></p>
<p id="result_p" class="result"></p>
<p id ="result_w" class="result"></p>
</div></body>
</html>
Can you please help me find out why?
BTW, I tried giving td {width: auto} but it only worsened the case.
UPDATE: It seems my question is not clear and concise enough. What I want is that td tags to take the width of whatever is inside them...
What you are asking for is not possible.
If your table is set to have a width:100% then the tds will widen-up to take up the space available so that the table is using its prescribed width.
What you might have to do is define which columns need to have a variable width and which ones will be static. (you cannot have it both ways)
Something along the lines of:
tr > td:last-of-type, tr > td:first-of-type {
width: 50px !important; /* adjust width as necessary to fit longest word */
}
/* changed this to 'input' */
input{
width: 95%;
/* other properties */
}
I reduced your given code to a MCVE.
See running demo:
table {
width: 100%;
white-space: nowrap;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 95%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
tr > td:last-of-type, tr > td:first-of-type {
width: 50px !important; /* adjust width as necessary to fit longest word */
}
<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>
If you add border-collapse: collapse; to table, that helps a little bit...:
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
color: #222222;
}
table {
width: 100%;
white-space: nowrap;
border-collapse: collapse;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 91.5%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#wgCalc, #hsCalc, #bfCalc, #ccCalc, #apCalc {
height: 33px;
width: 16.5%;
z-index: 2;
float: left;
margin-left: 8px;
}
#container {
background-color: #EEEEEE;
padding: 10px 10px 10px 10px;
border: 3px solid #888888;
width: 30%;
z-index: 1;
margin: 0px auto;
}
#container h3 {
text-align: center;
}
.menu {
width: 30%;
height: 35px;
margin: 60px auto;
margin-bottom: 0px;
}
.tabOn {
background-color: #EEEEEE;
border-bottom: 3px solid #EEEEEE !important;
border: 2px solid blue;
font-weight: bold;
text-align: center;
}
.tabOff {
background-color: #BBBBBB;
border-bottom: 3px solid #888888 !important;
border: 2px solid navy;
text-align: center;
}
.tabOff a {
color: #4422FF;
text-decoration: none;
}
.tabOff a:hover {
color: #4691A4;
}
.image-holder {
width: 40%;
margin: 0px auto;
}
.warning {
font-weight: bold;
color: #FF0000;
}
.result {
font-weight: bold;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Body Fat Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="fcalc.js"></script>
</head>
<body>
<div class="menu">
<div id="wgCalc" class="tabOff">Weight Goal</div>
<div id="hsCalc" class="tabOff">How Sexy</div>
<div id="bfCalc" class="tabOn">Body Fat</div>
<div id="ccCalc" class="tabOff">Circ. Expect.</div>
<div id="apCalc" class="tabOff">Absolute Power</div>
</div>
<div id="container">
<div class="image-holder">
<img src="EnData.png" width="100%" />
</div>
<h3>BODY FAT CALCULATOR</h3>
<form id="bodyFatCalc" name="bodyFatCalc" method="post" autocomplete="off" onSubmit="formData(); return false;">
<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr><tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr><tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>
</form>
<p id="warning" class="warning"></p>
<p id="result_p" class="result"></p>
<p id ="result_w" class="result"></p>
</div></body>
</html>
table{table-layout: fixed;}
td:first-of-type{width: your-width;}
What I want is to make my page a little responsive for desktop browsers.
For example, when I decrease the width of the browser, the left and right portion of the page should be stacked over each other. Please check the code, you'll understand. The outerLeft and outerRight div are floated left and right respectively. When I decrease the width of browser, outerRight goes below outerLeft, which is good. But then the problem is with footer and copyright (last two divs at bottom) divs. These do not get displaced because of the outerRight div. I want them to be below outerRight. How can I do this?
HTML:
<body style="margin: 0px">
<div class="outer">
<div id="header"></div>
<div class="outerLeft">
<h1><a style="text-decoration: none; color: white;" href="login.php">WinkCage</a></h1>
<br />
<p>Instant Messaging web application</p>
</div>
<div class="outerRight">
<div class="loginform">
<form name="form2" method="post">
<table>
<tr>
<td><input type="text" name="uname" placeholder="Username" required/></td>
<td><input type="password" name="pass" placeholder="Password" required/></td>
<td><input id="logbutton" type="submit" name="sub" value="Login"/></td>
</tr>
</table>
</form>
<p><?php echo $loginerror; ?></p>
</div>
<div class="signform">
<form id="signupform" name="form1" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><input type="text" name="name" placeholder="Enter your name" required /></td>
<td rowspan="3"><div class="propic"><img id="imgid" src="images/dp.png" /></div>
<input id="imgInput" type="file" name="image" required/></td>
</tr>
<tr>
<td><input type="text" name="username" placeholder="Enter username" required pattern="[a-zA-Z0-9]{6,}" title="The username must contain minimum 6 and ONLY alphanumeric characters."/></td>
</tr>
<tr>
<td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no." pattern=".{10}" required title="Invalid entry. Minimum 10 digits are required."/></td>
</tr>
<tr>
<td><input id="typechange" type="password" name="password" maxlength="12" placeholder="Enter password" required pattern="[a-zA-Z0-9]{5,}" title="The password must contain at least 5 and ONLY alphanumeric characters."/>
<div id="seepass"></div></td>
<td><input type="submit" id="button" name="submit" value="Sign Up"></td>
</tr>
</table>
</form>
<div id="userexist"></div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style="font-family: calibri; text-align: center; color: black; font-size: 16px; padding: 5px 0px 5px 0px;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
<div style="height: 7px; box-shadow: 0px 0px 1px 1px grey; background-color: white; display: block"></div>
</body>
CSS:
html, body{
height: 100%;
background-color: aquamarine;
}
#header{
height: 20%;
}
.outer{
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
}
.outerLeft{
float: left;
width: 320px;
height: auto;
text-align: center;
margin-top: 145px;
padding-left: 50px;
}
.outerRight{
padding-left: 50px;
float: left;
width: auto;
height: auto;
}
.loginform{
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 20px 23px;
background-color: white;
color: red;
}
.loginform input{
width: 187px;
height: 21px;
padding-left: 5px;
}
#logbutton{
background-color: #00CC66;
color: white;
font-weight: bold;
width: 70px;
height: 28px;
cursor: pointer;
}
.signform{
margin-top: 20px;
margin-left: 0px;
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 10px 20px;
background-color: white;
}
.signform input{
width: 250px;
height: 24px;
font-size: 20px;
padding: 5px 10px 5px 10px;
margin-bottom: 10px;
}
#button{
background-color: #0099FF;
color: white;
width: 188px !important;
height: 41px !important;
border-radius: 4px;
border: 0px solid grey;
display: block;
font-weight: bold;
margin-left: 10px;
cursor: pointer;
box-shadow: inset 0px 0px 4px grey;
text-shadow: 1px 1px 2px black;
}
.propic{
height: 100px;
width: 100px;
margin: 0 auto;
border: 4px solid white;
box-shadow: 0px 0px 1px 1px grey;
border-radius: 2px;
background-color: grey;
}
#imgInput{
width: 187px !important;
height: 22px !important;
font-size: 14px;
padding: 0px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cccccc;
margin-left: 10px;
}
#imgid{
height: 100px;
width: 100px;
}
You need to give it a clear: both just this!
<div style="font-family: calibri;text-align: center;color: black;font-size: 16px;padding: 5px 0px 5px 0px;clear: both;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
jsFiddle
Note: I suggest you to do not use inline-css
Not sure what you want..
Since you have an element with height 94% - I'd say you always want to see that footer (being fixed on the bottom..) and generate the scroll just for that outer element.
If that's what you want, you can just include an overflow: auto in the .outer class.
.outer {
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
overflow: auto;
}
Take a look here..
https://jsfiddle.net/uvqk4eeL/1/
This is the code i have written in html/css in eclipse(kepler) by making the dynamic web application.The error i get is in line:
<style type="text/css" scoped>
error name-invalid location of tag.
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #D4D4D4; border-radius: 5px; box-shadow: 0px 0px 8px #D4D4D4; margin: 50px auto auto;">
<div style="background: #D4D4D4; border-radius: 5px 5px 0px 0px; padding: 15px;"><span style="font-family: verdana,arial; color: #D4D4D4; font-size: 1.00em; font-weight:bold;">HEY REGISTER NOW!</span></div>
<div style="background: ; padding: 15px">
<style type="text/css" scoped>
td { text-align:left; font-family: verdana,arial; color: #000000; font-size: 1.00em; }
input { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; padding: 5px; width: 100%; }
input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #D4D4D4; float: right; margin-top: 10px; }
table.center { margin-left:auto; margin-right:auto; }
.error { font-family: verdana,arial; color: #000000; font-size: 1.00em; }
</style>
<form method="post" action="crf.html" name="aform" target="_top">
<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<table class='center'>
<tr><td>Username:</td><td><input type="text" name="login"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"></td></tr>
<tr><td> </td><td><input type="submit" value="Submit"></td></tr>
<tr><td colspan=2> </td></tr>
</table>
</form>
</div></div></div>
Please help me with an appropriate solution.
Use this format
<!DOCTYPE HTML>
<html>
<head>
<title>Sample Application</title>
<style type="text/css" scoped>
td {
text-align: left;
font-family: verdana, arial;
color: #000000;
font-size: 1.00em;
}
input {
border: 1px solid #CCCCCC;
border-radius: 5px;
color: #666666;
display: inline-block;
font-size: 1.00em;
padding: 5px;
width: 100%;
}
input[type="button"],input[type="reset"],input[type="submit"] {
height: auto;
width: auto;
cursor: pointer;
box-shadow: 0px 0px 5px #D4D4D4;
float: right;
margin-top: 10px;
}
table.center {
margin-left: auto;
margin-right: auto;
}
.error {
font-family: verdana, arial;
color: #000000;
font-size: 1.00em;
}
</style>
</head>
<body>
<div style="text-align: center;">
<div
style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #D4D4D4; border-radius: 5px; box-shadow: 0px 0px 8px #D4D4D4; margin: 50px auto auto;">
<div
style="background: #D4D4D4; border-radius: 5px 5px 0px 0px; padding: 15px;">
<span
style="font-family: verdana, arial; color: #D4D4D4; font-size: 1.00em; font-weight: bold;">HEY
REGISTER NOW!</span>
</div>
<div style="background:; padding: 15px">
<form method="post" action="crf.html" name="aform" target="_top">
<input type="hidden" name="action" value="login"> <input
type="hidden" name="hide" value="">
<table class='center'>
<tr>
<td>Username:</td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Submit"></td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
You need to put the style tag within the head tags, not the body.
Also, this line:
<div style="background: ; padding: 15px">
Should be:
<div style="padding: 15px">
Or give it a background.
All your styles should go in a separate .css file, rather than inline/same file.
It looks fine here: JSFiddle
In:
HTML 4 and Earlier
XHTML 1.x
HTML 5
The <style> element can only appear in the <head>
In:
The WHATWG Living Standard for HTML
HTML 5.1
The <style> element can appear in the <body> as well, but only if it has a scoped attribute and (IIRC) one or two other conditions are met.
Whatever tool you are using to test your markup with, is testing it against one of the languages in the first group (where it is not allowed) and not in the second group (where it is).
Given browser support for it, I would advise against using the scoped attribute at the moment.
scoped isn't a widely supported attribute (believe it's oly natively available in Firefox at the moment), also you will need to specify the DOCTYPE as HTML5 for it to work. You have two choices, use a JavaScript library to get the tag working: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
Or use conventional styling with classes, id's and appropriate CSS selectors.
More info here: http://html5doctor.com/the-scoped-attribute/
I'm trying to develop a mobile stylesheet and in this stylesheet I want to remove a particular div.
In the HTML code of the div, I place an id called "tfl", as shown below:
<div id="tfl" style="display: block; width: 187px; height: 260px; font-family: Verdana, Arial, Helvetica, sans-serif !important; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/widget-panel.gif) #fff no-repeat; font-size: 11px; border: 1px solid #103994; border-radius: 4px; box-shadow: 2px 2px 3px 1px #ccc;">
<div style="display: block; padding: 30px 0 15px 0;">
<h2 style="color: rgb(36, 66, 102); text-align: center; display: block; font-size: 15px; font-family: arial; border: 0; margin-bottom: 1em; margin-top: 0; font-weight: bold !important; background: 0; padding: 0">Journey Planner</h2>
<form action="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2" id="jpForm" method="post" target="tfl" style="margin: 5px 0 0 0 !important; padding: 0 !important;">
<input type="hidden" name="language" value="en" />
<!-- in language = english -->
<input type="hidden" name="execInst" value="" /><input type="hidden" name="sessionID" value="0" />
<!-- to start a new session on JP the sessionID has to be 0 -->
<input type="hidden" name="ptOptionsActive" value="-1" />
<!-- all pt options are active -->
<input type="hidden" name="place_origin" value="London" />
<!-- London is a hidden parameter for the origin location -->
<input type="hidden" name="place_destination" value="London" /><div style="padding-right: 15px; padding-left: 15px">
<input type="text" name="name_origin" style="width: 155px !important; padding: 1px" value="From" /><select style="width: 155px !important; margin: 0 !important;" name="type_origin"><option value="stop">Station or stop</option>
<option value="locator">Postcode</option>
<option value="address">Address</option>
<option value="poi">Place of interest</option>
</select>
</div>
<div style="margin-top: 10px; margin-bottom: 4px; padding-right: 15px; padding-left: 15px; padding-bottom: 15px; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom;">
<input type="text" name="name_destination" style="width: 100% !important; padding: 1px" value="232 Kingsbury Road (NW9)" /><select style="width: 155px !important; margin-top: 0 !important;" name="type_destination"><option value="stop">Station or stop</option>
<option value="locator">Postcode</option>
<option value="address" selected="selected">Address</option>
<option value="poi">Place of interest</option>
</select>
</div>
<div style="background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom; padding-bottom: 2px; padding-top: 2px; overflow: hidden; margin-bottom: 8px">
<div style="clear: both; background: url(http://www.tfl.gov.uk/tfl-global/images/options-icons.gif) no-repeat 9.5em 0; height: 30px; padding-right: 15px; padding-left: 15px"><a style="text-decoration: none; color: #113B92; font-size: 11px; white-space: nowrap; display: inline-block; padding: 4px 0 5px 0; width: 155px" target="tfl" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&ptOptionsActive=1" onclick="javascript:document.getElementById('jpForm').ptOptionsActive.value='1';document.getElementById('jpForm').execInst.value='readOnly';document.getElementById('jpForm').submit(); return false">More options</a></div>
</div>
<div style="text-align: center;">
<input type="submit" title="Leave now" value="Leave now" style="border-style: none; background-color: #157DB9; display: inline-block; padding: 4px 11px; color: #fff; text-decoration: none; border-radius: 3px; border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font: bold 13px/1 Arial,Helvetica,sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); line-height: 1;" />
</div>
</form>
</div>
</div>
This code is not mines as this an embedded code given by the TFL website.
I want to hide this div to make it more friendly for a mobile user, I did:
#tfl {
display: none;
}
This code doesn't work me though, and I even applied to the corresponding header before it and that didn't work, as shown again:
h3.tfl {
display: none;
}
What's the issue here? This code worked on another page on a mapped image. (I can't use jQuery nor JavaScript (uni assingment looking at CSS)).
This is because the inline style display:block is overriding your CSS. You'll need to either remove this inline style or use:
#tfl {
display: none !important;
}
This overrides inline styles. Note that using !important is generally not recommended unless it's a last resort.
Remove display: block; in the div #tfl style property
<div id="tfl" style="display: block; width: 187px; height: 260px;
Inline styles take priority over an external CSS file.
Try add this to your css
#tfl {
display: none !important;
}
Another trick is to use
.class {
position: absolute;
visibility:hidden;
display:none;
}
This is not likely to mess up your flow (because it takes it out of flow) and makes sure that the user can't see it, and then if display:none works later on it will be working. Keep in mind that visibility:hidden may not remove it from screen readers.
In the HTML source provided, the element #tfl has an inline style "display:block". Inline style will always override stylesheets styles…
Then, you have some options (while as you said you can't modify the html code nor using javascript):
force display:none with !important rule (not recommended)
put the div offscreen with theses rules :
#tfl {
position: absolute;
left: -9999px;
}
Best way is that you add id in your html code and then set display to none in css
example:
in html file
<input type="checkbox" name="" id="check" />
in css file
#check{ display:none; }
Check following html I removed display:block from style
<div id="tfl" style="width: 187px; height: 260px; font-family: Verdana, Arial, Helvetica, sans-serif !important; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/widget-panel.gif) #fff no-repeat; font-size: 11px; border: 1px solid #103994; border-radius: 4px; box-shadow: 2px 2px 3px 1px #ccc;">
<div style="display: block; padding: 30px 0 15px 0;">
<h2 style="color: rgb(36, 66, 102); text-align: center; display: block; font-size: 15px; font-family: arial; border: 0; margin-bottom: 1em; margin-top: 0; font-weight: bold !important; background: 0; padding: 0">Journey Planner</h2>
<form action="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2" id="jpForm" method="post" target="tfl" style="margin: 5px 0 0 0 !important; padding: 0 !important;">
<input type="hidden" name="language" value="en" />
<!-- in language = english -->
<input type="hidden" name="execInst" value="" /><input type="hidden" name="sessionID" value="0" />
<!-- to start a new session on JP the sessionID has to be 0 -->
<input type="hidden" name="ptOptionsActive" value="-1" />
<!-- all pt options are active -->
<input type="hidden" name="place_origin" value="London" />
<!-- London is a hidden parameter for the origin location -->
<input type="hidden" name="place_destination" value="London" /><div style="padding-right: 15px; padding-left: 15px">
<input type="text" name="name_origin" style="width: 155px !important; padding: 1px" value="From" /><select style="width: 155px !important; margin: 0 !important;" name="type_origin"><option value="stop">Station or stop</option>
<option value="locator">Postcode</option>
<option value="address">Address</option>
<option value="poi">Place of interest</option>
</select>
</div>
<div style="margin-top: 10px; margin-bottom: 4px; padding-right: 15px; padding-left: 15px; padding-bottom: 15px; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom;">
<input type="text" name="name_destination" style="width: 100% !important; padding: 1px" value="232 Kingsbury Road (NW9)" /><select style="width: 155px !important; margin-top: 0 !important;" name="type_destination"><option value="stop">Station or stop</option>
<option value="locator">Postcode</option>
<option value="address" selected="selected">Address</option>
<option value="poi">Place of interest</option>
</select>
</div>
<div style="background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom; padding-bottom: 2px; padding-top: 2px; overflow: hidden; margin-bottom: 8px">
<div style="clear: both; background: url(http://www.tfl.gov.uk/tfl-global/images/options-icons.gif) no-repeat 9.5em 0; height: 30px; padding-right: 15px; padding-left: 15px"><a style="text-decoration: none; color: #113B92; font-size: 11px; white-space: nowrap; display: inline-block; padding: 4px 0 5px 0; width: 155px" target="tfl" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&ptOptionsActive=1" onclick="javascript:document.getElementById('jpForm').ptOptionsActive.value='1';document.getElementById('jpForm').execInst.value='readOnly';document.getElementById('jpForm').submit(); return false">More options</a></div>
</div>
<div style="text-align: center;">
<input type="submit" title="Leave now" value="Leave now" style="border-style: none; background-color: #157DB9; display: inline-block; padding: 4px 11px; color: #fff; text-decoration: none; border-radius: 3px; border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font: bold 13px/1 Arial,Helvetica,sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); line-height: 1;" />
</div>
</form>
</div>
</div