Forum Moderators: not2easy
I have a pretty basic fixed template with a banner in the top a side bar a maincontent divission just to hold an image in the background and an absolute element where i want to put some text in side. This element has the property overflow:auto; so you can scroll the text. The problem is that the absolute element which name is maintext is taking more padding in IE than Firefox and I need to know what am i doing wrong here, because its about a 5px extra padding. Here is the css/xhtml code for your review.
thanks in advance.
------------------XHTML--------------------
<div id="maintext">
some text here inside
</div>
<div id="container">
<div id="header">
flash based banner comes here size = 780 x 130
</div>
<div id="sidebar">
flash based banner comes here size = 120 x 250
</div>
<div id="maincontent">
this divission doesnt have anything inside its just there to hold an image in the background.
</div>
<div id="footer">
some text here
</div>
</div>
---------------------CSS------------------------
* {
margin: 0px;
padding:0px;
border:none;
}
p {
text-align: justify;
padding: 5px 0 0 10px;
}
body {
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.common #container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
background-image: url(../images/bg.jpg);
height: 602px;
}
.common #header {
background: #DDDDDD;
padding: 0;
}
.common #sidebar1 {
float: left;
width: 200px;
padding: 35px 0px 0px 0px;
}
.common #mainContent {
margin: 0 0 0 180px;
height: 440px;
}
.common #maintext {
position: absolute;
left: 630px;
width: 370px;
height: 195px;
top: 200px;
overflow: auto;
padding: 4px 10px 0px 5px;
}
.common #footer {
padding: 0 10px 0 20px;
background-color: #151C38;
border-top: 1px solid #555599;
}
.common #footer p {
margin: 0;
padding: 10px 0;
text-align: center;
color: #CCCCCC;
font-size: 90%;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}