I am trying to apply a background image for a button inside the form. The code work and seems perfect in all browsers (Chrome, FF, Opera and Safari). But, in IE8(the only version i have checked), the image is getting repeated. I am trying to follow standard and simple HTML and CSS but this is really annoying. Please see the picture below
Following is the HTML
<div id="header">
<div id="TopHead">
<div id="logo">
<a href="/" alt="eyaas">
<img src="logo.gif" alt="eyaas" />
</a>
</div>
<div id="country">India | Rest of the World
</div>
<div id="linksAndSearch">
<div id="linksTop">My Account | Login | Register | Cart
</div>
<div id="searchBar">
<form id="search_mini_form" action="" method="get" class="search">
<div class="searchBox">
<input id="Text1" type="text" name="" class="searchBoxDefaultText jsSearchTerm jsToggle" value="" />
</div>
<div class="searchButton">
<button type="submit" title="" class="searchBoxSubmitButton" />
</div>
<div class="clear"></div>
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div id="TopNav">
</div>
</div>
Following is the CSS
#linksAndSearch { float:left; }
.search { width:393px; height:35px; background-image:url('SearchBoxGrayFrameText.gif'); }
.searchBox { float:left; margin:6px 0 0 65px; background-image:url('SearchBoxFramed.gif'); width:275px; height:23px; overflow:hidden; }
.searchBox .searchBoxDefaultText { width:257px; height:19px; margin:2px 0 0 5px; font-size:15px; color:#CCC; }
.searchButton { float:left; margin:6px 0 0 10px; }
.searchBoxSubmitButton { width:29px; height:23px; background-image:url( SearchSubmitBtnYellowArrow.gif); background-repeat:no-repeat; }
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
u refer this site, i think its may be useful for you,
The problem was solved by
<button type="submit" title="" class="searchBoxSubmitButton"/>
to
<button type="submit" title="" class="searchBoxSubmitButton"></button>
Can someone elaborate on the issue as to why this was happening ?
Related
I thought align-items center was used to center items along the vertical axis. But why does it just squish my form element?
css code
*{
box-sizing:border-box;
}
body{
font-family:sans-serif;
background:#f6f5f7;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
margin:-20px 0 50px;
}
h1{
margin:0;
font-weight:bold;
}
p{
font-size:14px;
font-weight:100;
line-height:20px;
letter-spacing:0.5px;
margin:20px 0 30px;
}
span{
font-size:12px;
}
a{
color:#333;
font-size:14px;
text-decoration:none;
margin:15px 0;
}
.container{
background:#fff;
border-radius:10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
position:relative;
overflow:hidden;
width:768px;
max-width:100%;
min-height:480px;
}
.form-container form{
background:#fff;
flex-direction:column;
display:flex;
flex-direction:column;
padding:0 50px;
height:100%;
}
form{
justify-content:center;
align-items:center;
}
If you remove the align items center you will get a long form which is not what i am looking for by long i mean the widht is longer than i need it to be. Does this have to deal with how the align properties was created or something else?
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style2.css">
</head>
<body>
<h2>Weekly Coding Challenge #1: Sign in/up Form</h2>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Create Account</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
<footer>
<p>
Created with <i class="fa fa-heart"></i> by
<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
- Read how I created this and how you can join the challenge
<a target="_blank" href="https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/">here</a>.
</p>
</footer>
</body>
</html>
I tried to remove align-items center because i did not see its use but without it my form will be long and i was expecting it will have no effect if i removed it.
This html document is a form login website for a company and could it be that it is a regular thing for a form to be reduced by align-items center.
Can someone please exlain that will help.
The align items: center property aligns the items such that they align perfectly to the center of the cross axis in turn squishing all the elements inside it to their default/set width.
Instead of that you could set a width or a max-width property for the width of your form and a margin: auto to align it at the center of the cross-axis.
The margin: auto aligns it to the center because it tries to auto adjust all the 4 margins to an equal length which in turn centers it.
form {
width: 70%;
margin: auto;
}
I know its been asked a million times but none of the search results seemed to work for me.
I am wondering how i can make my image to the same size as the display. I know i have to give the parent of the image a height and width so that i can use Height:100% but how can i give its parent a height and width that is different for every device?
I used position:absolute but that just made all the other content sit on top of my picture :(
am using bootstrap as well (encase you need that info)
any help would be boss! thanks!
A lil bit of my markup
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server" >
**this img below to be the size of users display**
<div style="background-color:#efefef; background-image: url(/App_Themes/Biz/Images/home-main.jpg); position: static; height:100%; width:100%; background-position:center bottom; background-repeat:no-repeat; background-size:cover;">
<div class="container" style="height:1200px;">
<div class="jumbotron" style="color:#fff; background-color:transparent; text-align:center;">
<h2 style="font-weight:bold!important;">FREE rents</h2>
<p>The easy way to rent out stuff</p>
<p><a class="btn btn-default" role="button" href="#moreInfoPanel" id="findOutMore">FIND OUT MORE</a> <a class="btn btn-primary" href="/Account/Add-Property" role="button">rent it now</a></p>
</div>
</div>
</div>
<div style="background-color:#eff5f7; border-top:solid 1px #e6e9ea; border-bottom:solid 1px #e6e9ea;">
<div class="container">
<img src="App_Themes/biz/Images/sign.png" alt=" Portals" style="padding:5% 0%; width:100%;" />
</div>
</div>
<div>
<div class="container" id="moreInfoPanel">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" style="margin:60px 0px 40px 0px">
<div style="text-align:center; padding:10px 30px; border:solid 1px #e7ecef; border-bottom:solid 5px #e7ecef;">
<img src="App_Themes/biz/Images/free.png" style="margin-top:-55px;" alt="Lets Rent - FREE" />
<h4>Free</h4>
<p>
some stuff
</p>
<a href="Pricing" title="Read More - Pricing" class="btn btn-primary" style="margin-bottom:-40px;" >read more</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4" style="margin:60px 0px 40px 0px">
<div style="text-align:center; padding:10px 30px; border:solid 1px #e7ecef; border-bottom:solid 5px #e7ecef;">
<img src="App_Themes/biz/Images/quick.png" id="quickImage" runat="server" style="margin-top:-55px;" alt="QUICK" />
<h4>Quick</h4>
<p>
more crap
</p>
<a href="Benefits" title="Read More - Benefits" class="btn btn-primary" style="margin-bottom:-40px;" >read more</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4" style="margin:60px 0px 40px 0px">
<div style="text-align:center; padding:10px 30px; border:solid 1px #e7ecef; border-bottom:solid 5px #e7ecef;">
<img src="App_Themes/biz/Images/easy.png" style="margin-top:-55px;" alt="EASY" />
<h4>Easy</h4>
<p>
boom stuff here!
</p>
<a href="Benefits" title="Read More - Benefits" class="btn btn-primary" style="margin-bottom:-40px;" >read more</a>
</div>
</div>
</div>
</div>
One easy and fast way to do this is use vh-units. Check that you have proper browser support in http://caniuse.com/#feat=viewport-units
css:
.full-img{
height:100vh; /* This means 100 percent of viewport height */
background:red;
}
html:
Above the full height block
<div class="full-img">
<p>This takes 100% of viewport height = 100vh</p>
<p>check http://caniuse.com/#feat=viewport-units for browser support</p>
</div>
Below the full height block
Thanks for all of your help on my previous question! However, I noticed a small issue- It's not too important, I just wanted to know if there's a way to fix it. As the browser window gets smaller, the images start to overlap. I'd like the images to stop when they're 5px away from each other.
Could someone look over my code and make sure I'm not doing anything wrong with my HTML/CSS?
The HTML is this:
<div class="content">
<div class="listingThumbLine">
<div class="modelListing left">
<a href="modelOne.html">
<img src="modelOne.jpg" alt="Model One" class="modelThumb" id="modelOneThumb">
</a>
<br />
<span class="productThumbName">Model Name</span>
</div>
<div class="modelListing right">
<a href="modelTwo.html">
<img src="modelTwo.jpg" alt="Model Two" class="modelThumb" id="modelTwoThumb">
</a>
<br />
<span class="productThumbName">Model Name</span>
</div>
<div class="modelListing center">
<a href="modelThree.html">
<img src="modelThree.jpg" alt="Model Three" class="modelThumb" id="modelThreeThumb">
</a>
<br />
<span class="productThumbName">Model Name</span>
</div>
</div>
</div>
The CSS is this:
body{
background-image:url('bg.jpg');
background-repeat:repeat-x;
font-family: Arial;
color:#B5B5B5;
text-align:center;
}
.content{
font-size:1.25em;
margin:10px 100px;
}
img.modelThumb{
width:225px;
height:225px;
}
.left{
float:left;
position:relative;
}
.right{
float:left;
position:relative;
}
.center{
float:left;
margin: 0 auto;
}
.modelListing{
width: 33%;
text-align: center;
}
Im trying to position some buttons below a slider and I can do so, but the entire site is responsive (botstrap) except for these buttons. So I'm trying to make them so.
I have been trying to work with percents to position them and create fluid heights and widths, but I have had no luck. All I can seem to do is position them on top of one another.
My html looks like this
<div class="col-md-12 sliderBar">
<img src="assets/img/aboutPage.png" alt="" />
</div><!--.col-md-12-->
<div class="col-md-12 sliderNav">
<div class="container">
<button> < </button>
<button>Sponges</button>
<button>DBM</button>
<button>Synthetics</button>
<button> > </button>
</div><!--.container-->
</div><!--.col-md-12-->
and my css looks like this
.sliderNav{
background-color: #1b1a29;
text-align: center;
position:relative;
padding-bottom:3%;
height:0;
overflow:hidden;
}
.sliderNav button{
position:absolute;
width:20%;
height:100%;
}
Any help would be great! I have a fiddle set up here.
this what you want? fiddle
the changes i made are position to relative for button, set button width 15%.. let me know if works :)
here is the code i modified:
.container button{
position:relative;
width:15%;
height:100%;
}
Try this (no additional css needed):
<div class="container">
<div class="col-md-12 sliderBar">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/41/Blank_Earth_Banner.jpg" alt="" class="img-responsive" />
</div><!--.col-md-12-->
<div class="col-md-12">
<div class="btn-group btn-group-justified">
<a class="btn btn-default"> < </a>
<a class="btn btn-default">Sponges</a>
<a class="btn btn-default">DBM</a>
<a class="btn btn-default">SYNTECHICS</a>
<a class="btn btn-default"> > </a>
</div>
</div>
</div>
I feel like an idiot right now. Anyway - the page has three columns. The right and left are fixed width and must remain so. I need for the center column to resize on browser window resize. I know I know, this shouldn't be tough, but it's just not happening for me. Heres the html:
<div class="bottom_content">
<div class="left_col">
<p>Keeping up with Commpro.Biz</p>
<div class="s_n_icons">
<img src="images/facebook.png" alt="facebook" />
<img src="images/flickr.png" alt="flickr" />
<img src="images/twitter.png" alt="twitter" />
<img src="images/youtube.png" alt="youtube" />
</div>
<p>User Name:<input ="text" size="20" name="username" value="" /></p>
<p>Password:<input ="text" size="20" name="password" value="" /></p>
<input type="button" value="submit" name="submit" />
<p>Forgot Username or Password?
<p>Click here to sign up to receive the Commpro.Biz newsletter.</p>
<div id="twitter"></div>
</div>
<div class="center_col">
<p>What's Hot on Commpro.Biz</p>
<div class="hot_item">
hot item hot item hot item hot item hot item hot item hot itemhot item hot item
</div>
</div>
<div class="right_col">
<p>Our Partners</p>
<img src="images/BW.jpg" alt="Warren Buffett" />
<img src="images/IR_PRNewswire.gif" alt="newswire" />
<img src="images/Sysomo.gif" alt="Sysomo" />
</div>
<div id="footer">
<p>Copyright 2011 by CommproBiz</p>
</div>
</div>
and the .CSS
.left_col{
float:left;
width:190px;
height:auto;
padding-right:5px;
}
.center_col{
float:left;
width:auto;
padding:0 10px;
}
.hot_item{
width:auto;
background-color:red;
}
.hot_item a{
text-decoration:none;
}
.hot_item img{
float: right;
vertical-align: top;
}
.right_col{
float:right;
width:250px;
height:auto;
padding-left:5px;
}
.right_col img{
margin:5px;
}
What's happening is that with little content in the center col, the three columns behave. Once more than a certain amount of content gets into it, it falls below the left column and the right column goes drops down.
If you float an element you have to specify a width. If you don't then there is no specified way the browsers should behave, so every browser might act differently.
What you could do is give the cols a width in percentages, so e.g. left is 10% middle 70% and right 20%.
If you want fixed width for right en left col. You should move the html of right-col above center-col. Then in the css you should remove the float on center-col and give it a margin-left:195px; and margin-right:255px;
I used the clear:both; property to lower your copyright info below the left sidebar, and when the page is filled with content the copyright will lower with it.
Here is the fixed HTML:
<div class="bottom_content">
<div class="left_col">
<p>Keeping up with Commpro.Biz</p>
<div class="s_n_icons">
<img src="images/facebook.png" alt="facebook" />
<img src="images/flickr.png" alt="flickr" />
<img src="images/twitter.png" alt="twitter" />
<img src="images/youtube.png" alt="youtube" />
</div>
<p>User Name:<input ="text" size="20" name="username" value="" /></p>
<p>Password:<input ="text" size="20" name="password" value="" /></p>
<input type="button" value="submit" name="submit" />
<p>Forgot Username or Password?
<p>Click here to sign up to receive the Commpro.Biz newsletter.</p>
<div id="twitter"></div>
</div>
<div class="right_col">
<p>Our Partners</p>
<img src="images/BW.jpg" alt="Warren Buffett" />
<img src="images/IR_PRNewswire.gif" alt="newswire" />
<img src="images/Sysomo.gif" alt="Sysomo" />
</div>
<div class="center_col">
<p>What's Hot on Commpro.Biz</p>
<div class="hot_item">hot item hot item hot item hot item hot item hot item hot itemhot item hot item</div>
</div>
<div id="footer">
<p>Copyright 2011 by CommproBiz</p>
</div>
</div>
</body>
An then the fixed CSS:
.left_col{
float:left;
width:190px;
height:auto;
padding-right:5px;
}.center_col{
margin-left:195px;
margin-right:254px;
width:auto;
padding:0 10px;
}.hot_item{
width:auto;
background-color:red;
}.hot_item a{
text-decoration:none;
}.hot_item img{
float: right;
vertical-align: top;
}.right_col{
float:right;
width:250px;
position:relative;
left:1px;
padding-left:5px;
}.right_col img{
margin:5px;
}#footer{
clear:both;
}
Hope that helps!