• Locked
1 reply [Last post]
Tue, 2004-03-09 15:04
wage
Offline
newbie
Last seen: 19 years 12 weeks ago
Joined: 2004-03-09
Posts: 3
Points: 0

I'm new to this css lark...


when i use ie6 this is how i'd like it to look.

but when i use opera, netscape or mozilla this is how it looks:

netscape
[img] http://www.wage.eu.com/opera7.jpg [/img]
opera

how can i get the divs to rest on top of each other in all browsers?

the html code goes:

<div id="container">
  <div id="header">
    <h1>Mental Health and Wellbeing</h1>
  </div>
<div id="nav">
<ul>
      <li class="first"><a href="#">Home</a></li>
      <li><a href="#">Mental Health Policy</a></li>
      <li><a href="#">Publications</a></li>
	  <li><a href="#">Local Services</a></li>
	  <li><a href="#">Related Sites</a></li>
    </ul></div>
<div id="menu">menu items go here</div>
<div id="content">content goes here</div>
    <div id="footer">footer foes here</div>
</div>

anyone got any ideas?

the css is attached.

Top
Tags:
Wed, 2004-03-10 09:24
#1
wage
Offline
newbie
Last seen: 19 years 12 weeks ago
Joined: 2004-03-09
Posts: 3
Points: 0

problem with divs resting on top of each other

oops css doesnt seem to be there.

here it is:
BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
FONT: 85% arial, hevetica, sans-serif;
COLOR: #000066;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffffff;
text-align: center;
}

#container {
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
MARGIN: 1em auto;
BORDER-LEFT: black 1px solid;
WIDTH: 780px;
BORDER-BOTTOM: black 1px solid;
TEXT-ALIGN: left;
}

#header {
background-image: url('graphics/sunflower2.jpg');
height: 100px;
}
#header h1{
padding: 20px;
color: #000066;
text-align:center;
}

#nav {
background: #FDFB7A;

}

#nav ul
{
padding-left: 0;
margin-left: 0;
background-color: #FCF94E;
color: #3B5596;
float: left;
width: 100%;
font-family: verdana, arial, helvetica, sans-serif;

}

#nav ul li { display: inline; }

#nav ul li a
{
padding: 0.2em 1em;
background-color: #FCF94E;
color: #3B5596;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#nav ul li a:hover
{
background-color: #FFCC00;
color: #fff;
}

#menu {
FLOAT: left;
WIDTH: 23%;
HEIGHT: 100px;
border: 1px;
margin-left: 0%;
margin-right: 1%;
margin-top: 3%;
padding: 5px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
}

#menu ul {
list-style-image: url("graphics/bullet2.gif");
}

#content {
MARGIN-LEFT: 25%;
MARGIN-RIGHT: 2%;
margin-top: 2%;
margin-bottom: 2%;
}

#footer{
CLEAR: both;
HEIGHT: 20px;
BACKGROUND-COLOR: #ffffff;
}

Top
  • Locked