4つの内２つのブラウザ（ＩＥとGC）で動作しない。| OKWAVE

jQueryの働きがブラウザにより異なる。

html, javascript(jQuery)の初歩を使ってウェブサイトのひな型を作成致しました。目的は、index.htmlファイルにホームページ(HP)を記述し、必要に応じてサブのhtmlファイル（a.html, b.htmlなど）を読み出し、HPの所望の場所にその内容を表示するサイトを作ることです。具体的には、ホームページをＴ字型に分割し、Tの上部にタイトルを表示、左側（左コラム）に項目を表示して、項目のどれかをクリックすると別のhtmlファイル(a.htmlやb.htmlなど)に記載された記事の内容を右側（右コラム）に表示させたいわけです。このＨＰのイメージ画像を添付させて頂きました。下のプログラムをローカルで動かしてみましたところ、Firefox(v7.0.1)とSafari(v5.1.7)では所望の動作を致しました。一方、InternetExplorer(IE) (v11.0.x)とGoogleChrome(33.0.x)では、項目の表示までは所望の動作を致しましたが、項目をクリックしても、別htmlファイルの内容を右コラムに表示できませんでした。このウェブを少なくとも上の4つのブラウザで動作させたいのですが、いわゆるクロスブラウザの問題なのか、あるいはもっと初歩的な誤りを犯しているのか、初心者ですので全くと云っていいほど見当がつきません。まことにお手数ですが、誤りをご指摘頂き、正しい方法をご教示頂きたくお願い申し上げます。また併せて、この辺りのことについて分かり易い説明があるサイト、あるいは書籍をご紹介頂ければ幸いです。以下はindex.htmlと関連プログラムの概要です。１）index.htmlファイル・ホームページ。・DOCTYPE宣言はhtml4.0Transitionalの互換モード。・<scripttype="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> 　はjQueryライブラリーのアクセス宣言。・$(document).ready(function(){　から }) がjavascript (jQuery) ２）pagesフォルダ・today.html, tomorrow.html, space.htmlのファイルを格納。・それぞれ項目の表題と記事を記述するファイル。３）ファイルのディレクトリ・上の２つのファイルとフォルダはローカルのディスクの一つのフォルダに格納。・ディレクトリはそれぞれ　/index.html, /index.html/pages, 以下はそれぞれのコードです。cssは別ファイルにせず直接htmlに書き込みました。１）index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="keywords" content="HTML5,Web Audio API" /> <meta name="description" content="勉強会です。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>試験</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ //初期状態でのロードファイルを指定 $('#contentsBox').load('pages/today.html'); //クリックで各コンテンツを切り替え $('.switchButton').click(function(){ var loadContents = $(this).attr('title'); $('#contentsBox').load('pages/'+loadContents+'.html'); }); }); </script> </head> <body style="font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;"> <style type="text/css"> * { margin:0; padding:0;} ul {margin-left:35px; margin-top: 10px;} ul li {font-size:4mm; color:maroon; margin-top:1px; margin-bottom:1px;} ul a {color:maroon; } div.left-column{float:left; align:left; border-right:medium solid #800000; width:24.7%; height:100%; background-color:#f8dce0;}ul {margin-left:35px; margin-top: 10px;} </style> <div style="width:100%; background-color:#800000;"> <h1 align="center" style="padding-top:15px; padding-bottom:15px; color:white;"> ここにサイト名<br> </h1> </div> <div class="left-column"> <ul> <li class="switchButton" title="today">今日のできごと</li> <li class="switchButton" title="tomorrow">明日のお天気</li> <li class="switchButton" title="space">宇宙のはじまり</li> </ul> </div> <div id="contentsBox" style="float:right; border-left: medium solid #800000;　width:74.5%; height:100%; background-color:#f8dce0;"> </div> </body> </html> 上のjQuery の部分はhttp://blog.nico0927.net/20111103/jquery/316 さんの「jQueryでdiv要素の中身にＨＴＭＬファイルを読み込みボタンで切り替え」から拝借しています。２）pagesフォルダの例えばtomorrow.htmlの中身は <h3 style="margin-left:10px;">明日のお天気</h3> <p style="margin:0px 10px;">平成26年3月7日10時50分気象庁予報部発表... 明日…となる所があるでしょう。</p> です。 today.html, space.htmlも同様です。以上です。まことにお手数ですがよろしくご教授頂きますようお願い申し上げます。

