1
cpreet
[TIP] Fix that < form >
  • 2004/6/15 23:14

  • cpreet

  • Just popping in

  • Posts: 5

  • Since: 2004/6/10



Did you ever noticed some unnecessary space under your <FORM>s ?

Not a big deal, you may say, but what a bad look it gives to a content layout.

See for yourself, for instance on this very site, just have a look at the [Search] block on the top of the right-column. The [Advance Search] link has been pushed too far-far down that it doesn't seem be a part of that block. Instead it looks as if the Adv.Search feature is only for those u click-thru the PayPal ! Anyway, got my point ?

Well, the fix is very-very simple. Just a single line of CSS will do the job for us. Here it is :

FORM margin-bottom0px; }


Add it to your /themes/{yourtemplate}/style.css with the actual template folder in place of {yourtemplate}. You may replace 0px with 5px if need a marigin 5 pixel.

BTW, its only checked with the IE. But the others should also see no problem with that, or they may not be having this problem (as usual), in the first place.

Hope to see it in action on xoops.net site, too, ASAP. Admins r u listenin' ?

That's it for today !

CPreet

2
hsalazar
Re: [TIP] Fix that < form >
  • 2004/6/15 23:25

  • hsalazar

  • Just popping in

  • Posts: 78

  • Since: 2003/2/6 1


CPreet:

Of course it all depends on the theme designer. Of the three themes shipped in the XOOPS distribution pack, only the x2t theme defines by default its forms with this declaration:

form {margin: 0px; padding: 0px;}

That's one of the many, many things that can be customized to please the users' whims.

Thanks for pointing this out.

Cheers.

3
tjnemez
Re: [TIP] Fix that < form >
  • 2004/6/16 0:34

  • tjnemez

  • Home away from home

  • Posts: 1594

  • Since: 2003/9/21


Quote:
Did you ever noticed some unnecessary space under your <FORM>s ?


no

Quote:
Not a big deal, you may say, but what a bad look it gives to a content layout.


a matter of opinion

Quote:
See for yourself, for instance on this very site, just have a look at the [Search] block on the top of the right-column. The [Advance Search] link has been pushed too far-far down that it doesn't seem be a part of that block. Instead it looks as if the Adv.Search feature is only for those u click-thru the PayPal ! Anyway, got my point ?


this is more an issue of block padding (bottom) as you can see by looking at all the blocks displayed on the start page. anyway, got my point?

4
cpreet
Re: [TIP] Fix that < form >
  • 2004/6/18 21:49

  • cpreet

  • Just popping in

  • Posts: 5

  • Since: 2004/6/10



First off, tjnemez, you must've been a pro-StyleSheeter, who knows his styles so well. You just forget it, as you couldn't see that thing/problem. Moreover, this tip was meant for the rest of us.

As hsalazar pointed out, that may be the case, you've opted for a theme which takes care of FORMs . My suggestion to u is - just try changing to the default theme.

"Heck, da default ?" i heard u saying, now. You must've been riding on higher waves lately, but pls get down to the ground, 'coz that's the reality, buddy.

The reason Why 'am asking for the default theme is that - it is the One (Sorry, Jet-Lee, for using that term ). Thats original for you, which most of the theme-designers, clone or look-up for reference, and end up not intoducing their own bit by inserting FORM {} as there is no such entry in the original styles.

Quote:
this is more an issue of block padding (bottom) as you can see by looking at all the blocks displayed on the start page.

What block r u talking about ? That Block-stuff was not an issue in here.

Buddy ! v jst takin'bout forms, u kno. Pls take note of that.


CPreet

5
cpreet
Re: [TIP] Fix that < form >
  • 2004/6/18 21:53

  • cpreet

  • Just popping in

  • Posts: 5

  • Since: 2004/6/10



Lets get to biz and take up the newer issue, raised :

Wheather that extra(terrestrial)-space thing is caused by padding or the margin wrt. bottom ? Lets call it ES for now.

FYI, i posted my observation only after verifying all the possibilities. That ES is always caused by the margins 'coz by default the forms do not have - (bottom) paddings but margins, so thats the culprit. Avoided the generalized {margin: 0px;} as the issue related solely to the margin-bottom.

Though there is no harm, but i do consider setting 0px for padding just for the decoration or maybe an effort to stay on the safer side, unless we want a hierarchy of forms. I myself don't mind taking that measure.

I still stand by my original statement. As a proof of this, did a little test. Check it out !

here are the styles :
FORM background-color#FF0000; width: 100px;}
FORM.NotGuilty padding-bottom0px; }
FORM.NotAgain padding-bottom100px; }
FORM.Gotcha margin-bottom0px; }


and the code :
<FORM><INPUT TYPE="text" value="#1"></FORM>
My dear Form Why do u stay away from me ?

<
FORM class="NotGuilty"><INPUT TYPE="text" value="#2"></FORM>
If 
u r not guiltyMrPaddythen why did they hanged u up ?

<
FORM class="NotAgain"><INPUT TYPE="text" value="#3"></FORM>
Paddy was never the guiltynow cn u stop this nonsense test !

<
FORM class="Gotcha"><INPUT TYPE="text" value="#4 Success"></FORM>
Gotcha !!! We'll always stay together, now !


Result on my side is that only the [b]form #4[b] solves the problem.

May be i could post scrn-shot, is it allowed over here ?

Cpreet

6
cpreet
Re: [TIP] Fix that < form >
  • 2004/6/18 22:02

  • cpreet

  • Just popping in

  • Posts: 5

  • Since: 2004/6/10



Oh, one more thing i just forgot to mention :

The bg-color is not used for fun, in that test. I used it to make it visually apparent that margins are the culprits and paddings just a victim. To elaborate on that, i'd like to give u another tip as a bonus :

TIP#2 : AFAIK, the background-colors for elements (tags, objects - whatever u call them) do not affect the margins of that element but they always show up with the paddings. Pls correct me if its wrong.

To explain this, as i loosely put it here, consider the margin as the area outside the boundary-wall of ur house, but the padding is the internal free-space left by choice. Thats why u usually clean-up, white-wash or paint what you own but leave the rest up to the municipality or the God.

...thats why we c all this mess around ! Lets do something 'bout that too.

Can u read between the lines, that i wanna make a statement/appeal about "Protecting the Environment", although its not the right forum. Where is it ? 'coz i'm just a new-comer here, so please tell me !!!

So, if u see color under the extra-space between the form and the text that follow, hang the padding else do the same to the margins.

Thats it, for today ! I hadn't thought, that such small idea could need long story ? But that was for the asking, Pls Xcuse'me !

tjnemez u may not ge'my point, again .

The others will, hopefully, as i think i presented my case well. The jury is still out !


CPreet

7
tjnemez
Re: [TIP] Fix that < form >
  • 2004/6/18 22:21

  • tjnemez

  • Home away from home

  • Posts: 1594

  • Since: 2003/9/21


i think i got lost in the translation

Quote:
Did you ever noticed some unnecessary space under your <FORM>s ?

Not a big deal, you may say, but what a bad look it gives to a content layout.


you need to understand that my point here is that this is a matter of opinion and it is yours.

Login

Who's Online

126 user(s) are online (88 user(s) are browsing Support Forums)


Members: 1


Guests: 125


heyula,

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Apr 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits