Display: block; is algning all images on the page - not just the menu

I am using two style sheets - one for my menu and one for the rest of the page. The menu (designed with fireworks) uses the following code at the top of the style sheet -

td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
	display: block;

Code (markup):

This is moving ALL images on my page to align vertically.

The style sheets are in the head of the document like this -

<style type="text/css" media="screen">
@import url("Menu.css");
</style>
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>

<link href="/css/wicz.css" rel="stylesheet" type="text/css" />

Code (markup):

Why does the menu.css change the images on the entire page? Shouldn't it just effect the menu? The only way I have been able to fix this is to add the following to the wicz.css sheet -

td img {
	display: inline;

Code (markup):

When I do this everything seems to work fine, but I am confused as to why this is happening. I am sure it's something simple, but I have been looking at the "problem" for so long now, that I can't figure it out.

I would appreciate any help you can give me to fix this problem.

 

That is not a bug. It is correct behavior. IE, in quirks mode, screws it up.

See mysterious gaps for an explanation. Using img {display: block;} is one fix, but it can cause problems.

cheers,

gary

 

I am not sure if I described the problem accuratley. All image on the page align vertically. if I have three images next to each other (horizontally) in a cell, the menu.css with the

td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
	display: block;

Code (markup):

displays everything vertically, NOT just in the menu. It "ruins" the whole page. The only way I have been able to get around this is to add

td img {
	display: inline;

Code (markup):

to the second style sheet to correct the rest of the page.

Why does the menu.css "ruin" the rest of the page? Is it because there are two style sheets being used, or is something coded wrong, etc...?

Thanks.

 

Well, link us to the page or post the code. Images are naturally inline. Why do you make them block? There is no Gecko bug that I've heard of that requires images be block.

Which file a style rule is in does not affect which elements are styled, the selector does that. If you say in the one the text is pink, the text will be pink until overridden by a later (the style sheets are applied in the order loaded) or more specific rule.

If you depend on helper apps to write your code, you will turn out crappy code that you don't understand. Write your own; it's not rocket science.

gary