IE6でli間に出来る隙間を無くす方法について

下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、Firefox等では隙間は出来ませんでした。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>

はみ出た部分が切れるように表示したいのですが

以下のHTMLですと、2個目のliの１２３…が2行目に表示されてしまいますが、これを上と同じ行に表示し、divからはみ出た部分は切れるようにできないでしょうか？実際には1個目のliの長さが可変なため、HTMLと文字列（１２３…）を変えるのでなく CSSでなんとかしたいのです。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> div.d310 { width:310px; padding:0px; margin:0px; text-align:center; vertical-align:top; background-color:#ffffff; } ul { width:310px; height:20px; float:left; line-height:20px; font-size:13px; margin:20px 0px 0px 0px; padding:0px ; background:#f1f1f1; border-top:solid 1px #a9a394; } li.li1 { float:left; text-indent:12px; display:inline; margin:0px 10px 0px 10px; padding:0px 0px 0px 0px; } li.li2 { float:left; text-indent:19px; display:inline; margin:0px 10px 0px 0px; padding:0px 0px 0px 0px; } </style> </head> <body> <div class="d310"><ul> <li class="li1"><a href="">１２３４５６７８９０</a></li> <li class="li2"><strong>１２３４５６７８９０１２３４５６７８９０</strong></li> </ul></div> </body> </html>

ホームページの質問です。

ホームページの質問です。 50音表を作りたいのですが、こんな感じのタグで大丈夫でしょうか？ちょっと自信ありません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="iti"> <p>あ行</p> </div> <div class="ni"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <div id="iti">か行 </div> <div class="ni"> <ul> <li>か</li> <li>き</li> <li>く</li> </ul> </div> </body> </html> 問題点等ありましたら、指摘願います。また、修正点があれば教えてください。

CSS・IEでボーダーを表示したい

お世話になります。ホームページ構築(CSS)に関する質問です。よろしくお願いします。フリーのCSSサンプルサイトより、ソースをいただいて、ページを作ってみたのですが。ナビゲーションリストの部分で、 FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、表示されているのですが、なぜかIEでは表示されません。まだ理解が足らないのですが、「#navigation li a」の「border-right: 1px double#fff;」あたりかなと思い、線種を変えてみたりと、いろいろしているのですが変化がありません。変更すべき点をどうかご教授ください。以下は実際のソースです。「index.html」 --------------------------------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>テストサイト</title> </head> <body> <div id="container"> <div id="header"> <h1>タイトル「テストサイト」 </h1> </div> <div id="navigation"> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="menu2.html">メニュー２</a></li> <li><a href="menu3.html">メニュー３</a></li> <li><a href="menu4.html">メニュー４</a></li> </ul> </div> <div id="content"> <p>テストののページです。</p> <p>上記メニューよりご利用ください。</p> </div> <div id="footer"> Copyright テスト著作権, 2012 </div> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------------- common.css --------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; font-size: 120%;} #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px double#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #content h3 { font-size: 110%; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } -------------------------------------------------------------------------- 以上が内容になります。どうかよろしくお願いします。

IE用CSSが適用されない

通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css">  <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？宜しくお願いします。

DIVタグの背景に画像を配置できない

<!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。パスは間違っていませんが。どこが違うのでしょうか？宜しくお願いします。

IE6,IE7だとメニューが写真の裏に表示される

こんばんは。コーディング作業をしており、ヘッダーにドロップメニュー(多階層のメニューバー)を設置し、その下に写真を置いたのですが、メニューをマウスオーバーし、2階層目のカテゴリが出てきた時に、IE6.IE7だと写真の裏に隠れてしまいます。 ※ＩＥ8、ＦＦ、Ｍａｃだと写真の前にちゃんと表示されます。ソースを添付しますので、どこがいけないかご指摘していただけないでしょうか。よろしくお願いいたします。 [HTMLソース] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.5.2.js"></script> <script type="text/javascript" src="superfish.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('ul#nav').superfish(); }); </script> </head> <body> <div id="container"> <div id="header" class="clearfix"> <div id="menuBottom" class="clear"> <ul id="nav" class="clearfix"> <li><a href="#"><img src="" alt="" width="88" height="29" /></a> <ul> <li><a href="#aa">menu item that is quite long</a></li> <li class="current"><a href="#ab">menu item</a> <ul> <li><a href="#">menu item</a> <ul> <li><a href="#">short</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> </ul> </li> </ul> </div> </div> </div> <br /><br /><br /><br /> <div id="contents"> <div id="slide" class="fltL"> <div id="slide_body"> <ul> <li style="margin-left:300px;"><img src="" width="622" height="461" alt="" /></li> </ul> </div> </div>  </div> </body> </html> [上のhtmlに読み込まれているＣＳＳ（style.css）] #header { width:950px; margin:0 auto; padding-top:19px; z-index:100; } #menuBottom { float:right; z-index:0; } #container { width:100%; text-align: left; } /*** ドロップメニュのＣＳＳ ***/ ul li { margin:0; padding:0; } #nav ul { position:absolute; top:-999em; width:10em; /* left offset of submenus need to match (see below) */ } #nav ul li { width:100%; height:100%; } #nav li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ } #nav li { float:left; position:relative; } #nav li:hover ul, #nav li.sfHover ul { left:0; top:2.5em; /* match top ul list item height */ z-index:99; _z-index:0; } ul#nav li:hover li ul, ul#nav li.sfHover li ul { top:-999em; } ul#nav li li:hover ul, ul#nav li li.sfHover ul { left:10em; /* match ul width */ top:0; } ul#nav li li:hover li ul, ul#nav li li.sfHover li ul { top:-999em; } ul#nav li li li:hover ul, ul#nav li li li.sfHover ul { left:10em; /* match ul width */ top:0; } /*** DEMO SKIN ***/ #nav { float:left; } #nav ul li a { display:block; position:relative; padding:0.75em 1em; border-left:1px solid #fff; border-top: 1px solid #CFDEFF; text-decoration:none; height: 100%; z-index:15; } #nav a, #nav a:visited { /* visited pseudo selector so IE6 applies text colour*/ color:#13a; } #nav li li{ background:#AABDE6; } /*** 画像部分のＣＳＳ ***/ #slide { width:624px; position:relative; } #slide_header { position:absolute; top:0px; left:0px; width:624px; height:7px; z-index:2; background: url(slide_header.png) no-repeat; } #slide_body { background: url(slide_body.gif) repeat-y 0px 0px; width:624px; margin:auto; } #slide_body img { margin:auto; }

