IE / Firefox question

[garyd]

I'm creating a new site for a non-profit park group. I'm trying to keep it ver simple because I'm donating my time... I have a question that I think should be simple?

In IE I have a gap between the "header" and the "menu/content", but in firefox I don't have this space?

Here's the link: http://www.ditschfitness.com/parkboard/home.php

Any ideas? I'm thinking it may have something to do with margins, but they are all set to "0".. so it might be a table issue in the layout?

I don't know and haven't had luck fixing it?

thanks for any ideas - garyd

[Wassercrats]

You could add img {margin-bottom: -4px;}.

[kitchin]

It's the whitespace after the second image tag. I didn't know IE had this problem; it was a ridic. annoyance in Netscape 4. Browsers are supposed to ignore this stuff...

so change

<img src="temp_files/baseball2.jpg" alt="">
</td>

to

<img src="temp_files/baseball2.jpg" alt=""></td>

(Where "baseball2.jpg" varies, set by the script.)

[MPaul]

What kitchin proposed fixes the problem. But if you want to fix it using CSS only, add this to your stylesheet: #header img {display: block;}

I tested it on a local copy of your website and it seems to fix the problem. IE is weird, weird weird. But when I redesigned my website its bugs didn't really bother me since I anticipate them from now on.

[TVB]

Thanks you guys for the reply to Gary's question. I have a very similar issue in our site and while it didn't bother me enough to try to find the fix, it's good that I have a reference point on it. I'm going to try each solution this weekend.

Betsy
---I know it's not a problem if Wassercrats never pointed it out!

[Wassercrats]

I know it's not a problem if Wassercrats never pointed it out!Not enough space under the heading (the "f"s and "p"s touch the menu bar), too much space under the top menu text, the orange bullet lines under "Latest News" are barely visible and should match the "Conversations" bullets (a problem in IE but not Firefox), the "Conversations" content doesn't show up without Javascript--you need noscript tags, the items under "Latest News" aren't spaced enough, two items under "Conversations" don't begin with a capital letter ("stay a virgin..." and "server woops"), not enough space to the left of and under "[ Back ]", the "in the life" image is a little too far right, "Get this page on your desktop" isn't aligned left like other options, The "Disclaimers" is spaced too much from the text on top of it, "We have 88 guests online" is aligned left but should be centered, the footer information is directly below the center content in Firefox, but it's below everything in IE, and there are no results for the "how old are you" poll.

[garyd]

thanks a bunch! That was a quick fix. I used Kitchen's example. But have definately stored MPaul's in the file of fixes.

The photo img is actually a random php script so having the space before the </td> tag didn't cross my mind.

later - garyd

[Randall]

It's the whitespace after the second image tag. I didn't know IE had this problem; it was a ridic. annoyance in Netscape 4. I thought of that when I was looking at the source, but I didn't have time to test it. Seemed like a long shot anyway -- go figure. But if you want to fix it using CSS only, add this to your stylesheet: #header img {display: block;} I really need to read up on the significance of display:block. I get the feeling I'm missing something. I know it's not a problem if Wassercrats never pointed it out! That'll teach you. :rasberry:

If nothing else, we now know that Wasser can read tiny type.

Randall

[Wassercrats]

I really need to read up on the significance of display:block. I get the feeling I'm missing something.The only reason I see for that working is that inline things like the image get bottom space added in IE and blocks don't, either because the space is specified or added by default. I don't think that knowing the significance of display:block, which is pretty simple if you know what a block level element is, would help unless you read specifically about how it affects images in IE.

Of the solutions offered, I would have gone with a CSS solution because that's where style things belong and it will prevent someone who's editing the template from putting the </td> back on the next line. I don't really like display:block either since images are inline elements and adding something after the image when the image isn't at its natural level could have unexpected results. With my solution, it would be best to add an id selector and make it a conditional comment, which I don't like either. None of these solutions are great, but they all work.

Another solution is not to use tables for layout. That's the solution I'd choose.

[Randall]

I don't really like display:block either since images are inline elements and adding something after the image when the image isn't at its natural level could have unexpected results. But the whole point of using display:block here is to make the image act like a block element. If you go back and start doing inline things to it and something weird happens, it's your own fault.

I just don't like having to think like a W3C engineer every time CSS does something that HTML wouldn't have. Oh well, that's living with standards, I guess.

Meanwhile, now that I understand (I think) what IE is doing with z-index, I can experiment more with position:absolute.

Anyone remember how to get the browser viewport size in Javascript? The site I'm working on won't work at less than 800x600, but I'm thinking about a way to fall back to a simpler CSS style sheet when that happens.

Randall