This page at http://supportforstepdads.com/grtstepdadland/ is not displaying some elements properly in the browsers FIrefox and IE7. Some of them are:
The Name Field
The Email Field
The "Get Ebook for free" button
Pasting the stylesheet here:
* {
margin: 0;
padding: 0;
}
body {
background: #000 url("../img/bg.png") no-repeat 520px 0px;
margin-left:auto;
margin-right:auto;
font-family: Arial, sans-serif;
font-size:14px;
line-height:1.6em;
color:#fff;
}
#container {
width:500px;
margin:auto;
margin-top:150px;
}
#logo {
float: right;
margin-top: -130px;
}
#ebookimg {
margin-left:146px;
}
/*Typography*/
p {
margin-bottom:15px;
}
h2 {
color: #4AAFD9;
font-size:34px;
line-height:2.5em;
}
h3 {
font-size:26px;
}
h4 {
color: #4AAFD9;
font-size:22px;
line-height:2.2em;
}
/*Form and its elements*/
form {
margin-top:20px;
}
input[type=text]{
font-size:18px;
color:#fff;
text-align:center;
font-style:oblique;
background: #222;
border: 1px solid #4AAFD9;
line-height:1.5em;
}
form #spamcheck {
margin-top:20px;
margin-bottom: 40px;
color: #888;
font-size:14px;
}
input[type=submit]
{
padding:20px 40px;
background: #4AAFD9;
font-size:20px;
font-weight:bold;
border:none;
cursor:pointer;
}
/*Social Icons area*/
#social p {
color: #4AAFD9;
text-align:center;
margin-top:45px;
}
#socialicons {
margin-left:106px;
}
#socialicons img {
padding:2px;
width:41px;
}
#socialicons img:hover {
opacity: 0.9;
}
/*Features Area*/
#features {
padding: 20px 10px;
margin:auto;
}
.featurep {
padding:15px 14px 14px 66px;
background-image:url("../img/qmark.png");
background-color:#222;
background-repeat:no-repeat;
margin-bottom:13px;
border-radius:25px;
font-size: 16px;
}
#ebookfeatures {
margin-top:40px;
}
#ebookfeatures p {
text-align:justify;
}
/*Footer*/
#footerh4 {
float:left;
}
#footer h4 {
font-weight:normal;
}
#buttonbuy {
float:right;
width:170px;
text-align:center;
padding:15px 30px;
background: #4AAFD9;
font-size:14px;
font-weight:bold;
border:none;
cursor:pointer;
}
#copyright {
margin-top:120px;
text-align:center;
}
#copyright span {
color: #4AAFD9;
}
How may I fix these issues?
Thanks!
It looks like it's like it's because you've got those elements centering via an align="center" tag on the <form>, if you remove that and add text-align: center; to your form { styling (CSS) then it should display correctly for you (tested in FF, on a mac so can't test IE7 sorry)
As an aside, I assume you're testing in Chrome, which is actually displaying it incorrectly, FF & IE7 will be displaying it correctly. The align tag is deprecated in favor of CSS. Deprecated tags.
nbsp
Add below styles to "Form and its elements" section:
form {
text-align:center;
}
form input {
display:inline-block;
*display:inline;
*zoom:1;
}
Related
Using Wordpress, I don't know why but I try to put a button under another one but it doesn't appear. I tried changing the name of my classes and other stuff, and still having the same problem. Here's my code:
<style>
#body2{
width: 343px;
height: 1094px;
background-image:url("/wp-content/uploads/2015/04/der-side.png");
background-repeat:no-repeat;
background-size:cover;
background-position: left top;
}
.myButton {
background-color:transparent;
border:3px solid #000000;
margin-top: 923px;
margin-left: 75px;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:arial;
font-size:18px;
padding:16px 47px;
text-decoration:none;
}
.myButton:hover {
background-color:black;
text-decoration: none;
}
.myButton:active {
position:relative;
text-decoration: none;
}
.per{
background-color:transparent;
border:3px solid #000000;
margin-top: 953px;
margin-left: 75px;
display:inline-block;
cursor:pointer;
color:#000000;
font-family:arial;
font-size:18px;
padding:16px 47px;
text-decoration:none;
}
.per:hover {
background-color:black;
text-decoration: none;
}
.per:active {
position:relative;
text-decoration: none;
}
</style>
<div id="body2">
<div>C A T Á L O G O</div>
<div>Personaliza</div>
</div>
What could it be? CSS?
Whenever I hover over the #email all the social icons move to the left for a portion. Ideas were to use positition: fixed or float. I want to do that the icons stay intact but the #email still hovers.
HERE is the code - http://codepen.io/anon/pen/jyubq
#header ul li {
width:48px;
height:48px;
margin-left:15px;
margin-top: 5px;
display:inline-block;
background-color:#000000;
padding:0;
text-align: center;
}
#google{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('images/googleplus.png');
display:block;
}
#facebook{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('http://bradsknutson.com/wp-content/themes/bradsknutson/images/facebook-48circle.png');
display:block;
}
#twitter{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('http://www.gmailnotifier.se/img/icon_twitter.png');
display:block;
}
#header ul li#google{
background-color:#d34836;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#google:hover{
background-color:#c23725;
}
#header ul li#facebook{
background-color:#3b5998;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#facebook:hover{
background-color:#2a4887;
}
#header ul li#twitter{
background-color:#2447B2;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#twitter:hover{
background-color:#1F3D99;
}
#email {
float: right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email:hover {
font-weight: bold;
}
Your font becomes greater . And padding calculates from greater font (bold), not the regular.
I can advise you this. When you hovering,text-shadow: 0px 0px 2px #000; appears instead of font-weight:bold;.
I think Animus's answer is better but if you want to use font-weight:bold then you have to absolute position it http://codepen.io/anon/pen/jqyzs
#email{
position:absolute;
right:0;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
I have a simple horizontal list menu that was working fine when I had a global (*) setting of padding: 0. For other reasons, I needed to take out that padding as a global setting, but I can't figure out how to make it apply to the list.
Now, each entry in the list has a blank block of maybe half an inch to the left of the first entry. If I can get rid of that, I'll be set. Here is a fiddle (http://jsfiddle.net/eha77way/), and I'll paste the code.
Thank you!
CSS
* {
border:0;
margin:0;
}
/* navigation */
#navigation, #episodenav, #pivotnav {
border-top:3px solid #FFF;
border-right:1px solid #FFF;
margin:0 auto;
list-style:none;
}
#pivotnav {
background:#F0F0F0;
border-top:3px solid #FFF;
border-right:1px solid #FFF;
margin:0 auto;
width:755px;
height:25px;
list-style:none;
}
#navigation {
background:#E0E0E0;
width:755px;
height:40px;
}
#episodenav {
width:756px;
background:#F0F0F0;
height:25px;
}
#pivotnav {
width:755px;
background:#F0F0F0;
height:25px;
}
#navigation li, #episodenav li, #pivotnav li {
border-left:1px solid #FFF;
float:left;
list-style:none;
}
#navigation li, #pivotnav li {
width:150px;
}
#episodenav li {
width:41px;
}
#navigation a, #episodenav a, #pivotnav a {
color:#000;
display:block;
text-align:center;
}
#navigation a {
line-height:40px;
}
#episodenav a, #pivotnav a {
line-height:25px;
}
/* content */
#content {
height:auto;
margin:50px auto;
position: relative;
padding:30px;
width:751px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
#content h1 {
border-bottom:1px dashed #999;
font-size:2em;
padding:25px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h2 {
font-size:1.6em;
padding:25px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h3 {
font-size:1.1em;
padding:20px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content p {
padding: 10px 5px;
line-height: 21px;
}
#content textarea {
border: 1px solid #cccccc;
}
#list {
margin-left: 50px;
}
HTML
<body>
<div id="content">
<div id="navigation">
<ul>
<li><i>Ulysses</i> by Episode</a></li>
<li>Pivot Points</a></li>
<li>Projects</a></li>
<li>Collections</a></li>
<li>About Ashplant</a></li>
</ul>
</div>
<h2>TEST</h2>
</div>
</body>
</html>
Is this what you mean?
#navigation ul{
padding: 0;
}
The padding is in the ul element, not the lis. This is a default of the browser, that is much needed when bullets are visible.
You can add a css rule-set such as:
#navigation ul {
padding: 0;
}
at least on my jsbin, this does the trick.
Maybe you want to remove padding-left without {padding-left:0px}?
Please use it
ul > li {position: relative; left: -20px;}
I have an application based on the following css.The page is designed to display employee database and their task records.I need the header always at the bottom of the page even the content is less/more in number.I cant fix it.Once when I fix for less content it gets displayed above the content when more contents are added.I need help to fix this...
* { padding:0; margin:0; outline:0; }
body {
background:#f9ebae;
font-family: Verdana, sans-serif;
font-size:11px;
line-height:14px;
color:#5e5e5e;
margin:0;
padding:0;
height:100%;
}
input, textarea, select { font-family: Verdana, sans-serif; font-size:13px; }
textarea { overflow:hidden; }
.field { border:solid 1px #d3cfc7; background:#fff; padding:5px; }
.small-field { border:solid 1px #d3cfc7; background:#fff; padding:3px 1px; font-size:11px; }
.checkbox { width:13px; height:13px; vertical-align:top; position:relative; top:2px; }
.button { background:#eee url(images/button.gif) repeat-x 0 0; border:solid 1px #b1a874; color:#7f7f7f; font-size:11px; padding:2px 6px 2px 6px; cursor:pointer; line-height:14px !important; }
.button:hover { color:#333; border-color:#857b42; }
.field:focus { color:#000; border-color:#857b42;}
a img { border:0; }
a { color:#ba4c32; text-decoration: underline; cursor:pointer; }
a:hover { color:#8d341f; text-decoration: none;}
.left, .alignleft { float:left; display:inline; }
.right, .alignright { float:right; display:inline; }
.rights, .alignright { float:right; display:inline; }
.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }
.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center !important; }
h1{ font-size:22px; font-family:Georgia, "Times New Roman", Times, serif; line-height:24px; color:#fff; font-weight: normal;}
h1 a{ color:#fff; text-decoration: none; }
h11{ font-size:32px; font-family:"Times New Roman", Times, serif; line-height:30px; color:#fff; font-weight: normal;}
h11 a{ color:#fff; text-decoration: none; }
h2 { font-size:15px; font-weight: normal; }
h2 a{ text-decoration: none; }
h22 { font-size:20px; font-family:"Times New Roman", Times, serif; font-weight: normal; }
h22 a{ text-decoration: none; }
h3 { font-size:12px; color:#3333FF; line-height:14px; font-weight: normal; }
h3 a{ text-decoration: none; }
.shell { ; margin:0; auto; }
#header { height:89px; background:url(images/header.gif); white-space:nowrap; }
#header h1{ float:left; display:inline; padding-top:12px; }
#top-navigation { float:right; white-space:nowrap; color:#fff; padding-top:15px; }
#top-navigation a{ color:#fff; }
#top-navigation span{ color:#dca598; }
#top { height:53px;}
#navigation { height:36px;}
#navigation ul{ list-style-type: none;}
#navigation ul li{ float:left; display:inline; margin-right:2px;}
#navigation ul li a,
#navigation ul li a span { float:left; height:36px; background:url(images/tab.gif) no-repeat 0 0; padding:0 0 0 15px;}
#navigation ul li a span { background-position:right 0; padding:0 15px 0 0;}
#navigation ul li a { line-height:36px; color:#907525; text-decoration: none; }
#navigation ul li a.active,
#navigation ul li a:hover { background-position:0 bottom;}
#navigation ul li a.active span,
#navigation ul li a:hover span{ background-position:right bottom; }
#navigation ul li a.active { font-size:12px; font-weight: bold; color:#887e42; }
#wrapper {
min-height:100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#wrapper1 {
min-height:200%;
position:relative;
}
#container { padding:20px 0; padding-bottom:44px;}
#container10 { padding:20px 0; padding-bottom:44px; min-height:100%;}
.small-nav { color:#978b48; padding-bottom:20px; }
.small-nav a{ color:#6f6636; }
#main { overflow:auto; padding-bottom: 44px; }
#content { float:left; width:98%; padding:0 0 44px 2px; }
#contents { float:left; width:auto; padding:0 0 0 300px; }
#sidebar { float:right; width:225px; }
.table {}
.table th{ background:#fffdfa url(images/th.gif) repeat-x 0 0; color:#818181; text-align: left; padding:7px 10px; border-bottom:solid 1px #d2d1cb;}
.table td{ background:#fbfcfc; border-bottom:solid 1px #e0e0e0; padding:8px 10px; }
.table tr.odd td{ background:#f8f8f8; }
.table tr:hover td{ background:#fff9e1; }
.table a.ico{ }
.box { background:#fbfcfc; height:auto; width:auto; padding:1px; margin-bottom:20px; }
.box-head { background:#ba4c32; height:32px; color:#fff; padding: 0 10px; line-height:32px; white-space:nowrap; border-bottom:solid 1px #fff; }
.box-head .rights{ padding:10px 0 10px 1px; line-height:13px;}
.box-head .rights label,
.box-head .rights input { float:left; }
.box-head .rights label { padding:4px 0 0 0;}
.box-head .rights input { margin-left:5px;}
.box-head .right{ padding:5px 0 10px 1px; line-height:13px; }
.box-head .right label,
.box-head .right input { float:left; }
.box-head .right label { padding:4px 0 0 0;}
.box-head .right input { margin-left:5px;}
.pagging { height:20px; padding:8px 0px; line-height:19px; color:#949494; }
.pagging a{ background:url(images/pagging.gif) repeat-x 0 0; height:20px; float:left; padding:0 8px; border:solid 1px #d5d5d5; text-decoration: none; color:#949494; margin-left:5px; }
.pagging a:hover { border-color:#8c3521; background:#ba4c32; color:#fff; }
.pagging span{ float:left; margin-left:5px; padding-top:2px; }
a.ico { color:#9d9c9a; font-size:10px; text-decoration: none; padding:0 0 0 14px; background-repeat:no-repeat; background-position:0 0; }
a.ico:hover { color:#333;}
a.del { background-image:url(images/delete.gif); margin-left:10px;}
a.edit { background-image:url(images/ed.gif); margin-left:10px;}
a.status { background-image:url(images/i.gif); margin-left:10px;}
.form { padding:15px 10px 5px 10px; }
.form label{ display:block; font-weight: bold; font-size:13px; padding-bottom:4px; }
.form label span{ color:#999; font-weight: normal;}
.form .field { display:block; }
.form .inline-field .field { display:inline;}
.form .req { font-size:13px; float:right; white-space:nowrap; color:#999; }
.form p{ padding-bottom:15px; }
.size1 { width:716px; }
.size2 { width:80px; }
.size3 { width:120px; }
textarea.size1 { height:180px; }
.buttons { text-align: right; padding:10px; background:#eee; border-top:solid 1px #e0e0e0; }
.buttons .button{ margin-left:3px;}
.box-content { padding:10px; }
.sort { border-top:solid 1px #e0e0e0; padding-top:10px; margin-top:15px; }
.sort label{ display:block; font-weight: bold;}
.sort .field{ display:block; margin-top:5px; }
.sort select.field{ width:203px; }
.box-content p { padding-top:10px; }
.select-all{}
.select-all label{ text-decoration: underline; padding-left:4px; }
.add-button,
.add-button span { float:left; height:26px; background:url(images/add-button.gif) no-repeat 0 0; padding:0 0 0 28px; }
.add-button span { background-position:right 0; padding:0 10px 0 0; }
.add-button { font-weight: bold; font-size:12px; color:#747474; text-decoration: none; line-height:26px; }
.add-button:hover { color:#333;}
#footer { height:44px; margin-top: -44px; background:url(images/footer.gif); line-height:44px; width:100%; color:#fff; position:relative; bottom:0; left:0; clear:both; }
#footer a{ color:#fff;}
#footer, #push {
height: 4em;
}
#footer, #push {
clear: both;
}
.msg { position:relative; padding-right:35px; margin-bottom:10px; }
.msg p{ padding:9px 10px 9px 40px; font-size:12px; background-repeat:no-repeat; background-position:10px 5px;}
.msg a.close{ font-size:0; line-height:0; position:absolute; top:0; right:0; width:34px; height:34px; background:url(images/close.gif); text-indent: -4000px;}
.msg-ok p{ background-color:#fffac2; border:solid 1px #dbd6a2; color:#5e5c40; background-image:url(images/ok.gif); }
.msg-error p{ background-color:#f3c598; border:solid 1px #e8b084; color:#ba4c32; background-image:url(images/msg-error.gif); }
/*** CSS3 ***/
.box { -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow: 0 0 6px #978f6c; -webkit-box-shadow: 0 0 6px #978f6c;}
.box-head { -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; }
.field, .button { -moz-border-radius:4px; -webkit-border-radius:4px; }
.small-field, .button, .pagging a { -moz-border-radius:3px; -webkit-border-radius:3px; }
.msg p { -moz-border-radius:6px; -webkit-border-radius:6px; }
.button { -moz-box-shadow: 0 0 2px #978f6c; -webkit-box-shadow: 0 0 2px #978f6c;}
.rrshow{
display:none;
}
<!--Print query css-->
#media print
{
.print-hidden {
display: none;
}
a {
display: none;
}
}
Try this to position it at the bottom
position:absolute;
bottom:0;
Why is my footer not displaying full page
width in IE8:
Display:
http://cl.ly/0J2Z0l1w3S1e0A3d3Q1V
HTML:
<footer>
content
</footer
/*Reset */
html, body, #wrapper, #main h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }
/* Main CSS */
html, body,#wrapper{
width:990px;
height:100%;
min-height:100%;
margin: 0 auto;
}
#wrapper{
position: absolute;
}
#header{
position:relative z-index:500;
background:url('../images/header.png');
width:990px;
height:220px;
}
/*Menu */
nav{
float:left;
width:190px;
margin:0 0 0 0;
}
nav ul{
float:left;
margin:0;
list-style:none;
font-size:14px;
width:190px;
}
nav li a{
font-size:14px;
color:#fff;
line-height:25px; /*Text Hight On Button */
text-decoration:none;
text-indent:25px;
display:block;
width:190px;
height:27px;
background-image:url('../images/normal.png');
}
nav a:hover{
background-image:url('../images/onclick.png');
}
/*Content */
#content{
margin: 0 0 0 190px;
background:url('../images/mainbg.png') no-repeat;
width:815px;
height:555px;
}
#content h1{
margin: 5px 0 0 10px;
font-family: 'Josefin Slab', arial, serif;
font-size:24px;
}
#content p{
margin:0 0 0 15px;
}
#content li{
margin:0 0 0 35px;
}
.clear{
clear:both;
margin:0;
padding:0;
}
footer{
clear:both;
overflow:hidden;
bottom:0;
background:url('../images/footer.png') no-repeat #000;
width:100%;
height:20px;
border: 6px solid pink;
}
/* Misc*/
#metal{
float:left;
margin:160px 0 0 -190px;
background:url('../images/metalnavbg.png');
height:400px;
width:190px;
}
/* Text Formatting */
#companyName{
text-align:center;
padding-top:45px;
font-size:35px;
color:#f0f0ef;
}
#companyQuote{
text-align:center;
font-size:18px;
color:#a5a4a2;
}
/*Forms */
/*General*/
#validation{
font-weight:bold;
color:#ff0101;
}
.contactForm{
width: 450px;
height:425px;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
#validation{
font-weight:bold;
color:#ff0101;
}
.form{
width: 400px;
height:100%;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
.borderradius.form{
width: 400px;
height:100%;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
fieldset{
border:none;
}
#formLayout{
border:2px solid #000;
}
#formLayout label{
clear: both;
display: block;
}
#formLayout input{
font-size:12px;
border: 2px solid #999;
padding: 6px 8px;
background-color: #fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
color: #000;
width: 250px;
}
#formLayout .small{
color:#ff0101;
display:block;
font-size:11px;
font-weight:bold;
text-align:left;
width:140px;
}
#formLayout textarea{
width:250px;
}
#error{
width:250px;
height:20px;
margin:-30px 0 0 270px;
padding-bottom:10px;
}
#error p{
color:#ff0101;
text-align:left;
}
/* Specific Form Class's */
.login{
width: 470px;
height:250px;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
.login label{
font-weight:bold;
}
.login .loginSubmit{
margin-top:25px;
}
/*Gallery CSS */
#gallery{
width:120px;
margin-left:5px;
display: inline;
}
#gallery .thumbnail{
margin:0 auto;
display:inline;
}
#gallery img{
margin:5px;
}
#sales{
width:190px;
height:195px;
margin-left:15px;
display:inline-block;
border: 1px solid red;
}
#sales .location{
float:left;
text-align:center;
font-weight:bold;
margin-left:15px;
}
#sales .price{
float:left;
text-align:left;
font-weight:bold;
padding-left:5px;
color:#ff0101;
}
If you're using <footer> (a fancy schmancy HTML5 tag) sometimes IE does not like it. This is how I've fixed issues like this. Add this to your <head>:
<script>document.createElement('footer');</script>
It may not be what's causing your issue, but I've notice when trying to use HTML5 tags, IE pretty much ignores them or renders them strangely.
Add display: block to your footer tag.
In fact, all fancy schmancy HTML5 tags should be set up.
/* HTML5 block-level reset for enhanced structural tag support in older browsers */
header, footer, section, aside, nav, article, figure { display: block; padding: 0; margin: 0; }
I have fixed this issue by floating my footer div to the left
Download Modernizr and put this script to the head of HTML site. Basically this script will register all HTML5 elements for browser. Consequently IE won't break any more unknown elements.