Hi all,
Please take a look on this page:
94.194.226.86/elgin2/index.php
it looks nice and tidy on FF / Safari and Chrome but not on IE
I don’t understand how IE works.
What am I doing wrong?
Thanks!
Hi,
The sticky footer method you are using won’t work in Ie7, IE8 or opera and isn’t working in IE6 either because you failed to add a clear both to the push element.
See the sticky faq for a full explanation of the correct sticky footer technique.
It looks as though you were going to do a global reset but missed out the univesal selector here.
{
margin: 0;
}
I’m assuming you meant:
*{margin:0;padding:0}
Alternatively you could just address the elements you use and avoid the problem with form elements when margins and padding are removed.
Because you missed the universal selector you have added hacks to your lists such as a negative margin to line it up. This will be different in various browsers because some add left padding by default and some add left margin. You just need to set left margin and padding to zero and then set just one of then to get the spacing you need.
In IE7 the header is wrong because of the text-align:center on the body that is centering the header as IE7 and under centre block elements when text-align:ceter is placed on the parent. You need to set the container to text-align:left to counter this.
You can use the first-letter pseudo element instead of a span with a class and get ie to behave better.
Float the image and don’t use align=left as that is deprecated and may conflict anyway.
Here is a revision with all the above changes added and is now working in all browsers much the same (apart from the transparent png in ie6 of course).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Elgin Dental Care</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
[B]img{border:none}[/B]
html, body {
height: 100%;
[B] margin: 0;
padding:0;[/B]
}
body {
font-family: Calibri, Corbel, Tahoma, sans-serif;
font-size: 62.5%;
text-align: center;
background-color: #F3EAD7;
}
#container {
width: 1024px;
background-color: #F3EAD7;
[B] min-height: 100%;
margin: 0 auto -90px;
text-align:left;[/B]
}
[B]* html #container {
height:100%
}[/B]
#header {
position:fixed;
height:120px;
}
#nav {
width: 600px;
height: 40px;
margin-top: -10px;
background-color: #B8BC9B;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 10px;
color:#fff;
float:left;
}
#nav a {
color: white;
text-decoration: none;
}
#nav a:hover {
color: black;
}
.on {
color: white;
text-decoration: underline;
font-weight: bold;
font-size:1.0em;
}
#nav ol {
[B] margin:0;[/B]
}
#nav li {
float: left;
list-style: none;
padding-top:15px;
font-size:1.5em;
}
.selected {
font-weight: bold;
text-decoration: underline;
}
#logo {
float:left;
margin-left:100px;
margin-top: -10px;
}
#content {
clear: both;
text-align: left;
padding-left: 45px;
padding-top: 105px;
}
[B]* html #content {
padding-top:0;
height:1%;
overflow:visible;
}[/B]
#content h1 {
font-size: 2.3em;
[B] margin:0 0 .5em;[/B]
}
#content_how {
clear: both;
text-align: left;
padding-top: 105px;
}
#content p {
font-size: 1.6em;
text-align: justify;
padding-right:30px;
line-height: 22px;
[B] margin:0 0 1em;[/B]
}
#content_how p {
font-size: 1.6em;
text-align: justify;
padding-right:30px;
line-height: 22px;
}
#picture {
float: left;
width:350px;
[B] padding:0 0 20px;[/B]
}
#pic3 {
float: left;
width: 300px;
}
#how_text {
margin-left: 315px;
width:653px;
}
#how_left_text {
width:318px;
float:left;
}
#how_right_text {
float:right;
font-size:1.4em;
width:335px;
}
#text {
padding-top:30px;
float: left;
width:500px;
}
#text_no_pic {
padding-top:30px;
width:820px;
padding-left: 120px;
}
.fee_desc {
width: 705px;
font-weight: bold;
font-size: 1.9em;
}
.fee_price {
font-weight: bold;
font-size: 1.9em;
}
[B]p.firstp:first-letter {
font-size:3.8em;
position:relative;
}
#push {
height: 90px;
clear:both;
}[/B]
#footer {
clear:both;
background-color: #B8BC9B;
color:white;
height: 90px;
font-size:1.4em;
font-weight: bold;
width:100%;
line-height: 25px;
}
[B]/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#container:after {
clear:both;
display:block;
height:1%;
content:" ";
}[/B]
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="nav">
<ol>
<li><span class="selected">home</span> |</li>
<li> <a href="how.php">how we work</a> |</li>
<li> <a href="treatments.php">treatments</a> |</li>
<li> <a href="team.php">the team</a> |</li>
<li> <a href="fees.php">fees</a> |</li>
<li> <a href="testimonials.php">testimonials</a> |</li>
<li> <a href="fees.php">how to find us</a></li>
</ol>
</div>
<div id="logo"> <a href="index.php"><img src="http://94.194.226.86/elgin2/images/ElginDCLogo.jpg" width="245" alt="Elgin Dental Care logo" /></a> </div>
</div>
<div id="content">
<h1>A progressive private dental practice,<br />
where the interests of patients are paramount </h1>
[B] <div id="picture"> <img src="http://94.194.226.86/elgin2/images/test.jpg" alt="" /> </div>[/B]
<div id="text">
[B] <p class="firstp">Does your dental health and fitness matter to you? It certainly matters to us.</p>[/B]
<p>We care about our patients and giving them what they want. We make available everything from a thorough dental health check right
through to dental implants and teeth whitening, so we cater for most of our patients’ dental needs. We provide flexible opening hours with <b>late</b> appointments on a Tuesday until 8.30 pm and appointments from 8am on Thursdays and Fridays and we are <b>open on a Saturday</b> twice a month.
If you would like to know more about the caring and knowledgeable service we provide, make an appointment to talk to a dentist and find out
how we can help you.</p>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"> Elgin Dental Care •
284 Elgin Avenue •
Maida Vale •
London W9 1JR
Tel: 020 7286 1830
info@elgindentalcare.co.uk </div>
</body>
</html>
Most of the changes are marked in bold (but double check).
Many thanks for your help! almost solved all the problems!
but…
the sticky footer doesn’t work as expected over here:
94.194.226.86/elgin2/team.php
they should be at the bottom. What do I do wrong?
Hi,
You missed the universal selector out again.
html #container {
height:100%
}
It should be:
* html #container {
height:100%
}
You ended up giving everyone an initial 100% height only and the layout could never grow. Only ie6 gets the 100% height using the star seclector hack (* html) because ie6 treats height as a minimum anyway.
thanks that solved it!