Strange aliginment issue on I.E.

**livewire1974** · Nov 23, 2008 06:58

Hi everybody, I've posted this to the wrong section+ cant delete, should be in CSS.
I'm new to this, so i bet this is simple or silly,

This site appears ok in Firefox, but not on I.E. , its the username and password bit at the top that is out of line on I.E., can anybody show me what I'm doing wrong?

the site is at

http://www.jointheclub.ie/index.php

thanks

**Centauri** · Nov 23, 2008 07:09

Try removing the div that surrounds the submit button.

**livewire1974** · Nov 23, 2008 07:12

Originally Posted by Centauri

Try removing the div that surrounds the submit button.

Tried it, still the same....

**Centauri** · Nov 23, 2008 07:21

The form closing tag is overlapping two closing div tags - the form closing needs to be moved to just after the .forgotp div :

Code:

    <div class="interface">
	<form action="" method="post">
      <div class="usernamebg">
        <div class="username">Username</div>

        <div class="textfield">
            <input name="username" class="field"  type="text" />
        </div>
      </div>
      <div class="usernamebg">
        <div class="username">Password</div>
        <div class="textfield">
            <input name="password" class="field"  type="password" />

        </div>
      </div>
      <input type="image" name="loginbutton" img src="images/submit.jpg"  width="67" height="25" border="0" />
	<div class="forgotp"><a href="forgot.php"> Forgot password? Click here</a></div> 
	</form>	
   </div>
	
  </div>

**paul_wilkins** · Nov 23, 2008 07:57

Let's line up that code so that it's easier to tell what's going on there.

Code html4strict:

<div class="interface">
    <form action="" method="post">
        <div class="usernamebg">
            <div class="username">Username</div>
            <div class="textfield">
                <input name="username" class="field"  type="text" />
            </div>
        </div>
        <div class="usernamebg">
            <div class="username">Password</div>
            <div class="textfield">
                <input name="password" class="field"  type="password" />
            </div>
        </div>
        <input type="image" name="loginbutton" img src="images/submit.jpg"  width="67" height="25" border="0" />
        <div class="forgotp"><a href="forgot.php"> Forgot password? Click here</a></div>
    </form>	
</div>
<!-- extra /div removed -->

**livewire1974** · Nov 23, 2008 08:43

Thanks guys, tried the suggestions, neither work....is there something else i can do?

**paul_wilkins** · Nov 23, 2008 08:46

Yes, someone could actually take a copy of it and play around wit it to find out what the problem actually is. I'll take a look at it now.

My first suspicion before even starting to look is that it's CSS to blame.

Edit: I was right. The mystyle.css file has a strange line that goes:

Code css:

*width:;

Which when removed fixes the problem, in IE7 anyway, and creates another one where the "forgot password" text wraps in IE.

I suggest moving this along to the css forum where experts can be of great help to you with this issue.

**livewire1974** · Nov 23, 2008 08:53

Originally Posted by pmw57

Yes, someone could actually take a copy of it and play around wit it to find out what the problem actually is. I'll take a look at it now.

My first suspicion before even starting to look is that it's CSS to blame.

yes, its def the CSS, i'm looking @ it also, but new to CSS so its slow...