CSS based web interface

Works fine in IE but not in FF

Page 1 of 1

1 Replies - 1136 Views - Last Post: 23 April 2007 - 10:08 PM

#1 adamquaile  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 23-April 07

CSS based web interface

Post icon  Posted 23 April 2007 - 02:56 PM

Hi guys.. I've been trying for ages to get this web based interface up and running. Hoping someone here can help..

Basically, I want a top and bottom strip on the page, and the middle to be split into two (left and right).. I've tried the following code and it works perfectly in Firefox, but not in IE..

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<link rel='stylesheet' href='style3.css' type='text/css' />
</head>
<body>
 <div id='top'>
  <div id='header'>
  top
  </div>
  <div id='main'>
   <div id='content'>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin vehicula velit. Ut volutpat ultricies diam. Aliquam sed augue. Maecenas ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing, mauris et porta tristique, turpis ligula mollis massa, non congue tellus sem id pede. Quisque sagittis pulvinar mi. Duis elementum, ante et ultricies tristique, lectus arcu blandit orci, cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.

   </div>
   <div id='rightnav'>
   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   ogerkg erf gjggregregp   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   ogerkg erf gjggregregp   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   ogerkg erf gjggregregp   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   ogerkg erf gjggregregp   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   ogerkg erf gjggregregp   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   ogerkg erf gjggregregp   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   ogerkg erf gjggregregp   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   ogerkg erf gjggregregp   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   ogerkg erf gjggregregp   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.
   ogerkg erf gjggregregp   cursus consectetuer erat leo at lectus. Vivamus ligula. Duis ultrices ullamcorper lacus.

   </div>
  </div>
 </div>
 <div id='bottom'>
 footer
 </div>
</body>
</html>


and the css to go with it:

body {
 padding: 0;
 margin: 0;
 font-family: Arial;
 font-size: 80%;
}
div {
padding: 0;
margin: 0;
}
#bottom {
position: absolute;
bottom: 0px;
height: 50px;
left: 0;
right: 0;
background: cyan;
width: 100%;
}
#top {
position: absolute;
top: 0px;
left: 0;
right: 0;
bottom: 50px;
background: red;
}
#header {
 position: absolute;
 top: 0px;
 left: 0;
 right: 0;
 height: 50px;
 width: 100%;
 background: lime;
}
#main {
 position: absolute;
 left: 0;
 top: 50px;
 right: 0px;
 bottom: 0px;
 background: pink;
 color: #fff;
}
#content {
 position: absolute;
 left: 0;
 top: 0;
 right: 200px;
 bottom: 0px;
 background: blue;
 overflow: scroll;
 color: #000;
}
#rightnav {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0px;
 width: 200px;
 background: orange;
 color: cyan;
 overflow: scroll;
}


Please ignore the garish colours, and nonsense words, and thanks for your time..

Is This A Good Question/Topic? 0
  • +

Replies To: CSS based web interface

#2 im@geek  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 94
  • Joined: 18-February 05

Re: CSS based web interface

Posted 23 April 2007 - 10:08 PM

Use the "float" attribute to float div from left to right

check out this tutorial. It help me when I first started building sites
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1