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.
Related
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;}
Hi guys I'm very new to webdesign and the more I learn the more I realize that IE is a bit of a jerk when it comes to how it renders. In firefox and chrome everything works right but in IE my header is doubled in height. I'm not sure why. I've made everything divs and did all my positioning in css. here is my css.
website: http://www.discerningear.com
html { font-family:Arial, Helvetica, sans-serif; color:#333; }
body { background:#a99a6f; margin:0 auto; text-align:center;}
img { border-style: none; }
#slide{ max-width:100%; -moz-box-shadow: 0px 0px 12px #fff; -webkit-box-shadow: 0px 0px 12px #fff; box-shadow: 0px 0px 12px #fff; }
#container { -moz-box-shadow: 0px 0px 12px #000; -webkit-box-shadow: 0px 0px 12px #000; box-shadow: 0px 0px 12px #000; text-align: left; width:800px; height:1500px; margin:0 auto; background:#d4d4d4; background-image:url("/includes/images/container.jpg"); background-repeat:no-repeat;}
#header { width:100%; height:160px; padding:0 0 0 0; background-image:url('/includes/images/wave-header-background.jpg');}
#logo { float:left; height:80px; margin:5px; }
.logoImage{ content:url("/includes/images/DiscerningEar_Logo.png"); height:100%; }
#top_info { float:right; width:450px; height:40px; padding:0 0 0 0 ; margin:20px; }
#top_info ul { margin:0; padding:0; list-style-type:none;}
#top_info ul li { margin:0; padding:0px; float:left; }
#top_info ul li a { display: -moz-inline-stack; display: inline-block; width: 100px; height: 35px; background: url("http://dabuttonfactory.com/b.png?t=&f=Calibri-Bold&ts=18&tc=ffffff00&tshs=1&tshc=22222200&it=png&c=5&bgt=gradient&bgc=8c7f5e&ebgc=000000&bs=2&bc=a9996f&shs=2&shc=4d4d4d&sho=se&w=100&h=35") no-repeat; line-height: 35px; vertical-align: text-middle; text-align: center; color: #ffffff; font-family: Calibri; font-size: 14px; font-weight: bold; font-style: normal; text-shadow: #222222 1px 1px 0; }
#top_info ul li a > span { display: -moz-inline-block; }
#navbar {padding:20px 0 180px 0; height:60px; clear:both; }
#navbar ul { margin:0; padding:0; list-style-type:none;}
#navbar ul li { margin:0; padding:0px; float:left; }
#navbar ul li a { font-size:12px; float:left; padding:0 0 0 20px; display:block;}
#banner { background-image:url('/includes/images/banner-background.jpg'); margin-top:-12px; width:100%; height:180px; clear:both; padding:0 0 0 0; text-align:center;}
#left_col { float:left; width:30%; height:600px; border:1px solid #333; color:#fff; padding:20px; }
#right_col { float:right; width:58%; height:600px; border:1px solid #333; color:#fff; padding:20px; }
#footer { padding:20px; clear:both; }
I dont know what would cause this but any help would be awesome. I'm continuing to look around for solutions but as of right now i guess i just don't know the best way to fix this.
Most likely because of the IE double margin bug. It occurs in IE6 when a floated element has a margin applied as well (in your case, most likely the #logo).
The fix is to add:
display: inline; to that element's CSS.
I display some text but not all of the text is shown so I want to make the background larger so that all the text displays. Right now the lower part of the "g" is outside the clipping area:
My HTML is
<h2><strong>{% trans %}Why Bnano is{% endtrans %}</strong><span>{% trans %}RIGHT FOR YOU{% endtrans %}</span></h2>
And my CSS is
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, hr, button {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:none;}
table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:top;}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input, textarea, select{
font:11px Arial, Helvetica, sans-serif;
vertical-align:middle;
margin:0;
padding:0;
}
form, fieldset{border-style:none;}
html {height:100%;}
body {
min-width:1004px;
color:#404344;
height:100%;
font:13px/16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:#fff;
margin: 0 1px 1px;
}
img{border-style:none;}
a{
text-decoration:none;
color:#000000;
}
a:focus {outline:none;}
a:hover{text-decoration:underline;}
/* wrapper */
#wrapper{
width:100%;
min-height:100%;
}
* html #wrapper {height:100%;}
/* header */
#header {
width:100%;
background:#1596c3 url(/welcome/static/images/bg-header.png) repeat-x;
}
#header:after {
display:block;
clear:both;
content:"";
}
/* header-area */
.header-area {
margin:0 auto;
width:948px;
padding:0 23px;
}
/* top-panel*/
.top-panel {
overflow:hidden;
height:36px;
padding:6px 0 0 4px;
margin:0 0 19px;
position:relative;
z-index:9999999 !important;
}
/* search-form */
.search-form {
float:right;
margin:0 10px 0 15px;
}
.search-form form {float:left;}
.top-panel .text {
float:left;
padding:6px 13px 7px 13px;
margin:0 5px 0 0;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-text.gif) no-repeat;
}
.top-panel .text input {
font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#8cc0d3;
float:left;
width:157px;
margin:0;
padding:0 -2px 0 0;
border:0;
background:none;
}
.top-panel .text input:focus {outline:none;}
.search-form .search {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-search.gif) no-repeat;
width:26px;
height:27px;
overflow:hidden;
text-indent:-9999px;
line-height:0;
font-size:0;
cursor:pointer;
border:0;
}
/* email-form */
.email-form {
float:left;
width:214px;
}
.email-form form {float:left;}
.email-form .go {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-go.gif) no-repeat;
width:26px;
height:27px;
overflow:hidden;
text-indent:-9999px;
line-height:0;
font-size:0;
cursor:pointer;
border:0;
}
/* links */
.top-panel .links {
float:right;
padding:9px 0 0;
width:410px;
}
.top-panel .links .title {
float:left;
color:#fdfdfd;
font-weight:normal;
font-size:13px;
text-transform:uppercase;
padding-top:1px;
}
.top-panel .links .title .cufon {
float:left;
margin:0 !important;
}
.top-panel .links ul {
float:left;
position:relative;
margin:-5px 0 0;
}
.top-panel .links li {
float:left;
padding:0 0 0 9px;
}
.top-panel .links li img {display:block;}
/* header-info */
.header-info {
padding:0 0 95px 17px;
position:relative;
z-index:99999 !important;
}
/* logo */
.logo {
float:left;
background:url(/welcome/static/images/logo-opaque1.png) no-repeat;
width:290px;
height:176px;
text-indent:-9999px;
margin:0 0 0 -15px;
position:relative;
z-index: 999999 !important;
}
.logo a {
display:block;
height:100%;
}
/* nav */
#nav {
float:right;
padding:20px 0 0;
}
#nav li {
float:left;
margin:0 3px 0 3px;
font-size:16px;
line-height:17px;
}
#nav li a {
float:left;
padding:0 5px 0 0;
color:#a9cfdd;
cursor:pointer;
}
#nav li a span {
float:left;
padding:5px 6px 4px 11px;
}
#nav li.active a,
#nav li a:hover {
text-decoration:none;
color:#f6f6f6;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat 100% -23px;
}
#nav li.active a span,
#nav li a:hover span {
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat;
}
#nav li a .cufon {
float:left;
margin:0 !important;
}
/* info-area */
#header .info-area {
height:398px;
width:900px;
background:none !important;
padding:15px 2px 0 13px;
margin-top:-148px;
margin-left:25px;
}
#header .info-area .txt {
float:left;
color:#f6f8f9;
font-size:19px;
margin-top:100px;
}
#header .info-area .txt .cufon {
float:left;
margin:0 !important;
}
#header .info-area .txt .text .cufon {margin-top:1px !important;}
#header .info-area .title {
color:#a9cfdd;
font-size:48px;
position:absolute;
line-height:51px;
padding-top:55px;
width:550px;
}
#header .info-area .title span {
font-size:35px;
line-height:36px;
display:block;
overflow:hidden;
width:100%;
height:32px !important;
padding-top:1px;
}
#header .info-area .title em {
font-style:normal;
display:block;
overflow:hidden;
width:100%;
height:53px !important;
}
#header .info-area .desc {
font-family: "Arial Narrow", sans-serif;
line-height:20px;
margin: 8px 0 25px 3px;
font-size:19px;
letter-spacing:2px;
position:absolute;
z-index:9999 !important;
padding-top:130px;
width:550px;
}
#header .info-area .txt .text {
display:block;
overflow:hidden;
height:1%;
padding:0 0 5px;
}
#header .info-area .txt .text1 {
background:url(http://bnano-www.appspot.com/welcome/static/images/ico03.gif) no-repeat 2px 9px;
padding:26px 0 27px 114px;
}
#header .info-area .img {
float:right;
position:relative;
margin-left:500px;
margin-top:-100px;
}
#header .info-area .more {
overflow:hidden;
height:25px;
letter-spacing:1px !important;
margin-top:23px;
margin-left:-3px;
}
#header .info-area .more a {
color:#f6f8f9;
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet05.gif) no-repeat 5px 3px;
padding:0 0 0 19px;
font-size:18px;
}
#header .info-area .more a span {
float:left;
margin-left:-2px;
padding-bottom:0;
}
#header .info-area .more a:hover {text-decoration:none;}
#header .info-area .more a:hover span {
border-bottom:1px solid #f6f8f9;
padding:0;
}
/* main */
#main {
overflow:hidden;
width:100%;
padding:58px 0 122px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-main-area.gif) repeat-x;
}
/* onecolumn */
#onecolumn {
margin:0 auto;
overflow:hidden;
width:1004px;
position:relative;
}
#onecolumn ul {
margin:10px 0 10px 25px;
}
#onecolumn li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:16px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
#onecolumn h2 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 8px 0;
}
#onecolumn h2 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#onecolumn h2 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
padding-bottom:15px;
}
#onecolumn h2 .cufon {
float:left;
margin:0 !important;
}
#onecolumn h3 {
color:#676a6b;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 10px;
}
#onecolumn h3 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#onecolumn h3 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
}
#onecolumn h3 .cufon {
float:left;
margin:0 !important;
}
#onecolumn .content {
padding:0 48px 10px 48px;
}
#onecolumn content p {margin:0 0 16px;}
/* twocolumns */
#twocolumns {
margin:0 auto;
overflow:hidden;
width:1004px;
position:relative;
}
#twocolumns h2 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 14px 0;
}
#twocolumns h2 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#twocolumns h2 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
font-size:30px;
}
#twocolumns h2 .cufon {
float:left;
margin:0 !important;
}
#twocolumns h3 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 10px;
}
#twocolumns h3 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#twocolumns h3 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
font-size:26px;
}
#twocolumns h3 .cufon {
float:left;
margin:0 !important;
}
#twocolumns h4 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
font-size:16px;
margin: 10px 0 17px 2px;
}
/* content */
#content {
position:relative;
float:left;
width:596px;
padding:0 20px 10px 48px;
z-index: 99999 !important;
}
#content p {
margin:0 2px 16px;
line-height:18px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;
}
#content p img {
padding:10px;
}
#content .more {
overflow:hidden;
height:1%;
padding:0 0 16px 4px;
font-size:14px;
}
#content .more a {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet01.gif) no-repeat 0 55%;
padding:0 0 0 13px;
color:#404344;
}
#content .more a:hover {
color:#138db7;
}
/* video-block */
#content .video-block {
width:616px;
margin:0 -20px 0 -19px;
position:relative;
padding:0 4px 0 15px;
background:#d4dadb url(http://bnano-www.appspot.com/welcome/static/images/bg-video-block.gif) repeat-x;
}
#content .video-block:after {
display:block;
clear:both;
content:"";
}
#content .video-block .heading {
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-heading.gif) no-repeat;
width:176px;
height:51px;
position:relative;
margin:0 0 4px -7px;
padding:25px 0 0 15px;
}
#content .video-block .info-col {
float:left;
width:271px;
padding:0 0 0 7px;
margin:-6px 0 0;
position:relative;
}
#content .video-block h3 {
overflow:hidden;
width:100%;
padding:3px 0 0;
margin:0;
}
#twocolumns .video-block strong {
width:auto;
float:left;
display:inline;
font-size:18px;
color:#fff;
}
#twocolumns .video-block span{
width:auto;
float:left;
display:inline;
font-size:25px;
color:#fff;
}
/* list */
#content .video-block .list {height:1%;}
#content .video-block .list li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 13px 13px;
line-height:14px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet02.gif) no-repeat 1px 4px;
}
#content .video-block .list li h4 {
font-size:13px;
line-height:15px;
font-weight:normal;
color:#967723;
}
#content .video-block .list li h4 a {color:#967723;}
#content .video-block .list li p {margin:0;}
#content .video-block .video {
float:right;
margin:0 0 -8px;
padding:30px 0 0;
position:relative;
}
#content .video-block .video img {display:block;}
#content blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
#content blockquote p {margin:0;}
#content blockquote cite {font-style:normal;}
/* blocks */
#content .blocks {
overflow:hidden;
width:582px;
}
#content .blocks h3 {
font-size:14px;
line-height:18px;
font-weight:normal;
color:#4499b7;
margin:0 0 13px;
}
#content .block-holder {
width:590px;
overflow:hidden;
margin:0 -8px 5px 0;
}
#content .blocks .block {
width:290px;
margin:0 4px 0 0;
padding:18px 0 10px;
float:left;
color:#ba9d50;
font-size:11px;
line-height:13px;
background:#dcddde;
}
#content .blocks .block .img {
overflow:hidden;
width:100%;
text-align:center;
margin:0 0 18px;
}
#content .blocks .block .img img {vertical-align:top;}
#content .blocks .block p {
text-align:center;
margin:0;
}
#content .blocks .block p a {color:#ba9d50;}
#content ul {
margin:10px 0 10px 25px;
}
#content li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:16px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
/* sidebar */
#sidebar {
float:right;
position:relative;
width:315px;
padding:0 3px 0 10px;
overflow:hidden;
z-index: 99999 !important;
}
#sidebar p {
margin-left:2px;
}
/* news-list */
#sidebar .news-list {
width:300px;
padding:0 15px 19px 0;
}
#sidebar .news-list li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:14px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
#sidebar .news-list li h4 {
font-size:13px;
line-height:15px;
font-weight:normal;
margin:0 0 1px;
}
/* news-list1 */
#sidebar .news-list1 {
padding-right:0;
padding-bottom:14px;
width:300px;
}
#sidebar .news-list1 li {
background-position:3px 6px;
padding-left:17px;
}
#sidebar .news-list1 h4 {
color:#967723;
position:relative;
word-spacing:-1px;
}
#sidebar .news-list1 h4 a {color:#967723;}
/* #sidebar .news-list1 h4 a {color:#967723;} */
/* info-list */
#sidebar .info-list {
width:269px;
padding:1px 0 0;
}
#sidebar .info-list li {
overflow:hidden;
height:1%;
font-size:25px;
line-height:27px;
margin:0 0 2px;
vertical-align:top;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-info-list.gif) no-repeat;
}
#sidebar .info-list li a {
float:left;
padding:9px 10px 4px 41px;
color:#138db7;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet04.gif) no-repeat 13px 50%;
}
#sidebar .info-list li a .cufon {
float:left;
margin:0 !important;
}
#sidebar .info-list li a:hover {text-decoration:none;}
#sidebar .info-list li a span {
float:left;
margin:0 2px 0 0;
}
#sidebar .info-list li a strong {float:left;}
#sidebar .view {
display:block;
background:url(http://bnano-www.appspot.com/assets/files/img/btn/online-store.png) no-repeat;
color:#fff;
font-size:30px;
width:191px;
height:75px;
margin:0 0 0 -8px;
padding:22px 115px 0 18px;
}
#sidebar .view span {
font-size:30px;
overflow:hidden;
width:100%;
display:block;
}
#sidebar .view strong {
overflow:hidden;
width:100%;
display:block;
}
#sidebar .view .cufon {
float:left;
margin:0 !important;
}
#sidebar .view:hover {text-decoration:none;}
/* footer */
#footer {
height:206px;
position:relative;
overflow:hidden;
margin:-106px 0 0;
font-size:11px;
line-height:14px;
color:#9ddbf1;
background:#1494c1 url(http://bnano-www.appspot.com/welcome/static/images/bg-footer.gif) repeat-x;
}
/* footer-area */
.footer-area {
margin:0 auto;
width:948px;
padding:52px 1px 0;
}
.footer-area p a {color:#000000;}
#footer .copyright {
float:left;
width:390px;
margin:5px 30px 0 0;
}
#footer .copyright p {text-align:right;}
#footer .logo1 {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/logo01.png) no-repeat;
width:130px;
height:102px;
overflow:hidden;
text-indent:-9999px;
position:relative;
margin:-52px 30px 0 0;
}
#footer .logo1 a {
display:block;
height:100%;
}
/* info */
#footer .info {
float:left;
width:350px;
position:relative;
margin:-9px 0 0;
}
#sidebar form {
width : 295px;
height : auto;
text-align : left;
margin-top : 10px;
margin-bottom:25px;
border: none;
}
#sidebar input {
width : 240px;
height:20px;
background : url(http://bnano-www.appspot.com/welcome/static/images/bg-input.png) no-repeat scroll 0% 0%;
color : #666;
font-size : 14px;
margin-bottom : 6px;
padding : 10px 10px 8px 10px;
border:0;
}
#sidebar textarea {
width : 265px;
height : 105px;
background : url(http://bnano-www.appspot.com/welcome/static/images/textarea-b.png) no-repeat scroll 0% 0%;
padding : 10px 30px 10px 10px;
font-size : 14px;
color : #666;
margin-bottom : 1px;
border:0;
}
#sidebar .button {
background : url(http://bnano-www.appspot.com/welcome/static/images/button.png) no-repeat 0% 0%;
width : 104px;
height : 30px;
color : #fff;
font-size : 13px;
cursor:pointer;
margin-top:10px;
margin-left:180px;
padding : 5px 0 5px 0;
border:0;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#sidebar .invalidValue {
color:#c21313;
}
Can you tell me how I increase the drawing area?
Thanks
Try to increase the line-height of your <h2>!
Like Jannis M said, it is quite dirty... maybe you can show us more of the html, so it would be easier to understand and to help...
You can add /increase padding to your <h2>.
The issue cannot be observed using the code posted. Instead of a short fragment of server-side code, you should post the actual HTML code, which is probably something like
<h2><strong>Varför Bnano är</strong><span>rätt för dig</span></h2>
presumably inside an element with id=onecolumn. But what else? Even in this setting, the rendering is different.
In any case, the issue is most probably caused by setting an unsuitable line-height value on an element. For fonts like Lucida Sans Unicode and Lucida Grande, the value should be around 1.3 or a little larger – now one of the CSS rules sets the value to 100%, which means the font size of the parent element, and this is surely too little for h2.
The text is cut because you have set the parent container size and set overflow: hidden; Inspect the dom and see what's the parent's element height; You have not given the full html so i can tell you where is the exact problem.
Start with:
onecolumn
I want to add options to select language somewhere close to the facebook like button but I can't fit it in:
The HTML code is
<div style="margin-top:3px;margin-left:15px;float:right;">
<iframe src="http://www.facebook.com/plugins/like.php?href=http://{{request.host}}&layout=button_count"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
</div>
<div class="links">
DISTRIBUTOR LOG IN | JOIN
<strong class="title">FOLLOW US</strong>
<ul>
<li><img class="png" src="/welcome/static/images/facebook.png" alt="Come join us on Facebook!" /></li>
<li><img class="png" src="/welcome/static/images/twitter.png" alt="Follow us on Twitter!" /></li>
</ul>
</div>
My CSS file is
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, hr, button {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:none;}
table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:top;}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input, textarea, select{
font:11px Arial, Helvetica, sans-serif;
vertical-align:middle;
margin:0;
padding:0;
}
form, fieldset{border-style:none;}
html {height:100%;}
body {
min-width:1004px;
color:#404344;
height:100%;
font:13px/16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:#fff;
margin: 0 1px 1px;
}
img{border-style:none;}
a{
text-decoration:none;
color:#000000;
}
a:focus {outline:none;}
a:hover{text-decoration:underline;}
/* wrapper */
#wrapper{
width:100%;
min-height:100%;
}
* html #wrapper {height:100%;}
/* header */
#header {
width:100%;
background:#1596c3 url(http://bnano-www.appspot.com/welcome/static/images/bg-header.png) repeat-x;
}
#header:after {
display:block;
clear:both;
content:"";
}
/* header-area */
.header-area {
margin:0 auto;
width:948px;
padding:0 23px;
}
/* top-panel*/
.top-panel {
overflow:hidden;
height:36px;
padding:6px 0 0 4px;
margin:0 0 19px;
position:relative;
z-index:9999999 !important;
}
/* search-form */
.search-form {
float:right;
margin:0 10px 0 15px;
}
.search-form form {float:left;}
.top-panel .text {
float:left;
padding:6px 13px 7px 13px;
margin:0 5px 0 0;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-text.gif) no-repeat;
}
.top-panel .text input {
font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#8cc0d3;
float:left;
width:157px;
margin:0;
padding:0 -2px 0 0;
border:0;
background:none;
}
.top-panel .text input:focus {outline:none;}
.search-form .search {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-search.gif) no-repeat;
width:26px;
height:27px;
overflow:hidden;
text-indent:-9999px;
line-height:0;
font-size:0;
cursor:pointer;
border:0;
}
/* email-form */
.email-form {
float:left;
width:214px;
}
.email-form form {float:left;}
.email-form .go {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-go.gif) no-repeat;
width:26px;
height:27px;
overflow:hidden;
text-indent:-9999px;
line-height:0;
font-size:0;
cursor:pointer;
border:0;
}
/* links */
.top-panel .links {
float:right;
padding:9px 0 0;
width:400px;
}
.top-panel .links .title {
float:left;
color:#fdfdfd;
font-weight:normal;
font-size:13px;
text-transform:uppercase;
padding-top:1px;
}
.top-panel .links .title .cufon {
float:left;
margin:0 !important;
}
.top-panel .links ul {
float:left;
position:relative;
margin:-5px 0 0;
}
.top-panel .links li {
float:left;
padding:0 0 0 9px;
}
.top-panel .links li img {display:block;}
/* header-info */
.header-info {
padding:0 0 95px 17px;
position:relative;
z-index:99999 !important;
}
/* logo */
.logo {
float:left;
background:url(/welcome/static/images/logo-opaque.png) no-repeat;
width:220px;
height:176px;
text-indent:-9999px;
margin:0 0 0 -15px;
position:relative;
z-index: 999999 !important;
}
.logo a {
display:block;
height:100%;
}
/* nav */
#nav {
float:right;
padding:20px 0 0;
}
#nav li {
float:left;
margin:0 3px 0 3px;
font-size:16px;
line-height:17px;
}
#nav li a {
float:left;
padding:0 5px 0 0;
color:#a9cfdd;
cursor:pointer;
}
#nav li a span {
float:left;
padding:5px 6px 4px 11px;
}
#nav li.active a,
#nav li a:hover {
text-decoration:none;
color:#f6f6f6;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat 100% -23px;
}
#nav li.active a span,
#nav li a:hover span {
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat;
}
#nav li a .cufon {
float:left;
margin:0 !important;
}
/* info-area */
#header .info-area {
height:398px;
width:900px;
background:none !important;
padding:15px 2px 0 13px;
margin-top:-148px;
margin-left:25px;
}
#header .info-area .txt {
float:left;
color:#f6f8f9;
font-size:19px;
margin-top:100px;
}
#header .info-area .txt .cufon {
float:left;
margin:0 !important;
}
#header .info-area .txt .text .cufon {margin-top:1px !important;}
#header .info-area .title {
color:#a9cfdd;
font-size:48px;
position:absolute;
line-height:51px;
padding-top:55px;
width:550px;
}
#header .info-area .title span {
font-size:35px;
line-height:36px;
display:block;
overflow:hidden;
width:100%;
height:32px !important;
padding-top:1px;
}
#header .info-area .title em {
font-style:normal;
display:block;
overflow:hidden;
width:100%;
height:53px !important;
}
#header .info-area .desc {
font-family: "Arial Narrow", sans-serif;
line-height:20px;
margin: 8px 0 25px 3px;
font-size:19px;
letter-spacing:2px;
position:absolute;
z-index:9999 !important;
padding-top:130px;
width:550px;
}
#header .info-area .txt .text {
display:block;
overflow:hidden;
height:1%;
padding:0 0 5px;
}
#header .info-area .txt .text1 {
background:url(http://bnano-www.appspot.com/welcome/static/images/ico03.gif) no-repeat 2px 9px;
padding:26px 0 27px 114px;
}
#header .info-area .img {
float:right;
position:relative;
margin-left:500px;
margin-top:-100px;
}
#header .info-area .more {
overflow:hidden;
height:25px;
letter-spacing:1px !important;
margin-top:23px;
margin-left:-3px;
}
#header .info-area .more a {
color:#f6f8f9;
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet05.gif) no-repeat 5px 3px;
padding:0 0 0 19px;
font-size:18px;
}
#header .info-area .more a span {
float:left;
margin-left:-2px;
padding-bottom:0;
}
#header .info-area .more a:hover {text-decoration:none;}
#header .info-area .more a:hover span {
border-bottom:1px solid #f6f8f9;
padding:0;
}
/* main */
#main {
overflow:hidden;
width:100%;
padding:58px 0 122px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-main-area.gif) repeat-x;
}
/* onecolumn */
#onecolumn {
margin:0 auto;
overflow:hidden;
width:1004px;
position:relative;
}
#onecolumn ul {
margin:10px 0 10px 25px;
}
#onecolumn li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:16px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
#onecolumn h2 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 8px 0;
}
#onecolumn h2 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#onecolumn h2 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
padding-bottom:15px;
}
#onecolumn h2 .cufon {
float:left;
margin:0 !important;
}
#onecolumn h3 {
color:#676a6b;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 10px;
}
#onecolumn h3 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#onecolumn h3 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
}
#onecolumn h3 .cufon {
float:left;
margin:0 !important;
}
#onecolumn .content {
padding:0 48px 10px 48px;
}
#onecolumn content p {margin:0 0 16px;}
/* twocolumns */
#twocolumns {
margin:0 auto;
overflow:hidden;
width:1004px;
position:relative;
}
#twocolumns h2 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 14px 0;
}
#twocolumns h2 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#twocolumns h2 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
font-size:30px;
}
#twocolumns h2 .cufon {
float:left;
margin:0 !important;
}
#twocolumns h3 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 10px;
}
#twocolumns h3 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#twocolumns h3 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
font-size:26px;
}
#twocolumns h3 .cufon {
float:left;
margin:0 !important;
}
#twocolumns h4 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
font-size:16px;
margin: 10px 0 17px 2px;
}
/* content */
#content {
position:relative;
float:left;
width:596px;
padding:0 20px 10px 48px;
z-index: 99999 !important;
}
#content p {
margin:0 2px 16px;
line-height:18px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;
}
#content p img {
padding:10px;
}
#content .more {
overflow:hidden;
height:1%;
padding:0 0 16px 4px;
font-size:14px;
}
#content .more a {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet01.gif) no-repeat 0 55%;
padding:0 0 0 13px;
color:#404344;
}
#content .more a:hover {
color:#138db7;
}
/* video-block */
#content .video-block {
width:616px;
margin:0 -20px 0 -19px;
position:relative;
padding:0 4px 0 15px;
background:#d4dadb url(http://bnano-www.appspot.com/welcome/static/images/bg-video-block.gif) repeat-x;
}
#content .video-block:after {
display:block;
clear:both;
content:"";
}
#content .video-block .heading {
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-heading.gif) no-repeat;
width:176px;
height:51px;
position:relative;
margin:0 0 4px -7px;
padding:25px 0 0 15px;
}
#content .video-block .info-col {
float:left;
width:271px;
padding:0 0 0 7px;
margin:-6px 0 0;
position:relative;
}
#content .video-block h3 {
overflow:hidden;
width:100%;
padding:3px 0 0;
margin:0;
}
#twocolumns .video-block strong {
width:auto;
float:left;
display:inline;
font-size:18px;
color:#fff;
}
#twocolumns .video-block span{
width:auto;
float:left;
display:inline;
font-size:25px;
color:#fff;
}
/* list */
#content .video-block .list {height:1%;}
#content .video-block .list li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 13px 13px;
line-height:14px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet02.gif) no-repeat 1px 4px;
}
#content .video-block .list li h4 {
font-size:13px;
line-height:15px;
font-weight:normal;
color:#967723;
}
#content .video-block .list li h4 a {color:#967723;}
#content .video-block .list li p {margin:0;}
#content .video-block .video {
float:right;
margin:0 0 -8px;
padding:30px 0 0;
position:relative;
}
#content .video-block .video img {display:block;}
#content blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
#content blockquote p {margin:0;}
#content blockquote cite {font-style:normal;}
/* blocks */
#content .blocks {
overflow:hidden;
width:582px;
}
#content .blocks h3 {
font-size:14px;
line-height:18px;
font-weight:normal;
color:#4499b7;
margin:0 0 13px;
}
#content .block-holder {
width:590px;
overflow:hidden;
margin:0 -8px 5px 0;
}
#content .blocks .block {
width:290px;
margin:0 4px 0 0;
padding:18px 0 10px;
float:left;
color:#ba9d50;
font-size:11px;
line-height:13px;
background:#dcddde;
}
#content .blocks .block .img {
overflow:hidden;
width:100%;
text-align:center;
margin:0 0 18px;
}
#content .blocks .block .img img {vertical-align:top;}
#content .blocks .block p {
text-align:center;
margin:0;
}
#content .blocks .block p a {color:#ba9d50;}
#content ul {
margin:10px 0 10px 25px;
}
#content li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:16px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
/* sidebar */
#sidebar {
float:right;
position:relative;
width:315px;
padding:0 3px 0 10px;
overflow:hidden;
z-index: 99999 !important;
}
#sidebar p {
margin-left:2px;
}
/* news-list */
#sidebar .news-list {
width:300px;
padding:0 15px 19px 0;
}
#sidebar .news-list li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:14px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
#sidebar .news-list li h4 {
font-size:13px;
line-height:15px;
font-weight:normal;
margin:0 0 1px;
}
/* news-list1 */
#sidebar .news-list1 {
padding-right:0;
padding-bottom:14px;
width:300px;
}
#sidebar .news-list1 li {
background-position:3px 6px;
padding-left:17px;
}
#sidebar .news-list1 h4 {
color:#967723;
position:relative;
word-spacing:-1px;
}
#sidebar .news-list1 h4 a {color:#967723;}
/* #sidebar .news-list1 h4 a {color:#967723;} */
/* info-list */
#sidebar .info-list {
width:269px;
padding:1px 0 0;
}
#sidebar .info-list li {
overflow:hidden;
height:1%;
font-size:25px;
line-height:27px;
margin:0 0 2px;
vertical-align:top;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-info-list.gif) no-repeat;
}
#sidebar .info-list li a {
float:left;
padding:9px 10px 4px 41px;
color:#138db7;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet04.gif) no-repeat 13px 50%;
}
#sidebar .info-list li a .cufon {
float:left;
margin:0 !important;
}
#sidebar .info-list li a:hover {text-decoration:none;}
#sidebar .info-list li a span {
float:left;
margin:0 2px 0 0;
}
#sidebar .info-list li a strong {float:left;}
#sidebar .view {
display:block;
background:url(http://bnano-www.appspot.com/assets/files/img/btn/online-store.png) no-repeat;
color:#fff;
font-size:30px;
width:191px;
height:75px;
margin:0 0 0 -8px;
padding:22px 115px 0 18px;
}
#sidebar .view span {
font-size:30px;
overflow:hidden;
width:100%;
display:block;
}
#sidebar .view strong {
overflow:hidden;
width:100%;
display:block;
}
#sidebar .view .cufon {
float:left;
margin:0 !important;
}
#sidebar .view:hover {text-decoration:none;}
/* footer */
#footer {
height:206px;
position:relative;
overflow:hidden;
margin:-106px 0 0;
font-size:11px;
line-height:14px;
color:#9ddbf1;
background:#1494c1 url(http://bnano-www.appspot.com/welcome/static/images/bg-footer.gif) repeat-x;
}
/* footer-area */
.footer-area {
margin:0 auto;
width:948px;
padding:52px 1px 0;
}
.footer-area p a {color:#000000;}
#footer .copyright {
float:left;
width:390px;
margin:5px 30px 0 0;
}
#footer .copyright p {text-align:right;}
#footer .logo1 {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/logo01.png) no-repeat;
width:130px;
height:102px;
overflow:hidden;
text-indent:-9999px;
position:relative;
margin:-52px 30px 0 0;
}
#footer .logo1 a {
display:block;
height:100%;
}
/* info */
#footer .info {
float:left;
width:350px;
position:relative;
margin:-9px 0 0;
}
#sidebar form {
width : 295px;
height : auto;
text-align : left;
margin-top : 10px;
margin-bottom:25px;
border: none;
}
#sidebar input {
width : 240px;
height:20px;
background : url(http://bnano-www.appspot.com/welcome/static/images/bg-input.png) no-repeat scroll 0% 0%;
color : #666;
font-size : 14px;
margin-bottom : 6px;
padding : 10px 10px 8px 10px;
border:0;
}
#sidebar textarea {
width : 265px;
height : 105px;
background : url(http://bnano-www.appspot.com/welcome/static/images/textarea-b.png) no-repeat scroll 0% 0%;
padding : 10px 30px 10px 10px;
font-size : 14px;
color : #666;
margin-bottom : 1px;
border:0;
}
#sidebar .button {
background : url(http://bnano-www.appspot.com/welcome/static/images/button.png) no-repeat 0% 0%;
width : 104px;
height : 30px;
color : #fff;
font-size : 13px;
cursor:pointer;
margin-top:10px;
margin-left:180px;
padding : 5px 0 5px 0;
border:0;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#sidebar .invalidValue {
color:#c21313;
}
The live site is here. Can you tell me how to add an option element close to the Like button where I can choose English or Spanish? When I add an option element the layout collapses since there are too many elements or something.
Thank you
This HTML structure
<div class="top-panel">
<div style="margin-top: 3px; margin-left: 15px; width: 89px; float: left;"> <-- Contains FB
<div class="links"> <-- Contains the Follow us links
</div>
You need to switch the order and set a width to the items so that they don't free float. Currently, your FB container is floating right and taking up all the remaining space
<div class="top-panel">
<div class="links"> <-- Floats left with set width
<div class="fbstuff"> <-- Floats left with set width
<div class="langstuff"> <-- Your new lang select area
</div>
Once you put the items in the correct order and float them left, it should fix your problem
I'd start by shrinking the width of that facebook like iFrame to about 200, then directly after the iframe's parent div container, add an additional div and float it right. then in that, put your select dropdown.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I'm trying to make a footer to my HTML page and I want the texts to appear directly beneath the headings:
As can be seen this works when there are 4 rows but if I write only one row it doesn't come on top. I tried putting valign="top" but it didn't work:
<div id="footer">
<div class="footer-area">
<table cellspacing='2' cellpadding='2' border='0' width='798'><tbody><tr><td><h3>Contact</h3></td><td><h3>Opportunity</h3></td><td width='100'><h3>Products </h3></td><td><h3>Policies</h3></td><td><h3>Our Sites</h3></td></tr><tr><td valign="top">Bnano International Ltd<br>
207 Regent Street<br>
London, England<br>info#bnano.eu
</td><td>How to join<br>
Why join Bnano<br>
Financial opportunity<br>
Distributors resources <td valign="top">Water
</td><td valign="top">Company Policies<br>
Retail term of use<br>
Privacy policy<br>
Return policy</td><td valign="top">Scandinavia<br>
Discover Bnano</td></tr></tbody></table>
</div>
</div><!-- footer -->
My CSS file is
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, hr, button {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:none;}
table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:middle;}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input, textarea, select{
font:11px Arial, Helvetica, sans-serif;
vertical-align:middle;
margin:0;
padding:0;
}
form, fieldset{border-style:none;}
html {height:100%;}
body {
min-width:1004px;
color:#404344;
height:100%;
font:13px/16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:#fff;
margin: 0 1px 1px;
}
img{border-style:none;}
a{
text-decoration:none;
color:#000000;
}
a:focus {outline:none;}
a:hover{text-decoration:underline;}
/* wrapper */
#wrapper{
width:100%;
min-height:100%;
}
* html #wrapper {height:100%;}
/* header */
#header {
width:100%;
background:#1596c3 url(/welcome/static/images/bg-header.png) repeat-x;
}
#header:after {
display:block;
clear:both;
content:"";
}
/* header-area */
.header-area {
margin:0 auto;
width:948px;
padding:0 23px;
}
/* top-panel*/
.top-panel {
overflow:hidden;
height:36px;
padding:6px 0 0 4px;
margin:0 0 19px;
position:relative;
z-index:9999999 !important;
}
/* search-form */
.search-form {
float:right;
margin:0 10px 0 15px;
}
.search-form form {float:left;}
.top-panel .text {
float:left;
padding:6px 13px 7px 13px;
margin:0 5px 0 0;
background:url(http://www.supernaturalsilver.com/images/bg-text.gif) no-repeat;
}
.top-panel .text input {
font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#8cc0d3;
float:left;
width:157px;
margin:0;
padding:0 -2px 0 0;
border:0;
background:none;
}
.top-panel .text input:focus {outline:none;}
.search-form .search {
float:left;
background:url(http://www.supernaturalsilver.com/images/btn-search.gif) no-repeat;
width:26px;
height:27px;
overflow:hidden;
text-indent:-9999px;
line-height:0;
font-size:0;
cursor:pointer;
border:0;
}
/* email-form */
.email-form {
float:left;
width:214px;
}
.email-form form {float:left;}
.email-form .go {
float:left;
background:url(http://www.supernaturalsilver.com/img/btn-go.gif) no-repeat;
width:26px;
height:27px;
overflow:hidden;
text-indent:-9999px;
line-height:0;
font-size:0;
cursor:pointer;
border:0;
}
/* links */
.top-panel .links {
float:right;
padding:9px 0 0;
width:400px;
}
.top-panel .links .title {
float:left;
color:#fdfdfd;
font-weight:normal;
font-size:13px;
text-transform:uppercase;
padding-top:1px;
}
.top-panel .links .title .cufon {
float:left;
margin:0 !important;
}
.top-panel .links ul {
float:left;
position:relative;
margin:-5px 0 0;
}
.top-panel .links li {
float:left;
padding:0 0 0 9px;
}
.top-panel .links li img {display:block;}
/* header-info */
.header-info {
padding:0 0 95px 17px;
position:relative;
z-index:99999 !important;
}
/* logo */
.logo {
float:left;
background:url(/welcome/static/images/bnano_logo.jpg) no-repeat;
width:220px;
height:76px;
text-indent:-9999px;
margin:0 0 0 -15px;
position:relative;
z-index: 999999 !important;
}
.logo a {
display:block;
height:100%;
}
/* nav */
#nav {
float:right;
padding:20px 0 0;
}
#nav li {
float:left;
margin:0 3px 0 3px;
font-size:16px;
line-height:17px;
}
#nav li a {
float:left;
padding:0 5px 0 0;
color:#a9cfdd;
cursor:pointer;
}
#nav li a span {
float:left;
padding:5px 6px 4px 11px;
}
#nav li.active a,
#nav li a:hover {
text-decoration:none;
color:#f6f6f6;
background:url(http://www.supernaturalsilver.com/img/btn-active.gif) no-repeat 100% -23px;
}
#nav li.active a span,
#nav li a:hover span {
background:url(http://www.supernaturalsilver.com/img/btn-active.gif) no-repeat;
}
#nav li a .cufon {
float:left;
margin:0 !important;
}
/* info-area */
#header .info-area {
height:398px;
width:900px;
background:none !important;
padding:15px 2px 0 13px;
margin-top:-148px;
margin-left:25px;
}
#header .info-area .txt {
float:left;
color:#f6f8f9;
font-size:19px;
margin-top:100px;
}
#header .info-area .txt .cufon {
float:left;
margin:0 !important;
}
#header .info-area .txt .text .cufon {margin-top:1px !important;}
#header .info-area .title {
color:#a9cfdd;
font-size:48px;
position:absolute;
line-height:51px;
padding-top:55px;
width:550px;
}
#header .info-area .title span {
font-size:35px;
line-height:36px;
display:block;
overflow:hidden;
width:100%;
height:32px !important;
padding-top:1px;
}
#header .info-area .title em {
font-style:normal;
display:block;
overflow:hidden;
width:100%;
height:53px !important;
}
#header .info-area .desc {
font-family: "Arial Narrow", sans-serif;
line-height:20px;
margin: 8px 0 25px 3px;
font-size:19px;
letter-spacing:2px;
position:absolute;
z-index:9999 !important;
padding-top:130px;
width:550px;
}
#header .info-area .txt .text {
display:block;
overflow:hidden;
height:1%;
padding:0 0 5px;
}
#header .info-area .txt .text1 {
background:url(http://www.supernaturalsilver.com/img/ico03.gif) no-repeat 2px 9px;
padding:26px 0 27px 114px;
}
#header .info-area .img {
float:right;
position:relative;
margin-left:500px;
margin-top:-100px;
}
#header .info-area .more {
overflow:hidden;
height:25px;
letter-spacing:1px !important;
margin-top:23px;
margin-left:-3px;
}
#header .info-area .more a {
color:#f6f8f9;
float:left;
background:url(http://www.supernaturalsilver.com/img/bullet05.gif) no-repeat 5px 3px;
padding:0 0 0 19px;
font-size:18px;
}
#header .info-area .more a span {
float:left;
margin-left:-2px;
padding-bottom:0;
}
#header .info-area .more a:hover {text-decoration:none;}
#header .info-area .more a:hover span {
border-bottom:1px solid #f6f8f9;
padding:0;
}
/* main */
#main {
overflow:hidden;
width:100%;
padding:58px 0 122px;
background:url(http://www.supernaturalsilver.com/img/bg-main-area.gif) repeat-x;
}
/* onecolumn */
#onecolumn {
margin:0 auto;
overflow:hidden;
width:1004px;
position:relative;
}
#onecolumn ul {
margin:10px 0 10px 25px;
}
#onecolumn li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:16px;
background:url(http://www.supernaturalsilver.com/img/bullet03.gif) no-repeat 2px 6px;
}
#onecolumn h2 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 8px 0;
}
#onecolumn h2 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#onecolumn h2 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
padding-bottom:15px;
}
#onecolumn h2 .cufon {
float:left;
margin:0 !important;
}
#onecolumn h3 {
color:#676a6b;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 10px;
}
#onecolumn h3 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#onecolumn h3 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
}
#onecolumn h3 .cufon {
float:left;
margin:0 !important;
}
#onecolumn .content {
padding:0 48px 10px 48px;
}
#onecolumn content p {margin:0 0 16px;}
/* twocolumns */
#twocolumns {
margin:0 auto;
overflow:hidden;
width:1004px;
position:relative;
}
#twocolumns h2 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 14px 0;
}
#twocolumns h2 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#twocolumns h2 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
font-size:30px;
}
#twocolumns h2 .cufon {
float:left;
margin:0 !important;
}
#twocolumns h3 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 10px;
}
#twocolumns h3 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#twocolumns h3 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
font-size:26px;
}
#twocolumns h3 .cufon {
float:left;
margin:0 !important;
}
#twocolumns h4 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
font-size:16px;
margin: 10px 0 17px 2px;
}
/* content */
#content {
position:relative;
float:left;
width:596px;
padding:0 20px 10px 48px;
z-index: 99999 !important;
}
#content p {
margin:0 2px 16px;
line-height:18px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;
}
#content p img {
padding:10px;
}
#content .more {
overflow:hidden;
height:1%;
padding:0 0 16px 4px;
font-size:14px;
}
#content .more a {
float:left;
background:url(http://www.supernaturalsilver.com/img/bullet01.gif) no-repeat 0 55%;
padding:0 0 0 13px;
color:#404344;
}
#content .more a:hover {
color:#138db7;
}
/* video-block */
#content .video-block {
width:616px;
margin:0 -20px 0 -19px;
position:relative;
padding:0 4px 0 15px;
background:#d4dadb url(http://www.supernaturalsilver.com/img/bg-video-block.gif) repeat-x;
}
#content .video-block:after {
display:block;
clear:both;
content:"";
}
#content .video-block .heading {
background:url(http://www.supernaturalsilver.com/img/bg-heading.gif) no-repeat;
width:176px;
height:51px;
position:relative;
margin:0 0 4px -7px;
padding:25px 0 0 15px;
}
#content .video-block .info-col {
float:left;
width:271px;
padding:0 0 0 7px;
margin:-6px 0 0;
position:relative;
}
#content .video-block h3 {
overflow:hidden;
width:100%;
padding:3px 0 0;
margin:0;
}
#twocolumns .video-block strong {
width:auto;
float:left;
display:inline;
font-size:18px;
color:#fff;
}
#twocolumns .video-block span{
width:auto;
float:left;
display:inline;
font-size:25px;
color:#fff;
}
/* list */
#content .video-block .list {height:1%;}
#content .video-block .list li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 13px 13px;
line-height:14px;
background:url(http://www.supernaturalsilver.com/img/bullet02.gif) no-repeat 1px 4px;
}
#content .video-block .list li h4 {
font-size:13px;
line-height:15px;
font-weight:normal;
color:#967723;
}
#content .video-block .list li h4 a {color:#967723;}
#content .video-block .list li p {margin:0;}
#content .video-block .video {
float:right;
margin:0 0 -8px;
padding:30px 0 0;
position:relative;
}
#content .video-block .video img {display:block;}
#content blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
#content blockquote p {margin:0;}
#content blockquote cite {font-style:normal;}
/* blocks */
#content .blocks {
overflow:hidden;
width:582px;
}
#content .blocks h3 {
font-size:14px;
line-height:18px;
font-weight:normal;
color:#4499b7;
margin:0 0 13px;
}
#content .block-holder {
width:590px;
overflow:hidden;
margin:0 -8px 5px 0;
}
#content .blocks .block {
width:290px;
margin:0 4px 0 0;
padding:18px 0 10px;
float:left;
color:#ba9d50;
font-size:11px;
line-height:13px;
background:#dcddde;
}
#content .blocks .block .img {
overflow:hidden;
width:100%;
text-align:center;
margin:0 0 18px;
}
#content .blocks .block .img img {vertical-align:top;}
#content .blocks .block p {
text-align:center;
margin:0;
}
#content .blocks .block p a {color:#ba9d50;}
#content ul {
margin:10px 0 10px 25px;
}
#content li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:16px;
background:url(http://www.supernaturalsilver.com/img/bullet03.gif) no-repeat 2px 6px;
}
/* sidebar */
#sidebar {
float:right;
position:relative;
width:315px;
padding:0 3px 0 10px;
overflow:hidden;
z-index: 99999 !important;
}
#sidebar p {
margin-left:2px;
}
/* news-list */
#sidebar .news-list {
width:300px;
padding:0 15px 19px 0;
}
#sidebar .news-list li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:14px;
background:url(http://www.supernaturalsilver.com/img/bullet03.gif) no-repeat 2px 6px;
}
#sidebar .news-list li h4 {
font-size:13px;
line-height:15px;
font-weight:normal;
margin:0 0 1px;
}
/* news-list1 */
#sidebar .news-list1 {
padding-right:0;
padding-bottom:14px;
width:300px;
}
#sidebar .news-list1 li {
background-position:3px 6px;
padding-left:17px;
}
#sidebar .news-list1 h4 {
color:#967723;
position:relative;
word-spacing:-1px;
}
#sidebar .news-list1 h4 a {color:#967723;}
/* #sidebar .news-list1 h4 a {color:#967723;} */
/* info-list */
#sidebar .info-list {
width:269px;
padding:1px 0 0;
}
#sidebar .info-list li {
overflow:hidden;
height:1%;
font-size:25px;
line-height:27px;
margin:0 0 2px;
vertical-align:top;
background:url(http://www.supernaturalsilver.com/img/bg-info-list.gif) no-repeat;
}
#sidebar .info-list li a {
float:left;
padding:9px 10px 4px 41px;
color:#138db7;
background:url(http://www.supernaturalsilver.com/img/bullet04.gif) no-repeat 13px 50%;
}
#sidebar .info-list li a .cufon {
float:left;
margin:0 !important;
}
#sidebar .info-list li a:hover {text-decoration:none;}
#sidebar .info-list li a span {
float:left;
margin:0 2px 0 0;
}
#sidebar .info-list li a strong {float:left;}
#sidebar .view {
display:block;
background:url(http://www.supernaturalsilver.com/assets/files/img/btn/online-store.png) no-repeat;
color:#fff;
font-size:30px;
width:191px;
height:75px;
margin:0 0 0 -8px;
padding:22px 115px 0 18px;
}
#sidebar .view span {
font-size:30px;
overflow:hidden;
width:100%;
display:block;
}
#sidebar .view strong {
overflow:hidden;
width:100%;
display:block;
}
#sidebar .view .cufon {
float:left;
margin:0 !important;
}
#sidebar .view:hover {text-decoration:none;}
/* footer */
#footer {
height:206px;
position:relative;
overflow:hidden;
margin:-106px 0 0;
font-size:11px;
line-height:14px;
color:#9ddbf1;
background:#1494c1 url(http://www.supernaturalsilver.com/img/bg-footer.gif) repeat-x;
}
/* footer-area */
.footer-area {
margin:0 auto;
width:948px;
padding:52px 1px 0;
}
.footer-area p a {color:#000000;}
#footer .copyright {
float:left;
width:390px;
margin:5px 30px 0 0;
}
#footer .copyright p {text-align:right;}
#footer .logo1 {
float:left;
background:url(http://www.supernaturalsilver.com/img/logo01.png) no-repeat;
width:130px;
height:102px;
overflow:hidden;
text-indent:-9999px;
position:relative;
margin:-52px 30px 0 0;
}
#footer .logo1 a {
display:block;
height:100%;
}
/* info */
#footer .info {
float:left;
width:350px;
position:relative;
margin:-9px 0 0;
}
#sidebar form {
width : 295px;
height : auto;
text-align : left;
margin-top : 10px;
margin-bottom:25px;
border: none;
}
#sidebar input {
width : 240px;
height:20px;
background : url(http://www.supernaturalsilver.com/img/bg-input.png) no-repeat scroll 0% 0%;
color : #666;
font-size : 14px;
margin-bottom : 6px;
padding : 10px 10px 8px 10px;
border:0;
}
#sidebar textarea {
width : 265px;
height : 105px;
background : url(http://www.supernaturalsilver.com/img/textarea-b.png) no-repeat scroll 0% 0%;
padding : 10px 30px 10px 10px;
font-size : 14px;
color : #666;
margin-bottom : 1px;
border:0;
}
#sidebar .button {
background : url(http://www.supernaturalsilver.com/img/button.png) no-repeat 0% 0%;
width : 104px;
height : 30px;
color : #fff;
font-size : 13px;
cursor:pointer;
margin-top:10px;
margin-left:180px;
padding : 5px 0 5px 0;
border:0;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#sidebar .invalidValue {
color:#c21313;
}
Can you tell me how to achieve that the texts "Water" and "Scandinavia" appear on top in their columns?
In your CSS you have specifically set your vertical-align to middle, which may be overriding the valign attribute. Take a look at this rule:
table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:middle;}
When I set the property to top there everything appears as expected.
You're using tables, which is strongly discouraged, especially as of late, and you're not even using them correctly...
Your line breaks in the table data are expanding the row vertically. The vertically aligned middle table data (in this case the water and scandinavia bits) is being centered in a larger row than you would like. It would be better to change the structure of your footer, but with minimal changes, you could get away with changing the rowspan to the amount of line breaks inside of it.
I know a trick, play with padding-top.