css div issue in ff and ie [closed]
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 12 years ago.
<!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>
Edited to add link to jsfiddle demo, as linked-to by OP in comment to @JapanPro's answer.
This is your code actually
<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>
now question should be how you can get same result in all browser
<div class="div1">
<div class="div2">
<div class="div3">
<img src="" style="height:200px;display:block">
</div>
<div class="div4">test</div>
</div>
</div>
using this code will give you same result across browser.
加载中,请稍侯......
精彩评论