css problem - can anyone help? source included:

[Guest]

hi everyone,

i was hoping someone could help me. the code below - in IE the menu options
(text) are a couple of pixels too low and i cant move them up, and the form
boxes are ok.
in mozilla the reverse is true - the text links are ok but the form boxes
are too low! I cant figure out why this is happening.
I want the text to be vertically centered in the black menu bar, and the
form boxes likewise.
any help greatly appreciated!

thanks

CODE:
=====

<div id="headermenub ar">
<form name="menu" method="post" action="" style="display: inline;">
<a href="/" >home</a> - <a href="/uk/option1/" >option1</a> - <a
href="/uk/option2/" >option2</a> - <a href="/uk/option3/" >option3</a> - <a
href="/uk/option4/" >design</a>
<input name="textfield " onFocus="if(thi s.value=='check domain
name')this.valu e='';" type="text" class="smalldom ainlookupbox" value="check
domain name">
<select name="select" class="smalldom ainlistmenu">
<option value=".com" selected>.com</option>
<option value=".co.uk"> .co.uk</option>
<option value=".net">.n et</option> </select>
<input type="image" src="/images/info.gif" border="0" alt="Go!">
</form>
</div>

ASSOCIATED ENTRIES IN EXTERNAL CSS FILE:
=============== =============== ========

#headermenubar {
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
color: #FFFFFF;
font-size: 12px;
text-decoration: none;
position:absolu te;
width:594px;
height:22px;
z-index:50;
left: 156px;
top: 95px;
layer-background-color: #ffffff;
border: 0px none #000000;
background-color: #000000;
visibility: visible;
font-weight: bold;
}

#headermenubar a:hover {
color: #CCFFCC;
text-decoration: none;
}

#headermenubar a:link, a:visited {
color: #FFFFFF;
text-decoration: none;
}


..smalldomainli stmenu {

font-size: 11px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

..smalldomainlo okupbox {
font-size: 11px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-left: 20px;
}

[Matt Probert]

Re: css problem - can anyone help? source included:

On Fri, 4 Jun 2004 17:22:53 +0100 <123@321.com> broke off from
drinking a cup of tea at to write:
[color=blue]
>hi everyone,
>
>i was hoping someone could help me. the code below - in IE the menu options
>(text) are a couple of pixels too low and i cant move them up, and the form
>boxes are ok.
>in mozilla the reverse is true - the text links are ok but the form boxes
>are too low! I cant figure out why this is happening.[/color]

Perhaps because CSS only *suggests* layout.

You can not make a page appear identical across all browsers,
platforms and individual reader's preferences. Don't try to.

Instead, aim simple. Make something that works ("looks okay") across
different configurations. That way you get less stress, and more happy
readers!

Matt

--
The Probert Encyclopaedia - Beyond Britannica

http://www.probertencyclopaedia.com

[Guest]

Re: css problem - can anyone help? source included:

but surely this kind of thing is possible? vertical alignment?

"Matt Probert" <comments@probe rtencyclopaedia .com> wrote in message
news:40c0a47d.3 1446357@news.nt lworld.com...[color=blue]
> On Fri, 4 Jun 2004 17:22:53 +0100 <123@321.com> broke off from
> drinking a cup of tea at to write:
>[color=green]
> >hi everyone,
> >
> >i was hoping someone could help me. the code below - in IE the menu[/color][/color]
options[color=blue][color=green]
> >(text) are a couple of pixels too low and i cant move them up, and the[/color][/color]
form[color=blue][color=green]
> >boxes are ok.
> >in mozilla the reverse is true - the text links are ok but the form boxes
> >are too low! I cant figure out why this is happening.[/color]
>
> Perhaps because CSS only *suggests* layout.
>
> You can not make a page appear identical across all browsers,
> platforms and individual reader's preferences. Don't try to.
>
> Instead, aim simple. Make something that works ("looks okay") across
> different configurations. That way you get less stress, and more happy
> readers!
>
> Matt
>
> --
> The Probert Encyclopaedia - Beyond Britannica
> http://www.probertencyclopaedia.com[/color]

[GreyWyvern]

Re: css problem - can anyone help? source included:

On Fri, 4 Jun 2004 17:22:53 +0100, <123@321.com> wrote:
[color=blue]
> hi everyone,
>
> i was hoping someone could help me. the code below - in IE the menu
> options
> (text) are a couple of pixels too low and i cant move them up, and the
> form
> boxes are ok.
> in mozilla the reverse is true - the text links are ok but the form boxes
> are too low! I cant figure out why this is happening.
> I want the text to be vertically centered in the black menu bar, and the
> form boxes likewise.
> any help greatly appreciated!
>
> thanks[/color]

[snip]

You are currently using TONS of unnecessary CSS, but adding the following
entry will fix the problem:

#headermenubar form a,input,select {
vertical-align:middle;
}

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollary that nothing is ridiculous.
- http://www.greywyvern.com - Orca Knowledgebase: Completely CSS styleable
Knowledgebase/FAQ system

