Solved

form INPUT box

Posted on 2002-05-17
45
212 Views
Last Modified: 2013-12-03
I want the box to be of a smaller size. In IE i used styles

<INPUT SIZE=30 name="q" value="Search our site!" style="font-size:10px;">

But this doesn't seem to work for netscape.

All suggestions welcome :)

Dech

0
Comment
Question by:dech
  • 17
  • 9
  • 9
  • +5
45 Comments
 
LVL 12

Expert Comment

by:lexxwern
ID: 7016638
>> want the box to be of a smaller size

<INPUT SIZE=30 name="q" value="Search our site!" style="height:10px;width:100px;">
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7016641
"font-size" changes only the font size;
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7016645
http://blooberry.com for more info.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7016671
Form elements in Netscrap 4 do not support CSS.

Cd&
0
 
LVL 2

Author Comment

by:dech
ID: 7016730
yes ... i am using netscape to view it ... how do i over come this problem?

Thanks
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7016746
netscape 4x

you cannot do anything....

netscape 6

there is still hope...
0
 
LVL 2

Author Comment

by:dech
ID: 7016764
AHHHHHHHHHHHHHHHHHHHHHHHHH

I HATE NETSCAPEEEEEEEEEEEEEEEEEEEEE (4.x)

There has to be some way i can get around this problem ... Not using form input box but somehow sumbit it along with the form? Anything ... i am desperate!

Dech

P.S. my comment before should have read

"yes ... i am using netscape 4.x to view it ... how do i over come this problem?"
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7016772
sorry, this is why ns4x sucks so bad. try upgrading to ns6x, it is much much better. there is nothing you can do abt it.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7016777
Style hack for NS4

This will insert style into a form
<script language="JavaScript1.1">
document.write('<style>INPUT {font-family:???; font-size:??px;}</style>');
document.write('<form><input type="text></input></form>');
</script>

Don't combine into one document.write or
NS will not handle it correctly.

Both a font-family and font-size must be specified or it will not work.

This is bad coding and I do not recommend it.  Not guaranteed for all current browsers, and no guarantee it will work in any future release.

Cd&
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 7016782
I don't remember if this works in NS4 or not ... but it seems like I tried it at one time:

<FONT size='1' face='Courier'>
<INPUT SIZE=30 name="q" value="Search our site!" style="font-size:10px;">
</FONT>
0
 
LVL 2

Author Comment

by:dech
ID: 7016804
knightEknight "did" make the box smaller. However it is still seriously messing up the page layout in an non-understandable way.

Thanks for the java cd&, but i cant risk javascript as the site i am designing is meant to be crossbrowser friendly.

http://www.aiexplained.com

Could anyone go there and explain to me why it is doing what it is doing.

Dech
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 7016831
I would play around with different font sizes and faces in the <FONT tag to see if you can get it to look good.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7016836
if you want to use styles , you have to ignore ns4x , making code good for ns4x is just too expensive...
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7016838
if you want to use styles , you have to ignore ns4x , making code good for ns4x is just too expensive...
0
 
LVL 2

Expert Comment

by:Marianne
ID: 7017107
If I am understanding the question right, there's an old simple trick about doing nearly the same size of text and textarea fields in NN4.x and other browsers.

You just view the page with Netscape 4.x and put the desired size=X. When you're satisfied, you view the same page with IE and add style="width: Ypx;" into the tag making it as big as you want to see it in IE. You get something like:
<input size=X style="width: Ypx;" ...>
where NN4.x doesn't understand the style and uses size attribute while IE takes style definition as top priority.

X value of course is connected with the font-size you use.

However, it is much better to get the style definition out of the tag and to write just
<input size=X class=fieldwidth ...>
where class 'fieldwidth' is described in a stylesheet, because otherwise NN4.x often manages to put two text fields one by one in case of resizing the window.


>> Form elements in Netscrap 4 do not support CSS.

Argh! This is definitely too categorical and is not true (consider font-size as an example)
0
 
