Forum Moderators: not2easy
Why would div layer margins and/or padding, e.g.,
.footer-txt {
padding : 50px 10px 15px 10px;
}(full CSS upon request)
be recognized in IE but not Firefox? In Firefox the code is either recognized incorrectly, or not at all.
All should be fine with this. Can you post the full html/css and I'll take a look?
Otherwise, yeah, it's something else in your code that's causing the issue.
Full code:
<!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>
<title> </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
html, body {
background-color : #ccc;
margin : 0;
padding : 0;
}
/* layout */
#container {
width : 800px;
}
#footer {
background-color : blue;
clear : both;
height : 50px;
}
#header {
}
#main {
background-color : #fff;
display : inline;
float : right;
position : relative;
width : 570px;
}
#side {
background-color : #30332c;
float : left;
position : relative;
width : 230px;
}
[b] /* navigation */
.nav div {
text-align : center;
}
.nav li {
float : left;
text-align : center;
}
.nav ul {
list-style-type : none;
margin : 0;
padding : 0;
}
.nav01 {
background : url(nav01.jpg) no-repeat 0 0px;
border : 0;
float : left;
height : 72px;
text-align : center;
width : 60px;
}
a.nav01:link, a.nav01:visited, a.nav01:active {
background : url(nav01.jpg) no-repeat 0 0px;
text-decoration :none;
}
a.nav01:hover {
background : url(nav01.jpg) no-repeat -60px 0px;
}[/b]
/* text */
.container-txt {
color : #666;
font : 11px verdana;
padding : 50px 20px 10px 20px;
}
.footer-txt {
font : 9px verdana;
padding : 5px;
}
h1 {
color : #3d623d;
font : 23px times new roman;
padding : 0;
}
p {
border : 1px solid #444; /* border for testing purposes only */
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="header"><img alt="" src="collage.jpg" /></div>
<!-- php include here, eventually -->
[b]<div class="nav">
<ul>
<li><a class="nav01" href="" title=""></a></li>
<li><a class="nav01" href="" title=""></a></li>
<li><a class="nav01" href="" title=""></a></li>
<li><a class="nav01" href="" title=""></a></li>
<li><a class="nav01" href="" title=""></a></li>
<li><a class="nav01" href="" title=""></a></li>
<li><a class="nav01" href="" title=""></a></li>
</ul>
</div>[/b]
<div class="container-txt">
<h1>Testing, testing, 1..2...83...</h1>
<p>wee bit of text here,<p>here,</p><p>and here.</p>
</div>
</div>
<div id="side">
<div><img alt="" src="quick-menu.jpg" /></div>
<div><img alt="" src="curve.jpg" /></div>
</div>
<div id="footer">
<div class="footer-txt">Hi, I'm the footer, nice t' meetcha.</div>
</div>
</div>
</body>
</html>
