- ベストアンサー
border-style デコらないボコらない・・
border-style の inset と outset ですが、 IEで見ると groove と ridge に近い感じになります。 表現しづらいのですが、２段になってるというか・・。 Firefox でこれらを見ると、思った通りにデコっててボコってます。 （段がない） なんとかIEで見ても同じようにはならないものなのでしょうか？ やはり解釈の違いとなってしまうのでしょうか・・。 よろしくお願いします。
- syuricyan
- お礼率65% (541/824)
- その他（プログラミング・開発）
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- abril
- ベストアンサー率69% (388/560)
以下は以前別のスレッドで類似の質問に回答した時の文章ほぼそのままなんですが（手抜きですみません）。 border-styleプロパティで実装される「線の形状の見え方」というのは、値がsolidの場合を除いて、環境によって結構異なります。点線・波線・二重線等でも微妙なスタイルの違いがあるのですが、いずれも元々それぞれの環境（ブラウザ）に依存するものです。特に、このoutsetやinsetなど、線に立体感がつくスタイルは顕著に違いますね。ハイライトの当たり方の解釈が異なる為、その結果形状や色が変わって見えるのでしょう。一辺ごとにカラーを微妙に変えるという微調整もあるのですが、それは結局あちら（IE）を立てればこちら（Firefox）が立たず、というシーソー状態にもなってしまいます。ですので、border-styleプロパティによる装飾を使われる場合は各ブラウザの差異を納得の上で行うか、より表示結果の差の少ないスタイルを適用するか、ですね。 どうしても線の形状に拘りがある様であれば残念ですが後は「画像」にして組み込むしかないですね。
お礼
Firefoxでの解釈のほうが、borderで囲まれた部分がよりくぼんでたり、よりでっぱてたり感が強いです。 IE7.0になったときそういうことは加味されなかったのでしょうね。 どうしてもであれば画像にしますが、画像であれば他のにするかもしれません。 ご回答ありがとうございました。
関連するQ&A
- firefoxでフラットなボーダーを設定したい
IEではなるのですが、 HTMLのボーダー設定で、 border="1",bordercolor="#000000" と設定すると、ちょっと太目のフラットなボーダーができますよね。 それを設定すると、firefoxでは、なんだか立体的な、昔よく見たようなボーダーになってしまいます。 firefoxでも同じように、フラットなボーダーにしたいのですが、 どうしたらいいでしょうか？ どなたか教えてください。 ちなみに、HTMLでの方法がいいです。スタイルシートではなく・・・ もういっぱいその設定をしなくてはいけないので、簡単にできるもの、教えてください。
- 締切済み
- HTML
- スタイルシートのfloatでセンタリングしたい
書籍でfloatを使用したリンクボタンの作り方が下のように紹介されていました。 ３つ並べるボタンの作り方なのですが、これだと左寄せになってしまうため、３つとも並べたまま中央に配置したいのです。 align="center"や<center>では、配置できず、paddingを使えば左があくもののpx指定のため常にセンタリングになりません。 この書籍では左寄せのままで中央へ配置する方法が書かれていないので、みなさんにお教えいただきたいです。 よろしくお願いします。 (IE6.0使用） <body>内 <A href="test001.html">test001</A> <A href="test002.html">test002</A> <A href="test003.html">test003</A> <style type="text/css">内 a{ border:outset #00ffff 4px; background-color:#8fa7ef; color:#ffffff; padding:0.5em; display:block; width:5em; float:left; } a:hover{ border:inset #ccffff 4px; }
- ベストアンサー
- HTML
- まとめブログにあるようなスクロール型のフレーム
まとめブログにあるようなスクロール型のフレームについて 下記の画像のようなスクロール型のフレームはどうすればつくれるのでしょうか？ 自分で探してみたところ、RSSリーダーはライブドアの”ブログロール”のようですが、フレームの構成がわかりません。 自分では下記のようなHTML構成にしてみたのですが・・・ ---------------------------------- ■HTML <div style="width:450px;height:100px;overflow:auto;background-color:#FFFFFF;scrollbar-arrow-color:#000;scrollbar-base-color:#ccc;border-top-style:groove;border-left-style:outset;border-bottom-style:groove"> ココにライブドアのブログロール </div> ---------------------------------- 左右での分割が出来ずに困っています。 どうか宜しくお願いします。
- 締切済み
- ブログ
- cssでborderを設定した場合のブラウザによる内容の余白の潰しについて。
下記のソースをIEとFirefoxで表示した場合、IEではheightの値からborderの値を二倍した200pxが -つまり 400px-200px=200px - 見た目の高さとして返されますが、Firefoxの場合、heightの値からborder-widthの高さそのものである100pxだけ引かれ、見た目の高さは300pxになります。どちらの解釈が正しく、またどのブラウザでも同じように表示されるよなheightの最小値の設定のしかたはあるのでしょうか？ <html> <head> <style type="text/css"> table { border-collapse : collapse; } td { text-aligh : left; vertical-align : top; padding : 0px; border-style : solid; border-width : 100px; border-color : #cccccc; width : 200px; height : 400px; background-color : #ff0000; } </style> </head> <body> <table> <tr> <td> text.text.text.text.<br /> text.text.text.text.<br /> text.text.text.text.<br /> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- スタイルシートのpaddingが。。。
.photo{ background-color:#FAFAF3; padding: 10px 5px 25px 5px; border: 2px outset #C0C0C0; } $imgsrc = "<img src=".SOON_ICON." hspace=20 class=photo>"; 上記のスタイルを使用して写真の周りに枠を作って ポラロイド風にwebで表示しています。 ところが、macのIE ver5ではうまくpaddingされているのですが、windowsのIE ver6ではpaddingされず、画像にぴったりと枠がはりついてひょうじされています。 どうすればうまくpaddingされるでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシートでのレイアウトの際に、border枠から文字がはみ出てしまう問題について
まず、ソースです。 [html] <ul id="greeting"> <li id="entrancephoto"> 写真 </li><!-- entrancephoto --> <li id="word"> 言葉 </li><!-- word --> <li id="news"> ニュース </li><!-- news --> </ul><!-- greeting --> [css] ul#greeting{ clear:both; display:block; width:570px; border-color:#D6757E; border-width:1px; border-style:solid; padding:20px 0px 20px 0px; list-style:none; } li#entrancephoto{ float:left; width:210px; vertical-align:middle; padding:0px 20px 0px 20px; } li#word{ float:left; width:320px; } li#news{ clear:both; float:left; width:530px; padding:5px 0px 0px 20px; margin:auto; } --ここまで-- このように、一番外をid:greetingで囲み、 borderを設定しています。 そしてその中に、3つの要素を<li>で書いています。 （上に段組2段、下に1段） ですので、borderで全ての要素を囲みたいのですが、 id:greetingで囲んでいるはずが下の3つの要素を 囲むことは無く、高さ40pxの枠（padding分）に なってしまい、文字量に関係無い設定になってしまいます。 （IEでは、文字量に合わせてheightが変わるのですが、 firefox、nsではできません） いろいろ試してみたつもりですが解決できませんでした。 お分かりになる方、何卒よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートとページ内の指定矛盾について
tableタグのborderについてなのですが、 基本的にはborderを表示したくないので全ページ共通のスタイルシートで border: none; にしているのですが、あるページの一部分だけtableでborder="1"にしたい箇所があり当該ページ内のそのtableだけborder="1"と付け加えたのですがIE6で見たところ上と左だけ表示されていて右と下は表示されていませんでした また、Firefoxでは全て非表示でした CSSよりもその箇所の指定の方が優先されるのかなと思ったのですが、うまく表示されません どう対処すればいいでしょうか
- ベストアンサー
- HTML
- smartyテンプレートの<style></style>の中身にsmarty変数記述は可能でしょうか
smartyのtmpファイルにスタイルシートの内容を書いた場合、{literal}{/literal}で囲う必要がありますが、逆に囲わない場合、たとえばスタイルシートの内容にsmarty変数を当てはめたることは可能でしょうか？ たとえば、以下のような感じです。 <style type="text/css"> {literal} /* this is an intersting idea for this section */ .madIdea{ border: 3px outset #ffffff; margin: 2 3 4 5px; {/literal} background-color: {$abc}; {literal} } {/literal} </style> 例がしょぼいですが、上の例だと、 background-colorを{$abc}で当てはめています。 こんなことは通常smartyでは可能でしょうか？
- 締切済み
- PHP
- スタイルシートで、マージン０に出来ません
夜分に失礼します。 個人の趣味のホームページですが ブラウザ上部と左部のマージンを０に出来ずに困っています。 スタイルシートで、margin 0;としても、マージン０にならないのに BODY句に直打ちすると、マージン０になるので、もう、ワケが分かりません。 ご参考までに、ソースを記します。 また、ブラウザはIE6です。 どうぞ、宜しくお願いします。 <HTML> <HEAD> 中略 <STYLE type=text/css> BODY_i{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: "ＭＳ ゴシック","Osaka－等幅",monospace; font-size:12pt; color:#696969; line-height:150%;} .photo1{width:982px; height:730px; background-color:#DCDCDC; border-style:solid ridge ridge solid; border-width:1px 2px 2px 2px; border-color:#DCDCDC #DCDCDC #DCDCDC #DCDCDC; text-align:center; vertical-align:middle; padding:11px 11px 11px 11px;} </STYLE> </HEAD> <BODY class=BODY_i> <!-- <BODY topmargin=0 leftmargin=0> --> <P class=photo1> <IMG SRC="test_CIMG6224.JPG"> </P> </BODY> </HTML>
- 締切済み
- その他（インターネット・Webサービス）
- 【css】Firefoxで見るとborder-bottomが消える
ただいま、IEとFirefoxで動作確認をしております。 IEでは問題なく表示されるのですが、Firefoxで確認した場合、ボックスの下部のボーダーが消えてしまいます。 このとき、文字を大きくするとボーダーが表示されます。 また、文字を小さくすると、文字の大きさによっては表示される場合と表示されない場合とがあります。 こちらを回避する方法はあるのでしょうか？ 不必要と思われる部分は端折っていますが、 html及びcssは下記の通りです。 /////////////////////////////////////////// <div id="aaa"> <div id="left">あああ</div> <div id="right">あああ</div> </div> /////////////////////////////////////////// #aaa{ background-color: #ffffff; border: 1px solid #000000; width: 498px; zoom:100%; overflow:auto; } * html #aaa{ width: 500px; overflow: visible; height:1px; } #left{ float:left; } #right{ float:left; } ///////////////////////////////////////////
- 締切済み
- HTML
お礼
できるみたいですね。やってみたいと思います。ありがとうございました。