css div issue in ff and ie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<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"&gt;&lt;/script&gt;
<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/"&gt;&lt;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.

-1 , please add comment too.

JapanPro 2010-09-25 04:01:08

dear JapanPro, thanks for this tip, btw I rectified/edited the code a little after posting initially (div 3 closed b4 div4 starts). Anyway asked by other I am try to post actual code here...

Rahul Utb 2010-09-25 04:10:09

@Rahul add to jsfiddle.net so i can see and adjust if needed.

JapanPro 2010-09-25 04:12:51

@rahul i have updated code, please take a loop, if it works accept as an answer. thanks

JapanPro 2010-09-25 04:19:19

i have now added code here as well as in jsfiddle

Rahul Utb 2010-09-25 04:37:30

add jsfiddle url here

JapanPro 2010-09-25 04:46:45

http://jsfiddle.net/7UM86/1/

Rahul Utb 2010-09-25 05:39:46

check update here http://jsfiddle.net/7UM86/4/ there is little padding issue and adjusting , i think you can do your self coz you know how much space u need and where.

JapanPro 2010-09-25 07:15:31

Hi, thanks for the solution. I am quite new to this stackoverflow, don't know even properly to use it. I have accepted your ans, the one you gave on jsfiddle. But can u just tell me little bit why this issue. Is that some problem with IE.

Rahul Utb 2010-09-25 09:40:39

as i told you, ie have different rendering then ff and chrome. but if you follow streak rule , it works every where.

JapanPro 2010-09-25 10:10:20

to vote up, you just can push top arrow on vote in left side.

JapanPro 2010-09-25 10:11:06

ansaurus

tags:

views:

answers:

css div issue in ff and ie

related questions