Your browser does not seem to support CSS. If images appear below, please disregard them.
It appears that you're running an Ad-Blocker. This site is monetized by Advertising and by User Donations; we ask that if you find this site helpful that you whitelist us in your Ad-Blocker, or make a Donation to help aid in operating costs.
Previous Thread
Next Thread
Print Thread
Rate This Thread
#19096 - 08/17/03 10:57 AM Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 574
Cold Sunn Offline
UGN GFX Whore
Cold Sunn  Offline
UGN GFX Whore

Joined: Mar 2002
Posts: 574
Likes: 1
us
When I have s inside
s along with images, they don't line up. The form s are lower than they "should" be but the images seem to be fine.

Does anyone know how to fix this problem besides avoiding the situation?
Sponsored Links
#19097 - 08/18/03 05:30 AM Re: Form Inputs and Images Misaligned  
Joined: Feb 2002
Posts: 7,195
Gremelin Offline
Community Owner
Gremelin  Offline

Community Owner

Joined: Feb 2002
Posts: 7,195
Likes: 3
Portland, OR; USA
put a table within a table! lol


Donate to UGN Security here.
UGN Security, Back of the Web, and VNC Web Services Owner
#19098 - 08/18/03 06:46 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 574
Cold Sunn Offline
UGN GFX Whore
Cold Sunn  Offline
UGN GFX Whore

Joined: Mar 2002
Posts: 574
Likes: 1
us
Are you suggesting I use a table around the form or around the images? Because, the inputs and images alternate. Here is an example of the bullshit:




I'm not sure if that's how I'd do things though. Improving on what you've already got would do better, but it's not like you're posting any HTML for me to look at and suggest changes to.

Domain Registration, Hosting, Management
http://www.dollardns.net
#19099 - 08/18/03 07:36 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 1,273
SilentRage Offline
DollarDNS Owner
SilentRage  Offline
DollarDNS Owner

Joined: Mar 2002
Posts: 1,273
OH, USA
he's suggesting putting a table around the images and input boxes.

userimageuserinputpassimagepassinput
#19100 - 08/18/03 08:45 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 574
Cold Sunn Offline
UGN GFX Whore
Cold Sunn  Offline
UGN GFX Whore

Joined: Mar 2002
Posts: 574
Likes: 1
us
lol SR, here:

Code:
<table cellpadding=0 cellspacing=0>
	<tr><td height=20><img src=img/bg.gif height=20 width=1></td></tr>
	<tr><form><td height=33 valign=middle background=img/barbg.gif>
<img src=img/tconnect.gif>
<a href=#><img src=img/user.gif border=0></a>
<input type=text name="username" maxlength=50 size=14>
<a href=#><img src=img/pass.gif border=0></a>
<input type=password name="password" maxlength=50 size=14>
<img src=img/end.gif>
</td></form></tr>
</table>
I'll try doing separate td's for each item in a second. I'm not sure but I think I might have already tried it.

EDIT: Added
With a TD around each item, and it looks better. But, the first input sets a little too low. Here is the new code:
Code:
<table cellpadding=0 cellspacing=0>
	<tr><td height=20><img src=img/bg.gif height=20 width=1></td></tr>
	<tr><form><td height=33 valign=middle background=img/barbg.gif>
<img src=img/tconnect.gif>
<a href=#><img src=img/user.gif border=0></a></td>
<td height=33 valign=middle background=img/barbg.gif>
<input type=text name="username" maxlength=50 size=14></td>
<td height=33 valign=middle background=img/barbg.gif>
<a href=#><img src=img/pass.gif border=0></a></td>
<td height=33 valign=middle background=img/barbg.gif>
<input type=password name="password" maxlength=50 size=14></td></form>
<td height=33 valign=middle background=img/bg.gif>
<img src=img/end.gif>
</td></tr>
</table>

