PDA

View Full Version : CSS sidemenu position in IE6



JayHay
Apr 1st, 2007, 11:39 PM
Hello everyone, thanks for having a look at this post. I'm brand new here so go easy if I'm asking silly stuff -sorry! I've been learning CSS for a couple of hours and have written a pretty basic website but have a problem with the display in IE6 - it looks fine in IE7.

In IE7 the <div sidebar> comes out next to the main body and under the heading.

In IE6 it overlaps into the heading - aaagghh!

CSS is attached

Here's the html to go with it:

!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>

<title>Intermediate care</title>
<link rel="stylesheet" media="screen" type="text/css" href="CSS/master.css" />
</head>
<body>

<div id="masthead">
<h1>Intermediate Care Newport</h1>

</div>

<div id="topbar">

<ul>
<li><a href="" title="Home page">Home</a></li>
<li><a href="" title="What is the intermediate care service?">Intro</a></li>
<li><a href="" title="News letters"> News</a></li>
<li><a href="" title="Future plans">Development</a></li>
<li><a href="" title="Downloads, Photos">Downloads</a></li>
<li><a href="" title="Contact us">Contacts</a></li>
<li><a href="" title="Your feedback page">Feedback</a></li>
</ul>

</div>


<div id="sidebar">

<h2> Your doorway to: </h2>
<ul>
<li><a href="" title="Your doorway to the Reablement team">Reablement Team</a></li>
<li><a href="" title="Your doorway to the P.A.T.H team">P.A.T.H Team</a></li>
<li><a href="" title="Your doorway to the P.I.L.S team">P.I.L.S Team</a></li>
<li><a href="" title="Your doorway to the Long Term Conditions Team">Long Term Conditions Team</a></li>
<li><a href="" title="Your doorway to the Rapid Responses Team">Rapid Response Team</a></li>
<li><a href="" title="Your doorway to the Reablement Team">Reablement Team</a></li>
<li><a href="" title="Your doorway to the Community Physiotherapy Team">Community Physiotherapy Team</a></li>
<li><a href="" title="Your doorway to the Psychiatric Liason Nurse">Psychiatric Liaison Nurse</a></li>
<li><a href="" title="Your doorway to the Consultant Physician">Consultant Physician</a></li>
<li><a href="" title="Your doorway to Age Concern Discharge Services">Age Concern</a></li>
<li><a href="" title="Your doorway to COPD classes">C.O.P.D Classes </a></li>
<li><a href="" title="Your doorway to the Expert Patient">Expert Patient</a></li>
</ul>
</div>

<div id="content">
<h3> Home </h3>

<p>This is a public information web site about the teams who work together providing Intermediate Care services in Newport (South Wales). Each team / service has its own information page. If you need any further details please contact the site administrator via the E-mail at the bottom of this home page.</p>

<p>Intermediate Care is the concept of individual teams working together, drawn from Social Services, Health and the Voluntary Sector, to deliver a holistic service to the public involving aspects of physical, social and mental wellbeing.</p>

<p> Its aim is to avoid unnecessary admission to hospital, enable earlier discharge from hospital and maintain independent living in the community, for residents of the Newport City area. </p>

</div>

<div id="footer">
Copyright JNCH 2007
</div>

</body>
</html>

Excavator
Apr 2nd, 2007, 12:35 AM
Hello JayHay,
Just a couple things to fix is all:

<!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>

Your markup looks like it will work as is once you close your #masthead a little further down. Like this:

<!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>

<title>Intermediate care</title>
<link rel="stylesheet" media="screen" type="text/css" href="master.css" />
</head>
<body>

<div id="masthead">
<h1>Intermediate Care Newport</h1>

<div id="topbar">

<ul>
<li><a href="" title="Home page">Home</a></li>
<li><a href="" title="What is the intermediate care service?">Intro</a></li>
<li><a href="" title="News letters"> News</a></li>
<li><a href="" title="Future plans">Development</a></li>
<li><a href="" title="Downloads, Photos">Downloads</a></li>
<li><a href="" title="Contact us">Contacts</a></li>
<li><a href="" title="Your feedback page">Feedback</a></li>
</ul>

</div>
<!--closes masthead--></div>

<div id="sidebar">

Then make these changes to your CSS:

/* CSS Document */

/* Blanket rules for the entire document */

body {
font-size:80%;
font-family: 'Lucida Grande', Verdana, sans-serif;
margin: 10px;
}

/* Rules for headings */

h1 {
font-size:200%;
}

h2 {
font-size: 140%;
padding-left: 22%;
}
h3 {
font-size: 120%;
}

/* Default para graph styles */

p {
font-size: 100%;
line-height: 150%;
}

/* Masthead */

#masthead {
height: 130px;
margin: 0;
border: 1px solid #000000;
background-color: #C2CDFE ;
}
/* Applying padding to heading to avoid Box Model woes */

h1 {
padding-top: 30px;
padding-left: 10px;
}

/* Footer */

#footer {
padding: 10px;
border: 1px solid #000;
background-color: #999999;
}

/* Content */

#content {
margin: 10px 30% 10px 0; /*I'm not sure how this will work as I've never actually mixed % and px before*/
padding: 10px;
border: 1px solid #000;
}
/* Topbar */

#topbar{
height: 30px;
background-color: #C2CDFE;
margin-bottom: 10px;
}

#topbar ul {
list-style:none;
margin: 10px 0 10px 0;
padding: 0;
}

#topbar li{
display: inline;
margin: 0 10px 0 0;
padding: 0;
}

#topbar li a:link, #topbar li a:visited {
padding-left:10px ;
padding-right: 10px;
padding-bottom: 4px;
padding-top: 3px;
text-decoration: none;
}

#topbar ul a:link {
color: #0000;
}



/* Sidebar */

#sidebar {
float: right;
padding: 2px;
border: 1px solid #000;
width: 28%;
margin: 10px 0 20px 0;
}
/* Sidebar contents */

#sidebar ul {
list-style-type: none;
margin: 1px;
padding: 2px;
border: 1px solid #333;
width:98%;
font: bold 12px 'Lucida Grande', Veranda, sans-serif;
}

#sidebar li {
background: #DDDDDD;
margin: 0;
padding: 2px 2px;
border-left: 1px solid #fff;
border-right: 1px solid #aaa;
border-top: 1px solid #fff;
border-bottom: 1px solid #666;
}

#sidebar ul a:link, #sidebar ul a:visited, #sidebar ul a:active {
display: block;
padding: 2px 5px;
text-decoration: none;
}

ul a:link {
color: #000;
}

ul a:visited {
color: #666;
}

ul a:hover {
color: #F00;
background: #FFF;
}

ul a:active {
color: #333;
}

/* Footer */

#footer {
padding: 10px;
border: 1px solid #000;
background-color: #CCC;
margin-right: 30%;
clear:both;
}


I'm pretty sure that's all I changed to get it to work.

p.s. Next post, please use the [code] tags!

JayHay
Apr 2nd, 2007, 12:48 AM
thanks so much for that!!!

Excavator
Apr 2nd, 2007, 12:58 AM
No problem, glad to help.