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);
}
});
Related
Ok so I'm trying to program a bar that appears at the top of the webpage. On that bar I want there to be a title, a button, and an input/search bar. My problem is that the input keeps overlapping the button in the top bar. Please note that the bar at the top is a div. Here is the link to the page with the bug: Link to the page.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Langmesh</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div id="topbardiv">
<h1 id="titletext">Langmesh</h1>
<button onclick="browse()" id="browsebutton">Browse</button>
<input type="text" id="searchbar" value="Search">
</div>
</body>
</html>
Here is the CSS code:
#titletext {
font-size: 50px;
font-family: "Brush Script MT", sans-serif;
}
#topbardiv {
background-color: darkorange;
text-align: center;
border: 10px solid lightgray;
}
#topbardiv h1,
#topbardiv button {
margin: 0px;
display: inline-block;
padding: 1em;
color: white;
-webkit-text-stroke: 1.5px #000000;
}
#browsebutton,
#searchbar {
height: 150px;
width: 100px;
font-size: 30px;
font-family: "Brush Script MT", sans-serif;
background-color: darkorange;
border: 0;
}
I have not added any Javascript yet.
If this is a stupid question with a simple answer and I'm just dumb, feel free to criticize me.
I tried using text a button and an input in the same div and used css to put them all right next to eachother and I expected that it would look like a bar at the top with a title a browse button and a search bar but instead the search bar and the browse button ended up overlapping.
I am using a Windows 10 OS and replit to program the page and a chrome web browser.
it's because you have set the width of the #browsebutton and #searchbar. Please unset it and it will work.
* {
margin: 0;
font-family: 'roboto';
}
.container {
text-align: center;
}
.container input {
border: none;
box-shadow: 0px 0px 2px;
height: 33px;
}
.container button {
border: none;
box-shadow: 0px 0px 2px;
height: 33px;
}
.container h1 {
}
.background_css {
width: 100%;
background: orange;
padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Langmesh</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container">
<div class="background_css">
<h1 id="titletext">Langmesh</h1>
<form method="POST" action="page.html" class="search_css">
<input type="search" placeholder="Search..."><button type="submit">Search</button>
</form>
</div>
</div>
</body>
</html>
I just started learning HTML and CSS none of the fixes google has suggested have managed to align my contact box to the center of the page. I have tried justify-content, align-items, align-content, and display flex in combination with the stuff above. My page either stays the same or the box aligns itself to the upper left.
I have had a lot of trouble with the things I have built in html so far never aligning center. I would just like to understand why this is happening.
<!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" />
<title>Contact Us</title>
<link rel="stylesheet" href="./CSS/Style.CSS" />
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
transform: translate(-50%.-50%);
position: absolute;
}
form{
margin: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
I guess you just have a typo here:
transform: translate(-50%.-50%);
It should look like this:
transform: translate(-50%,-50%);
please replace "margin : 35px" with "padding : 35px" in form class and use below 4 lines in contact-box class to center your form:
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
attaching the corrected code for your reference, hope it helps!
<!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" />
<title>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
form{
padding: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
</style>
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
You should try to put the code below in your CSS file. When you start writing, upper left is the starting point, that's where your content is going.
html {
text-align: center;
}
I have a bootstrap collapsible panel set up to expand and collapse a search bar. This works fine with no styling but when styling is added, it has a mind of its own. It looks like the styling is getting In the way of the collapsing transition. Then it just stops working.
Here is the code with the styling attached to this. I want this to be clickable on an a href link.
#search-dropdown-div {
width: 100%;
padding: 10px;
display: inline-block;
background-color: transparent;
}
#center {
margin: 0 auto;
width: 1000px;
position: relative;
}
#center form {
position: relative;
}
#center form input[type="search"] {
width: 100% !important;
padding: 16px !important;
border-radius: 10px;
border-style: none;
font-size: 20px;
letter-spacing: 1px;
}
#center form input[type="submit"] {
background-color: #3A83F3;
width: 100px;
padding: 16px;
margin-left: -100px;
border-style: none;
border-radius: 5px;
color: white;
position: absolute;
top: 4px;
right: 4px;
float: right;
letter-spacing: 1px;
}
#center form input[type="submit"]:hover {
background-color: #0D5C9E;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Bootstrap Collapse Training</title>
</head>
<body>
<a class="mag-search" data-toggle="collapse" href="#search-dropdown-div"><i class="fa fa-search" aria-hidden="true"></i>Search</a>
<div id="search-dropdown-div" class="collapse">
<div id="center">
<form role="search">
<input class="fontAwesome" type="submit" value="Search  " />
<input class="fontAwesome" type="search" placeholder=" Search our website..." />
</form>
</div>
</div>
</body>
From what I tested with your code, I think it's the display: inline-block of #search-dropdown-div that causes problem.
Can you tell me if it works if you remove this line ?
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'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/