By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,244 Members | 1,375 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,244 IT Pros & Developers. It's quick & easy.

width difference in IE and Mozilla

P: 2
Hi all,

I am creating tables using CSS ( tag).I am facing problem of width . I am giving 70% and 30% width to the respective div`s but it showing me difference in IE and Mozilla its not showing the same width on both browser.

Copy paste the following code to view the problem -

<html>
<head>
<title>Tables Through CSS</title>
<style type="text/css">
<!--


#mainBody{
height:409px;
border-top: #003366 1px solid;
background-image: url(../images/grBg.jpg);
background-repeat:repeat-x;
margin:0 1px 0 1px;
overflow:auto;
background-attachment: fixed;
}

#sectionRight{
background-color:#00FFFF;
width:25%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color: #666666;
font-weight: normal;
padding-top: 20px;
padding-right: 20px;
padding-bottom:20px;
padding-left: 20px;
text-align: justify;
line-height:15px;
float:right;
height:100%;
margin:0;
background-color:#CC6600;
}

#sectionLeft{
width:65%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color: #666666;
font-weight: normal;
padding-top: 20px;
padding-right: 20px;
padding-bottom:20px;
padding-left: 20px;
text-align: justify;
line-height:15px;
float:left;
height:100%;
background-color:#CCCCFF;
margin:0;

}

#pointBluIcn{
width:100%;
padding-right: 20px;
padding-bottom:20px;
padding-left: 30px;
text-align: justify;
line-height:15px;
float:left;
background-color: #999999;

}

.bullet{
background-image:url(../images/bullet.gif);
background-repeat: no-repeat;
background-position: 15px;
background-repeat: no-repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #006fa0;
font-weight:bold;
padding-top: 20px;
padding-right: 20px;
padding-bottom:20px;
padding-left: 30px;
text-align: justify;
line-height:2px;
}


.bulletHed{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
font-weight:bold;
}
#btmBlank{ width:100%; height:15px; background-color:#CC9933;}

.welcomeTxt{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color: #3333FF;
}-->
</style>
</head>


<body>
<table width="85%" border="0" align="center" cellpadding="0" cellspacing="0" class="bodyBorder" >


<tr>
<td><div id="mainBody">
<div class="welcomeTxt"> Welcome to the</div>
<div id="sectionLeft"> The nature of work is changing. Today's business teams are virtual, made up of members from different organizations, specialties and locations. Managing the work flow and knowledge of these distributed teams is a challenge.

DocuTracks makes it easy to work with colleagues who are far away. Unlike collaboration software that focuses on internal corporate teams, DocuTracks offers a secure way for companies to collaborate and share documents with team members outside their firewall. <br>
<br>
<div id="pointBluIcn">
<div class="bulletHed">DocuTracks on-demand collaboration service lets you:</div>
<div class="bullet">Get working today! No team training required.</div>
<div class="bullet">Keep your group organized and productive - effortlessly! </div>
<div class="bullet">Share large files instantly and reduce courier spending!</div>
<div class="bullet">Add customer services. Increase satisfaction and revenue.</div>
<div class="bullet">Streamline vendor communications. Get products to market quickly.</div>
<div class="bullet">Reduce IT total cost of ownership.</div>
</div>
</div>
<div class="style1" id="sectionRight">Try </div>
</div></td>
</tr>
</table>
</body>
</html>
May 4 '07 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
Without a proper doctype, IE goes into quirks mode and uses their broken "box model". So the margins are in the wrong place. See the sticky at the top of the board. Use the html4.01 strict doctype.
May 4 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.