[Guest]

Re: css problem - can anyone help? source included:

"GreyWyvern " <spam@greywyver n.com> wrote in message
news:opr82wk4mc sl6xfd@news.nas .net...[color=blue]
> On Fri, 4 Jun 2004 17:22:53 +0100, <123@321.com> wrote:
>[color=green]
> > hi everyone,
> >
> > i was hoping someone could help me. the code below - in IE the menu
> > options
> > (text) are a couple of pixels too low and i cant move them up, and the
> > form
> > boxes are ok.
> > in mozilla the reverse is true - the text links are ok but the form[/color][/color]
boxes[color=blue][color=green]
> > are too low! I cant figure out why this is happening.
> > I want the text to be vertically centered in the black menu bar, and the
> > form boxes likewise.
> > any help greatly appreciated!
> >
> > thanks[/color]
>
> [snip]
>
> You are currently using TONS of unnecessary CSS, but adding the following
> entry will fix the problem:
>
> #headermenubar form a,input,select {
> vertical-align:middle;
> }
>
> Grey[/color]

thanks for the reply,
the text seems fine in IE now, but the form too low.
in mozilla, everything has shifted up too high
also, any pointers on why i have TONS of unnecessary CSS? (i am still
learning!)
thanks

[GreyWyvern]

Re: css problem - can anyone help? source included:

On Fri, 4 Jun 2004 18:02:11 +0100, <123@321.com> wrote:
[color=blue]
> thanks for the reply,
> the text seems fine in IE now, but the form too low.
> in mozilla, everything has shifted up too high
> also, any pointers on why i have TONS of unnecessary CSS? (i am still
> learning!)
> thanks[/color]

You're complaining over one or two pixels? Styling form elements has
always been difficult, if not downright impossible, to code and make it
look the same across all browsers. Such is the way different browsers
render form elements.

See Matt's reply above. That'll also help you strip away a lot of the CSS
you don't need.

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollary that nothing is ridiculous.
- http://www.greywyvern.com - Orca Knowledgebase: Completely CSS styleable
Knowledgebase/FAQ system

[Guest]

Re: css problem - can anyone help? source included:

it is not unreasonable to expect to be able to vertically centre text within
an element. i am sure there is an answer somewhere, css surely cant be that
inflexible.?
otherwise, i'll just use good old tables if what you say is true.


"GreyWyvern " <spam@greywyver n.com> wrote in message
news:opr82zk2sz sl6xfd@news.nas .net...[color=blue]
> On Fri, 4 Jun 2004 18:02:11 +0100, <123@321.com> wrote:
>[color=green]
> > thanks for the reply,
> > the text seems fine in IE now, but the form too low.
> > in mozilla, everything has shifted up too high
> > also, any pointers on why i have TONS of unnecessary CSS? (i am still
> > learning!)
> > thanks[/color]
>
> You're complaining over one or two pixels? Styling form elements has
> always been difficult, if not downright impossible, to code and make it
> look the same across all browsers. Such is the way different browsers
> render form elements.
>
> See Matt's reply above. That'll also help you strip away a lot of the CSS
> you don't need.
>
> Grey
>
> --
> The technical axiom that nothing is impossible sinisterly implies the
> pitfall corollary that nothing is ridiculous.
> - http://www.greywyvern.com - Orca Knowledgebase: Completely CSS styleable
> Knowledgebase/FAQ system[/color]

[Matt Probert]

Re: css problem - can anyone help? source included:

On Sat, 5 Jun 2004 10:52:57 +0100 <123@321.com> broke off from
drinking a cup of tea at to write:
[color=blue]
>it is not unreasonable to expect to be able to vertically centre text within
>an element. i am sure there is an answer somewhere, css surely cant be that
>inflexible.?
>otherwise, i'll just use good old tables if what you say is true.[/color]

It's true. Use an image if you want total control, otherwise live with
the reality that the browsers interpret how to display elements in
their own way, in conjunction with individual user setups such as
screen resolution, browser window size, default font choice, default
font size, whether or not to accept external CSS suggestions as to
layout, whether or not the browser understands all or any CSS 1 let
alone CSS 2...

It's your stress. Enjoy it! <g>

Matt

--
Free searchable encyclopaedia content for your web site:

http://www.probertencyclopaedia.com/xsearch.htm

[Laurens Holst]

Re: css problem - can anyone help? source included:

123@321.com wrote:[color=blue]
> it is not unreasonable to expect to be able to vertically centre text within
> an element. i am sure there is an answer somewhere, css surely cant be that
> inflexible.?
> otherwise, i'll just use good old tables if what you say is true.[/color]

Not that I like to submit to table-usage threats, but...

#headermenubar {
position: absolute;
width:594px;
height:22px;
left: 156px;
top: 95px;
padding: 0px;
margin: 0px;
border: none;
font: 12px Arial, Helvetica, sans-serif bold;
color: white;
background: black;
text-decoration: none;
}

#headermenubar a:hover {
color: #CFC;
text-decoration: none;
}

