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.
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;}
I have modified App footer to stay at the bottom of the page if the page content is little.
So it wouldn't left free space afterwards. It works just great.
But now I discovered that in pages where content is much more than it fits in current window, footer has stayed at the same place, but the content expands in background of footer.
It looks like
this
My CSS for footer.
#footerCntr {
position:absolute;
bottom:0;
width:100%;
overflow: hidden;
background:#e7e7e7;
border-top:3px solid #b7b7b7;
margin:11px 0px 0px 0px;
}
.footerBox{
width:780px;
margin: 0px auto;
padding:11px 0px 14px 0px;
}
.footerBoxLeft{
float:left;
width:176px;
padding:8px 0px 9px 26px;
background:url(bordery.gif) right top repeat-y;
}
.footerBoxLeft img{
float:left;
margin:0px 0px 0px 2px;
}
.footerBoxRight{
float:right;
width:575px;
padding:0px 0px 10px 0px;
}
.footerlink ul{
padding:7px 0px 5px 0px;
}
.footerlink ul li{
list-style:none;
padding:0px 10px 0px 10px;
display:inline;
background:url(devider.gif) 0px 3px no-repeat;
}
.footerlink ul li a{
font:10px Tahoma , Arial, Helvetica, sans-serif;
color:#535353;
text-decoration:none;
padding:0px 0px 0px 0px;
}
.footerlink ul li a:hover{
text-decoration:underline;
}
.copyright{
color:#535353; padding:0px 0px 0px 10px;
}
.copyright a{
font:10px Tahoma , Arial, Helvetica, sans-serif;
color:#535353;
text-decoration:none;
padding:5px 0px 0px 0px;
}
.copyright a:hover{
text-decoration:underline;
}
Link to my app problem.
It could be problem with content CSS formating ?
here
I cannot put my menu in the center of the page, i've inserted all "margin: 0 auto;" i can and all "text-align: center", and the div is separated from everything, is not a child of something else..
here's the css code:
.more{
margin: 0 auto;
position:relative;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 40%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
}
.more ul li{
display: block;
padding: 10px 3px;
float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
float:left;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}
And here's the HTML code:
<div class="more">
<ul>
<li class="selected">Homepage Blog</li>
<li>Cerca</li>
<li>Archivio</li>
<li>Tags</li>
</ul>
</div>
How-to make the div permanently in the center of my page? I've tried lot, lot, lot of possible moves.
Thank you.
p.s. I've also tried to put a <div align=center> ...my menu (class=more) list ...</div>
Remember that you can't use margin:0 auto on floatted element.
Keys for margin 0 auto are:
1) element must have display:block
2) no float, absolute or fixed position
.more{
float:left;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 100%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
margin:0 auto;
}
.more ul li{
display: inline-block;
padding: 10px 3px;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}
I have some navigation links at the top of the page that I am having trouble placing in the centre of the screen. Can anybody suggest where I'm going wrong in the CSS?
Image:
http://i.imgur.com/SUTWr.png
Here's the CSS:
#nav {
list-style-type:none;
text-align:center
}
ul li {
display:inline-block;
border-radius:10px;
background:#EEE;
margin:5px;
}
li a {
float:left;
padding:30px;
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
box-shadow:3px 3px black;
}
li a:hover {
background:#CCC;
color:#333;
}
li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}
Thanks
Hi actually i have updated your css now i hope this work will for you :-
DEMO
CSS
#nav {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: none repeat scroll 0 0 #B8B8B8;
height: 400px;
list-style-type: none;
margin: auto;
padding: 40px 0;
width: 400px;
}
ul li {
display:inline;
}
li a {
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
background:#EEE;
margin:5px;
padding:30px;
box-shadow:3px 3px black;
}
li a:hover {
background:#CCC;
color:#333;
}
li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}
Here's a quick demo of how to center a UL: http://jsfiddle.net/73Mum/1/
<div class="wrap">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
.wrap {
text-align:center;
background:#999;
padding:100px 0;
}
ul {
width:500px;
margin:0 auto;
}
ul li {
display:inline-block;
padding:10px;
background:#ccc;
}
Try wrapping these <ul>-tags with a <div style="margin-left: auto; margin-right: auto">.
This way you center all <ul>-tags at once.
If "1,2,3,4,5" in your picture are the ul-elements and #nav is the id of your surrounding div, you can just add margin-left: auto; margin-right: auto to #nav in your stylesheet.
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.