外部CSSがIEで無反映

Web制作初心者です。ポートフォリオとしてサイトを2つくらい作ったのですが、2つとも Google Chromeで表示確認をしていて、出来上がってから Internet Explorerでも表示確認をしてみたら、IEでは外部CSSが全く反映されていない状態でした。何がダメなのか全くわかりません。お手数ですがご助言お願い致します。 ------------HTML----------------- <!doctype html> <html> <head> <meta charset="text/html; charset=utf-8"> <meta name="descrption" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/style" href="common.css"> <link rel="stylesheet" type="text/style" href="index.css"> <title> Profile-TOP- </title> </head> <body> <div id="wrapper">  <div id="header"> <h1>My Profile Site</h1>  <div class="navi"> <ul> <li class="top">TOP</li> <li><a href="profile.html">Profile</a></li> <li><a href="design.html">Design</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div>  <div id="content"> 　<a href="profile.html"><img src="images/NY.png" alt="ny"></a> 　<p class="please">↑<br>Please click the image!</p> 　<p class="site">当サイトは私のプロフィールやポートフォリオを掲載しています。</p> </div>  <div id="footer"> <p>Copyright © 2013 nnn All Rights Reserved.</p> </div> </div> </body> </html> --------------CSS----------------- -----common----- /*----------body部分---------*/ * { font-family: serif; } body,html { background: url("images/wood_texture4.jpg") ; color: #ffffcc; margin: 0; padding: 0; line-height: 20px; height: 100%; } img { border: none; } /*--------wrapper--------*/ #wrapper { width: 900px; margin: 0 auto; padding: 0; } /*---------header---------*/ #header { background-color: #000000; margin: 0; height: 120px; padding-top: 1px; } h1 { float: left; font-size: 40pt; padding-top: 10px; padding-left: 30px; padding-right: 60px; width: 440px; margin-top: 0; margin-right: 30px; } .navi ul { margin-top: 0; } .navi ul li { list-style-type: none; float: left; width: 80px; margin-top: 28px; margin-right: 2px; padding: 6px 10px; text-align: center; background-color: #151515; font-weight: bold; } a:link { color: #cccccc; text-decoration: none; } a:visited { color: #cccccc; } a:hover { color: #ff6600; } /*------------content---------------*/ #content { background-color: #6e6e3c; clear: left; color: #000000; margin: 0; height: auto; } /*-------footer-------*/ #footer { background-color: #000000; height: 40px; padding: 10px; clear: both; padding-right: 20px; margin-top: 0; margin-bottom: 0; } #footer p { text-align: right; vertical-align: middle; } --------index.css--------- /*content*/ #content img { position: relative; left: 50px; } p { text-align: center; margin-bottom: 0; } .please { color: #ffffff; font-weight: bold; font-size: 15pt; } .site { padding-bottom: 20px; } /*現在のページナビ*/ .top { color: #990000; }

