hey guys,

just a (hopefully) quick question for you. i'm almost ready to rollout out a site but there is a slight different in the way the page is rendered in IE and Firefox. the site is temporarily hosted here http://www.quickit.net.au/bbc2/ and it the menu looks good in IE but not in Firefox. how do i get rid of the gaps underneath my <div> tags that hold my images? i've tried display:block abd border:0, i've tried changing the height. i haven't tried changing the doctype yet. i'm hoping one of you guys will know the problem pretty quickly!

thanks heaps for all your help

I had a similar issue with my website and the way I actually fixed it was to build a table and set the row height to exactly the same height as the image files that I put in them... probably not the best solution, but it worked for me.

and if that doesn't work, to be completely honest, I don't think it looks too bad with the gaps in it. lol

way I actually fixed it was to build a table and set the row height to exactly the same height as the image files

That's not a 'fix' it's a cop-out.

Instead of sticking your inaccessible menu inside divs inside a <td> use an Unordered list instead.

I would also suggest you remove ALL the whitespace between the existing divs in your menu HTML.

Originally Posted by LadynRed

That's not a 'fix' it's a cop-out.

Originally Posted by StickerCharged

probably not the best solution, but it worked for me.

ahh, come on, you can't say you never did anything the easy/lazy way. lol

well after some more 'experimenting' pronounced swearing it turns out i was a silly fool and didn't try the display:block on the <img> tag!

now to address the inaccessible menus!

hh, come on, you can't say you never did anything the easy/lazy way. lol

In my life.. no I can't say that, but I would never revisit the bad old days of tables for layout. I build standards-based, accessible websites, being lazy is not an option.