CSS display error – extra DIV

@WebJoelApr 21.2006 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Richmond Operatic Society Home Page</title>
 <meta name="keywords" content=
 "richmond operatic society,richmond amateur dramatic society,richmond north yorkshire, richmond societies,richmond theatre,richmond gilbert sullivan,richmond musicals,richmond operetta,richmond singers, ROS,georgian theatre royal">
 <meta name="description" content="The Home Page of Richmond (North Yorkshire) Operatic Society (ROS), where you will find details of our productions past and present, information about us and instructions on how to contact us.">
 <style type="text/css">
 
 <!--
 body, html	{padding:0; margin:0; border:0;}/* re-sets IE from doing stupid things. Doesn't affect other browsers */
 
 BODY {BACKGROUND-IMAGE: url(http://uk.geocities.com/richmond_operatic_society/Graphics/Wood.jpg);
 TEXT-ALIGN: center; margin-bottom:15px;}
 
 A:link {COLOR: black;
 TEXT-DECORATION: none}
 A:visited {COLOR: black;
 TEXT-DECORATION: none}
 A:hover {COLOR: black;
 TEXT-DECORATION: overline underline}
 A:active {COLOR: black;
 TEXT-DECORATION: none}
 
 A {MARGIN-RIGHT: 25px}
 
 DIV {BACKGROUND: #F5DEBE;
 MARGIN: auto;
 PADDING: 5px;
 BORDER: 0}
 
 DIV.main {TEXT-ALIGN: left; width:800px; padding:25px;}
 
 .main A:link {COLOR: black;
 TEXT-DECORATION: underline}
 .main A:visited {COLOR: black;
 TEXT-DECORATION: underline}
 .main A:hover {COLOR: black;
 TEXT-DECORATION: underline}
 .main A:active {COLOR: black;
 TEXT-DECORATION: underline}
 .main A {MARGIN: 0; padding-right:5px;}/* provides blank space between links in main */
 
 DIV.nest {PADDING:0;
 MARGIN: 0}
 
 DIV.headfoot {BACKGROUND: #996633;
 COLOR: white;
 BORDER: 0}
 
 DIV.banner {width:800px; PADDING: 0;
 MARGIN: auto;}
 
 DIV.outer {WIDTH: 800px; margin:auto;}
 
 DIV.inner {WIDTH: 790px}
 /* Next: You cannot have a class that begins with a number. Must begin with a LETTER */
 /* .500 {WIDTH:500px} removed: no longer required */
 .300 {WIDTH: 300px;}
 
 #left {FLOAT: left}
 #right {FLOAT: right}
 
 .setsize {FONT-SIZE: 12pt}
 
 IMG {BORDER: 0;
 MARGIN: 0;
 PADDING: 0;}
 
 IMG.banner {HEIGHT: 90px;
 MARGIN-BOTTOM: -4px}
 
 .banner A {MARGIN: 0}
 
 IMG.small {WIDTH: 146px}
 
 H1 {FONT-SIZE: 20pt;
 TEXT-ALIGN: center;
 BORDER: 0;
 MARGIN: 0}
 
 H2 {FONT-SIZE: 135%;
 FONT-WEIGHT: bold;
 BORDER: 0;
 MARGIN: 0}
 
 /*Additional for this page*/
 
 H3 {FONT-SIZE: 125%;
 FONT-WEIGHT: bold}
 
 DIV.center {MARGIN: auto; TEXT-ALIGN: center;
 PADDING: 0}
 
 -->
 
 </style>
 </head>
 <body>
 <!-- following code added by server. PLEASE REMOVE -->
 <script language="JavaScript" src="http://uk.geocities.com/js_source/ygNSLib9.js?v3" type="text/javascript">
 </script><script language="JavaScript" type="text/javascript">
 var yvnContents='http://themis.geocities.yahoo.com/themis/as.php?cc=uk&s=382106070&l=NE&b=0&t=1145619355';yvnR='uk';yfnEA(0);
 </script><!-- preceding code added by server. PLEASE REMOVE -->
 <div class="headfoot setsize outer"><script language="JavaScript" src="http://uk.geocities.com/richmond_operatic_society/JavaScript/Date.js" type="text/javascript">
 </script></div>
 
 <br />
 <div title="Richmond Operatic Society" class="banner">
 <h1 title="Richmond Operatic Society">RICHMOND OPERATIC SOCIETY</h1>
 </div>
 
 <br />
 
 <div class="banner setsize outer"><a href="Home.html"><img src="Graphics/ROS2.JPG" alt="ROS" class="banner small"></a> <img src="Graphics/Castle3.jpg" alt="Richmond Castle" class="banner" /> <a href="http://www.georgiantheatreroyal.co.uk" target=
 "resource window"><img src="Graphics/Georgian.JPG" alt="The Georgian Theatre Royal" class="banner small" /></a></div>
 <br />
 
 <div class="outer setsize"><a href="Home.html" title="Home">Home</a> <a href="Current.html" title="Current Production">Current Production</a> <a href="Events.html" title="Events Calendar">Events Calendar</a> <a href="Previous.html" title="Past Productions">Past Productions</a> <a href="Gallery.html" title="Gallery">Gallery</a> <a href=
 "ROS.html" title="ROS">ROS</a> <a href="Join.html" title="Join Us">Join Us</a></div>
 
 <br />
 <div class="main">
 <h2 title="Welcome to the Richmond Operatic Society Home Page!">Welcome to the Richmond Operatic Society Home Page!</h2>
 <br />
 ROS are based in Richmond, <b>North Yorkshire</b>. While we welcome new members, if you are based in Richmond Upon Thames, you may find the 250-mile (one way) trip a little far. You may wish to try the <a href=
 "http://www.brostheatrecompany.org/brostc/index.html" title="Barnes and Richmond Operatic Society">Barnes and Richmond Operatic Society</a> instead.<br />
 <br />
 ROS have been entertaining Richmond since 1922 and we're still going strong. On this site you can find out all about us and how to get involved - whether as an audience member or by treading the boards yourself.<br />
 <br />
 <br />
 
 
 <!-- Next: you cannot have a "class name" that begins with a letter. This is invalid -->
 <div class="center 500"><img src="Graphics/FiddlerDraw2.jpg" alt="Copyright 2006 Amanda Heitler" /><br />
 <br />
 Don't forget to book your tickets for Richmond Operatic Society's next production<br />
 <h3>Fiddler on the Roof</h3>
 17-20 May 2006 at The Georgian Theatre Royal, Richmond, North Yorkshire<br />
 <br />
 Tickets are available from the Georgian Theatre Box Office now<br />
 <br />
 For more information about the show go <a href="Current.html" title="For information about the show, click here"><b>here</b></a>
 <br />
 <br />
 
 If this site doesn't answer your questions about ROS, why not <a href="Contact.html" title="Contact Us"><b>contact us</b></a> to find out more! Meanwhile, sign our guestbook to let us know you were here.<br />
 <br />
 You are visitor <img src="http://visit.geocities.com/counter.gif" alt="Counter"> to this page<br />
 <br />
 <span title="Site last updated: 17 April 2006">Site Last Updated: 17 April 2006</span></div>
 
 
 <br />
 <div class="outer setsize"><a href="Contact.html" title="Contact Us">Contact Us</a> <a href="Guestbook.html" title="Guestbook">Guestbook</a> <a href="Links.html" title="Links">Links</a> <a href="Problems.html" title="Accessibility">Accessibility</a> <a href="Disclaimer.html" title="Disclaimer">Disclaimer</a></div>
 
 <br />
 <div style="width:800px; padding:8px 35px; BACKGROUND: #996633; COLOR: white;
 BORDER: 0" title="Copyright 2006 Richmond Operatic Society">&copy; 2006 Richmond Operatic Society</div>
 
 </body>
 </html>[/CODE]

I changed a few things, and eliminated a few others. See if this is getting any closer to what you want.

You've got something in there that is making your MAIN be wider than it needs to be. Also, for this to show on an 800x600 resolution monitor, the maximum width of any DIV or element would not be more than, say, 760px or a bit less. Bear in mind that there are user's scrollbars which are part of the 'default page style' width of 800px. And, often a user won't actually have their screens at FULL width. I do this, to keep track of what I'm running in the background.

A page that display with a horizontal scrollbar is sometimes deemed 'inconsiderate', albeit, here it is very modest and you don't really miss any content.

I don't know about any 'extra div at the bottom', but the way it is here, it now seems to display the same in both IE and Firefox (on my computer anyway...)

CSS display error – extra DIV

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS display error – extra DIV

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