6 replies [Last post]
dwpcss
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-04-13
Posts: 8
Points: 0

Hi

I have the code below but i cant get it to work in IE, it works perfectly in mozilla but when in ie it messes up, i tried to re create it a different way but i keep having problems aligning the footer,

if anyone can help or can edit it so it just works in IE and not mozilla it would be a great help as i can then do a browser check and load the apropriate stlye sheet.

cheers

CSS
body { /*sets properties for the body of the document*/
background-color:#ffffff;
margin:0px 0px 0px 0px;
}
#container { /*sets the properties for the container that all the elements are placed in.*/
margin-top: 50px; /*distance from top of browser window*/
margin-left: 50px; /*discance from left of browser window*/
margin-right: 50px; /*distance from right of browser window*/
margin-bottom: 50px; /*distance from bottom of browser window*/
padding: 0px; /*padding for the edges of the container*/
background-color: #66ccff; /*sets the background colour to blue*/
width: 80%; /*sets the width of the container*/
min-width: 241px; /*sets the minimum width of the container*/
}

#footer { /*sets the properties of the footer container*/
padding: 0px; /*sets the padding*/
position: relative; /*sets the position so it is relative to the container its in*/
background-color: #FFFFFF; /*sets background colour to white*/
width: 100%; /*sets width to 100% of the container*/
clear:both; /*clears around the container....vital dont remove it.*/
}

#content { /*sets the properties for the content*/
margin-left: 180px; /*margin from the left of the container...leaves space for leftnav*/
height: *%; /* sets height of content to fill all availble space*/
background-color: #66ccff; /* sets background colour to blue*/
align: right; /*aligns content frame to right of the container*/
min-height: 250px; /*sets the minimum height for the window...same as bg image for left nav*/
padding-left: 5px; /*sets the content padding to 5px so there is some space between txt and edge of frame*/
/*overflow:hidden; can also be set to visible this causes some silly problems*/
border-left: 2px solid; /* sets the left border.. needed so when the content stretches the border stretches with it*/
border-color: #663300; /*sets border colour to brown*/
}

#leftnav { /*sets properties for the left nav bar*/

float:left; /* floats the navigation panel on the left of container*/
background-color : #66ccff; /* sets bg colour to blue*/
width: 180px; /*sets withd of the left nav*/
padding-top: 30px; /*sets padding from top of container*/
border-right: 2px solid; /*sets border so that when nav is extended border continues*/
border-color: #663300; /*sets border colour to brown*/
}

#topleftspace { /*sets properties for the top left space where the rounded corner will go*/
position: absolute; /*sets positioning for element*/
background-color: #66ccff; /*sets bg colour to blue*/
width: 180px; /*sets witdh of element*/
height: 20px; /*sets height of element*/
}

#toprightspace { /*sets propertiese for the top right space where the rounded corner goes.*/
margin-left: 180px; /*sets positioning for element*/
background-color: #66ccff; /*sets bg colour to blue*/
height: 20px; /*sets witdh of element*/
padding-left:5 px; /*sets height of element*/
}

#topleftcorner { /*sets properties for the top left corner...where the gif goes*/
text-align: left; /*aligns the rounded corner gif*/
}

#toprightcorner { /*sets properties for the top left corner...where the gif goes*/
text-align: right; /*aligns the rounded corner gif*/
}

#topleftwhite { /*sets the top white space where text could possibly go*/
position: absolute; /*sets position*/
background-color: #FFFFFF; /*sets bg colour to white*/
width: 180px; /*sets width*/
height: 30px; /*sets height*/
border-right: 2px solid; /*sets border*/
border-color: #663300;/*sets border colour to brown*/
}

#toprightwhite { /*sets the top white space where text could possibly go*/
margin-left: 180px; /*sets margin from the left of the page to cope with topleftwhite*/
background-color: #FFFFFF; /*sets bg colour to white*/
height:30px; /*sets height*/
padding-left:5px; /*sets padding*/
}

