2 replies [Last post]
btcode
Offline
newbie
Last seen: 16 years 43 weeks ago
Joined: 2004-01-31
Posts: 4
Points: 0

hi, im currently redesigning a site.

right now everything is working fine in Mozilla/firefox and Opera but it really fails like slopp ish in IE..i'll post the code , my main problem is in IE, the #focus is push downwards making it look out of place.
If anyone can with this it will be great; i havent tried hacks yet and dont want to go into unfamilliar grounds, so if you can help..please do-

thanks in advance.

heres the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1.0/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html>body{
background-color: #A0D8D8;
}
html>body #outerwrap{
margin-top: 70px;
}
#outerwrap{
border: 7px solid #fff;
width: 700px;
margin: 0 auto;
text-align: center
}
#wrap{
text-align:left;
line-height: 1.8em;
font-family: verdana;
font-size: 11.5px
}
#header{
width:700px;
height:274px;
background: url(header.jpg) no-repeat;
border-bottom: 1px solid #20898C
}

#innerwrap{
background-color: orange;
/*background: url(mainbg.png) repeat-y;*/

}
#leftmenu{
width: 170px;
padding-left: 3px;
float:left;
background-color: blue

}

#focus{
width:333px;
padding: 5px;
margin: 0px 180px 0px 172px;
background-color: purple

}
#rightmenu{

width:179px;
float: right;
padding: 3px;
text-align: center;
background-color:red
}
#footer{
width: 700px;
height: 65px;
background: url(footer2.jpg) no-repeat;
text-align: left;
}
</style>
</head>

<body>
<div id="outerwrap">

<div id="wrap">
<div id="header"></div>
<div id="innerwrap">
<div id="leftmenu">This is the left Menu</div>
<div id="rightmenu">This is the Right Menu</div>
<div id="focus">menaeos. Etiam sapien. Vivamus a lacus. cursus emper mollis purus. Cras wisi justo, mollis ac, dapibus ut, pretium quis, velit. Pellentesque quis diam nec dui porttitor tincidunt. Cras at pede. Vestibulum consequat, odio quis vestibulum commodo, ipsum massa feugiat neque, in condimentum nibh orci sed risus. Nam ut odio. Proin mattis justo eu pede. Quisque molestie. A
</div>

</div>
<div id="footer"></div></div>
</div>
</body>
</html>

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

help please

I changed the width for
#focus{
width:326px;

and now it fits - did not have time to see why , but could see that it is now too small in Moz.

Also you have the following hacks where you are using html>body....

html>body{
background-color: #A0D8D8;
}
html>body #outerwrap{
margin-top: 70px;
}

The above hacks are hiding the values from IE, and am not sure wy you are doing that.

Another thing you may want to add to body is

body{
margin-top: 0px;
padding-top: 0px;

to make sure no diff between different browsers.

Get you started anyway

Regards
Day

The only way to learn is to do it yourself

btcode
Offline
newbie
Last seen: 16 years 43 weeks ago
Joined: 2004-01-31
Posts: 4
Points: 0

help please

thanks alot man, that will help out heaps.