Images & form elements automatically disappearing? - html

I'm having a rather weird issue in IE7 & IE8, when i load one of my websites various items render as expected then after about 1 second they all disappear. This includes form elements, background colors & background images (set via css)
You can have a look yourself at www.michaelmeahanjoinery.co.uk (assuming you are viewing in ie7/8)
I've exhausted my list of usual fixes so im a bit stumped at the moment. I should also probably mention that they both render correctly on my development machine, but when the live site is viewed it craps out.
Heres the code for the form.
<form class="form" method="POST" action="index.php?module=contact">
<p class="name">
<input type="text" name="name" id="name" value="<?php echo $name; ?>"/>
<label for="name">Name</label>
</p>
<p class="email">
<input type="text" name="email" id="email" value="<?php echo $email; ?>"/>
<label for="email">E-mail</label>
</p>
<p class="phone">
<input type="text" name="phone" id="phone" value="<?php echo $phone; ?>"/>
<label for="web">Phone</label>
</p>
<p class="comments">
<textarea name="comments"></textarea>
</p>
<p class="submit">
<input type="submit" value="Send" />
</p>
<input type="hidden" id="send" name="send" value="1">
</form>
Heres the CSS for the form.
input, textarea {
padding: 9px;
margin-top:0px;
margin-bottom:2px;
border: solid 1px #E5E5E5;
outline: 0;
width: 200px;
background: white;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
textarea {
width: 400px;
max-width: 400px;
height: 176px;
margin-bottom:0px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
.form label {
margin-left: 10px;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #582404;
border: 0;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
}
UPDATE
I have been playing about with it and have discovered something a bit unusual. First of all this only happens on the live site, so rather than me playing about with the live site, i duplicated the website as is into a sub-directory.
I done this so i could play around with the code and see what it actually would look like, but when i went to the sub-directory it actually displays perfectly fine??
Could this be some sort of apache directory issue?
Not displaying correctly.
http://www.michaelmeahanjoinery.co.uk/index.php?module=contact
Displaying correctly.
http://www.michaelmeahanjoinery.co.uk/test/index.php?module=contact

yes, i verified your site. you not added separate class for IE to display gradient, so please add the below code in css after that it will display correct in IE7 and IE 8
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-8 */

Related

Unable to apply css style to span within list

So I have quite an interesting issue here. I'd assume it's something I'm just not aware of or there's a mistake/logical issue somewhere. Anyhow long story short I have a html code with a list that is produced by thymeleaf. The idea is to hide a checkbox button behind each list element, which makes it selectable and therefor gives me a quick and easy way to handle the data java's side.
Anyhow my issue however is with the styling of the selector element.
I'm trying to change pointer/color when clicked on. I have added a class into the one span element that is used in my css file as follows. I have tried so many different ways and none of it ever applies it to any of the span elements within my css. However if I simply add style within the span element inside html it works fine. So my question here is, what could be the cause as to why it does not work with the css? Or is it simply something I don't understand yet or may have overlooked?
You can find the code below. Any help is much appreciated!
The one in question is
.minionInputData {
width: 100%;
text-align: center;
margin-top: 3cm;
}
.minionInputs p {
display: inline-block;
float: top;
margin-left: 2cm;
}
.minionContent {
width: 100%;
text-align: center;
margin-bottom: 1cm;
}
.minionInputs {
margin-bottom: 2cm;
}
.rolesTableContainer {
width: 100%;
text-align: center;
}
.roles-table input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.rolesText {
cursor: pointer;
color: red;
display: block;
padding: 10px;
margin: 3px;
}
.roles-table input[type="checkbox"]:checked+span {
color: #ffffff;
font-weight: bold;
background: blue;
}
.argsTableContainer {
width: 100%;
text-align: center;
}
.arguments-table {
/*margin: 0 0 0 auto;*/
display: inline-block;
width: 40%;
border: 3px solid green;
padding: 10px;
overflow:hidden;
}
.arguments {
width: 100%;
}
.arguments table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
.arguments td {
padding: 8px;
border-style:outset;
background-color: #4CAF50;
height: 100%;
}
.arguments td input{
border: 0;
box-shadow: none;
width:100%;
height:40px;
font-size:26px;
white-space:nowrap;
background-color: #4CAF50;
text-align: center;
}
.arguments tr:nth-child(even){
background-color: #ffffcc;
}
.arguments tr:hover {
background-color: #ddd;
}
.addrowbutton {
float: right;
top: 200px;
}
/*.addallarguments {
background: #ff0000;
background-image: -webkit-linear-gradient(top, #ff0000, #3f219e);
background-image: -moz-linear-gradient(top, #ff0000, #3f219e);
background-image: -ms-linear-gradient(top, #ff0000, #3f219e);
background-image: -o-linear-gradient(top, #ff0000, #3f219e);
background-image: linear-gradient(to bottom, #ff0000, #3f219e);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
text-shadow: 1px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.addallarguments:hover {
background: #311ebd;
background-image: -webkit-linear-gradient(top, #311ebd, #3498db);
background-image: -moz-linear-gradient(top, #311ebd, #3498db);
background-image: -ms-linear-gradient(top, #311ebd, #3498db);
background-image: -o-linear-gradient(top, #311ebd, #3498db);
background-image: linear-gradient(to bottom, #311ebd, #3498db);
text-decoration: none;
}
.confirmButtons{
text-align: center;
width:100%;
bottom:0;
}*/
.confirmButtons input{
-moz-box-shadow: 1px 2px 5px 0px #899599;
-webkit-box-shadow: 1px 2px 5px 0px #899599;
box-shadow: 1px 2px 5px 0px #899599;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #a1a1a1));
background:-moz-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
background:-webkit-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
background:-o-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
background:-ms-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
background:linear-gradient(to bottom, #ededed 5%, #a1a1a1 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#a1a1a1',GradientType=0);
background-color:#ededed;
-moz-border-radius:13px;
-webkit-border-radius:13px;
border-radius:13px;
display:inline-block;
cursor:pointer;
color:#121212;
font-family:Verdana;
font-size:16px;
font-weight:bold;
padding:16px 25px;
text-decoration:none;
text-shadow:0px 0px 0px #e1e2ed;
}
.confirmButtons input:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a1a1a1), color-stop(1, #ededed));
background:-moz-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
background:-webkit-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
background:-o-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
background:-ms-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
background:linear-gradient(to bottom, #a1a1a1 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1a1a1', endColorstr='#ededed',GradientType=0);
background-color:#a1a1a1;
}
.confirmButtons input:active {
position:relative;
top:1px;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>Minions configurations</title>
<h1 align="center">Minion configuration</h1>
</head>
<body background="../static/images/MainBackground.jpg" th:background="#{images/MainBackground.jpg}">
<div id="allRolesContent">
<form action="#" th:action="#{/minions}" th:object="${selectedRole}" method="post">
<select id="allRoles" th:field="*{roleName}">
<option th:each="roleObj : ${allMinionRoles}"
th:value="${roleObj.getRoleName()}"
th:text="${roleObj.getRoleName()}">ROLES
</option>
</select>
<p><input type="submit" name="addRole" value="Add Formula" /></p>
</form>
</div>
<div id="minionForm" class="minionForm">
<link rel="stylesheet" type="text/css" href="../static/css/minions.css" th:href="#{css/minions.css}"/>
<script src="../static/js/buttons.js" th:src="#{js/buttons.js}"></script>
<script src="../static/js/PageFunctions" th:src="#{js/PageFunctions}"></script>
<div id="minionContent" class="minionContent">
<form action="#" th:action="#{/minions}" th:object="${minions}" method="post">
<div id="minionInputs" class="minionInputs">
<p>Configuration Name: <input type="text" th:field="*{name}" th:required="required"/></p>
<p>Enironment(eg LABOR): <input type="text" th:field="*{env}" th:required="required"/></p>
</div>
<div class="rolesTableContainer">
<div class="roles-table">
<ul>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="test">ROLE</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
</ul>
<input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate"/>
<button name="moveUP" formnovalidate="formnovalidate">&ShortUpArrow;</button>
<button name="moveDown" formnovalidate="formnovalidate">&ShortDownArrow;</button>
</div>
</div>
<div class="argsTableContainer">
<div class="arguments-table">
<table id="argsTable" class="arguments">
<h1 align="center">Arguments list</h1>
<input class="addrowbutton" type="submit" name="add" value="Add Argument" formnovalidate="formnovalidate" onclick="addRow('argsTable','argumentTr')"
th:onclick="'addRow(\'argsTable\',\'argumentTr\');'"/>
<tr>
<th>Argument Name</th>
<th>Value</th>
</tr>
<tr id="argumentTr" th:each="argument : *{arguments}">
<td>
<input type="text" th:value="${argument.argName}" id="argName" name="argName"/>
</td>
<td>
<input type="text" th:value="${argument.value}" id="value" name="value"/>
</td>
</tr>
</table>
</div>
</div>
<div class="confirmButtonsContainer">
<div class="confirmButtons">
<input type="submit" name="saveAll" value="Save Configuration" />
<input type="submit" name="updateConf" value="Update Configuration"/>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
I'm not sure if you are looking for something like this, cus I could not understand quite clear. I made a simple example with jQuery. So, if your list is checked, it will add another class to that span, and this span will take style from stylesheet file, not just if you add inline style.
P.S, you could do this with css too, without jQuery, but I did not change your code structure, so I had to do a simple demo with jQuery.
Hope this helps you!
$("input").on("change", function(){
var _this = $(this);
var checkboxElement = _this.parent().find(".rolesText");
if(_this.is(':checked')) {
checkboxElement.addClass("checked");
}
else {
checkboxElement.removeClass("checked");
}
})
.roles-table input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.rolesText {
cursor: pointer;
color: red;
display: inline-block;
padding: 10px;
margin: 3px;
}
.rolesText.checked {
color: blue;
font-weight: bold;
}
.roles-table input[type="checkbox"]:checked {
color: #ffffff;
font-weight: bold;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="rolesTableContainer">
<div class="roles-table">
<ul>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
</ul>
<input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate"/>
<button name="moveUP" formnovalidate="formnovalidate">&ShortUpArrow;</button>
<button name="moveDown" formnovalidate="formnovalidate">&ShortDownArrow;</button>
</div>
</div>
Cascading styles sheets are as they sound - cascading so you cannot go backwards or upwards, only forwards and downwards. If you want to style something if the checkbox is checked, place it after the checkbox and use a sibling selector - either + or ~:
.roles-table input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.rolesText {
cursor: pointer;
color: red;
display: block;
padding: 10px;
margin: 3px;
}
.roles-table input[type="checkbox"]:checked+span {
/* this means the span that directly follows a checked input */
color: #ffffff;
font-weight: bold;
background: blue;
}
/* if you need the span to appear first, use the following */
label {
display: flex;
align-items: center;
}
label>span {
order: 1;
}
label>input {
order: 2;
}
<div class="rolesTableContainer">
<div class="roles-table">
<ul>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
<span class="rolesText" th:text="${role.getRoleName()}">test</span>
</label>
</li>
</ul>
<input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate" />
<button name="moveUP" formnovalidate="formnovalidate">&ShortUpArrow;</button>
<button name="moveDown" formnovalidate="formnovalidate">&ShortDownArrow;</button>
</div>
</div>

HTML automatically resize button and font size for phones in a form box

So I'm still trying to get the hang of html and css, so it could be what I want to do needs a completely different approach.
So right now when I view my website on my phone the form will auto resize, but my button currently doesn't.
However as you can see from the code, I have both the button and font size pretty big. What I would like is for a way to automatically resize the button and the font size to fit when viewed on a phone and tablet.
Below is the css code for my button.
Thanks
<form>
<input type="email" name="email" id="email" class="field-style field-split align-left set-width" placeholder="Your Email" />
</br>
</br>
<btn>
<input type="submit" name="Subscribe" value="GET THE FREE COURSE NOW" id="submit" />
</btn>
</form>
.form-style-9 btn input[type="button"],
.form-style-9 btn input[type="submit"] {
background: #3cd934;
background-image: -webkit-linear-gradient(top, #3cd934, #2b8016);
background-image: -moz-linear-gradient(top, #3cd934, #2b8016);
background-image: -ms-linear-gradient(top, #3cd934, #2b8016);
background-image: -o-linear-gradient(top, #3cd934, #2b8016);
background-image: linear-gradient(to bottom, #3cd934, #2b8016);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 27px;
padding: 11px 20px 10px 20px;
text-decoration: none;
}
.form-style-9 btn input[type="button"]:hover,
.form-style-9 btn input[type="submit"]:hover {
background: #256e13;
background-image: -webkit-linear-gradient(top, #256e13, #1d520f);
background-image: -moz-linear-gradient(top, #256e13, #1d520f);
background-image: -ms-linear-gradient(top, #256e13, #1d520f);
background-image: -o-linear-gradient(top, #256e13, #1d520f);
background-image: linear-gradient(to bottom, #256e13, #1d520f);
text-decoration: none;
}
You can use media queries
#media (max-width: 300px) {
btn {
width: 50px;
font-size:10px;
}
}
The above is saying if the screen size is <= 300px then apply these rules.

Basic styling bits surprisingly not being applied

Having applied styling to my form certain elements of the form aren't adhering to the styling particularly:
1st issue: The width of 350px is only being applied on one of the five input elements i.e. the email field.
2nd issue: I'm applying an image on the input elements when engaged to indicate they are required but the image isnt appearing on any of the input elements when engaged.
3rd issue: I would like the div with the class social_sign_in to have a margin top which I have applied but isn't working.
4th issue: I'm attempting to have the form styling i.e. the class I call form_input_div to wrap itself round the form elements which are 350px in width whilst it remains in the centre. This seems not to be working.
As am slightly new to CSS I suspect I might have made some errors in the basics of styling so my apologies if that is the case.
EDIT: Here's the relevant HTML code:
<div class="page_content_main_div">
<div class="page_content_heading_div" >
<p> Log in with: </p>
</div>
<div class="social_sign_in_div">
<a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
</div>
<div class="social_sign_in_div">
<a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
</div>
<div class="btn_log_in_with_email_div">
<a class="btn-auth btn_log_in_with_email large" href="#">Log in with <b>ABCD details</b></a>
</div>
<hr class="hr"></hr>
<form action="#" method="GET" class="sign_up_form">
<div class="page_content_heading_div">
<p>Sign up:</p>
</div>
<div>
<input title="Enter first name" class="firstname" name="firstname" type="text" required placeholder="Enter first name">
</div>
<div>
<input title="Enter second name" class="secondname" name="secondname" type="text" required placeholder="Enter second name">
</div>
<div>
<input title="Enter your e-mail" class="email" name="email" type="email" required placeholder="Enter email">
</div>
<div>
<input title="Enter a password" class="password" name="password" type="password" required placeholder="Enter password">
</div>
<div>
<input title="Re-enter password" class="reenterpassword" name="reenterpassword" type="password" required placeholder="Re-enter password">
</div>
<div class="form_button_internal_div">
<button title="Type your second name" type="submit" class="btn_sign_up">Sign Up</button>
</div>
<div class="form_terms_of_service_internal_div">
<p class="terms_of_service">By signing up, I agree to the ABCD <b>Terms of Service</b> and <b>Privacy Policy</b>.</p>
</div>
</form>
</div>
EDIT: Here's the relevant CSS code:
/* Page content heading div */
.page_content_heading_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
color: #999999;
font-size: 40px;
font-weight: bold;
clear: both;
}
/* Page content main div */
.page_content_main_div {
clear: both;
}
/* Social sign in div */
.social_sign_in_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin-top: 10px;
}
/* Log in with email div */
.btn_log_in_with_email_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin-top: 10px;
}
/* hr styling */
.hr {
width: 350px;
height: 2px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
/* */
.sign_up_form {
width: 350px;
display: inline-block;
}
/* */
input[type="text"], input[type="password"], input[type="email"] {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
width: 100%;
height: 45px;
font-size: 20px;
color: #000000;
border: 1px solid #999999;
border-radius: 6px;
padding: 5px 5px 5px 5px;
margin-top: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
/* */
input:focus {
outline: solid #999999;
border-radius: 6px;
}
/* */
.form_button_internal_div {
margin-top: 10px;
margin-bottom: 10px;
}
/* Primary button */
.btn_sign_up {
right: 0px;
width: 150px;
height: 36px;
border:none;
font-weight: normal;
font-size: 20px;
margin-top: 10px;
background: #CCC;
background: -webkit-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -moz-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -ms-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -o-linear-gradient(#A2E55A 0%,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
-pie-background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
color: #F5F5F5;
}
/* */
.btn_sign_up:hover {
background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
-pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}
/* */
.btn_sign_up:active {
background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
-pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}
/* */
.form_terms_of_service_internal_div {
margin-top: 10px;
margin-bottom: 10px;
}
/* */
.terms_of_service {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
font-size: 15px;
color: #999999;
}
The width of 350px is only being applied on one of the five input elements i.e. the email field.
This doesn't seem to be true...I'm seeing all inputs the same length.
I'm applying an image on the input elements when engaged to indicate they are required but the image isnt appearing on any of the input elements when engaged.
Your engaged inputs are identified by the class required, but they all have this class by default, so there really isn't a trigger. What you are looking for is a :focus, then apply the styling.
I would like the div with the class social_sign_in to have a margin top which I have applied but isn't working.
It's working, but 10px is not enough to see a difference. If you made this like 50px, you will see it moved.
I'm attempting to have the form styling i.e. the class I call form_input_div to wrap itself round the form elements which are 350px in width whilst it remains in the centre. This seems not to be working.
What purpose does the form_input_div serve? Why not remove the widths from the input, have them take 100% of their container, which is the form, and set the width on the form with some padding and you'll get what you want.
Also, required id is not a valid attribute to be putting on the input tags.

Search Box within Navigation bar alignment issue

Hey i'm just learning programming and im trying to have my search bar always centered with the nav links to the right of it with-in the fixed navigation bar. I just can't seem to make it work. Here is my html and css. I appreciate the help!
<div id ="nav">
<div id ="navigation">
<container id= "search">
<form class="form-wrapper cf">
<form action ='./search.php' method='get'>
<input type="text" placeholder="" required>
<button type="submit"><img class= "icon" src="images/search-icon.png"></button>
</form>
</container>
<div>
Home
About
Contact
Login
</div>
</div>
</div>
And my CSS:
#nav {
display: block;
position: fixed;
top: 0;
width: 100%;
height: 28px;
padding: 12px 0px 0px 0px;background: #4c4c4c; /* Old browsers */
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #1c1c1c 90%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(90%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#nav a {
font-size: 12px;
padding-right: 60px;
color: white;
text-decoration: none;
}
#nav a:hover {
color: grey;
}
#navigation {
display: inline;
text-align: center;
}
#search {
position: absolute;
top: 5px;
}
I would move the search form into the middle of the navigation menu. Check out this fiddle: http://jsfiddle.net/DJa25/8/
<div id ="nav">
<div id ="navigation">
<div>
Home
About
<container id= "search">
<form class="form-wrapper cf">
<form action ='./search.php' method='get'>
<input type="text" placeholder="" required>
<button type="submit"><img class= "icon" src="images/search-icon.png"></button>
</form>
</container>
Contact
Login
</div>
</div>
#search {
display: inline-block;
}
Firstly I have never heard of a container tag, unless I'm missing something.
Secondly you cannot wrap a form onto a form. So take out the wrapping form. Plus the form tag with the action and method attribute does not have a closing tag so include it.
<div id="navigation">
<form class="nav-form">
<input type="text" required>
<button type="submit">Submit</button>
</form>
<nav>
<ul>
<li>Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
</nav>
</div>
then include this css
#navigation {
top:0;
position:fixed;
display:block;
width:100%;
height:28px;
}
.nav-form{
margin:0 auto;
float:left;
}
nav {
float:left;
}
nav ul li {
float:left;
list-style-type:none;
text-decoration:none;
}
Hope this helped.
There may be an issue with margin:0 auto in which it won't center. If this happens do this:
margin-left;auto;
margin-right:auto;
or if that doesn't work:
margin-left:50%;
You can add your backgrounds and stuff after and can change the css around for your needs. I just done it the way it should work

div auto responsive to text inside

I have a DIV inside another. One of those has "plain text" and what I want to do is to make its width automatic with a maximum with possible.
Here is the code:
HTML:
<div class="artigo_nome"> <!-- here is the part that I need help -->
<p>
Computador Apple Imac 27P I5 3.5Ghz/8Gb/1Tb Md096Po/A
</p>
</div>
<div class="artigo_definicoes round_corner">
<div class="separador_artigo_imagem">
<img src="img/artigos/fones.png" class="imagem_artigo" alt="artigo"/>
</div>
<div class="artigo_info">
Computador Apple Imac 27P I5 3.5Ghz/8Gb/1Tb Md096Po/A<br />
<span class="ler_mais">ver mais</span><br />
<span class="comparar">adicionar para comprar</span>
</div>
</div>
CSS:
.categoria_lista_artigos .artigo_nome{
color:#6e6e6e;
width:234px;
height:34px;
margin-left: -2px;
border-radius:5px 5px 0 0;
border-left:2px #aeaeae solid;
border-right:2px #aeaeae solid;
border-bottom:1px #aeaeae solid;
/*background-color:#E6E6E6;*/
position:relative;
font-weight: 600;
-webkit-box-shadow: 0px -3px 5px #e2e2e2;
-moz-box-shadow: 0px -3px 5px #e2e2e2;
box-shadow: 0px -3px 5px #e2e2e2;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #cfcfcf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cfcfcf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#cfcfcf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#cfcfcf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#cfcfcf 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#cfcfcf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cfcfcf',GradientType=0 ); /* IE6-9 */
}
.categoria_lista_artigos .artigo_nome div {
margin: auto;
padding: 4px 13px;
vertical-align: middle;
line-height:13px;
}
If you need anything more, just say.
What you want is a shrink-to-fit width for your text line.
You can simplify your HTML as follows:
<div class="artigo_nome">
Computador Apple Imac 27P I5 3.5Ghz/8Gb/1Tb Md096Po/A
</div>
and apply the following CSS rules:
.artigo_nome {
border: 1px dotted blue;
display: inline-block;
max-width: 250px;
padding: 10px;
word-break: break-all; /* optional */
}
which gives the following result: http://jsfiddle.net/audetwebdesign/vVhWR/
The inline-block will give you a shrink-to-fit width up to the specified max-width value.
If you want to be able to wrap long words, add the word-break property.
Note: I left out the border/shadow/background styling for simplicity, but you can easily add them back in.