LVL 2

Author Comment

by:dech
ID: 7017702
leveret ... what i am trying to achieve is to do with the height of the cell rather than the width ... not sure if what you gave goes for the height as well ... can you clarify?

Thanks
0
 
LVL 2

Author Comment

by:dech
ID: 7017716
lexxwern ... i would love to drop netscape all together, but the fact remains this site will be viewed in Netscape 4.x by 90% of the visitors.

This is the reason for the big headache :(
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7017810
then you should reconsider using styles at all, just get the site to be elegant, making it pretty with styles for ns4x is something that most of the webdevelopers have avoided.

btw you can use simple html to make neat and elegant sites, you dont have to use css.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 7019868
Height isn't anything you can control in NN4. You're lucky you can get the width to be even close to what you want.

Make the design work for NN4, define the font as Courier, 12px, and it will be approximately the same in the other browsers. That's what NN4 uses, and if you have to support that you might was well use it as the base.
0
 
LVL 2

Author Comment

by:dech
ID: 7019920
A suggestion I found on another board was:

<p class="search"><INPUT size="20" class="search" ... >

can anyone verife that this actually does something useful in NN4, because when i tried it, i dont think it made any difference.

i have used it on the top frame site search input box - http://www.aiexplained.com

Thanks
0
 
LVL 2

Author Comment

by:dech
ID: 7019921
P.S. the search tag is just the font family and size. Nothing fancy.

dech
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7019924
<p class="search"><INPUT size="20" class="search" ... >


Nope! wont work, there is no way to do it in NN4x, dech forget css...
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Expert Comment

by:Marianne
ID: 7021038
dech,

No, I was explaining how to deal with width, not height of the text field. Height is something you can only control by font-size attribute in NN 4.x. There's actually nothing strange that the text of the field and the field itself is tightly connected by means of height.

Thus you may use monospace font-family, as webwoman had adviced or use different styles for different browsers. The latter way is also not difficult and is widely used to deal the variety of distinctions in NN4.x
0
 
LVL 2

Author Comment

by:dech
ID: 7021776
leveret ... i know you was ... but width isnt something i need to control (in the sense that it isn't the problem).

"Height is something you can
only control by font-size attribute in NN 4.x"

Could you show me an example where the height was changed and I will work out how to do it.

Thanks

P.S. quick explanation of monospace font-family plz :)
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 7021807
monospace fonts (like Courier or System) are fonts in which each character has the same width as every other character in the font set.
0
 
LVL 2

Expert Comment

by:Marianne
ID: 7021873
Would this be good enough?

<INPUT SIZE=30 name="q" value="Search our site!" style="font-size:14px; font-family: monospace;">


> but width isnt something i need to control
Yeah, I got it now ;) Stating this at the very beginning would save my time :(
0
 
LVL 2

Author Comment

by:dech
ID: 7022026
leveret ... I have been trying that ... but it doesn't make any difference to the height of the input in Netscape 4.x

dech
0
 
LVL 2

Expert Comment

by:Marianne
ID: 7022050
Are you sure? Can you make a screenshot of what you get? (both IE and NN)
0
 
LVL 2

Author Comment

by:dech
ID: 7022058
have u got Netscape 4.x? Cos the page is online ... rather than having to do a screenshot

http://www.aiexplained.com

Thanks
0
 
LVL 2

Expert Comment

by:Marianne
ID: 7023510
> have u got Netscape 4.x?

Yes, I just see no text field on that page :-\
0
 
LVL 2

Author Comment

by:dech
ID: 7024503
It is at the top right corner ... in the top frame (left of a green arrow button)

Dech
0
 
LVL 2

Expert Comment

by:Marianne
ID: 7024643
Oh... I couldn't see it along with other content on the right because of overflow-x: hidden; for body in your stylesheet. (I have 800x600 resolution).

I think that you have many other problems to solve before you get to the textfield height issue.

Screenshots: http://www.soludium.com/zzz/ee/
0
 
LVL 19

Expert Comment

by:webwoman
ID: 7025948
It never makes any difference in NN4. YOu CAN affect the font size (on the input only), but never the height.

Put a span tag around the input field... it will pick up the font size. But the actual input field will still be the same size if would need to be if you used 12pt Courier. You'll never get around that. Doesn't matter what settings you apply.

Royal pain in the butt. If you have to support NN4, you live with it. ;-)
0
 
