SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background does not show in Mozilla (1.7.1)

    I have this in my HTML file:

    HTML Code:
     <!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>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>Page</title>
     <style type="text/css">
     <!--
     #mainContainer {
     	background-image: url(img/dots.gif);
     	background-repeat: repeat-y;
     	width: 715px;
     }
     #main {
     	width: 435px;
     	float: left;
     	padding-left: 10px;
     	padding-top: 10px;
     }
     #mainRight {
     	width: 240px;
     	float: right;
     	padding-right: 10px;
     }
     .mainText {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: small;
     	color: #333333;
     	text-align: justify;
     }
     -->
     </style>
     </head>
     <body>
     <div id="mainContainer">
       <div class="mainText" id="main"> 
     	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
     	  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
     	  erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
     	  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
     	  eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
     	  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
     	  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
     	te feugait nulla facilisi.</p>
       </div>
       <div id="mainRight" class="mainText">
     	<p>Lorem ipsum dolor sit amet, consectetuer
     	  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
     	  magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
     	  exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
     	consequat.</p>
     	<p>&nbsp; </p>
       </div>
     </div>
     
     </body>
     </html>
    Same HTML is on this page:
    http://www.hot.ee/sannu/page.html

    IE (6.0) shows background but Mozilla doesn't. What am I doing wrong? Have tried is various ways but still can't get it right.


    Thanks in advance,
    Sander

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have floated both divs within the container. In layout terms, this means that the container has no "content", so it collapses to zero height - and you can't see the background. Add the following:
    Code:
    CSS: 
     #clear {
     clear: both;
     }
     
     HTML: 
      <div id="mainRight" class="mainText">
     	<p>[snip]</p>
       </div>
       <div id="clear"></div>
     </div>
     
     </body>
     </html>

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, it works.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •