A form on my website messes up in IE but is fine in FF and Chrome?

Get Started
1

Hey guys,

I’m not too sure what the best way is to explain this so I’ll post images below. Quite obvious what’s wrong but not got a clue how to fix it! If you need code please let me know which bits exactly so I don’t spam you all

website: http://80.229.125.67/budgie/organised/index.php

Images:
http://imageshack.us…46/74267272.png
http://imageshack.us…45/48506417.png

Thanks for any help

Ed

2

Your image links are broken. Here is what I see:

IE: http://i.imgur.com/3bSt7.png
Chrome: http://i.imgur.com/Q4HQG.png

If you’re worried about the border-radius, this is a CSS3 property that isn’t supported on older browsers. There are lots of rounded corner techniques out there that don’t require CSS3, but they’re all pretty clunky (lots of containers, sometimes JavaScript). I’d either redesign the form or just ignore it.

3

Try these!

4

Are you using an include to put the login form in there? You have a whole new page sitting inside the .login div (screenshot of source). Take all of that extra stuff out of the include and just have the <form> … </form> stuff inside the .login div. :slight_smile:

5

raw10 is right – you’ve got one ENTIRE document pasted into another; that shouldn’t work ANYWHERE. You’ve got all sorts of other issues in there though ranging from DIV for NOTHING, none-semantic code, paragraphs around non-paragraph elements, dividers in the markup for no reason, code order that doesn’t exactly make sense, lack of headings, etc, etc…

You’d almost think it was in “transition” from 1997 to 1998. Oh wait…
“-//W3C//DTD XHTML 1.0 Transitional//EN”

… it is. That’s basically saying “I’m writing HTML 3.2 and then pretending I’m using modern techniques”.

If I were writing the same page, the code would probably be more like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<link
	rel="shortcut icon"
	href="/favicon.ico"
/>

<title>
	Budgie
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Budgie
		<span><!-- image replacement --></span>
	</h1>

	<ul id="socialLinks">
		<li>
			<a href="http://facebook.com/Budgie.SocialDiscussion">
				<img
					src="Images/facebook.png"
					alt="Facebook"
					width="16" height="16"
				/>
			</a>
		</li><li>
			<a href="https://profiles.google.com/u/0/112265357246183728158">
				<img
					src="Images/google.png"
					alt="Google"
					width="16" height="16"
				/>
			</a>
		</li><li>
			<a href="http://twitter.com/Budgie_SD">
				<img
					src="Images/twitter.png"
					alt="Twitter"
					width="16" height="16"
				/>
			</a>
		</li>
	</ul>

	<p class="topSignup">
		Not already a user?
		<a href="register.php">Sign up here!</a>
	</p>

	<form action="#" method="POST" id="topLogin">
		<fieldset>
			<label for="topLoginUsername">UserName:</label>
			<input type="text" name="username" id="loginUsername" />
			<br />
			<label for="topLoginPassword">Password:</label>
			<input type="password" name="password" id="topLoginPassword" />
			<br />
			<input type="submit" value="Log in"	class="submit" />
			<p>
				Have you forgotten your username?
			</p>
		</fieldset>
	</form>

	<ul id="mainMenu">
		<li><a href="index.php">latest posts</a></li>
		<li><a href="ideas.php">ideas</a></li>
		<li><a href="facts.php">facts</a></li>
		<li><a href="quotes.php">quotes</a></li>
		<li><a href="articles.php">articles</a></li>
		<li class="last"><a href="images.php">images</a></li>
	</ul>

<!-- #pageWrapper --></div>

</body></html>

which provides more than enough hooks to handle what you have so far from the CSS.