logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 04-12-2010, 10:42 AM   #1
kt1978
 
Join Date: Mar 2010
Posts: 16
Default CSS Layout not working in ie-7 and previous

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
HTML Code:
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 is offline   Reply With Quote
Old 04-12-2010, 01:04 PM   #2
kt1978
 
Join Date: Mar 2010
Posts: 16
Default

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!
kt1978 is offline   Reply With Quote
Old 04-12-2010, 01:47 PM   #3
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 04-12-2010, 06:09 PM   #4
kt1978
 
Join Date: Mar 2010
Posts: 16
Default

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.
kt1978 is offline   Reply With Quote
Old 04-13-2010, 05:10 AM   #5
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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
gentleone is offline   Reply With Quote
Old 04-13-2010, 09:11 AM   #6
kt1978
 
Join Date: Mar 2010
Posts: 16
Default

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.

HTML Code:
<!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 is offline   Reply With Quote
Old 04-13-2010, 01:03 PM   #7
kt1978
 
Join Date: Mar 2010
Posts: 16
Default Specific example

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.

HTML Code:
<!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 is offline   Reply With Quote
Old 04-16-2010, 12:57 AM   #8
kt1978
 
Join Date: Mar 2010
Posts: 16
Default

Can any assist on the previous 2 posts ?
kt1978 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:27 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com