Help - Search - Members - Calendar
Full Version: IE 6 and 7 problem with background images
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
shannonlp
I am having an issue with background images and with center alignment when viewing a website with IE6 and IE7. In FF 2.0 works fine on Win and MAC.


The image problem is with the left menu. Some white space is showing up between menu elements and I can't figure out how to get rid of the white-space.

2nd the site should be center aligned however in IE6 and 7 it is aligning to the left.

http://www.craftcruises.com

Any help would be great...
pandy
The alignment issue is because IE is in Quirks Mode. That's caused by the mumbo jumbo before the doctype. Looks like something that should be parsed by the server but isn't.


I don't see any gaps in IE. Do you mean the left menu or the top one?
pandy
Do you mean the gaps close to the form? Something is causing those divs to be higher than you've specified. I don't find what, but I didn't bother to read all the style sheets. Anyway, if you make the background images a little higher than the desired hight, those extra pixels won't be noticeable. For instance this one is exactly 18 pixels same as the height for the DIV in the CSS.
http://www.craftcruises.com/images/backgro...uMailingTop.jpg

You should also use a background color as fallback. In this case that will screw up though, because the background images are also shorter than the DIVs horizontally.
shannonlp
Yes that is the spacing. It is starting to appear that below a certain size ie6 won't go any smaller. The number appears to be around 20px.

If I am right any div with an image smaller than 20px will be wrong.
Darin McGrew
That sounds like it might be constrained by the line height of the current font. It's just a guess, since the W3C's CSS validator is down, and searching all the style sheets without its one-page summary is rather challenging.
pandy
That's it! Adding...
CODE
.menuMailingTop { line-height: [something small] }

...fixes it.

Is this a known issue with IE? I don't think I've even noticed it before. Maybe I haven't created very low DIVs.
pandy
No it doesn't. I had decreased the text size in IE, that was what made it go away. Sorry.

There isn't any BR or   either, but the gap does change with text size. unsure.gif

Christian J
I don't notice any difference between IE7 and Firefox. Could someone make a minimal test case?
shannonlp
QUOTE(Christian J @ Dec 30 2007, 05:48 AM) *

I don't notice any difference between IE7 and Firefox. Could someone make a minimal test case?


The problem is happening with IE6. The only problem I am having with IE 7 is on this page.

http://www.craftcruises.com/itinerary.php?...date=2008-04-15


The map image alignment is off...
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.