WEB職人へのなが~い道のり

WEB職人を目指す行く手には、病気や貧乏など壁がいっぱい。乗り越えて晴れてWEB職人になれるのか?




スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|

テーブルレイアウトの謎の隙間

情けなくも、今日はテーブルレイアウトのページのチューニングに
3時間近く費やしてしまいました_| ̄|○ il||li

テンプレを使ったサイトなのですが、FireFoxで見ると普通に表示されるのに、
IEで見るとテーブルとテーブルの間に隙間ができるのです。
ソースを見ても、間に邪魔なタグなどは入っていないのに・・・(?_?)

そのページの作り自体、自分の好きではないレイアウトなのですが
(大きなテーブルの中にいくつもテーブルが配置されていて、
しかもその入れ子状態のほとんどがあまり意味がない=一つのテーブルで事足りそう)、
そんな好き嫌いは置いといても納得がいかない隙間・・・・(-"-)

そして理由はわからないのですが単純な作業であっさり隙間はなくなったのです。

それは、</table>と次の<table>の間にあったソース上の改行をなくして、
間に<br>を入れて続けて記載した。
それだけ。何で?!Σ(゜Д゜ )

自分はよく、チューニング時にソースのフォーマットをインデント無しに整えるのですが
これをやっただけでレイアウトが崩れるページもあるんですよね。
かと思うと、ソース内で(見やすくするためか?)やたらと行を空けているような時でも
特にレイアウトに支障がなかったり。。。

なんだかそんなつまんないことでつまづいて、やたらと時間がかかってしまったのです。(x_x)
でもあれって何でだろう???
説明下手な自分の表現ですが、意味をわかって教えていただける方がいると嬉しいです。。。
  1. 2006/08/02(水) 23:59:50|
  2. WEB関係|
  3. コメント:8
<<急遽デザインのお仕事! | ホーム | もうしばらく事務兼務になりそうです>>

コメント

隙間の理由

はじめまして
隙間の理由ですが、おそらくテーブルとテーブルの間の空行を空白としてとらえたのだと思います。
HTML 中の文章で文字と文字の間に改行を入れると、そこに半角のスペースができるのと同じ原理ですね。
今回は改行タグを入れたことで空白として認識される部分がなくなったわけです。
  1. 2006/08/03(木) 14:02:10 |
  2. URL |
  3. 通りすがり #-
  4. [ 編集]

ソースの改行要注意!

matouさん、こんばんは。
通りすがりの方が仰っているとおり、きっと改行ですね。
ソースの改行は、色々と悪戯をしてくれちゃうんですよ。
そのうち、フォームでも泣いちゃうかも~
私も何度となく泣きました。
ソースの改行は、要注意ですよ。
  1. 2006/08/03(木) 19:55:21 |
  2. URL |
  3. まいまい@Web標準にアプローチ #Ml.NqimY
  4. [ 編集]

>通りすがりさま

はじめまして。^^ こんな拙いブログにお越しいただいてありがとうございます。

なるほど!空行を空白と取られてしまったのですね。
それって、ブラウザによって対応が違うのかしら。
それとも改行のさせ方に問題が・・・??

同じように改行(というより何行も空けている)しているソースでも
問題なく表示されている時もあるのですよね。
むむむ・・・(-"-)
ともあれ、今回の現象の理由がわかってすっきりしました。どうもありがとうございました!^^
もしよろしければ、またアドバイスいただけると嬉しいです♪


  1. 2006/08/04(金) 00:03:12 |
  2. URL |
  3. matou #3K7sTJ3I
  4. [ 編集]

>まいまいさま

まいまいさん、こんばんは^^

ソース内の改行でデザインが崩れてしまうこともあるのですね。
でも、よくいろんなソースコードを見ますが、大抵は
見やすさ重視のためかな?改行したり、空白を空けたり
区切りの良いところ(?)で行を空けたりしているページもあるのですよね。

それによって、ブラウザ上でのデザインの崩れの出る場合と出ない場合があるのが
私にはよくわからないのです(-"-)
どんな違いがあるのでしょうね???

まいまいさんは、コーディングの時にインデントを使いますか?
(私はインデント無しの左詰め派なのですが)
あれ(インデント)は平気なのかなあ。。。
ソースの書き方も意外と気を使うものですね^^;
  1. 2006/08/04(金) 00:11:45 |
  2. URL |
  3. matou #.kHmkWXM
  4. [ 編集]

(;´▽`A``

私、これ、アタマ痛い話かも。

ごめんなさい・・・
この間の仕事、パーツとパーツの間を空けたくてわざと全角スペースを一行入れました・・・

懺悔・・・
( * ̄)m 〔十〕 アーメン

今度の更新作業で直すつもりではいるんですけど。
  1. 2006/08/09(水) 13:59:53 |
  2. URL |
  3. かのん #-
  4. [ 編集]

>かのんさま(ソース内のスペース)

いや、かのんさん。全角スペースを入れたい気持ちはよーくわかります^^;
かくいう私もきっと無意識にやってることと思います。

でもやっぱり謎もあるんですよねぇ。
よく、HEAD部分とBODYの間だとか、コンテンツの変わり目だとかに
1行どころか2行も3行も間を空けて書いているサイトもありますよね。
どうしてアレはレイアウト崩れないのかしら???

それとも、DWとかを使って書いているときに、ソースじゃなくて
デザインモードの画面で改行していると崩れるとか?
なかなかわからないのは私の頭が悪いからかなあorz
  1. 2006/08/10(木) 22:40:45 |
  2. URL |
  3. matou #WVdi2rEU
  4. [ 編集]

オーサリングソフト使ってweb作成していると、知らないうちに勝手にソースをいじられてしまうこともあるので何とも言えないですが・・・

HEADとBODYの間とかに私はバンバン行間とって、後で見やすいようにしておきます。
私はいつもエディタでソースを書いているので別に問題はないですが・・・

デザインモードだと入力しているそのままに空欄とかも認識するから問題が生じるんではないですか?
  1. 2006/08/11(金) 23:44:51 |
  2. URL |
  3. かのん #-
  4. [ 編集]

>かのんさま(ソース内の改行)

デザインモードで改行をすることは、私はやらないのですけどね。改行は、ソース内でやってます。

そう、そもそもDWとかのソフトを使って書かなければいい話なのですが、
私実は、スペル間違いが異常に多いのです(>_<)
なので、DWとかに助けてもらいながらじゃないと、綴りの間違いだらけのソースになりそうで・・・(T_T) 情けない。

手打ち派の皆さんを憧れのまなざしで見てしまう私です。。。
  1. 2006/08/12(土) 23:14:44 |
  2. URL |
  3. matou #OARS9n6I
  4. [ 編集]

コメントの投稿

管理者にだけ表示を許可する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。