IEとその他のブラウザの表示

よろしくお願いします現在、2段落の段組をCSSで行っています但し、1段落目と2段落目にはマージンを指定していますそこで質問なのですがどこかのサイトでfloatとmarginは一緒に指定しないほうが良いというのを見たので --------------------------------- style.css --------------------------------- div.box_left_outer{ width: 300px; background-color: #FFF9E5; float: left; } div.box_left{ width: 260px; margin: 20px 20px 20px 20px; } div.box_right_outer{ width: 310px; float: left; } div.box_right_outer2{ width: 300px; margin-left: 10px; background-color: #FFF9E5; } div.box_right{ width: 260px; margin: 20px 20px 20px 20px; } --------------------------------- test.html --------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div class="box_left_outer"> <div class="box_left"> テキスト </div> </div> <div class="box_right_outer"> <div class="box_right_outer2"> <div class="box_right"> テキスト </div> </div> <body> </html> という風に書いているのですが IEだと意図した表示になるのですが Firefoxやその他のブラウザだと右側の段組のマージンの箇所が 1つ上のdivについている感じになります Firefoxなどでも同じ表示にするにはどうしたらいいでしょうか？よろしくお願いします

ドラッグによるスライド移動をさせない方法(safari/chrome)

お世話になります。早速ですが質問させていただきます。 jQuery1.3.2とEasySlider1.7プラグインを使っています。 EasySliderを使ったスライドの中にテキストボックスを配置しているのですが、このテキストボックスでドラッグしてスライドの領域外へ移動させると次のスライドへ移動してしまいます。（safari と google chrome のみ）これを移動させないよう固定する方法はありませんでしょうか？以下にソースコードを載せておきます。 ------------------------------------------------------- <html> 　<head> 　　<title>Easy Slider TEST</title> 　　<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> 　　<script type="text/javascript" src="lib/jquery/easySlider1.7.js"></script> 　　<script type="text/javascript"> 　　　$(document).ready(function(){ 　　　　$("#slider").easySlider(); 　　　}); 　　</script> 　　<style type="text/css"> 　　　#slider{} 　　　#slider ul{ 　　　　list-style-type:none; 　　　　margin:0px; 　　　　padding:0px; 　　　} 　　　#slider ul li{ 　　　　height:100px; 　　　　width:300px; 　　　} 　　</style> 　</head> 　<body> 　　<div id="slider"> 　　　<ul> 　　　　<li><div style="height:100%; background-color:#aaa;"> 　　　　　<input type="text" name="text" value="slide-1" /> 　　　　</div></li> 　　　　<li><div style="height:100%; background-color:#bbb;">slide-2</div></li> 　　　　<li><div style="height:100%; background-color:#ccc;">slide-3</div></li> 　　　</ul> 　　</div> 　</body> </html> ------------------------------------------------------- ■jQuery1.3.2■ http://docs.jquery.com/Release:jQuery_1.3.2 ■EasySlider1.7■ http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider 以上、よろしくお願い致します。

HTML・CSSタグの書き方教えてください！

画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、変わらず…。どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？よろしくお願いいたします。＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div> <div id="main"> <div id="contents"> ***コンテンツ*** </div> <div id="leftsidebar"> ***左サイドバー*** </div> </div> <div id="rightsidebar"> ***右サイドバー*** </div> <div id="footer"> ***フッター*** </div> </div> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }

