Does anyone know how I can fix the background image so it displays properly in IE6 on the PC (I haven't checked it in ie5 or ie7 either!)? I've tested the page using Firefox, Safari, Camino, Mozilla, Netscape, Opera, iCab (all under MacOSX) and Firefox and Opera (under Windows) which ALL display the page correctly!

The link to the webpage is:

http://ridgedale.powweb.com/tGHH_New3/

The link to the css file is:

http://ridgedale.powweb.com/tGHH_New...rnal/style.css

Any help with this would be appreciated.

Ok, I've looked at the site with FF 2.0 and IE 6 and I don't see a problem with the page background. So.. what am I missing, what's the problem ??

I did look at your CSS, you really need to take all that position:relative out, it's not necessary.

Thanks for your reply, LadynRed.

The problem is that in IE6 the background image is NOT positioned as all the other browsers and you can see the right-hand edge of the image as a vertical shadow bar and the image is repeating horizontally when it should just be centered in the width of the content div. This issue is most clearly demonstrated on the prices page when you compare the page in Firefox and IE6 under Windows.

I appreciate your input on the position element in the css and I know the code is a bit of a mess at the moment - my excuse is time at the moment! I will get round to cleaning everything up once I've got the site up and running.

Ok, forgive me, I must be REALLY stupid here because I'm just not seeing a problem with the background in IE 6. I'm assuming you are referring to the boat background, first of all. I am just not seeing the right-hand edge you are talking about, to me it looks the same as it does in FF and Opera. What resolution are you looking at this with ?

Your contact page does have a problem, but not with the background.

Look at it in Fireox 2.0 and IE 6.0 I can not see a difference or a problem at all.

he is on a mac

Aahh.. that explains a lot !!!

I cannot see anything wrong with it either with IE7 or FF

again cause he is on a mac.

The problem had nothing to do with the fact that I am using a Mac. I don't exactly know why but when I origianally checked the site (- and customer did as well!) the background image was not positioned as in all the other browsers - on both Mac and PC.
The only thing I can think is that the code:

background-repeat: no-repeat;
background-position: top center;

in the style sheet fixed the problem eventually but didn't show up immediately when I refreshed the IE6 web browser following the upload of the changes.

Now I've got other problems with IE6 - (should these be the subject of a separate thread?):

I've looked at the form and again IE6 breaks it completely whereas it is pretty well OK in all the other browsers I've checked with (those mentioned in an earlier post in this thread). I've tried altering the following:

#banner img {
padding: 0px 0px;
} 

to:

#banner img {
padding: 0px 0px;
display: block;
} 

This gets rid of the white line under the image in IE6 but causes the text block including the logotype image on the left-hand side of the header to be messed up in all browsers!! Unbelievably frustrating! I suppose the simple thing to do is make the whole text block an image!

Also IE6 is adding unwanted spaces all over the place. Noticably under the image in the header, under each of the buttons in the navbar - I haven't managed to sort out what is causing this or how to resolve the problem.

And the centering and spacing of the address and contact info at the top of the right hand panel is messed up. Again, does anyone know why IE6 is doing this and how I can fix it?

Again any thoughts would be much appreciated. Thanks again for all your help

The proper syntax for background position is : horizontal vertical - you had it the other way around as top center.

You can also cut some fat out of your CSS by using 1 line for your background:
background: #fff url(xxxxxx.jpg) no-repeat center top;

You REALLY need to study all of the nasty bugs that IE 6 (and below) are fraught with:
http://www.positioniseverything.net/explorer.html
Not the least of which is its broken box model.

It would also be helpful if you told us exactly which page you're seeing these things on. When you refer to a 'form' I can only guess you're speaking of your Contact page, which really is screwed up. I see no problem at all with any extra white spaces. As I switch between FF 2.0 and IE 6 they look virtually identical - except for the placement of the form itself in IE 6.

You do have this in your header:
<img src="images/_clear.gif" width="122" height="6" border="0" alt="spacer">
after your text, so you are making this space.

You're using a LOT of these spacers.. utterly unnecessary, use the CSS to space your elements !

