I have designed this site for a B&B / Guest House.

The site looks fine in the latest versions of IE & Firefox but in older versions of IE teh white background graphic in the middle section does not show.

Can anyone explain why ???

This is the code :

HTML Code

<div id="page">
<div class="page-inner"> /*some stufff like menu & page content */
</div><!--end page inner class--><div class="brclear" />(this is here because I have columns above)
</div><!--end page id-->

STyle code

#page{ background-image:url(../graphics/layout/layout_r3_c1.gif); margin:0px;}
#inner { width:99%;}
.page-inner { float:left; margin:0px 0px 0px 5px; padding: 5px 0px 0px 0px; width:99%;}

The page inner just basically creates a space so that I can fill it with columns or content & not worry about the margin required.

Please help - unfortunately as well as having a customer on an older browser I also need to be aware that a lot of her customers are possibly also on older browsers.

Here is the link to the website (only hosted on development server at moment until all problems ironed out!)
http://www.bitsmail.co.uk/TheDell/Dell-house-area.html

The mighty weird thing is that I have tested this in opera (old version), Advanced browser which is an old IE model & an old version of firefox with no viewing issues but while away working last week saw exactly what my customer was telling me - a site with no white in the middle.

Utterly confussed !!

Ok, this was a tad weird. Your #page div seemed to be stuck down on top of your footer.

I made these changes:

<!-- <SPAN class=brclear>&nbsp;</SPAN> --> took this out
</DIV><!--end page inner class-->
<br class=brclear />

I think getting rid of the span is what did it, but there's no real reason to use a div when a <br> will clear a float just as handily.

** Whoops -- found something else funny. Just taking out the span didn't entirely solve the problem. I had put a 1px border around #page so I could see where it was ending up. When I took it off, the white bg disappeared again. The solution is to add height: 1% to the #page rules (Holly hack). You should put this in a separate css file and use a conditional comment though.

oh weird !!!

Thanks for that & congrats to Holly I will of course make sure credit is paid where due.

Thanks for other fix too ! Will try it out now !

Now I have another issue. Why are there no graphics being displayed on my list on the bottom of this page?

C:\Inetpub\wwwroot\dellhouse.co.uk\B&B-the-dell-page.html

HTML

<ul class="list"><li>Award Winning Bed &amp; Breakfast</li>
<li>En-suite period bedrooms</li>
<li>Superb home cooked breakfasts </li>
<li>Wonderful views </li>
<li>Two acres of hillside grounds </li>
</ul>

CSS

.normal li { font-size:75%; color:#19193F;}
.list li {margin:0px 2px 0px 0px; font-size:75%; color:#19193F; line-height:1.4em;
list-style-image:url(../graphics/logos/check.gif);}
.list-x li {margin:0px 2px 0px 0px; font-size:75%; color:#19193F; line-height:1.4em;
list-style-image:url(../graphics/logos/cross.gif);}

p.s can anyone check this on an old IE & see if it works 4 me as I can't seem to hold of an old IE to install & test. Thanks

They aren't showing in FF 2.06 either.
Are you sure you have the path right and the image on your server ?

Sorry for stepping in, but if you want to check your site in old ie, this allows you to have all IE fom 3.0 to 7 installed on your computer:
http://tredosoft.com/Multiple_IE

I must add that it works when you are displaying html or Xhtml, but not when you are using xml+xslt (which is my case...)

By the way, I've checked http://www.bitsmail.co.uk/TheDell/B&...dell-page.html and I didn't found missing images on the <li>...
Did you suceed on it, or am I missing something ?

LadynRed thanks because the background thing does appear to be fixed as far as I can tell now.

When you say images are not showing I take it you mean the list icons - yes they are definately there. Have checked the path & they are correct. In IE (latest version) I can just see the edge of them - is it a margin or padding setting ? GRRRR I sometimes am soooo tempted to just stick a table in !!!

tripy - I will definately try that tredsoft thing as it is clear I somehow need to be able to check all browser versions as much as possible especially now I am trying to create these CSS layout sites.

The images missing on that page are the images used as buttons on the list at the bottom of the page. I still can't see them though I think I need to mess with the li options & padding settings perhaps.

Tripy - I installed that multi IE thing - it works great. I now have serious problems with this site I am working on.

In IE 5 & 5.5 it does not centre it is on the left of the screen. How do I fix this ?

In IE 6 it is centred fine & background now shows so thanks to LadynREd that seems sorted out.

On all however the page section has a gap between it & the yellow bar just above it. Any clues ?

Forget ie below 6.
js is crappy, css support is even more crappy.
If I recall right, I even believe than css2 partial support debuted in ie5.5...
5.0 is almost 10 years old http://en.wikipedia.org/wiki/Interne...orer#Version_5 , and was originally shipped with win98 second edition and the first windows2000.

Seriously, isn't ie6 enough of a burden already ?

Oh god yes !!!! Thank god for that sound piece of advice otherwise I think I would go barmy !!!

IE 6 is a great backward compatibility level to have to work to as far as I am concerned.

I guess this little excercise taught me that without thinking I had upgraded my IE & dutifully as I do always test my work in an assortment of browsers but completely forgotton to consider people who do not either automatically install the windows updates, do not have a PC that does it automatically or just don't want to upgrade or whatever. Yup vista is a balls ache but hey I guess we go with the flow & for me I look for better support for the technologies I want to use as I work to get better at using them!!

Cheers for the advice ! background sorted all that si left now are those pesky list images - here comes that table & graphics urge !!!

I would take a different approach to the list image thing. Since IE is screwy with how it places bullets and list images, you might find it a lot easier to just define the image as a background on the <li> or the <a>, then you level the field and can adjust margin and/or padding on the link text for consistency. Just set the image to no-repeat and it should work. I use this method frequently - saves hair pulling

Hi there LadynRed - that is exactly what I have tried to do but realise where i went wrong. I need to define the image as a background image within the style not as list image.

Ok will go back to the drawing board on the code & try to sort it out - thanks.

Was recently looking at issues in older versions of IE & remembered someone once gave me the tredsoft link - looked back & hey presto - success !!! webmaster talk rules !!!