🚀 go-pugleaf

RetroBBS NetNews Server

Inspired by RockSolid Light RIP Retro Guy

Article View: adobe.web.design
Article #37

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

#37
From: Frances Del Rio
Date: Thu, 11 Nov 2004 15:15
119 lines
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-mail
References: <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>