PDA

View Full Version : Disapearing background graphic? uhmm



elliot
05-06-2006, 12:23 PM
Hi there,

I've come across a weird one whilst making my latest web project. For a two col layout i've floated both cols left though in doing so the background disapears working only without floated divs above it?

I'm about to try and find some info on floats that might help. If your able to offer anything I'd really aprieciate it

The missing background is situated in the content containing div called (.full_back)

Here's the problem page... http://www.bhbgroup.co.uk/our_product.html

As always IE seems to be fine... typical!

many thanks,
elliot

jscheuer1
05-06-2006, 03:48 PM
When floating an element within, say - a division, IE will cause that element to expand to accommodate the floated content. In most other browsers, floating something is akin to setting its position property to absolute, taking it out of the flow of the document, therefore preventing its container(s) from being expanded by it. Often a min and/or max, or just a plain height can be set for the container to compensate in other browsers. Most likely this is what is at work here. I'll have a closer look to try and see for sure but, the above is a very important consideration when using floats.

jscheuer1
05-06-2006, 04:03 PM
Yes, setting .full_back to:


.full_back {
background: url("../img/bgrounds/content_back2.gif") no-repeat center bottom;
margin:0;
padding:0 ;
height:900px;
}

Takes care of it but, could cause other problems when the page is 'put through its paces', or on other pages using the same stylesheet.

elliot
05-06-2006, 04:04 PM
Hi John, many thanks for your pointers..

I've uploaded the page and have recently juggled the style sheets about a bit to try and be a little more organized

http://www.bhbgroup.co.uk/our_product2.html

The problem I'm getting now I think is to do with clearing of the left col float as the background graphic breaks in FF.

Hopefully I'm nearly there and this is an easy fix !?

all the best,
Elliot

jscheuer1
05-06-2006, 04:09 PM
We cross posted, I think. If so, see my new post immediately before your post above. In addition to my comments there, I can't see why .full_back needs a width set.

elliot
05-06-2006, 08:39 PM
Yep crossed post! :)

I've removed the width, thanks for spotting that one.. I've included the height to (.full_back) which works fine though if the page has less content it would leave a huge empty space at the bottom..

Maybe this area should be managed with an inline style that I could change depending on the content..

I wont bother you anymore on this one John, thanks once again for your help.

mwinter
05-06-2006, 11:27 PM
I'm not sure if you edited the code you've linked (and I couldn't check earlier as your server was down, apparently), as I don't see any significant differences between IE and Fx, but I don't see you using what John suggested, either. Then again, you only seem to be floating one column, so perhaps that's the change you made?

Based on John's description, he's got the cause right, but I don't agree with the solution precisely because it can cause a lot of empty space to appear (as you suggest, yourself). Though setting an explicit height will stretch an element that contains floated elements, a better solution is to include an element that has the clear property applied to it.



#container .stretch {
clear: direction;
}



<div id="container">
<!-- floated element -->
<!-- another floated element -->
<div class="stretch"></div>
</div>
where direction replaced as appropriate. Using the value, both, is convenient, but may interfere in some cases. I'd only use it if one of the elements is floated left, and the other to the right.


Incidentally, you might want to consider applying the clear property to the orange text near the bottom. If the left-hand column was longer, it would overlap, which might not be desirable.

You can see the overlap now, using the Web Developer extension for Firefox. Using the Outline Custom Elements feature, you'll observe that the left-hand column just breaches the border of the later div element (http://mwinter.webhop.info/dd/overlap.jpeg) (that's just really aggressive compression, by the way :)).

Mike

elliot
05-07-2006, 12:32 AM
Hi Mike, thanks very much for adding to this post..

appologies in advance as I'm actually finding this a little confusing :confused:

Basically I ended up floating just the left col and the right col has a margin: 0 0 0 430px; While this works fine visually, if the left col has more content the background breaks leaving a black gap between the footer. The only way round I could see was to add padding to the bottom of the right col to go past the content on the left, whewwww...

This is obviouly not the best method if each page has different heights of content.

I've added .stretch class to the main containing div #content_wrap and have placed an empty div below the column div's, unfortuantely this hasn't done anything though I'm guessing I've gone and placed it in the wrong place

Going to have another look now :o

Here's the page i've been working on http://www.bhbgroup.co.uk/our_product.html


I appreiciate your time,
Elliot

jscheuer1
05-07-2006, 04:11 AM
I understand what Mike is saying and am grateful to have the information. Working from when you first posted and had just the single style sheet, I did this in the style sheet:


.full_back {
background: url("../img/bgrounds/content_back2.gif") no-repeat center bottom;
margin:0;
padding:0 ;
width:825px;
}

.stretch {
clear:both;
}

And this in the markup (addition red):


<div class="right380">
<h2>Products &amp; Services</h2>

<h3>Sub Titla</h3>
<ul>
<li>Manufactured to ASTM dimensions</li>
<li>Diameters from " to 2" Schedule 80</li>
<li>UL and LPCB approved</li>
<li>Certified training available on and off site for installers</li>
<li>For product list and installation guide please go to the brochure section, for current products available please register in our client login section</li>
</ul>
<h3>Services</h3>
<ul>

<li>BHB provide a consultancy support service for its clients, which includes</li>
<li>Free of charge advice is available on all projects</li>
<li>Design of residential and domestic fire sprinkler installations encompassing BS9251:2005 or relevant standard</li>
<li>Supply full hydraulic calculations to justify system and certificates of compliance upon commissioning of system</li>
<li>All drawings are supplied on AutoCAD and can be received and sent electronically</li>
<li>Fire sprinkler sub-contract opportunities</li>
</ul>
<img src="img/bgrounds/case_image1.jpg" width="313" height="215" />
</div>
<div class="stretch"></div>
<!-- -->

</div>

Worked well in Opera, FF and IE.

jscheuer1
05-07-2006, 04:20 AM
I am attaching my entire page, in case you need it after all your changes. I put the style on the page. I also set a base href:


<base href="http://www.bhbgroup.co.uk/" />

To work with it locally, this can be removed once the page is in its correct position in your directory setup. Click the below link to download it in archived form:

337

elliot
05-07-2006, 10:38 AM
mistake, started new post I think? whooops was supposed to reply to one so have cut out the copy

elliot
05-07-2006, 10:41 AM
that's done it! Yippee

So ended up as clear:both on the .stretch class with both cols floated left EXCELLENT! :D

I'm very pleased to have this headache out of the way thanks to you both

Cheers :)

http://www.bhbgroup.co.uk/beer.jpg

mwinter
05-07-2006, 11:46 AM
So ended up as clear:both on the .stretch class with both cols floated leftYou should use



clear: left;
rather than the value, both.

That's what I was trying to say with



clear: direction;
It wasn't a literal value, but a placeholder for you to replace with the appropriate direction. If your columns are floated left, direction should be left. If they floated right, the value should be right. If elements were floated in both directions, the value should be both.

Sorry for the confusion.
Mike

elliot
05-07-2006, 12:28 PM
whoops :o I'm learning, honest