LVL 2

Expert Comment

by:Marianne
ID: 7027495
Font-size and text field height are connected.

<form>
<input type=text size=20 style="font-size: 30px" value="30px"><br>
<input type=text size=20 style="font-size: 20px" value="20px"><br>
<input type=text size=20 style="font-size: 10px" value="10px">
</form>

http://www.soludium.com/zzz/ee/dech05.gif
0
 
LVL 2

Author Comment

by:dech
ID: 7028582
leveret ... are u sure thats version 4? i dont understand why it dont work when i do it.

dech
0
 
LVL 2

Expert Comment

by:Marianne
ID: 7029228
dech,
Yes, NN4.75
Have you tried exactly the same code? If not, what is yours?
0
 
LVL 2

Author Comment

by:dech
ID: 7034496
yes ... excalt same code. Maybe you have a newer version installed which has over written some files.
0
 
LVL 2

Author Comment

by:dech
ID: 7039194
To all the experts here:

I think I have narrowed the problem down to the fact that I cant seem to control the font size using css for NN4

http://www.doc.ic.ac.uk/~zl01/history.html

Here is the style sheet i used

-------------------------------------------------

BODY
{
  background: darkblue;
  overflow-x: hidden;
  scrollbar-face-color: #660099;
  scrollbar-shadow-color: #00CCFF;
  scrollbar-highlight-color: #660099;
  scrollbar-3dlight-color: #00CCFF;
  scrollbar-darkshadow-color: #660099;
  scrollbar-track-color: #6633CC;
  scrollbar-arrow-color: #00CCFF;
}

.toplink {
  font-size: 14px;
  color: #ffffff;
  font-family: Tahoma, san-serif;
  text-decoration: none;
}

.pagetitle {
  font-size: 20px;
  color: #66CCFF;
  text-decoration: none;
  font-weight: bold;
}

.search {
  font-size: 12px;
  color: #000000;
  font-family: Arial;
}

.pagelink {
  font-size: 18px;
  color: #33FFFF;
  font-family: Tahoma, san-serif;
}

.maincontents {
  font-size: 17px;
  color: lightblue;
  font-family: Times new Roman;
}

#FullScreen { position:absolute;top:0;left:0; }

---------------------------------------------------

Thanks a lot for all comments so far
dech
0
 
LVL 2

Author Comment

by:dech
ID: 7039220
P.S. leveret ... my screen shot ...

http://www.doc.ic.ac.uk/~zl01/snapshot1.png
0
 
LVL 2

Expert Comment

by:Marianne
ID: 7039225
Wow, that's Linux. I easily believe that some other spirits rule the css kingdom there ;)
0
 
LVL 2

Author Comment

by:dech
ID: 7039267
oops ... me bad for not mentioning ... i didnt think there was any difference
0
 
LVL 19

Accepted Solution

by:
webwoman earned 12 total points
ID: 7040634
There's a whole lot of difference.... tons of difference. Don't expect much CSS to work on Linux NN.
0
 

Expert Comment

by:2000bug
ID: 7041922
sorry i failed to mention this point earlier (my inexperince with both Linux and NN showing through).

I guess I will just have to live with it as it is.
0
 
LVL 6

Expert Comment

by:Mindphaser
ID: 7070807
dech

I reduced the points for this question. Please accept webwoman's comment as an answer, I will post separate questions with 12 points each for leveret knightEknight and lexxwern.
0
 
LVL 2

Author Comment

by:dech
ID: 7070883
Thank you all
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now