Topic: Confusion
Happy Friday everyone
Once again I am stumped.
I have an issue with Fire fox and IE and I am hoping you can lead me in the right direction or correct IE comment.
I have a 3 Col. Fixed Layout 950px wide.
In Firefox - the Container is not white as hoping for, Changing my elements borders to white - (Against the bodies 192543 color bg ) - the layout looks fine
In IE - the container is white. However, with my borders white - I can not tell if the layout is ok.
Where is my error for the container not being in White in FF, and how can I tell if my layout is ok in IE. As alwyas - thank you for your professional and reputable input
(I have included the code below. This is in DW CS4, however I am using my own code in a new HTML page)
Brian
The CSS
body {
background-color: #192543;
margin: 0 auto;
padding: 0auto;
text-align: center;
}
#Container {
background-color: white;
width: 958px;
margin: 0 auto;
text-align: left;
}
#Header {
height: 100px;
margin: 0 auto;
background-color: #A9A9A9;
}
#Navigation {
background-color: #000033;
height: 25px;
padding: 5px;
}
#leftColumn {
float: left;
width: 180px;
height: 500px;
margin: 100px 15px 50px 15px;
padding: 10px 10px;
border: 1px solid white;
}
#Time {
float: left;
width: 300px;
height: 100px;
margin: 100px 15px 15px 0px;
padding: 5px;
border: 1px solid white;
}
#Now {
float: left;
width: 100px;
height: 80px;
margin: 100px 15px 15px 0px;
padding: 5px;
border: 1px solid white;
}
#Statement {
float: left;
width: 425px;
height: 150px;
margin: 0px 15px 15px 0px;
padding: 5px;
border: 1px solid white;
}
#Movies {
float: left;
width: 200px;
height: 100px;
margin: 0px 15px 15px 0px;
padding: 5px;
border: 1px solid white;
}
#Music {
float: left;
width: 200px;
height: 100px;
margin: 0px 15px 15px 0px;
padding: 5px;
border: 1px solid white;
}
#News {
float: left;
width: 425px;
height: 150px;
margin: 0px 15px 50px 0px;
border: 1px solid white;
}
#rightColumn {
float: right;
width: 245px;
height: 480px;
margin: 140px 15px 40px 0px;
padding: 5px;
border: 1px solid white;
}
#Footer {
height: 100px;
width: 950px;
margin: 0 auto;
background-color: #A9A9A9;
clear: both;
}
</style>
</head>
The HTML
<body>
<!-- Container -->
<div id="Container">
<!-- Header -->
<div id="Header"></div>
<!-- Navigation -->
<div id="Navigation"></div>
<!-- Left Column -->
<div id="leftColumn"></div>
<!-- Right Column -->
<div id="rightColumn"></div>
<!-- Time -->
<div id="Time"></div>
<!-- Now -->
<div id="Now"></div>
<!-- Statement -->
<div id="Statement"></div>
<!-- Movies -->
<div id="Movies"></div>
<!-- Music -->
<div id="Music"></div>
<!-- Time -->
<div id="News"></div>
</div>
</div>
<!-- Footer -->
<div id="Footer"></div>
</body>
</html>
