Web Hosting Talk







View Full Version : Layout is breaking and I don't know why...


Seraphic
08-15-2008, 11:40 PM
Hi,

On my website I have a login form for a quick login to my form, but I'm having some problems with form textboxes and form submit buttons on Opera, Safari, and Internet Explorer. On Firefox there are no problems, but the layout is breaking with with the other browsers.

Odd thing is, if I view the same code for the login form on the forums itself, the page is not breaking. I've gone out of my way to test the layout on Internet Explorer, Opera, Safari and Firefox. Everything matches but this and I don't know why it isn't working.

Any ideas?

CSS:
.formtextboxout {
width: 100px;
height: 15px;
color: #FFFFFF;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1em;
font-weight: normal;
border: 1px solid #191919;
background-color: #414959;
padding: 1px;
text-indent: 0pt;
}

Part of the code:
<tr>
<td width="130" height="15" align="center"><input class="formtextboxout" maxlength="25" name="username" value="Username"></td>
</tr>
<tr>
<td width="130" height="15" align="center"><input class="formtextboxout" maxlength="25" name="password" value="********"></td>
</tr>
<tr>
<td width="160" height="20"><input class="formbuttons" type="submit" value="Login" name="login">&nbsp;&nbsp;Auto Login<input class="text" type="checkbox" checked="checked" name="autologin"></td>
</tr>

Seraphic
08-15-2008, 11:59 PM
(FF Left - IE Right)
http://www.temp.seraphicgate.com/ff.jpg
http://www.temp.seraphicgate.com/ie.jpg

Slitheryimp
08-16-2008, 03:04 AM
It's a little difficult without seeing the website itself, but it could be that the problematic table is missing the following:
<table cellpadding="0" cellspacing="0">

Jay August
08-16-2008, 04:35 AM
<tr>
<td width="130" height="15" align="center"><input class="formtextboxout" maxlength="25" name="username" value="Username"></td>
</tr>
<tr>
<td width="130" height="15" align="center"><input class="formtextboxout" maxlength="25" name="password" value="********"></td>
</tr>


you also need to specify what type of inputs these are.

<input type="text" ....
<input type="password" ....

Seraphic
08-16-2008, 12:02 PM
My website isn't live at the moment. But if you want to take a look at the full code, let me know and I'll give you a login to the website.

It's a little difficult without seeing the website itself, but it could be that the problematic table is missing the following:
<table cellpadding="0" cellspacing="0">

All the tables have that code.
Spent a few hours going over this yesterday. But could not find out what the problem is.

you also need to specify what type of inputs these are.

<input type="text" ....
<input type="password" ....

I had those, but when I was trying to edit/rebuild the table, I must have removed it and not added it back after.

Seraphic
08-16-2008, 01:02 PM
Well, found the fix. I knew it was in the forum css code because I used the same code on the forums, just in another page. So after going over the forum css, I found what I needed.

* {
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
}

Now it works with Internet Explorer, Opera, Safari and Firefox.

Seraphic
08-16-2008, 01:10 PM
Only problem with that is that it kills all spacing on the rest of the site. So trying to work on a fix for that.

Seraphic
08-16-2008, 04:07 PM
Alright, got it working now.

Thanks for help.