Hey All

 

This is driving me nuts! I've got my CSS/XHTML layout working in FF2, MSIE7, Opera but when you look at it in Mozilla or Netscape it goes tits up.

 

Layout

 

Basically underneath the header elements [logo, navigation, strapline] I have a div called 'main' and this has a background image. This background is the white box with the fading purple border. It sits in the correct place in FF and MSIE and Opera, but in Mozilla and Netscape it gets positioned at the top of the page.

 

I've done eveything I can think of, stripping my code back to basics and rebuilding it to see if I've missed things out but everything seems to be OK with the code, to my eyes. I've even taken out elements like the navigation or the footer, thinking they might be causing a problem, but nothing changes the position of this background.

 

It's all very strange.

 

Can anyone see why?

 

E

Do you have a copy of the CSS file that I can look at?

Hi there

 

You can find the CSS here:

 

CSS FILE

Hi Evie,

 

Nice Design and very well documented CSS !

 

Have you tried

 

position: absolute;

top: 150px; (the ditance from the top of the page to the top of the main div)

 

?

 

I'll try it!

 

Never had to do that before for divs with background images - I wonder whether it will mess up the layout for the other browsers?

Hmmmm, worth a try, as the BG is within a div - then you should be able to do anything you like as normal. if that does'n't work try position: relative or before the div (main) add <div style="clear:both"></div>

 

Ben

Just tried that - it messes everything up even more - it makes the footer go up to the top of the page and cover everything.

in the div about that problematic div try margin-bottom: 0 auto;

Do you mean above?

 

 

the 'header' div above the 'main' div has:

 

#header {
width: 730px;
margin: 0 auto;
}

 

and so the bottom margin of that element is already set to zero and the '0' refers to both the top and bottom margins.

Hmmmm, worth a try, as the BG is within a div - then you should be able to do anything you like as normal. if that does'n't work try position: relative or before the div (main) add <div style="clear:both"></div>

 

adding position:relative has no effect in FF but in Mozilla it just brings the background image to the front but doens't change it's position. I got a clearing div in there already, so it's not that either.

 

I'm going to try a work aroud and not use the background image. Instead cut the top of the image and have that in the html at the top of the main div and then creates the border images and have them as backgrounds to the left and right divs and see if that works. Seems a long winded way of doing things, but if it work I may as well do it.

I'm nearly there with this solution...it seems that Mozilla has a huge probelm with background elements - images and colours. If I add a background colour of #ffffff this starts at the top of the page, if i've got a background image it's the same. So I'm going to do a search on google to see if there's a fix.

 

Will keep you posted.

OK, I've discovered that Mozilla has a problem rendering clear: both; so I've gone back to my original CSS, but not found a way of fixing this yet.

yeah I meant above, the idea behind was that if the div element above the one with the background image was fine and you fixed the background image element to the one that was correct it would stay there.

Fixed it!

 

the css for the 'main' div is now:

 

#main {
margin: 0 auto;
padding: 10px 30px 25px 30px;
background:url(assets/main_top.jpg) no-repeat #ffffff;
}

 

and the css for my clear is now:

 

.clear{
clear: both;
padding: 0;
margin: 0;
height: 1px;
}

 

I found out that if the clear:both doean't have anything in it or a dimension specified Mozilla won't recognise it. So I put a   in there first and that caused the 'main' div to move down by about 18px, so I added a margin of -18px to the css for the clear and that worked in everything apart from MSIE. So decided to ditch that and removed the   and added a 1px height to the clear instead - it's barely noticeable.

 

So all fixed.

 

I'll find out that it doesn't work on a mac now and all hell will break loose!!!

Well if you get that problem just burn ALL macs.

No I'll just resign!

Congratulations, what a relief that must of been!

 

So pleased it's fixed for you and thanks for posting the solution E

 

Reminds a bit of the small but annoying IE problems, like when you add a div it defaults to 10px height to if you want it set to the height specified i.e 3, 4 or 5px you have to add font-size: 1px;

 

Cheers again.

I found that Safari pretty much renders the same as FF (pc). as for other browsers, who knows?