3 replies [Last post]
nofx1728
Offline
Regular
Florida
Last seen: 10 years 7 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

Hi,

I have 2 errors that are preventing my site to look exactly how I would like. Firefox concerns me more than the IE6 problem.

I created an #main with background-image width: 780px; height: 1px; Which I'm repeating in my #main div. I then have two floated div's that sit on top of #main. The problem I'm having is Firefox is not displaying the background image in #main, it is displaying white. I tried adding background: inherit; to the two div that sit on top, but when my left column ends, the background-image shifts to where the #content column continues. So basically I need to make my top div's transparent, instead of having a background-color that is blocking the background-image in the #main from being viewed.

http://home.bellsouth.net/p/pwp-bucklers

The other issue I have is in IE6. I have a 1px gap between my header and my navigation, when my #header and my #navigation both have margin: 0px and padding:0px;

/*main*/
#main {
width: 780px;
background-image: url(images/main_bg.gif);
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
}

/*Left Column*/
#leftColumn {
width: 200px;
margin: 0px;
padding: 0px;
color: #006597;
float: left;
display: inline;
}
/*End of Left Column*/

/*Right Column*/
#content {
width: 580px;
float: left;
display: inline;
}
/*End of Right Column*/

<div id="main">
        	
            <div id="leftColumn">
        		<h2>October Shows</h2>
                <div class="upcomming">
                	<p>October 6 & 7, 2007<br />
					Lakeland, Fl<br />
					Lakeland Civic Center</p>
                </div>
                <div class="upcomming">
                	<p>October 20 & 21, 2007<br />
					Ft. Pierce, Fl<br />
					St. Lucie County Fairgrounds</p>
                </div>
                <div class="upcomming">
                	<p>October 26, 27 & 28, 2007<br />
					West Palm Beach, Fl<br />
					South Florida Fairgrounds</p>
                </div>
                <div class="mailinglist">
                	<p class="mail">Join Our Mailing List</p>
                	
						
						
						
						
						
						
						
					
				</div>
        	</div>
            
          <div id="content">
          	The Finest Craft Shows!
            <p class="text">For over 17 years, Buckler Promotions has held exceptional indoor craft shows and extravaganzas throughout Florida. Our shows display hundreds of award-winning exhibitors to thousands of enthusiastic craft loving shoppers. Come and enjoy a Buckler Craft Fair. Our pleasant atmosphere insures many hours of indoor, air conditioned, shopping pleasure. We provide convenient parking (free at most locations), unlimited re-entry throughout the course of the show and access to food and beverages. Children and strollers are welcome. There is something for everyone!</p>
           	<p class="text">Buckler Promotions has Professional Indoor Craft Shows Featuring: Patriotic Items, Handcrafted Furniture, Fine Art, Pottery, Stained Glass, Handmade Gold and Silver Jewelry, Wearable Art, Calligraphy, Nautical Items, Ceramics, Wrought Iron, Garden Items, Gourmet Delights, Oriental Plants, Folk Art, Victorian Items, Fine Needle-work, Fiber Art, Handmade Soaps, Personalized Items, Clay Work, Fountains, Homemade Fudge and more!</p>
              <img src="images/silk_flowers.jpg" alt="Silk Flowers" class="homeimage" />
              <img src="images/painted_wood.jpg" alt="Hand Painted Wood" class="homeimage" />
              <img src="images/dolls.jpg" alt="Dolls" class="homeimage" />
              <img src="images/tropical_paintings.jpg" alt="Tropical Paintings" class="homeimage" />
              <img src="images/strawberry_tree_food.jpg" alt="Strawberry Tree Farms - Food" class="homeimage" />
              <img src="images/home_decorations.jpg" alt="Various Home Decorations" class="homeimage" />            </div>
            
        </div>

Thanks,

nofx1728

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 37 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try font-size:0; in

Try font-size:0; in #top_header (for ie 6) and overflow:hidden; in #main (to enclose your floats)
You may also need to add #footer p{margin:0;}

nofx1728
Offline
Regular
Florida
Last seen: 10 years 7 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

Haha! Both worked perfect.

Haha! Both worked perfect. Is there a reason for having to set font-size: 0; and #footer p {margin: 0;} When I don't have text in either div? I would have never guessed that. Anyways, can't thank you enough. Very very much appreciated.

Thanks,

nofx1728

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 37 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

The