2010-09-25 35 views
-2
<!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="en" lang="en"> 
<head> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
hasVBar="";hasHBar=""; 
$(document).ready(function() { 
    if ($(document).height() > $(window).height()) { 
     hasVBar="y"; } 
    if ($(document).width() > $(window).width()) { 
     hasHBar="n"; }}); 
</script> 

<script type="text/javascript"> 
<!-- 
cUA=""; 
window.onload=function starterJobs(){ 
chkBrowser();setMidSecStart();} 

// chk browser 
function chkBrowser(){ 
if(navigator.appName=="Microsoft Internet Explorer") 
{cUA="ie";} else {cUA="oth";} 
} // ends chkBrowser() 

// starting of body matter section 
function setMidSecStart(){ 
if(cUA=="ie") 
{ 
//document.getElementById('gdMatter').style.top='150px'; 
} 
else{}} // ends chkBrowser() 
--> 
</script> 

<style type="text/css"> 
     * { 
      border:      0; 
     margin:      0; 
     padding:     0; 
     outline:     none; 
    } 
    body { 
      background-color:   #5e0305; 
     font-family:    Arial, Helvetica, sans-serif; 
     font-size:     12px; 
     color:      #999; 
     line-height:    16px; 
     } 
     #gdtrunk { 
     background:transparent url(../images/mbb.png) repeat-x; 
    } 

    .wrapper { 
     width:      1000px; 
     margin:      0 auto; 
     } 

    #topbar { 
     background:     transparent url(../images/mbb.png) repeat-x; /* menu bar base*/ 
     height:      62px; 
     overflow:     visible; 
     position:     relative; 
     z-index:     3; 
    } 

    #topbar #itmlogo { 
     float:      left; 
     list-style:     none; 
       } 

    #topbar #menuTop { 
     float:      right; 
     height:      55px; 
     background-color:   transparent; 
    } 

    #topbar ul#menuTop { 
     list-style:     none; 
    } 

    #topbar ul#menuTop li { 
     float:      left; 
     text-align:     right; 
    } 
    #topbar ul#menuTop a { 
     float:      left; 
     display:     block; 
     width:      110px; 
     height:      42px; 
     padding:     14px 7px 0px 0px; 
     text-transform:    uppercase; 
     text-decoration:   none; 
     font-weight:    bold; 
     font-size:     12px; 
     color:      #000; 
     letter-spacing:    1px; 
    } 

</style> 

</head><body> 
<div id="gdtrunk" > 
    <div class="wrapper"> 
    <div id="topbar" style="clear:both;"><a name="top"></a> 
     <div id="logobox"> 
     <ul id="itmlogo"> 
      <li><a href="http://www.e.com/"><img id="top-logo" src="./images/logo1.png" alt="eLogo" title="e Logo" width="180px"; height="198px;" /></a> </li> 
     </ul> 
      </div> 
     <div id="menubox"> 
     <ul id="menuTop"> 
      <li> 
       <a onclick="getLink('home'); return false" href="./inmaking.html" onmouseover="status=''; return true;" >home</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
</div> 

<div class="wrapper" > 

<div id="gdMatter" style="background-color:#CCCCCC; position:relative; clear:both; top:10px; height:auto; padding:25px;padding-left:75px;"> 
<!-- Graphic Designing starts --> 
<div style="background-color:transparent; position:relative; top:0px; left:0px; height:300px;overflow:hidden;"> 

<div style=" position:relative; top:0px; left:0px; background:transparent; width:auto; height:10px; padding:20px 0px 20px 0px;"> 
<div style="position:relative; top:0px; left:0px; background:transparent url(butSquare1.gif) no-repeat; width:10px; height:10px; border:white solid 1px;"></div> 
<div id="printing1" style="position:relative; top:-20px; left:25px; background-color:transparent; width:auto; height:20px; padding-top:5px; margin-right:25px;">Graphic Designing </div> 
</div> 

<div style="position:relative; top:0px; left:0px; background-color:transparent;" > 
    <div id="abtgd1" style="background-color:#897656; position:relative; top:0px; left:0px;z-index:5; padding:10px 25px 20px 25px; height:225px; margin-left:0px; color:#c4baaa" class="h1text1"> 
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. 
    </div> 
</div><!-- abtgd123 ends --> 
</div><!-- Graphic Designing ends--> 
</div> <!-- gdMatter --> 
</div><!-- wrapper 2nd closed--> 
</div><!-- gdtrunk --> 
</body></html> 

编辑由OP在评论中添加链接jsfiddle demo,如链接到的给@JapanPro's answerCSS DIV的问题,即

+0

您可以添加真实标签并使用代码格式工具对其进行格式化。 – 2010-09-25 03:38:12

+2

实际的代码,而不是一个大纲,将帮助我们帮助您找到问题所在。 (尤其是*当涉及到web开发时)。 – 2010-09-25 03:38:58

+0

如果您使用代码标签格式化代码,这会很有帮助。 (101)按钮。 – jimueller 2010-09-25 03:39:06

回答

-1

这是你的代码实际上

<div class="div1"> 
    <div class="div2"> 
     <div class="div3" style="height:62px;"> 
      <img src="" style="height:200px;"> 
     </div> 
     <div class="div4" style="clear:both">test</div> 
    </div> 
</div>​​​​​​​​ 

现在的问题应该是如何在使用此代码会给你不同的浏览器相同的结果,所有的浏览器

<div class="div1"> 
    <div class="div2"> 
     <div class="div3"> 
      <img src="" style="height:200px;display:block"> 
     </div> 
     <div class="div4">test</div> 
    </div> 
</div>​​​​​​​​ 

得到同样的结果。

+0

-1中的“div1”和“div2”,请添加评论。 – 2010-09-25 04:01:08

+0

亲爱的JapanPro,感谢您的这个提示,顺便说一句,我纠正/编辑了一些后最初发布的代码(div 3关闭b4 div4开始)。无论如何,其他人问我试着张贴实际的代码在这里... – 2010-09-25 04:10:09

+0

@Rahul添加到jsfiddle.net,所以我可以看到和调整,如果需要。 – 2010-09-25 04:12:51