• 検索フォームをヘッダー部に表示しています。
    CSSで検索窓とボタンの縦幅を縮めてみて,IEでは,きちんと表示されたのですが,
    firefoxでは窓とボタンの縦位置が上下にかなりずれて表示されてしまいます。
         検索窓
            検索ボタン *これほどではありませんが,こんな感じです。

    検索っフォームの表示で,ブラウザの違いに対応できるようなCSSの書き方をお教え願います。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • zen73さん、こんにちは。

    テーマは何を使用されているか分りませんが、
    Firebug等で検索窓や検索ボタンのidやclassを確認し、
    テーマのstyle.cssを微調整してみてはどうでしょうか。

    先ずどんな環境でどのようなコードを書いてるのかきちんと情報を提示しなければ誰も答えられません。

    IEのやFirefoxのブラウザのバージョンによっても大分話が変わってきますし、互換モードで表示されているのか標準準拠モードで表示されているのかでもまた変わるでしょうね。

    テーマも配布されているテーマならなんのテーマを使用しているか書くべきですし、質問ルールを確認してから質問して下さい。

    トピック投稿者 zen73

    (@zen73)

    ryu263さん,Tsuyoshiさん,ご指摘くださいましたこと深く反省しております。
    だいぶ改善できましたので,報告もあわせての投稿になります。
    <ブラウザのバージョン>IE9とFirefox17
    <使用しているテーマ>サイトビズさんのbiz02 http://wp-site.biz/132
    <検索フォームについての説明> http://wp-site.biz/2019
    <上記テーマの検索フォームの元のサイズ> http://zen73.net/wpkoji/
    <上記テーマの検索フォームのサイズ縮小を試みた> http://zen73.net/wpform/
    <html>

    <form   id="searchform" action="<?php bloginfo('url'); ?>" method="get">
    	<div><input id=" s" type=" text" name=" s" value=" " />
    	<input id="searchsubmit" type="submit"  value="検索" />
    	</div>
    	</form>

    <css>

    #searchsubmit {
    	border: 0;
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    	background-color: orange;
    	color: #fff;
    	text-transform: uppercase;
    	height: 25px;
    	font-size: 10px;
    	padding: 6px;
    	*margin-top: -5px;
    	cursor: pointer;
    	margin-right: 4px;
    	margin-top: 8px;
    	margin-bottom: 4px;
    }
    
    #searchsubmit:hover {
    	background-color: #000;
    	color: #fff;
    }
    #head form#searchform{
    	position: absolute;
    	top: 35px;
    	left: 600px;
    }
    #head #s{
    	height: 18px;
    	width: 140px;
    	padding: 3px 3px 3px 29px
    }

    <教えていただきたいこと>
    ア 検索窓と検索ボタンの高さを揃えて,真横に並べる方法
    イ 検索ボタンの幅をできる限り小さくして,’検索’の文字を中央に配置する方法
    ウ 検索窓と検索ボタンの間隔を小さくする方法

    上記の3つのことをお教えくださいますようお願いいたします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「firefoxで検索フォームの検索窓とボタンの表示位置がずれる」には新たに返信することはできません。