Need help with a XHTML / CSS2 problem

maxheadroom

Hi,


I'm writing a site that uses XHTML 1.0 strict and CSS2 for layout, and is table free. But I'm having a problem on oner page. I just cant get it right, and I don't understand what's going on.

You can see it here: http://www.eypireland.com/guestbook.php.

In Mozilla (Firebird) there is a small gap at the beginning of the mainbody text [pre]<div>[/pre], but on IE its bloody huge! The gap shouldn't be there at all, and I can't see what's causing it.

I'd really appreciate some help on this...

Thanks.

maxheadroom

Image showing Firebird's display of the affected area

maxheadroom

Image showing IE's display of the affected area

maxheadroom

ok, I tracked it down to a problem with this bit of code:

[PHP]
<form id="display" action="POST">
<div class="sideMenuBox lighterBG">
<div>Guestbook Controls</div>
<span class="thisPage">393 Guestbook Entries.</span>
<span class="thisPage">Now displaying 1 - 10.</span>
<span class="thisPage">Display <SNIP - NASTY LONG JAVASCRIPT FORM STUFF> per page</span>
<a href="/guestbook.php?display=10&sort=&entry=10&search="> › Next 10 Entries</a>
</div></form>
[/PHP]

Changing it to

[PHP]
<div class="sideMenuBox lighterBG">
<form id="display" action="POST">
<div>Guestbook Controls</div>
<span class="thisPage">393 Guestbook Entries.</span>
<span class="thisPage">Now displaying 1 - 10.</span>
<span class="thisPage">Display <SNIP - NASTY LONG JAVASCRIPT FORM STUFF> per page</span>
<a href="/guestbook.php?display=10&sort=&entry=10&search="> › Next 10 Entries</a>
</form></div>
[/PHP]

Fixes the problem on both browsers, but it no longer validates.

This is driving me insane - can anyone suggest anything? If I add a block level tag after the form tag is messes up the CSS positioning completely... If I move the form tag outsuide the DIV tag its in the page validates but displays incorrectly...

armitage_shanks

It' s probably your form tag. Do you really need to use one, I don't see any form code in the block you posted.

Anyway, have you tried placing style="display:inline;" inside your form tag?

(Note I said "inside your form tag", since this particular piece of css is not processed correctly by all browsers if used from a style sheet in a form. No idea why, probably a bug.)

maxheadroom

There's a select dropdown box there, but it has a javascript onchange event assigned to it, so I snipped it out of the code.


style="display: inline;" did the trick nicely! Thanks a million.


you can see it at http://www.eypireland.com/guestbook.php