I would also suggest that rather than a 160px wide border to get your color, just use either the faux column method or actually use a background color on a div, then putting the boat bg on a div that is the width of the middle section.

LadynRed, thanks again for your reply. I apologise for not getting back sooner I thought I had already replied - something must have happened when I posted the earlier reply!?
The problems with the mast head have now been fixed by replacing the table in the banner div with straight forward css. This resolved the positioning mess IE6 made of the logotype and subtext in the header and display: block; got rid of the white line between the image on the right of the header and the black bar containing the current date.
I have also fixed the off-centred address block at the top of the right-hand panel after a lot of trial and error.
The two remaining issues (- apart from the quality of the coding - I appreciate what you say and will go back, once I have the site up and running, to clean it all up!) are:

1) There is a single pixel space showing as the background pale terracotta colour showing up between each of the navigation buttons in IE6 only - all other browsers I have tested display correctly as intended. How can I fix this?

2) In IE6 the form elements on the Contact page are now showing up as intended in relation to each other BUT the whole form is being shunted down the page so there is a huge gap between the text and the form. Does anyone know how to fix this?

Thanks again

The problems with the mast head have now been fixed by replacing the table in the banner div with straight forward css.

Yay !!

#1 -- I'll take a look
#2 - I saw that.. and it appears to have something to do with the form element. If you put a 1px border around #form, you'll see it.

Actually.. it looks like the #content is being pushed below the #left and #right
You need to be mindful of widths on your divs, including padding and margins. IE's busted box model will cause things to drop.

Thanks again, LadynRed. I found that by replacing the following line in the Contact Page:

<table width="490" border="0" cellspacing=0 cellpadding=0>

with:

<table align="center" border="0" cellspacing=0 cellpadding=0>

resolved the problem I could see in IE6. Big relief - though I just hope it is OK in IE5 as well ! I'll have to check and see if can test this - not sure I've got that browser version.

I've also managed to sort out the non-working calendar javascript for the arrival date and departure date fields by replacing the whole of the associated javascript. It seems to work fine now.

The only problem I have noticed with any of the browsers I can test is that none of the pages load at all in IE5 Mac - the page loads seem to stall when the browser is trying to download the background.jpg. I don't suppose anyone has come across this problem and can advise why this is happening?

Many thanks again.

The syntax for background-position is top center, not center top.
http://www.w3schools.com/css/pr_background-position.asp

The only problem I have noticed with any of the browsers I can test is that none of the pages load at all in IE5 Mac

I wouldn't worry too much about IE5 Mac, it's a dead browser, no longer supported in any way by MS. Most Mac users will have moved on to some other browser like Safari or one of the others that are much better.

CSS Syntax for Background Position: http://www.culturedcode.com/css/reference.html

Or, if you prefer, from the w3schools page you referenced:

xpos ypos

The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.

HORIZONTAL, then VERTICAL

If you specify only 1 measurement, or percentage, it applies to the horizontal position; the vertical position of the image will default to 50%. If you specify 2 measurements, the first specifies the horizontal position, the 2nd specifes the vertical. If you specify only one constant, the other dimension defaults to center. The order of constants is not significant. Constants = (vertical)top center bottom & (horizontal) left, center right

from HTML Utopia: Designing Without Tables Using CSS by Dan Shafer from Sitepoint.

It looks like the pages are taking much longer to load in IE5.2 Mac. Is it the size of the download that is causing the page not to load? Is a possible solution to compress all the images further or do you think that replacing the tabled #left section with a css ul list would help?

I've also noticed that there is a 3px white line under the main banner image top right in iCab 3.0.2 Mac. Does anyone know how to fix this?

Thanks again.

Again, I wouldn't waste a lot of energy making things work right for IE 5.2 Mac, the browser is DEAD. However, here's a bug list:
http://www.l-c-n.com/IE5tests/

Just to let everyone know, I resolved the page loading problem in IE5 (Mac) for the website I have been working on by replacing the encoded email addresses produced by AutomaticLabs:MailAddEncoder by those produced by the Email Address Munger.
The only problem that I can see now that the pages load in IE5 Mac is that neither of the background images display whereas they do display in every other browser I've tested. Does anyone have any idea how I fix this?