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 }
Related
I have created a input field and a button but i want to put that button insiade that input field. I have done it by using position:absolute but the problem is its not working properly in medium or large screen. Any kind of help would be highly appreciated. Here is my code
HTML CODE
<div>
<div style="float: left;width: 82%">
<input type="text" class="sent-message-text">
<img src="../img/camera.png" class="post-image-uploaad">
</div>
<div style="float: right">
<button class="no-button-design"><img src="../img/msg-sent.png" class="post-image-uploaad" style="margin-right: 15px;"></button>
</div>
</div>
</div>
CSS CODE
.fixed-bottom2 {
box-shadow: inset 0px 4px 5px #ededed;
padding: 9px;
margin:-20px !important
}
.sent-message-text {
border: 1px solid;
margin: 10px 0px 10px 15px;
min-height: 36px;
border: 1px solid #1486ab66 !important;
border-radius: 4px;
width: 92%;
}
.post-image-uploaad {
width: auto;
height: 22px;
margin-top: 8px;
}
.no-button-design {
padding: 0px;
border: 0px;
background-color: transparent;
margin: 0px;
}
.no-button-design img {
height: 34px;
}
In small screen its perfectly fine
But in large screen it's coming out from the input field
use this code
css:-
.fixed-bottom2 {
box-shadow: inset 0px 4px 5px #ededed;
padding: 9px;
margin: -20px !important
}
.sent-message-text {
border: 1px solid;
margin: 10px 0px 10px 15px;
min-height: 36px;
border-radius: 4px;
width: 100%;
position: relative;
}
.post-image-uploaad {
position: relative;
width: auto;
height: 22px;
margin: -39px -3px 1px 1px;
float: right;
}
.no-button-design {
padding: 0px;
border: 0px;
background-color: transparent;
margin: 19px 35px;
}
.no-button-design img {
height: 34px;
}
html:-
<div>
<div style="float: left;width: 82%">
<input type="text" class="sent-message-text">
<img src="../img/camera.png" class="post-image-uploaad">
</div>
<div>
<button class="no-button-design"><img src="../img/msg-sent.png" class="post-image-uploaad_send" style="margin-right: 15px;"></button>
</div>
</div>
</div>
form {
display: inline-block;
position: relative;
}
form button {
position: absolute;
top: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<input name="search" type="text">
<button type="submit">click</button>
</form>
</body>
</html>
try this good luck
Update in 2022:for this question can try this code:
.search {
margin-bottom: 30px;
}
form {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
input {
position: relative;
width: 280px;
height: 30px;
}
button {
position: absolute;
margin-right: 3px;
padding: 8px 10px;
background-color: #e7c130;
border: none;
}
<div className='search'>
<form>
<input type='text' />
<button>SEARCH</button>
</form>
</div>
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<input type="text"/><button class="btn">button</button>
</body>
</html>
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 have CSS codes which is good at IE11 but seemingly not good in IE8. I already tried using:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
but it didn't work fine. Margins, borders and the ribbon class is not working.
To add some info, here is the CSS:
body{
background-image:url(images/bg4.jpg);
background-repeat:no-repeat;
font-family: 'Montserrat', Arial;
font-size: 1em;
background-size:100%;
}
.all{
right: 100px;
bottom: 20px;
position: absolute;
}
h2{
text-align: center;
color: #F1F2F4;
text-shadow: 0 1px 0 #000;
}
a{
text-decoration: none; color: #EC5C93;
}
.ribbon{
background: rgba(200,200,200,.5);
width: 50px;
height: 70px;
margin: 0 auto;
position: relative;
top: 19px;
border: 1px solid rgba(255,255,255,.3);
border-top: 2px solid rgba(255,255,255,.5);
border-bottom: 0;
border-radius: 5px 5px 0 0;
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
.ribbon:before{
content:"";
display: block;
width: 15px;
height: 15px;
background: #4E535B;
border: 4px solid #cfd0d1;
margin: 18px auto;
box-shadow: inset 0 0 5px #000, 0 0 2px #000, 0 1px 1px 1px #A7A8AB;
border-radius: 100%;
}
.login{
background: #F1F2F4;
border-bottom: 2px solid #C5C5C8;
border-radius: 5px;
text-align: center;
color: #36383C;
text-shadow: 0 1px 0 #FFF;
max-width: 400px;
padding: 10px 40px 5px 40px;
box-shadow: 0 0 5px #000;
}
.login:before{
content:"";
display: block;
width: 70px;
height: 4px;
background: #4E535B;
border-radius: 5px;
border-bottom: 1px solid #FFFFFF;
border-top: 2px solid #CBCBCD;
margin: 0 auto;
}
.font{
font-size: 1.4em;
margin-top: 5px;
margin-bottom: 10px;
color: #191970;
font-weight: bold;
}
p{
font-family:'Helvetica Neue';
font-weight: 300;
color: #7B808A;
margin-top: 0;
margin-bottom: 30px;
}
input{
height: 30px;
background: transparent;
border: 2px solid gray;
box-sizing: border-box;
color: #71747A;
text-shadow: 0 1px 0 #FFF;
border-radius: 5px;
}
input:focus{
outline: none;
}
button{
margin-top: 20px;
display: block;
width: 30%;
line-height: 1.1em;
background: #0066FF;
border-radius: 5px;
border:0;
border-top: 1px solid #0066FF;
box-shadow: 0 0 0 1px #0066FF, 0 2px 2px #0066FF;
color: #FFFFFF;
font-size: 1em;
text-shadow: 0 1px 2px #21756A;
margin-left:155px;
}
While the HTML is here:
<?php
session_start();
?>
<html>
<head>
<title>Optis Appraisal System</title>
<link href='login.css' rel='stylesheet' type='text/css'>
</head>
<script src="Plugins/placeholders.jquery.min.js"></script>
<body>
<div class="all">
<div class="ribbon"></div>
<div class="login">
<br/><img src="images/optis3.jpg"/> <div class="font">Appraisal System</div>
<p>Please login to start</p>
<form method="post" action="login.php">
<table width=100%>
<tr>
<td>Username</td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>
</table>
<center>
<button name=commit>Login</button>
</center>
</form>
</div>
<footer>
<center>
<font size="2" color="black"><br/>
Developed by: <br/>
anjomarc_topacio | mark.adriane | nica.dizon <br>
Copyright 2014 © Management Information System
</font>
</center>
</footer>
</div>
</body>
</html>
Do you have any idea on how to solve this? I badly need your help. Thanks!
there are two ways to handle it (css3 properties like box-shadow, border-radius won't be supported in ie8).
1) you can use hacks for ie8 :
To target Internet Explorer 8 and below in CSS, append “9” to the end of the style you want to apply. e.g.
div {
border: 2px solid #aaa; /* for all browsers */
border: 2px solid #f009; /* IE8 and below - red border */
}
.element {
margin-bottom: 20px;
margin-bottom: 10px\9; /* IE8 */
}
2) using conditional statements from within your HTML :
<!--[if lte IE 9]>
Your IE8 and below HTML code here.
Perhaps importing a specific style sheet.
<![endif]-->
e.g :
<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
styles :
.element {
margin-bottom: 20px;
}
.ie7 .element {
margin-bottom: 10px;
}
.ie8 .element {
margin-bottom: 15px;
}
For starters, IE8 does not support border-radius or box-shadow.
caniuse.com is your friend.
if you are really looking for a alternative for css3 attributes in IE8 , you could probably use an image to give the curved corner effect and shadow, at the cost of increased bandwidth and messy code.
Other alternative is
- http://css3pie.com/
- try border-radius.htc can download the code from https://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip and test it.
I am working on my website, the thing is that I want to set an icon made purely by css as the background of te div "pagewrap", I can't seem to know to do it by myself so I would like you to help me out with this. I will post the link for a clearer view : http://i60.tinypic.com/312bc0p.png
Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/media-queries.css" rel="stylesheet" type="text/css">
<title>Insert title here</title>
</head>
<body>
<!-- ### Page Wrap ### -->
<div id="pagewrap">
<!-- ### Logo Bar ### -->
<div id="logoBar">
<div class="helper">
<div class="logo"></div>
</div>
</div>
<div style="clear:both;"></div>
<!-- ### Home Icon ### -->
<div class="icon">
<div class="home"></div>
<div class="chimney"></div>
</div>
<!-- ### Side Bar ### -->
<div id="sidebar">
<div class="widget">
<ul>
<li style="border-top:0 !important;">Acceuil</li>
<li>Identification</li>
<li>Mon Parcours</li>
<li>Ma Formation</li>
<li>Mes Projets</li>
<li>Dossier de Veille</li>
<li>Contact Me</li>
</ul>
</div>
</div>
<!-- ### Content ### -->
<div class="contenu">
<div class="post clearfix">
<h1 class="post-title">Acceuil</h1>
<br/><p>Ici vous trouverez toutes les informations conçernant moi, mes études, mes projets et ma formation.</p>
</div>
</div>
</div>
</body>
</html>
Here's the css:
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 1000px;
margin: 0 auto;
background:#3c3c3c;
height:100vh;
min-height:610px;
/*SHADOW*/
-webkit-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
}
/* Home */
div.icon div.home {
height: 0px;
width: 0px;
border-width: 16px;
border-style: solid;
border-color: transparent transparent #333 transparent;
position: absolute;
bottom: 16px;
left: 0;
}
div.icon div.home:after {
content: '';
width: 5px;
height: 16px;
background-color: transparent;
position: absolute;
top: 16px;
right: -11px;
border-left: 8px solid #333;
border-right: 8px solid #333;
}
div.icon div.home:before {
content: '';
width: 9px;
height: 6px;
background-color: #333;
position: absolute;
top: 16px;
right: -5px;
}
div.icon div.chimney {
width: 4px;
height: 10px;
background: #333;
position: absolute;
right: 6px;
top: 3px;
}
/************************************************************************************
MENU
*************************************************************************************/
/**Side Bar**/
#sidebar {
width: 250px;
margin: 10px 30px 0 24px;
}
.widget {
background: #f5f5f5;
margin: 0 0 30px;
padding: 10px 20px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 12px 0;
list-style: none;
clear: both;
border-top: solid 1px black;
}
.widget ul li a{
font-family:stainy;
font-size:21pt;
color:#303438;
}
.widget ul li a:hover{
text-decoration: none;
outline: none;
color:#30c9e0;
font-size:22pt;
}
.widgettitle{
font-family:stainy;
font-size:20pt;
}
What's the hard part? just add background-image for your #pagewrap and tweek the positioning and repeating should be enough.
#pagewrap {
background-image: url('YOUR_ICON');
...
}
Also check this document: https://developer.mozilla.org/en-US/docs/Web/CSS/background
I am having trouble vertically centering my labels/fields in my form. I have centered the content horizontally but now would also like to add vertical centering. When I run my code i can see that the fieldset padding is off. The value of the padding on the top is less than the value on the bottom. I figure for the vertical centering to occur they should be equal. Here is my code...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="contact.css">
</head>
<body>
<header id="pageHeader">
</header>
<nav class="mainNav">
<ul>
<li>Home</li>
<li>Photos</li>
<li>About</li>
<li>Contact</li>
</ul>
<img src="NewLogo3.png">
</nav>
<div class="contact">
<h1>Get In Touch</h1>
<form action="index.php" method="POST" >
<fieldset class="boxShadow">
<label>Name:</label>
<input type="text" name="name" placeholder="Enter your name" class="boxShadow"/>
<label>Email:</label>
<input type="email" name="email" placeholder="Enter your email address" class="boxShadow"/>
<label>Message:</label>
<textarea name="message" placeholder="What's on your mind?" class="boxShadow"></textarea>
<input type="submit" value="Send message" />
</fieldset>
</form>
</div>
<footer id="pageFooter">
<p>Thanks for visiting my website</p>
<span>© 2013</span>
</footer>
</body>
</html>
html, body, h1, h2 , ul, nav, img{
margin:0;
padding: 0;
font-size: 1em;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
body{
background: #777777;
height: 100%;
}
nav{
background: #40B3DF;
height: 100px;
font-size: 2em;
width: 100%;
border-bottom: 1px solid black;
}
nav ul{
position: absolute;
top: 55px;
white-space:nowrap;
margin-left: 100px;
}
nav li{
display: inline-block;
background: #A8CB17;
padding-bottom: 0;
border-radius: 8px 8px 0 0;
border-bottom: 2px solid #A8CB17;
margin-right: 10px;
-webkit-box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
}
nav a{
text-decoration:none;
color: #004158;
padding: 10px;
}
nav img{
position: absolute;
right: 50px;
top: 15px;
}
nav li:hover{
background: #17649A;
border-bottom: 2px solid #17649A;
}
p{
padding-top: 3em;
color: #454545;
text-align: center;
}
h1{
color: #393939;
font-size: 3em;
padding: 1em 0 0 1em;
text-shadow: 2px 2px 3px rgba(23, 23, 23, 1);
margin-bottom: 1em;
}
footer{
border-top: 2px solid #393939;
background: #40B3DF;
position:relative;
bottom:0;
height: 60px;
width: 100%;
text-align: center;
}
footer p{
display:inline-block;
margin: 0 auto;
padding-top: 1.5em;
color: #004158;
}
footer span{
position: relative;
top: 7px;
right: -45px;
}
textarea{
height: 150px;
width: 200px;
padding: 1em;
}
label, input[type=submit]{
text-transform: uppercase;
}
input, label{
display: block;
margin: 0 auto;
padding: 1em;
width: 200px;
}
input[type=submit] {
margin-top: 2em;
border-radius: 8px;
font-weight: 700;
}
fieldset {
height: 550px;
position: relative;
width: 60%;
text-align: center;
background: #676767;
margin: 0 auto;
margin-bottom: 2em;
/*border: 0;*/
}
The gap at the bottom of the form is due to the fact that your fieldset has a height of 550px, but your content does not fill that height. Remove the height, and adjust margin/padding from there.
As for the padding on the fieldset, browsers add padding to fieldsets by default. To make your site more consistent across browsers, use a CSS reset, like the HTML5 reset style sheet. That essentially overrides all of a browser's default styling. When using it, apply it above all of your other CSS styles. As for the padding itself, there are a few ways to manage it.
To adjust a certain side, you can use padding-top, padding-bottom, padding-right, or padding-left.
You can adjust top/bottom, left/right using padding: 10px 15px;, which would give you 10px on top and bottom, and 15px on the left and right.
You can also specify top, left/right, and bottom with padding:10px 15px 5px.
Margins are set the same way, just replace "padding" with "margin".