Article View: adobe.web.design
Article #37Re: css problem - can anyone help? source included:
From: Frances Del Rio
Date: Thu, 11 Nov 2004 15:15
Date: Thu, 11 Nov 2004 15:15
119 lines
5065 bytes
5065 bytes
<div id="headermenubar">
<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(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>
</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:
> 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;
> }
>
>
Technical Details
Message-ID:
<2vhdvoF2lgrtjU1@uni-berlin.de>Path:
arc1-ca.pugleaf.net!g2news1.google.com!news2.google.com!proxad.net!newsfeed.stueberl.de!fu-berlin.de!uni-berlin.de!not-for-mailReferences:
<2iblutFkna4jU1@uni-berlin.de>Show Full Headers
Complete Article Headers
X-Google-Thread: ffb7c,760d6bb7768d45a,start X-Google-Thread: 100cb2,266cbf26e597a70b X-Google-Thread: 105656,266cbf26e597a70b X-Google-Thread: 10e927,266cbf26e597a70b X-Google-Attributes: gidffb7c,gid100cb2,gid105656,gid10e927,public X-Google-Language: ENGLISH,ASCII-7-bit Path: arc1-ca.pugleaf.net!g2news1.google.com!news2.google.com!proxad.net!newsfeed.stueberl.de!fu-berlin.de!uni-berlin.de!not-for-mail From: Frances Del Rio <fdr58@yahoo.com> Newsgroups: adobe.web.design,alt.www.webmaster,comp.infosystems.www.authoring.stylesheets,netscape.public.dev.css Subject: Re: css problem - can anyone help? source included: Date: Thu, 11 Nov 2004 10:15:32 -0500 Lines: 120 Message-ID: <2vhdvoF2lgrtjU1@uni-berlin.de> References: <2iblutFkna4jU1@uni-berlin.de> Mime-Version: 1.0 Content-Type: text/plain; charset=us-ascii; format=flowed Content-Transfer-Encoding: 7bit X-Trace: news.uni-berlin.de awFSCrdTq85aoj6SiMgsKAQmYLKy0Yk8eMNJJPhiL4/yogID3m User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax) X-Accept-Language: en-us, en In-Reply-To: <2iblutFkna4jU1@uni-berlin.de>