I am designing a web page with CSS and I have divs set up as rows. In some of these rows I have text, and in others I just have images. In the ones that I have images, there is extra white space added to the bottom of the images, thus jacking up the look of the site. I can get rid of this using "font-size: 0.1em;", and that has worked for me thus far. My problem is that now I have a pop up navigation under one of those image divs, and its adding the whitespace and I cant use my font-size hack to fix it since it will make the pop up text tiny. Is there any work around to this thats gonna work both in firefox and IE?

** I tried moving the element below it, up by using margin-top: -5px; and that works in IE, but not firefox, so its a no go.

I'm not sure I understand but did you try adding some padding? or increasing the Div height?

An example would be so much easier to deal with. Seeing the html and css allows for quick answers...

Question - does adding the following as the last rule in your CSS make any difference:

img { margin:0; padding:0; }

padding doesnt change anything. Its like I have a row of images and no text in the code, but the browser thinks i have text there and instead of the row being 24px high like i want it, its actually 28px high. If I make the font super small, it gets rid of the gap, but kills my pop up navigation cuz the text is tiny. I got rid of all the spaces in between the image tags and it fixed it in IE, but not firefox.

<div style="height: 24px; margin-right: 5px; margin-left: 5px;">
<ul id="cssdropdown">
<li class="mainitems">
<a href="./about/" onmouseout="chgImg('aboutus','ABOUToff');" onmouseover="chgImg('aboutus','ABOUTon');"><img src="./images/menu_about.gif" name="aboutus" style="border: 0px; padding: 0px;" alt="About Us" /></a>
<ul class="subuls">
<li><a href="">Biographies</a></li>
<li><a href="">Current News</a></li>
<li><a href="">Compliance Policy</a></li>
</ul>
</li>
<li class="mainitems"><a href="./consulting/" onmouseout="chgImg('consulting','CONSULTINGoff');" onmouseover="chgImg('consulting','CONSULTINGon');"><img src="./images/menu_consulting.gif" name="consulting" style="border: 0px; padding: 0px;" alt="Consulting" /></a></li>
<li class="mainitems">
<a href="./medical/" onmouseout="chgImg('medical','MEDICALoff');" onmouseover="chgImg('medical','MEDICALon');"><img src="./images/menu_medical.gif" name="medical" style="border: 0px; padding: 0px;" alt="Medical Services" /></a>
<ul class="subuls" style="width: 206px">
<li><a href="">Billing</a></li>
<li><a href="">Coding</a></li>
<li><a href="">Why JBR?</a></li>
</ul>
</li>
<li class="mainitems"><a href="./clients/" onmouseout="chgImg('clients','CLIENTSoff');" onmouseover="chgImg('clients','CLIENTSon');"><img src="./images/menu_clients.gif" name="clients" style="border: 0px; padding: 0px;" alt="Our Clients" /></a><li>
<li class="mainitems">
<a href="./careers/" onmouseout="chgImg('careers','CAREERSoff');" onmouseover="chgImg('careers','CAREERSon');"><img src="./images/menu_careers.gif" name="careers" style="border: 0px; padding: 0px;" alt="Careers at JBR" /></a>
<ul class="subuls" style="width: 15em">
<li><a href="">Our Philosphy</a></li>
<li><a href="">Benefits at JBR</a></li>
<li><a href="">Current Opportunities</a></li>
</ul>
</li>
</ul>
</div>

Its actually closer to 28px, with the extra white space on the bottom. I removed all the breaks and put all this code on a single line and that fixed it for IE, but not firefox.

Do your xhtml pages (or app output) include a DOCTYPE declaration? If so, which?

<div style="height: 24px; margin-right: 5px; margin-left: 5px;">
<ul id="cssdropdown">
<li class="mainitems">
<a href="./about/" onmouseout="chgImg('aboutus','ABOUToff');" onmouseover="chgImg('aboutus','ABOUTon');"><img src="./images/menu_about.gif" name="aboutus" style="border: 0px; padding: 0px;" alt="About Us" /></a>
<ul class="subuls">
<li><a href="">Biographies</a></li>
<li><a href="">Current News</a></li>
<li><a href="">Compliance Policy</a></li>
</ul>
</li>
<li class="mainitems"><a href="./consulting/" onmouseout="chgImg('consulting','CONSULTINGoff');" onmouseover="chgImg('consulting','CONSULTINGon');"><img src="./images/menu_consulting.gif" name="consulting" style="border: 0px; padding: 0px;" alt="Consulting" /></a></li>
<li class="mainitems">
<a href="./medical/" onmouseout="chgImg('medical','MEDICALoff');" onmouseover="chgImg('medical','MEDICALon');"><img src="./images/menu_medical.gif" name="medical" style="border: 0px; padding: 0px;" alt="Medical Services" /></a>
<ul class="subuls" style="width: 206px">
<li><a href="">Billing</a></li>
<li><a href="">Coding</a></li>
<li><a href="">Why JBR?</a></li>
</ul>
</li>
<li class="mainitems"><a href="./clients/" onmouseout="chgImg('clients','CLIENTSoff');" onmouseover="chgImg('clients','CLIENTSon');"><img src="./images/menu_clients.gif" name="clients" style="border: 0px; padding: 0px;" alt="Our Clients" /></a><li>
<li class="mainitems">
<a href="./careers/" onmouseout="chgImg('careers','CAREERSoff');" onmouseover="chgImg('careers','CAREERSon');"><img src="./images/menu_careers.gif" name="careers" style="border: 0px; padding: 0px;" alt="Careers at JBR" /></a>
<ul class="subuls" style="width: 15em">
<li><a href="">Our Philosphy</a></li>
<li><a href="">Benefits at JBR</a></li>
<li><a href="">Current Opportunities</a></li>
</ul>
</li>
</ul>
</div>

Its actually closer to 28px, with the extra white space on the bottom. I removed all the breaks and put all this code on a single line and that fixed it for IE, but not firefox.


EDIT Wups. misread this

In the CSS, use the height and width attributes to set the exact dimensions with pixels. And then make sure the overflow is set to hidden. For example:
div style="width: 50px; height: 20px; overflow: hidden;"
That should work.

The overflow:hidden tag works but doesnt work because my pop up menus are now hidden in firefox, but not IE. I really hate these different browser standards.

Hmm... I can't really help. At the moment my knowledge is limited...

The CSS should work, but I don't like pop-up menus and thus don't play with them

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

is the document type.