IE is messing up my webpage

[jakyra]

My page looks lovely in Mozilla. Everything does what it's supposed to.

My table set at 85% width fits within the page without making scrollbars show up. My text shows up all on it's own.

IE is different. The table scrolls off the right side of the page and soem of the text doesn't show up right away (but if you drag your mouse over it, it does)

Obviously IE is playing fast and loose with HTML, but I don't know how to fix it.

I'm using CSS to have a left hand column and then I have this:

Code: Select all

	<h2>Print Books</h2>



<FORM NAME="PrintBooks" METHOD="post" ACTION="BookPrint.asp">
	Leave the text box blank to print them all. 

	Print first <INPUT TYPE = "text" NAME = "BooksToPrint" > 
	<SELECT NAME="list">
		<OPTION VALUE="ToDownload">Books reserved but not downloaded</OPTION>
		
			<OPTION VALUE="ToEdit">Books to Edit</OPTION>
		
		<OPTION VALUE="ToReview">Books to review</OPTION>
		<OPTION VALUE="Reviewed">Books reviewed this year</OPTION>
		
	</SELECT>
	 <INPUT Type="Submit" NAME="submit" Value="Print Books">
	
		
Mark these books as having been edited by me: <INPUT TYPE = "checkbox" NAME = "MarkEdited" VALUE="MarkEdited">
	
</FORM>





	<h2> Books to Edit</h2>
	
	

You have 12 books to edit.
	


	<table width="90%" border="0" cellspacing="0" cellpadding="2">
	  <tr>
			<th align="left">ISBN</th>
			<th align="left">Title</th>
			<th align="Center">Edit Level</th>
			<th> </th>
	  </tr>
	  
	  	<tr valign="top"> 
	  		<td nowrap>0-06-008671-8</a></td>
	  		<td>Thanksgiving at the Tappletons'</td>
	  		<td nowrap>Not Edited</td>
	  		<td nowrap><FORM NAME="Edit0-06-008671-8" METHOD="post" ACTION="BookReview.asp">
	  				<INPUT Type = "Hidden" NAME = "ISBN" Value = "0-06-008671-8">
	  				<INPUT Type = "Hidden" NAME = "Edit" Value = "Review">
	  				<INPUT Type="Submit" NAME="submit" Value="Edit this book"></form>
	  		</td>
			</tr>

etc.

It's the text in the first form that isn't showing up.

Thanks
jakyra

[Rob]

can you post a url to a txt version of this *entire* page?

I can't possibly see what's happening from the little piece of code.

[jakyra]

sure
page source: http://ci.education.umn.edu/developm...yBooksPage.txt
view in mozilla: http://ci.education.umn.edu/developm...llaMyBooks.gif
view in ie: http://ci.education.umn.edu/developm.../IEMyBooks.gif

Thanks

[Rob]

I STRONGLY suggest you try and validate this... I see loads of missing ending tags.

I'll try and look at this!

[jakyra]

Well, it's script generated, so the same errors would be repeated many times.

Thanks
jakyra

[Rob]

This is without doubt pretty bad html formatting.

Use all lowercase for html tags... remove the extra un-needed paragraph tags.
Don't surround forms in parapgraph tags and make sure to end all tags that dont have and ending tag
with /> (eg. &ltbr />)

To fix this, all I did was just add:- width:100%; to the CSS definition for the 'right' ID definition.

It will then use 100% of the available width... and your tables will use whatever percentage of that.

There is probabally a much better way of writing this, but that would involve getting it into a proper
CSS / XHTML layout.

I would highly recommend making sure you code validates using the W3C validation tool.

Hope this helps!

[jakyra]

*writes on the chalkboard* "I will endevor to use proper HTML formatting."

Wow. I didn't even know there was a W3C validation tool. That's cool!

I'll see how the CSS changes pan out tomorrow.

Thanks Rob

[Rob]

[jakyra]

So, I tried adding width = 100% and it looks good in IE, but it's wrong in Mozilla. (the same way that it was wrong in IE before)

Damn browsers, can't they pick a standard and stick to it!

A lot of people who use my page are educators and so they may have Netscape so it's important to me that it looks good for both browsers

Do I need a different CSS page for different browsers?

can I put ASP code in my CSS page to make the decision on the fly?

Thanks!
jakyra