PDA

View Full Version : CSS Layout not working in ie-7 and previous


kt1978
04-12-2010, 10:42 AM
Hi all

I'm new to web design, been doing it for just over a week and already I have (well, i thought) redesigned my pages so much better with the use of div's and css instead of tables... (after reading about not using tables etc for layout.)

Gutted!

I have IE8 and firefox and the layout is fine. I uploaded to the web and thought I'd ring a friend to have a look to see if everything was as it should be... WRONG! He said it was all over the place, so I installed some older versions of IE to have a look.

Here is a the site.

http://www.daisychainchildrensnursery.com/

This looks fine in IE8 and firefox (3.6.3).

It looks different in IE7 and different again in IE6.

Could someone point me in the right direction to fix this please.

Is this gonna be some kind of IF statements?

Here is the CSS
body {
background-image: url(../images/new_bg4.jpg);
font-family: "Comic Sans MS", Arial;
}
h1 {
font-family: "Kristen ITC", "Comic Sans MS", Arial;
font-size: 24px;
font-weight: lighter;
margin: 5px;
}
h2 {
font-family: "Kristen ITC", "Comic Sans MS", Arial;
font-size: 12px;
}
#wrapper #body #right_col #content table {
font-family: "Kristen ITC", "Comic Sans MS", Arial;
font-size: 12px;
font-weight: bold;
}

p {
font-size: 14px;
font-family: "Comic Sans MS", Arial;
}
a {outline:none;}
#clearboth {
clear: both;
}
#wrapper {
min-width:900px;
margin-top: 20px;
margin-right: 4%;
margin-bottom: 5px;
margin-left: 4%;
}
#wrapper #img_stem_1 {
background-image: url(../images/img_stem_1.gif);
height: 20px;
}
#wrapper #img_stem_2 {
background-color: #FFFF00;
height: 20px;
background-image: url(../images/img_stem_2.gif);
}
#wrapper #img_stem_3 {
clear:both;
background-color: #FFFF00;
background-image: url(../images/img_stem_1.gif);
height: 20px;
}
#wrapper #img_stem_4 {
background-image: url(../images/img_stem_2.gif);
height: 20px;
}
#wrapper #header {
background-image: url(../images/imgLogo.gif);
height: 150px;
background-repeat: no-repeat;
background-position: center;
background-color: #FFFFFF;
}
#wrapper #header #nursery1 {
text-align: left;
margin-top: 15px;
float: left;
margin-left: 20px;
}
#wrapper #header #nursery {
text-align: right;
margin-top: 15px;
float: right;
margin-right: 20px;
}
#wrapper #body {
background-image: url(../images/img_bg_320.jpg);
}
#wrapper #body #button_container {
float: left;
height: 320px;
width: 45px;
}
#wrapper #body #button_container #button_home {
margin-top: -15px;
}
#wrapper #body #button_container #button_staff {
margin-top: 25px;
}
#wrapper #body #button_container #button_brochure {
margin-top: 65px;
}
#wrapper #body #button_container #button_gallery {
margin-top: 105px;
}
#wrapper #body #button_container #button_menu {
margin-top: 145px;
}
#wrapper #body #button_container #button_ofsted {
margin-top: 185px;
}
#wrapper #body #button_container #button_contact {
margin-top: 225px;
}
#wrapper #body #button_container #button_terms {
margin-top: 265px;
}
#wrapper #body #button_container .buttons {
float: left;
margin-left: -15px;
position: absolute;
height: 47px;
width: 40px;
}
#wrapper #body #left_col {
float: left;
width: 160px;
height: 320px;
}
#wrapper #body #left_col .img_holder {
height: 35px;
width: 160px;
padding-top: 5px;
}
#wrapper #body #right_col {
display:block;
margin-left: 210px;
text-align: center;
height: 320px;
vertical-align: middle;
}
#wrapper #body #right_col #content{
width: 100%;
height: auto;
display: table;
}
#wrapper #body #right_col #content #split_1 {
height: 200px;
width: 50%;
float: left;
padding-top: 30px;
}
#wrapper #body #right_col #content #split_2 {
height: 100%;
width: 50%;
float: right;
}
#wrapper #body #right_col #content .mid{
vertical-align: middle;
text-align: center;
display: table-cell;
}
/*Hack for ie: IS THIS NEEDED*/
#wrapper #body #right_col #content p{
*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
#wrapper #footer {
width: 100%;
margin: auto;
display: table;
height: 120px;
padding:0;
clear: both;
background-color: #FFFFFF;
}
#wrapper #footer_container {
display: table-row;
padding:0;
margin: 0;
}
#wrapper #footer_container_left {
vertical-align: bottom;
min-width:240px;
width:240px;
display: table-cell;
padding-left: 20px;
}
#wrapper #footer_container_middle {
min-width:380px;
vertical-align: middle;
text-align:center;
display: table-cell;
}
#wrapper #footer_container_right {
text-align:right;
width:260px;
min-width:260px;
display: table-cell;
}
#wrapper #footer #footer_container #footer_container_middle .footer {
margin: 0px;
padding: 0px;
font-size: 12px;
}
#wrapper #footer #footer_container #footer_container_middle .ktdesigns {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
#scroll {
background-color: #FFFFFF;
margin: 10px;
height: 280px;
overflow: auto;
border: 2px solid #000000;
padding: 10px;
}
.terms_title {
font-family: "Comic Sans MS", Arial;
font-size: 11px;
font-weight: bold;
text-align: left;
}
.terms_signatue {
padding: 10px;
border: 2px solid #000000;
text-align: center;
margin: 10px;
font-size: 10px;
}