ドロップダウンメニュー

ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですがメニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことはできるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div> </div> </body> </html>

IE7で <li> の一部が消える

IE7で横並びの<li>の一部が消えます。（Firefoxでは大丈夫）パソコンのフォントや大きさにもよると思うのですが 2列目の右側の「けけけ・・・」が消えます！「くくく」や「けけけ」に半角でも足したり削除すれば現れたり右側に「けけけ」がギリギリにハマるかハマらない様な微妙な場合に出る現象です。 HTMLの書き方等が間違っているのでしょうか？ <html> <head> <style type="text/css">  </style> </head> <body> <div class="xxx"> <ul> <li><img src="http://www.okweb.ne.jp/images/logo_top.gif" width="200" height="125" alt="OK"></li> <li><a href="index.html">ああああああ　ああ</a></li> <li><a href="index.html">いいいいいい</a></li> <li><a href="index.html">ううううう</a></li> <li><a href="index.html">えええええ</a></li> <li><a href="index.html">おおおおおお</a></li> <li><a href="index.html">かかかかかかかか</a></li> <li><a href="index.html">きききききききき</a></li> <li><a href="index.html">くくくくくくくくくくくくく</a></li> <li><a href="index.html">けけけけけけ</a></li> <li><a href="index.html">ここここここ</a></li> <li><a href="index.html">さささささ</a></li> </ul> <br style="clear:both"> </div> </body></html>

CSS 横並びリストの書き方はどちらがよいでしょうか

スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css">  </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>

float+IE8で形が崩れます。

float+IE8で形が崩れます。 Webクリエイターの模試をやっていたら以下のHTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base.css"> <title>模擬</title> </head> <body> <div class="menu"> <h1>番号</h1> <ul> <li>トップ</li> <li><a href="spring.html">１</a></li> <li><a href="summer.html">２</a></li> <li><a href="autumn.html">３</a></li> <li><a href="winter.html">４</a></li> </ul> </div> <div class="season"> <p>ああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </body> </html> を以下のcssと関連付けるものがあったのですが、 @charset "Shift_JIS"; body{ border:solid 1px #993366; width:800px; } h1{ color:#ffffff; background-color:#993366; font-size:140%; } h2 { font-size:120%; } ul{ line-height:200%; list-style:square; } .menu{ border-right:solid 1px #993366; width:150px; float:left } .season{ padding:10px; width:620px; } IE8で見るとまったく形が崩れてしまいます。何故でしょうか？これをIE6などで見るときちんとした形になると思うのですが、同じように表示するにはどうしたらよいのでしょうか？なかなかうまくいきません。よろしくお願いいたします。

IE7で行間　助けてください

行間の差がありすぎます。IE7で１行程度の行間が出来ます。行間の差を少なくしたいです。検証お願いします。 ul{ margin:0; padding:10px 0; font-size:85%;} li{ display: block; float:left; margin:0; padding: 0px 8px; white-space:nowrap; list-style:none;} <div style="width:400px;"> <ul> <li>あああああああああ</li> <li>いいいい</li> <li>ううううううううう</li> <li>ええええ</li> <li>おおおおおおおおお</li> <li>かかかか</li> <li>ききききききききき</li> <li>くくくく</li> <li>けけけけけけけ</li> <li>こここここここここ</li> </ul> <br style="clear: both;" /> </div>