#bottomleftspace { /*sets the space where the bottom rounded corner goes*/
position: absolute; /*sets position*/
background-color: #66ccff; /*sets colour*/
width: 180px; /*sets width*/
height :20px; /*sets height*/
border-right: 2px solid; /*sets border*/
border-color: #663300; /*sets border colour*/
}

#bottomrightspace {/*sets space where rounded corner will go*/
margin-left: 180px; /*sets left margin to cope with left spaces*/
background-color: #66ccff; /*sets bg colour*/
height: 20px; /*sets height*/
padding-left: 5px; /*sets padding*/
}

#bottomleftcorner { /*sets properties for the bottom corner gif*/
text-align: left; /*aligns the gif*/
}

#bottomrightcorner { /*sets properties for the bottom corner gif*/
text-align: right; /*aligns the gif*/
}

#bottomleftwhite { /*sets the white space for the bottom*/
position: absolute;/*sets position*/
background-color: #FFFFFF; /*sets the bg colour*/
width: 180px; /*sets width*/
height: 30px; /*sets height*/
border-right: 2px solid; /* sets border*/
border-color: #663300; /*sets border colour*/
}

#bottomrightwhite {/*sets the white space for the bottom*/
margin-left: 180px; /*sets margin width to cope with left space*/
background-color: #FFFFFF; /*sets bg colour*/
height: 30px; /*sets height*/
padding-left: 5px; /*sets padding*/
}

#heading1 { /* sets the main heading properties*/
font-size: 22px ; /* font size*/
font-weight: bold; /* font weight*/
color: black; /* font colour*/
}

#contenttext {/*sets content text style*/
font-size: 12px; /*font size*/
color: #663300; /*font colour*/
}

HTML

<div id="container">
<div id="topleftwhite"></div>
<div id="toprightwhite"></div>

<div id="topleftspace">
<div id="topleftcorner"><img src="images/t-left-corner.gif" width="20" height="20"</div>
</div>


<div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"> </div>

<div id="toprightspace"><div id="toprightcorner"><img src="images/t-right-corner.gif" width="20" height="20"</div></div>
<div id="content"><div id="heading1">Heading 1</div><div id="contenttext"> This is where the content would go This is where the content would go This is where the content would go
This is where the content would go This is where the content would go This is where the content would go
This is where the content would go This is where the content would go This is where the content would go
This is where the content would go This is where the content would go This is where the content would go </div></div>

<div id="footer">
<div id="bottomleftspace">
<div id="bottomleftcorner"><img src="images/b-left-corner.gif" width="20" height="20"</div>
</div>
<div id="bottomrightspace">
<div id="bottomrightcorner"><img src="images/b-right-corner.gif" width="20" height="20"</div>
</div>
<div id="bottomleftwhite"></div>
<div id="bottomrightwhite"></div>
</div>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 12 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Getting this page to work in IE6.....please help

Hi dwpcss,
Make sure the page is in standards mode.
And if possible provide a link, it's much easier then looking at the code and trying to guess how it looks.

dwpcss
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-04-13
Posts: 8
Points: 0

sorry

Hi

thanks for that, how do i make sure its in standards mode?

im sorry but icant provide a link as its on a secure server.

cheers

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Getting this page to work in IE6.....please help

Hi

Putting something like this right at the top oif your html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

Trevor

dwpcss
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-04-13
Posts: 8
Points: 0

Getting this page to work in IE6.....please help

thanks ive got something like that at the top...... what does it actually do...sorry im a newbie :oops:

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Getting this page to work in IE6.....please help

Hi

It tells the browser how to interpret your code using a W3C standard, and what language and character set you are using.

Some versions allow loose or strict interpretations too.

This explains it better than I can:

http://www.alistapart.com/articles/doctype/

Trevor

dwpcss
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-04-13
Posts: 8
Points: 0

Getting this page to work in IE6.....please help

thanks ill go read that now