.terms {
font-family: "Comic Sans MS", Arial;
font-size: 10px;
text-align: left;
}
#wrapper #footer #footer_container #footer_container_middle #counter {
text-align: center;
width: 100%;
}
#wrapper #footer #footer_container #footer_container_middle #counter img {
position: absolute;
margin-bottom: 100px;
}
#wrapper #footer #footer_container #footer_container_middle img {
text-align: center;
}


Thanks in advance.

kt1978
04-12-2010, 01:04 PM
What's even more annoying with this now is that since I have installed the multiple versions of IE it doesn't display properly at all.

It still works fine on my other computer with IE8 installed and looks spot on in Firefox.

Need to get this to work correctly in all browsers... or at least from say version 6 onwards?!?!?

Can anyone help please!

DWcourse
04-12-2010, 01:47 PM
This is basically a 2-column design with a header and footer and can be accomplished with just five divs. There's no need to wrap every item on your page in its own div. You really need to find a tutorial on CSS design and positioning using.

kt1978
04-12-2010, 06:09 PM
I'm going to be starting a proper course soon, like I said I have only been doing this just over a week... If you'd have seen my first attempt it makes this one look quite good. lol

I'm back to the drawing board with regards to the layout and am determined to learn things the right or 'prefered' way.

gentleone
04-13-2010, 05:10 AM
It's good that you're using divs and css for your layout, but the way you used divs goes by the name 'divitis'.
http://csscreator.com/divitis

kt1978
04-13-2010, 09:11 AM
Hi

Great link explaining what I was doing wrong.

I have done this layout sample now through trial and error and searching around the net.

Before I keep going, is this on the right track. This has got some pre IE8 browsers.

Also, How do I get the h2 heading to be at the top of the center box. I can do it for pre IE8 browsers by putting the <h2> before the .inner class but it doesn't work for IE8.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My Page Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
min-width:800px;
margin: 30px 30px 4% 4%;
}
h1 {
background-color: #99FF99;
height: 190px;
}
#left {
width:200px;
background-color:#FFFF00;
min-height:320px; /* for modern browsers */
height:auto !important; /* for modern browsers */
_height:320px; /* for IE5.x and IE6 */
overflow: auto;
float: left;
}
#center {
background-color: #FFCCFF;
}
#right {
background-color: #66CCFF;
width: 300px;
float: right;
}
.outer {
display: table;
height: 320px;
min-height:320px;
}
.inner {
display: table-cell;
vertical-align: middle;
background-color: #CCCCCC;
width: 100%;
text-align: center;
}
#footer {
clear:both;
background-color:#CC0000;
height:160px;
vertical-align: text-top;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.outer {
position:relative; /* for lte IE7 */
}
.inner {
position: absolute; /* for lte IE7 */
top: 50%; /* for lte IE7 */
}
.inner span {
position: relative;
top: -50%;
}
</style>
<![endif]-->
</head>
<body>
<h1>Header</h1>
<div id="left">Left</div>
<div id="right" class="outer">
<div class="inner"> <span>
<p>This text is centered horizontally and vertically.<br />
This works in IE5.5 onwards. Fixes have been added for versions prior to IE8. Works with Firefox 3.6.3, Google Chrome 4.1.249.1045, Safari 4.0.5</p>
</span> </div>
</div>
<div id="center" class="outer">
<div class="inner"> <span>
<h2>Content Title</h2>
<p>This text is centered horizontally and vertically.<br />
This works in IE5.5 onwards. Fixes have been added for versions prior to IE8. Works with Firefox 3.6.3, Google Chrome 4.1.249.1045, Safari 4.0.5</p>
</span> </div>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</body>
</html>

kt1978
04-13-2010, 01:03 PM
Hi again

Can I have some advice/help on the following example please. I've cut this out of my page just to keep the example as simple as poss.

I have been reading lots about positioning with CSS and the correct way to do it (avoiding divitis...)

I just can't get this to work any other way than how I have done it.

Here's what it is just so its clear what I'm doing... and why!!!

img_stem_1 & img_stem_2 = div with image as background. image repeats

I have put these in divs so that I can make them repeat as the screen expands. If I don't put them in div's the image would just stretch

header = div containg logo as background and two floating images
nursery1 & nursery = floating images

I have managed to do this using h1 as in the link example and then have the two images floating over it but it didn't work in IE6

The example of how to use tags for headers in the link that gentleone put on here won't (well, I can't) work for this scenario.

I have got rid of 2 divs that had the floating images in. You can see I have just added a class to the image to handle them.

appreciate any assistance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Header</title>
<style type="text/css">
* {
margin: 0px;
padding:0;
}
body {
margin-top: 30px;
margin-right: 5%;
margin-bottom: 30px;
margin-left: 5%;
}
#header {
background-color: #00FFFF;
height: 150px;
background-repeat: no-repeat;
background-position: center;
}
#img_stem_1 {
height: 20px;
background-color: #FF00FF;
}
#header .img_1 {
margin-top: 15px;
margin-left: 20px;
height: 114px;
width: 155px;
float: left;
}
#header .img_2 {
margin-top: 15px;
margin-right: 20px;
height: 114px;
width: 155px;
float: right;
}
#img_stem_2 {
height: 20px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="img_stem_1"></div>
<div id="header">
<img class="img_1" src="" width="155" height="114" alt="" />
<img class="img_2" src="" width="155" height="114" alt="" />
</div>
<div id="img_stem_2"></div>
</body>
</html>


Thanks again.

kt1978
04-16-2010, 12:57 AM
Can any assist on the previous 2 posts ?