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="headermenubar">
<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(this.value=='check domain
name')this.value='';" type="text" class="smalldomainlookupbox" value="check
domain name">
<select name="select" class="smalldomainlistmenu">
<option value=".com" selected>.com</option>
<option value=".co.uk">.co.uk</option>
<option value=".net">.net</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:absolute;
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;
}


..smalldomainlistmenu {

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

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

comments

On Fri, 4 Jun 2004 17:22:53 +0100 <123@321.com> broke off from
drinking a cup of tea at to write:

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

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

greywyvern

[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

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

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

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.

comments

On Sat, 5 Jun 2004 10:52:57 +0100 <123@321.com> broke off from
drinking a cup of tea at to write:


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

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;
}

..smalldomainlookupbox {
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!!