初心者です　画像横に文字を入れたい　ｃｓｓ

web制作を始めたばかりの初心者です。画像右側に文字を入れたいのですが、うまくいきません。本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。どうぞご教示ください。 html <ul> 　　　　<li><a href="index.htm"><img src="画像"width=""height=""></a></li> 　　　　<div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li> 　　 <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}

html+cssでfloatに関して

このやり方に問題があるかどうかを教えてほしいのと、もっといいやり方があれば教えて頂きたいです。まずやりたいことは3列並びで何段も下に続いて行くようなレイアウトにしたいのです。で、1つのブロックのwidthが250pxです。そしてブロックとブロックの間が50pxです。さらに、それを格納するボックスの幅が850pxです。普通にfloatさせてるようにすると3列に並ばず2列になってしまうので、ulのwidthを900pxにして解決したのですが、これは問題あるのでしょうか。ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"></style> </head> <body> <div> <ul> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> </ul> <br clear="all"> </div> </body> </html>

IE６だと動かない　マウスオーバーで画像の入れ替え

以下のように書いてみました。 IE6以外では期待した動作が得られます。 ※imgファイルは適当です。実際に動かす場合は、適当に直して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <img src="hoge1.jpg" width="240" height="240" alt=""> <ul> <li> <a href="javascript:void(0);"> <img src="hoge2.jpg" width="80" height="80" alt=""> <span><img src="hoge2.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge3.jpg" width="80" height="80" alt=""> <span><img src="hoge3.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge4.jpg" width="80" height="80" alt=""> <span><img src="hoge4.jpg" width="240" height="240" alt=""></span> </a> </li> </ul> </div> </body> </html> IE6でも動くようにするにはどうしたら良いでしょうか？ご指導の程、宜しくお願いいたします。

4つの内２つのブラウザ（ＩＥとGC）で動作しない。

みんなの回答

関連するQ&A

jQueryの働きがブラウザにより異なる。

IE6でli間に出来る隙間を無くす方法について

はみ出た部分が切れるように表示したいのですが

ホームページの質問です。

CSS・IEでボーダーを表示したい

IE用CSSが適用されない

DIVタグの背景に画像を配置できない

IE6,IE7だとメニューが写真の裏に表示される

外部CSSがIEで無反映

IEとその他のブラウザの表示

ドラッグによるスライド移動をさせない方法(safari/chrome)

HTML・CSSタグの書き方教えてください！

ドロップダウンメニュー

IE7で <li> の一部が消える

CSS 横並びリストの書き方はどちらがよいでしょうか

float+IE8で形が崩れます。

IE7で行間　助けてください

初心者です　画像横に文字を入れたい　ｃｓｓ

html+cssでfloatに関して

IE６だと動かない　マウスオーバーで画像の入れ替え

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

4つの内２つのブラウザ（ＩＥとGC）で動作しない。

みんなの回答

関連するQ&A

jQueryの働きがブラウザにより異なる。

IE6でli間に出来る隙間を無くす方法について

はみ出た部分が切れるように表示したいのですが

ホームページの質問です。

CSS・IEでボーダーを表示したい

IE用CSSが適用されない

DIVタグの背景に画像を配置できない

IE6,IE7だとメニューが写真の裏に表示される

外部CSSがIEで無反映

IEとその他のブラウザの表示

ドラッグによるスライド移動をさせない方法(safari/chrome)

HTML・CSSタグの書き方教えてください！

ドロップダウンメニュー

IE7で <li> の一部が消える

CSS 横並びリストの書き方はどちらがよいでしょうか

float+IE8で形が崩れます。

IE7で行間 助けてください

初心者です 画像横に文字を入れたい ｃｓｓ

html+cssでfloatに関して

IE６だと動かない マウスオーバーで画像の入れ替え

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

IE7で行間　助けてください

初心者です　画像横に文字を入れたい　ｃｓｓ

IE６だと動かない　マウスオーバーで画像の入れ替え