#headermenubar a:link, a:visited {
color: white;
text-decoration: none;
}

..smalldomainlo okupbox {
margin-left: 20px;
}

Works just fine for me. Biggest problem is indeed that in IE can't
really align the text vertically, actually if you put vertical-align:
middle; on the div the text is actually put one pixel lower (note that
Mozilla has no problems whatsoever). Um... Sorry, wouldn't know how to
fix it right now. Ahwell. So what if the text isn't *exactly* centered... :)

p.s. all the cruft other people spouted about exact positioning not
being possible in CSS: that is nonsense. Sure, CSS does leave some
freedom in some areas (for example the exact meanings of 'thin medium
thick' in border sizes), but generally that's nothing serious, and you
can always specify exact sizes. The big problem with CSS is usually IE's
(still) quite buggy support of it, which you have to work around. My
guess is that IE's apparantly odd treatment of form positioning is being
a bother here.


~Grauw

--
Ushiko-san! Kimi wa doushite, Ushiko-san!!

[Frances Del Rio]

Re: css problem - can anyone help? source included:

<div id="headermenub ar">
<table border=1 cellpadding=0 cellspacing=0>
<tr><td height=50 bgcolor=#000000 >
<form name="menu" method="post" action="" style="display: inline;">
<a href="/" >home</a> - <a href="/uk/option1/" >option1</a> - <a
href="/uk/option2/" >option2</a> - <a href="/uk/option3/" >option3</a> - <a
href="/uk/option4/" >design</a>
<input name="textfield " onFocus="if(thi s.value=='check domain
name')this.valu e='';" type="text" class="smalldom ainlookupbox" value="check
domain name">
<select name="select" class="smalldom ainlistmenu">
<option value=".com" selected>.com</option>
<option value=".co.uk"> .co.uk</option>
<option value=".net">.n et</option> </select>
<input type="image" src="/images/info.gif" border="0" alt="Go!">
</form>
</td></tr></table>
</div>

I took out the background-color specif. and put it in table cell.. also
took out height 22px, put in table cell (where stuff aligns vertically
by default..) don't know if this is strictly kosher, but it worked for
me, in both IE and N... also, how all this will look depends on height
of image to the right of drop-down..

might also work if you specify vertical-alignment of elements inside div
in CSS, not 100% how to do that right now... but what I did worked for
me...

(also pls note a JavaScript error came up, because the line <input name
"textfield" ...> was broken, you need to keep it all on one line.. if it
breaks on its own in yr editor that's fine -- but YOU shouldn't break it
by hitting 'return' inside the line..)

HTH.. good luck.. Frances


123@321.com wrote:[color=blue]
> hi everyone,
>
> i was hoping someone could help me. the code below - in IE the menu options
> (text) are a couple of pixels too low and i cant move them up, and the form
> boxes are ok.
> in mozilla the reverse is true - the text links are ok but the form boxes
> are too low! I cant figure out why this is happening.
> I want the text to be vertically centered in the black menu bar, and the
> form boxes likewise.
> any help greatly appreciated!
>
> thanks
>
> CODE:
> =====
>
> <div id="headermenub ar">
> <form name="menu" method="post" action="" style="display: inline;">
> <a href="/" >home</a> - <a href="/uk/option1/" >option1</a> - <a
> href="/uk/option2/" >option2</a> - <a href="/uk/option3/" >option3</a> - <a
> href="/uk/option4/" >design</a>
> <input name="textfield " onFocus="if(thi s.value=='check domain
> name')this.valu e='';" type="text" class="smalldom ainlookupbox" value="check
> domain name">
> <select name="select" class="smalldom ainlistmenu">
> <option value=".com" selected>.com</option>
> <option value=".co.uk"> .co.uk</option>
> <option value=".net">.n et</option> </select>
> <input type="image" src="/images/info.gif" border="0" alt="Go!">
> </form>
> </div>
>
> ASSOCIATED ENTRIES IN EXTERNAL CSS FILE:
> =============== =============== ========
>
> #headermenubar {
> font-family: Arial, Helvetica, sans-serif;
> padding: 0px;
> margin: 0px;
> color: #FFFFFF;
> font-size: 12px;
> text-decoration: none;
> position:absolu te;
> width:594px;
> height:22px;
> z-index:50;
> left: 156px;
> top: 95px;
> layer-background-color: #ffffff;
> border: 0px none #000000;
> background-color: #000000;
> visibility: visible;
> font-weight: bold;
> }
>
> #headermenubar a:hover {
> color: #CCFFCC;
> text-decoration: none;
> }
>
> #headermenubar a:link, a:visited {
> color: #FFFFFF;
> text-decoration: none;
> }
>
>
> .smalldomainlis tmenu {
>
> font-size: 11px;
> font-weight: bold;
> font-family: Arial, Helvetica, sans-serif;
> }
>
> .smalldomainloo kupbox {
> font-size: 11px;
> font-weight: bold;
> font-family: Arial, Helvetica, sans-serif;
> margin-left: 20px;
> }
>
>[/color]