Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Nov 2004
    Posts
    4
    Member #
    8100
    Hey Everybody! I have been trying to figure out this tiny problem on a site I am putting together. Basically, I want to center align the arrow image with the input (search) box on this page:

    http://stage.dnj.gannettonline.com

    I tried putting transparent space in the arrow image, that just pushed all the content down. I tried putting valign in the td, that did not work. I also tried putting an align in the img tag.

    This is not a HUGE problem but I would like to figure out how to align this image properly for future reference.

    I have not used any CSS for aligning in this example.

    Here is my code:




    <input type="HIDDEN" name="s_site" value="mansfieldnewsjournal">

    <input type="HIDDEN" name="region" value="MNJB">

    <input type="radio" name="daterange" value="<pbs:datecalc days=-7>,<pbs:datecalc now>" checked><span class="leftnavlink2">7 days</span></input>

    <input type="radio" name="daterange" value="">

    <span class="leftnavlink2">Archive </span></input>

    <input type="text" name="crit" value="" size=17>&nbsp;

    <input type="image" name="go" src="/graphics/arrow_search.gif" alt="Search" border="0" valign="bottom">



    In IE the results look fine, but line up on the top. In firefox, the content in centered, but button is not lining up.

    I would like to align everything, including the "7 day" archive center with the red line, like this:

    http://stage.dnj.gannettonline.com/graphics/example.gif

    Any help to get me in the right direction would be appricated!

    Thanks a lot!

    Ashish

  2.  

  3. #2
    Senior Member Rince's Avatar
    Join Date
    Nov 2004
    Posts
    183
    Member #
    8318
    I don't think this can be done. the size of the combo drop down box and it's arrow will varry form browser to browser, OS or OS and even withing windows, will depend on the disply settings for that user. So the exact position of the arrow will varry and there is no way to detect the users settings for these items.

  4. #3
    Senior Member audiofreak9's Avatar
    Join Date
    Apr 2005
    Location
    NJ
    Posts
    339
    Member #
    9584
    Like Rince said nearly impossible to get it to work cross-browser. One thing that will help the alignment is to correct your code currently you have:
    Code:
    <td width="381" valign="center" align="middle" background="/graphics/header_background.gif" bgcolor="#B7B7B7">
    should be:
    Code:
    <td width="381" valign="middle" align="center" background="/graphics/header_background.gif" bgcolor="#B7B7B7">
    You have the valign and align codes backwards. Valign is (top, middle, or bottom) and align is (left, center, or right).

  5. #4
    Junior Member
    Join Date
    Nov 2004
    Posts
    4
    Member #
    8100
    Thanks for your input!

    I switches the middle and center attributes, THANKS for pointing that out!

    It's strage b/c in Firefox everything looks fine, but in IE all the content is top aligned. When I try to put in a spacer, in Firefox, it get pushed down more.

    Does anything have any alignment issues with firefox and IE?

  6. #5
    Junior Member
    Join Date
    Nov 2004
    Posts
    4
    Member #
    8100
    I FIGURED IT OUT!

    Thanks for your help everyone!

    I placed the <FORM> tags outside the <TD> and it removed the extra space!

    I guess FireFox puts in extra space for form tags..?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:42 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com