Sponsored Links
#19101 - 08/18/03 08:38 PM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 1,273
SilentRage Offline
DollarDNS Owner
SilentRage  Offline
DollarDNS Owner

Joined: Mar 2002
Posts: 1,273
OH, USA
I need more than that. I need enough that I can save a local page here on my computer to experiment with.


Domain Registration, Hosting, Management
http://www.dollardns.net
#19102 - 08/19/03 09:53 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 574
Cold Sunn Offline
UGN GFX Whore
Cold Sunn  Offline
UGN GFX Whore

Joined: Mar 2002
Posts: 574
Likes: 1
us
The only other part that matters is the starting HTML and BODY tags. The page I am working with to figure out why this won't line up is nothing but the code I posted and html,head,title,body, and /tags. Oh, and the call to the style sheet.
Code:
<link rel="stylesheet" href="cfg/1.css" type="text/css">
http://www.refreshart.net/ae/cfg/1.css
http://www.refreshart.net/ae/img/tconnect.gif
http://www.refreshart.net/ae/img/user.gif
http://www.refreshart.net/ae/img/pass.gif
http://www.refreshart.net/ae/img/end.gif
http://www.refreshart.net/ae/img/bg.gif
http://www.refreshart.net/ae/img/barbg.gif

Also, this is for a layout I don't really want to go public yet.

#19103 - 08/20/03 01:19 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 1,273
SilentRage Offline
DollarDNS Owner
SilentRage  Offline
DollarDNS Owner

Joined: Mar 2002
Posts: 1,273
OH, USA
I copied all the HTML and it worked perfectly on the first go:

http://serialcoders.sytes.net/linked/page.html


Domain Registration, Hosting, Management
http://www.dollardns.net
#19104 - 08/20/03 03:58 AM Re: Form Inputs and Images Misaligned  
Joined: Jun 2002
Posts: 62
UndeadBob Offline
Junior Member
UndeadBob  Offline
Junior Member

Joined: Jun 2002
Posts: 62
UK
i have found that this kind of thing depends on your browser and also your screen resolution.


"Mrs. Jones, I'm sorry to inform you, but we've run the tests, and it appears that you have XP. Now don't cry - it's bad, but it's not a death sentence. Modern science has advanced in recent years, and it's now possible to live a reasonably happy life with XP. And there's a survivor's group that you'll want to meet as well."
#19105 - 08/20/03 10:56 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 574
Cold Sunn Offline
UGN GFX Whore
Cold Sunn  Offline
UGN GFX Whore

Joined: Mar 2002
Posts: 574
Likes: 1
us
When I look at that page, the bg image starts to repeat at the bottom, which I would guess means the table ius larger than it should be. This looks better than what I had, for whatever reason, but it still doesn't line up perfect. This is really pissing me off, I don't want to have to change the design. Thanks for the help so far though man.

Sponsored Links
#19106 - 08/21/03 09:02 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 815
sinetific Offline
nobody
sinetific  Offline
nobody

Joined: Mar 2002
Posts: 815
Ann Arbor
You could try absolute positioning with CSS.

#19107 - 08/21/03 10:00 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 574
Cold Sunn Offline
UGN GFX Whore
Cold Sunn  Offline
UGN GFX Whore

Joined: Mar 2002
Posts: 574
Likes: 1
us
Good idea sinetific. I actually didn't really know much about absolute and relative positioning in CSS, until a few minutes ago. My first reaction was "What the shit is that?" I think I'll try relative positioning first. Absolute will work, but I am considering centering the layout instead of having it lean against the left side of the browser.

#19108 - 08/21/03 11:59 PM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 815
sinetific Offline
nobody
sinetific  Offline
nobody

Joined: Mar 2002
Posts: 815
Ann Arbor
Yeah, once I learned it I started to use it for the layout of all my pages it's a lot easier since it doesn't really matter how you write your code you can just let the css tags take care of the positioning with a little guestimation on pixel values.

#19109 - 08/23/03 02:34 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 1,273
SilentRage Offline
DollarDNS Owner
SilentRage  Offline
DollarDNS Owner

Joined: Mar 2002
Posts: 1,273
OH, USA
[img]http://serialcoders.sytes.net/linked/example.bmp[/img]

That's what the page looks like for me. It's lined up perfectly (at least, the user/pass stuff is)


Domain Registration, Hosting, Management
http://www.dollardns.net
#19110 - 08/23/03 10:57 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 574
Cold Sunn Offline
UGN GFX Whore
Cold Sunn  Offline
UGN GFX Whore

Joined: Mar 2002
Posts: 574
Likes: 1
us
Below the bottom purple line, the bg image starts to tile again. The table data should only be 20 px high but it is 2 or 3 px higher.

#19111 - 08/24/03 08:41 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 122
SephiroX Offline
Member
SephiroX  Offline
Member

Joined: Mar 2002
Posts: 122
England
umm yeah i got it to work for ya, just msg me next time your on aim

#19112 - 08/25/03 04:42 AM Re: Form Inputs and Images Misaligned  
Joined: Mar 2002
Posts: 574
Cold Sunn Offline
UGN GFX Whore
Cold Sunn  Offline
UGN GFX Whore

Joined: Mar 2002
Posts: 574
Likes: 1
us
I got your mom to work for me. k.

#19113 - 08/25/03 11:45 AM Re: Form Inputs and Images Misaligned  
Joined: Jul 2003
Posts: 14
superpozition Offline
Junior Member
superpozition  Offline
Junior Member

Joined: Jul 2003
Posts: 14
Canada
Cold Sunn,

Well i took a look at it and i changed your code around a little. Cleaned it up and stuff and try this out.

Code:
<form>
	<table cellpadding=0 cellspacing=0>
		<tr><td height=20><img src=img/bg.gif height=20 width=1></td></tr>
		<tr>    
			<td height=33 valign=middle background=img/barbg.gif><!-- <img src=img/tconnect.gif> --><a href=#><img src=img/user.gif border=0></a></td>
			<td height=33 valign=middle background=img/barbg.gif><input type=text name="username" maxlength=50 size=14></td>
			<td height=33 valign=middle background=img/barbg.gif><a href=#><img src=img/pass.gif border=0></a></td>
			<td height=33 valign=middle background=img/barbg.gif><input type=password name="password" maxlength=50 size=14></td>
			<td height=33 valign=middle background=img/bg.gif><img src=img/end.gif></td>
		</tr>
	</table>
</form>
:D


Keep It Real!
#19114 - 08/25/03 02:24 PM Re: Form Inputs and Images Misaligned  
Joined: Aug 2003
Posts: 9
Brett Offline
Aptenodytes Forsteri
Brett  Offline
Aptenodytes Forsteri

Joined: Aug 2003
Posts: 9
Salina, KS
...or you could use
Code:
<form style="margin: 0">


Member Spotlight
Gremelin
Gremelin
Portland, OR; USA
Posts: 7,195
Joined: February 2002
Show All Member Profiles 
Forum Statistics
Forums45
Topics47,469
Posts82,639
Average Daily Posts8
Members2,159
Most Online1,567
Apr 25th, 2010
Latest Postings
Top Posters(All Time)
UGN Security 40,633
Gremelin 7,195
§intå× 3,255
SilentRage 1,273
Ice 1,146
pergesu 1,136
Infinite 1,041
jonconley 955
Girlie 908
unreal 860
Top Liked Users (All Time)
§intå× Likes: 1
Cold Sunn Likes: 1
Crime Likes: 1
Cyrez Likes: 1
Ghost Likes: 1
Gremelin Likes: 4
Ice Likes: 1
unreal Likes: 1
Top Liked Users (30 Days)
No Data Found
Powered by UBB.threads™ PHP Forum Software 7.6.0
(Snapshot build 20160902)