On 2 Nov 2004, at 11:38 PM, Sam Hutchinson wrote:
Hi all,
Fairly new here and been monitoring list for a day or so, all very useful stuff.
Anyway, i'm having a bit of trouble with hanging images - my right image hangs into the footer on Mozilla - any ideas?
http://www.sammyco.co.uk/pages/solutions/default.html
Page validates as xhtml & css, and works ok everywhere else but still looks slightly odd in Moz....
Cheers
Sam
----------------------------------------------------------------------- -----------------------------
SAM[MY]CO » CREATIVE DESIGN SOLUTIONS
» website [re]launch november 04
http://www.sammyco.co.uk/
...let's fix the web !
Sam, my guess from checking out your page quickly in several browsers is that you're developing for IE - instead of working to a compliant browser and *then* tweaking/hacking for IE. You say 'works ok everywhere else', but it doesn't; IE6/Win is the *only* browser that I've got that your layout is good in. Firefox, Safari, Opera, Netscape, Mozilla on Mac all show the 'hanging image' problem; IE/Mac is totally busted (if you care) - the biggirl image is sitting over the top of your content!
Validation's not enough - use a compliant browser to test, then make it work in IE's busted rendering.
As to the problem itself: It's the -5px margin you have on #topright_sub. margin: 0 fixes it in all my browsers (except IE). Negative margins will always give you headaches - don't use them as a positional hack. The problem's almost always something else.
The main problem with IEMac is the float:left on #topright_sub - float:right works, and makes more sense in the layout anyway.
Personally, I don't think you need to float both #topleft and #topright - give #topleft a margin-right of 330px to make room for the image in #topright_sub, and just float it - to the right. (BTW, beware of underscores in id names. Some browsers don't like them, and ignore the rule altogether.)
Also - there's a *big* delay in the page load - I think it's all that javascript?
Oh, and can you post here using plain text messages, please?
N ___________________________ Omnivision. Websight. http://www.omnivision.com.au/
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
