I'm heading a problem with a little space that appears on top of my website's pages in all browsers. I have a form on the top. Here is my CSS:
body{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
form {
margin : 0;
}
.formular {
padding: 5px 40px 10px 40px;
background-color: #6699cc;
border-top: 0px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000 ;
border-radius: 0 0 20px 20px;
}
here is my index.php, I have a form on the top almost on every page...
<!DOCTYPE html>
<html>
<title>Kto bude dnes odpovedať?</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
</head>
<body>
<table align="center"><tr><td>
<SCRIPT>
function passWord()
{
var pass1 = prompt('Zadajte administračné heslo','');
if(pass1 && pass1.toLowerCase() == "0123")
{
alert('Správne heslo! Teraz môžete zmazať triedu.');
return true;
}
else
{
alert('Zlé heslo!');
return false;
}
}
</SCRIPT>
<table cellspacing="1" cellpadding="3" class="formular" widht="100%"><tr><td>
<form action="vlozit.php" method="post">
Nová trieda: <input type="text" name="nazov" placeholder="1.A, 3.B, 4.OA, ..." maxlength="4" required>
<input type="submit" name="submit" value="Pridať triedu">
</form>
</td></tr></table>
<?php
.....
try resetting your browsers so their not left to default. Here is a link to Eric meyers css reset. I tried with your code and it works. http://meyerweb.com/eric/tools/css/reset/
Related
In the following code I try to make the border green when the user is typing in keyboard, but the following does not work
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div><!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type="text"]:hover {
border: 2px solid yellow;
}
input[type="text"]:focus {
border: 2px solid green;
}
</style>
</head>
<body>
<h2>CSS Textbox</h2>
<input type="text" />
</body>
</html>
You can see the code here
https://codepen.io/jackee1234/pen/BaYjYKB
What's the right way to achieve that?
your code is fine the issue is when you select the text field there is a outline showing it is selected which covers the green border to fix this just add outline: none; to your input box style i.e.
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
outline: none; //added here
}
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div><!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
outline: none; //added here
}
input[type="text"]:hover {
border: 2px solid yellow;
}
input[type="text"]:focus {
border: 2px solid green;
}
</style>
</head>
<body>
<h2>CSS Textbox</h2>
<input type="text" />
</body>
</html>
Just add outline property and give it a none value to the input focus like this,
input[type="text"]:focus {
border: 2px solid green;
outline:none; //outline causing this issue.
}
just add the following:
input[type="text"]:focus-visible {
outline: none;
}
I keep getting an error that says "invalid location of text / in form:form"
"missing end tag for form:form"
and unknown tag form:form
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<form action ="some.jsp" class="form">
<title>choose a country</title>
</head>
<body>
<h1>choose your next destination</h1>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<style>
* {
box-sizing: border-box;
}
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
cursor: pointer;
}
.autocomplete-items {
position: centre;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Travel the world</h2>
<p>choose a country you'd like to go</p>
<form:form method = "GET" action=addcountry/country/ model attribute = "model" autocomplete="off">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type=submit value ="lets go" class="btn btn-default"/>
</form>
<script>
What is the problem that I am experiencing? It wasn't there before and now the problem won't seem to go away. what is causing this error and how do I go about fixing this?
thank you!
You have to do to things:
Add <%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%> in your JSP file (possibly at top of file).
Close Spring form tag using </form:form> not by HTML </form>
I have two Fieldsets on my HTML page and unfortunately the Legends are getting hidden. We have an X-UA-Compatible tag that can not be removed...
Please help!
Screenshot showing hidden legends==>
Desired Result Screenshot==>
Here is code
<!DOCTYPE html>
<html dir="rtl">
<head>
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
<title></title>
<style>
.GBX_WITH_TITLE {
border-top: 3px solid #777777;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef');
}
.GBX_WITH_TITLE .DFGUIGBX {
/*margin: 0px 3px 0px 3px !important;*/
position: absolute !important;
top: -13px !important;
/*border-top: 1px solid #777777 !important;*/
padding: 0 5px 5px 5px;
color: #ffffff;
background: #777777;
display: inline;
}
</style>
</head>
<BODY>
<FIELDSET id=searchoption1 class=GBX_WITH_TITLE style="HEIGHT: 116px; WIDTH: 979px; POSITION: absolute; LEFT: 8px; TOP: 74px;">
<LEGEND id=searchoption1Legend class="DFGUIGBX" align=right VALIGN="TOP">Search Options 1
</LEGEND>
</FIELDSET>
<FIELDSET id=searchoption2 class=GBX_WITH_TITLE style="HEIGHT: 116px; WIDTH: 979px; POSITION: absolute; LEFT: 8px; TOP: 190px;">
<div><LEGEND id=searchoption2Legend class="DFGUIGBX" align=right VALIGN="TOP">Search Options 2
</LEGEND></div>
</FIELDSET>
</BODY>
</html>
Add below this code in your css Hope It will Work Perfectly.
.GBX_WITH_TITLE { overflow:visible }
I have been hustling with this for couple of days, and I can't seem to figure out a good way to add a tool tip to the background url, I have two images in background, far left is a user icon and far right is help icon. I am looking forward to add a tooltip or title on mouse hover over only to the tooltip.png icon which is located to the far right.
can anyone suggest a better way to implement this.
following is the code
input[type=text], input[type=p] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
background-color: #FFFFFF;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
padding-left: 46px;
}
input[type=text] {
background: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png') 10px center no-repeat, url('http://visiblearea.com/blog/pub/System/JQueryPlugin/plugins/tooltip/tooltip-bubble-reverse.png') right 10px center no-repeat;
background-size: 24px 24px, 15px, 15px;
background-color: #FFFFFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>
</head>
<body>
<form id="loginform" onsubmit="return false;">
<input type="text" id="email" placeholder="Username or Email" padding="10px">
</form>
</body>
</html>
any help is much appreciated, thank you
input[type=text], input[type=p] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
background-color: #FFFFFF;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
padding-left: 46px;
z-index:-1;
}
input[type=text] {
background: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png') 10px center no-repeat;
background-size: 24px 24px, 15px, 15px;
background-color: #FFFFFF;
}
img{
position:absolute;
right:15px;
top:20px;
}
#username{
position:relative;
}
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
right:15px;
z-index: 1;
}
img:hover + .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>
</head>
<body>
<form id="loginform" onsubmit="return false;">
<div id="username">
<img src="http://visiblearea.com/blog/pub/System/JQueryPlugin/plugins/tooltip/tooltip-bubble-reverse.png" width=20px; height=20px;>
<span class="tooltiptext">You have to enter username</span>
<input type="text" id="email" placeholder="Username or Email" padding="10px">
</div>
</form>
</body>
</html>
Here is a link that may help you out with this.
http://www.w3schools.com/css/css_tooltip.asp
I am currently developing a back end interface for a client of mine and i've hit a brick wall. It seems that Internet Explorer (all versions, including 9 beta) and Chrome are not displaying the page as desired. Firefox and Safari are displaying the page perfectly. I find it rather strange that it works on safari but not chrome.. anyway that's besides the point.
How the form looks in Safari and Firefox - it is the desired outcome:
How the form looks in all browsers other than Safari and Firefox - this is not desired:
I'm after a way to make the background expand to the width that is set in the css in these other browsers. Any hints and tips would be much appreciated as I've been stuck on this for about 5 hours today and it's starting to get very frustrating for me.
After some help, i've narrowed the problem down to the jQuery plugin "equal height columns" however I require the effect is has, so surely there is a way to make this work in the other browsers.
My HTML is:
<head>
<meta charset="UTF-8">
<title>User Login</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css" />
<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/jquery.equalHeightColumns.js" type="text/javascript"></script>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<script type="text/javascript">
$(document).ready(function() {
$("#form_left, #form_right, #form_right input").equalHeightColumns();
});
</script>
</head>
<body>
Forgot Password?
<div id="container">
<div id="header">
<h1>User Login</h1>
</div>
<div id="form">
<form name="login" action="#" method="post">
<div id="form_left">
<label for="">Username</label>
<input type="text" id="username" />
<label for="">Password</label>
<input type="password" id="password" />
</div>
<div id="form_right">
<input type="submit" name="submit" value="Log In" />
</div>
<div class="clear"></div>
</form>
</div>
</div>
</body>
and the CSS:
//*
TYPE
*/
a.loginmeta { position: absolute;
right: 20px; top: 20px;
color: #4a4f5b;
font-size: 12px; }
a.loginmeta:hover { color: #5d6472; }
/*
STRUCTURE
*/
body { background: url('../images/page_background.png') repeat; }
#container { width: 480px; display: block;
margin: 100px auto 0 auto; }
/*
FORM
*/
form { width: 480px; margin: 30px 0 15px 0; }
form label { color: #919191;
text-transform: uppercase;
display: block;
margin-bottom: 10px; }
form input { background: #ffffff;
border: 1px solid #d1d1d1;
font-size: 17px;
color: #414141;
padding: 10px; margin-bottom: 10px;
width: 328px; }
#form_left, #form_right { -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
#form_left { float: left;
width: 350px;
background: url('../images/form_background.png') repeat-x bottom left #f3f3f3;
padding: 20px 20px 10px 20px; }
#form_right { float: right;
background: url('../images/form_background.png') repeat-x bottom left #f3f3f3; padding-bottom: 30px; }
#form_right input { width: 80px;
font-size: 12px;
text-transform: uppercase;
color: #939393;
background: none;
border: none;
margin: 15px 0;
padding: 0; }
***
Thank you!
I don't know if this helps, but since your problem seems to be coming from the plugin, maybe you could try this instead :
var columnMaxHeight = 0;
$("COLUMN_SELECTOR").each(function() {
var columnHeight = $(this).height();
if (columnMaxHeight < columnHeight) {
columnMaxHeight = columnHeight;
$(this).height(columnMaxHeight);
}
});