Div duplicating in IE8

I’m struggling to rectify a strange layout issue which only seems to occur in IE8. See here:

http://dev.tenthtime.com/family/baby-monitors/default.aspx

Essentially, the whole layout seems to be messed up by the fact that the div #search is part duplicated for some inexplicable reason. I don’t even know where to start with this one.

Any ideas, guys? :slight_smile:

The only thing I can see in the code that looks funny is that you’ve got the spacing a bit messed up in the image tag there - rather than ending go.png" /> with a space before the closing slash, you’ve got go.png"/>. As IE8 alone among modern browsers still spits its dummy out at proper XHTML, that’s all I can see that would cause any problems.

Thanks, I’ve fixed this but it doesn’t seem to make any difference.

Okay, I’ve worked out that removing the following code sorts out the problem:

<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">

However, this code is essential - so what can I do? :confused:

Besides a duplicate title element, and a few other errors and things that could be done better, you also wrap your whole page body in a form element… and than nest another form element in it. Which is a big NO.

According to specs:

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) – interactive form –>

a form element should not have another form element nested inside it. Doing so, nesting a form in another form, has unpredictable results. Like the ones you’re experiencing :slight_smile: