2011-02-28 9 views
0

私がここに貼り付けるコードは、FF、IE6、Operaで異なる結果を示しています。firefox、IE6とoperaには表示される内容が異なります

FFとOperaの結果の違いは、水平メニューの上に表示されているスペース(空の色)とその下のもの(白い色)です。 IE6の場合、FFの結果との違いは、水平メニューの下に表示されるスペース(白い色)の量です。 3人のブラウザに同じ結果、つまりFFの現在の結果を表示させるにはどうすればよいですか?

HTMLコード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title>fffffff</title> 
    <link rel="stylesheet" href="css/main.css" type="text/css"/> 
    </head> 

<body> 

    <div id="header"> 
<div class="header_inside"> 
<div class="logo"> 
<img src="img/img_flwr.png" width="224px" height="162px" > 
</div> <!-- end of class logo--> 

    <div class="chat"> 
    <a href="phponline/client.php" target="_blank"><img src="img/img_flwr.png" width="124px" height="62px"></a> 

    </div> 


    <div class="clear"> 
    </div> 


    <div class="name"> 
    <marquee behavior="scroll" direction="RIGHT" scrollamount='5' scrolldelay='25' > 

     CODE ARROW 
</marquee> 

    </div> --> 


    <div id="slides"> 
    <img src="img/img_1.jpg" alt="Img 1" width="815px" height="268px" /> 

</div> 


    <div class="clear"> 
    </div> 
    <br> 

</div> <!-- end of class header_inside--> 
</div> <!-- end of header--> 


    <div class="menu_h"> 
    <div class="menu_h_inside"> 
    <br> 
<ul> 
<li><a href="index.php" id="home_nav" >Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">News</a></li> 
<li><a href="gallery_core.php?page=1" id="image_gallery_nav">Photo Gallery</a></li> 
<li><a href="#">Video Gallery</a></li> 
<li><a href="#">Career</a></li> 


<li><a href="#">Contact</a></li> 
</ul> 
<br style="clear:left"/> 
</div> <!-- end of class menu_h_inside--> 
</div> 

</body> 
</html> 

とCSSがある:

/* CSS Document */ 
*{ 
padding:0; 
margin:0; 

} 
body{ 
    width: 1160px; 
    /*background:#BFFDC4 !important;*/ 
    margin-left: 20px; 
    /*border:4px solid red;*/ 
} 

#frame { 

/*width: 710px;*/ 
width: 1125px; 
/*BORDER:12PX SOLID RED;*/ 
/*border:7px solid green;*/ 
} 

#header{ 
position:relative: 
display:block; 
/*border:10px solid green;*/ 
width:1160px; 
background:#9DD4FF; 

} 
.header_inside{ 


} 


body#home a#home_nav, 
body#image_gallery a#image_gallery_nav 
{ 

background-color:#0b75b2 !important; 
} 


.logo{ 
position:relative; 
left:3px; 
top:3px; 
float:left; 

/*border: 8px solid #F2AC4E;*/ 

} 
.chat{ 
position:relative; 

float:left; 
display:inline-block; 
margin-left:100px; 
margin-top:15px; 
/*border:13px solid red;*/ 

} 

.chat img:hover{ 




} 

.clear{ 

clear:both; 

} 
.name{ 
position:relative; 
display:block 
clear:both; 

width:300px; 
height:50px; 
MARGIN-TOP:75PX; 

background-color:#000000; 
color:#FFFF80; 

font-size:40px; 
} 



#slides{ 
position:relative; 
left:300px; 
MARGIN-top:-180px; 
FLOAT:LEFT; 


} 


/* horizontal menu_h css begins*/ 

.menu_h{ 
    position:relative; 
    margin-top:20px; 
    width: 1145px; 
    /*border:5px solid yellow;*/ 
    } 

    .menu_h ul{ 
    margin: 0; padding: 0; 
    float: left;} 

.menu_h ul li{ 
    display: inline; 
} 

.menu_h ul li a{ 
    float: left; text-decoration: none; 
    color: white; 
    padding: 10.5px 44.6px; 
    /*background-color: #333; EDITED BY ME */ 
    background-color:#C7A781; 
    border-right: 1px solid #FFFFFF; 

    } 

.menu_h ul li a:visited{ 

    color: white;} 

.menu_h ul li a:hover, .menu_h ul li .current{ 
    color: #fff; 
    background-color:#0b75b2;} 


    /* horizontal menu_h css ended */ 


.menu_h_inside{ 
    margin-left:1px; 
    /*margin-top:7px;*/ 
} 

画像が適切な場所で使用されるべきです。

ありがとうございます。 Istiaqueアーメド バングラデシュ

+0

ここではなく、pastebin.comに使用しているコードを貼り付けるほうが良いかもしれません。 – jpea

+0

コードを再フォーマットしてください。読めません! – CAFxX

+0

1.該当するコードを転記します。あまりにも多くの人があなたのHTMLとCSSの混乱をここでデバッグしたいと思っているのではないかと疑います。問題の間隔を制御するスタイル。 2.それは何のように見えるべきものへのリンクを掲示する – Cfreak

答えて

0

あなたの問題は、おそらくあらゆる場所にいるブラウザのデフォルトスタイルシートによって引き起こされます。問題をデバッグするのに多くの時間を費やす前に、良いCSSリセットを加えることを検討してください。これは、最初のユニバーサルリセットを思いついた男のものです。それはかなりうまくいく。

http://meyerweb.com/eric/tools/css/reset/

+0

@Brent Friar、私はページ内のコードを使用しました。 probはまだそこにある。 –

+0

次に、Firebug、FF Web Developer、またはChrome Inspect Elementを使用して、さまざまな問題領域にどのCSSが適用されているかを正確に確認します。ブラウザ固有のスタイルシートを作成する必要がある可能性もあります。 BTW - あなたのクライアントはIE6サポートが必要ですか?そうでない場合、私は非常に真剣にそれを完全に削除することを検討します。 –

+0

@Brent Friar、probはOperaです。私はオペラdragonflyerを試しましたが、水平メニューの上と下の2つのスペースが変わる理由を理解できません... IE6を破棄しようとしています。 dragonflyeは、コードセグメントの関連領域を示しています。なぜスペースが増えるのか、どうすれば理解できますか? –

0

あなたのDOCTYPEが間違っていると、あなたはQuirksモードです。 doctypeを<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">に変更し、私たちの立場を見てください。

FirefoxまたはOperaを最初にフォローしていることを確認してください。それでは、あなたが何かを "修正"しようとする前にIEがどうやってネジを締めるのか見てみてください。決してIEを信頼して何か正しいことをしないでください。

+0

これは、水平メニューの上の空色部分のために働いた。それに感謝します。水平メニューの下のOperaに表示される余分なスペースはどうですか? –

関連する問題