Sent by Dave Goodchild on 2 March 2006 17:05
Hi all, I am pretty new to css from a layout perspective and made the
mistake of coding my page for Mozilla (ok, good to code for Mozilla and then
placate IE but I left viewing in IE until last).
My test page is available at http://www.web-buddha.co.uk/test1.php
....looks cool in Firefox and Opera, then I viewed in IE6...aaargh!
....any quick ideas, I am troubleshooting myself but your wider experience is
valuable. I know I have not added the Tantek box model hack for IE5, will do
that in time, but in IE6 it still looks like vomit!
Here is the css:
body {
margin: 0px;
padding: 0px;;
background-color: #fff;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.3em;
}
p {
font-family: Arial, Helvetica, sans-serif;
margin: 3px 1px 0px 1px;
}
p:first-line {
font-weight: bold;
}
#container {
width: 740px;
text-align: center;
margin: 8px auto 0px auto;
background-color: #000099;
}
#header {
text-align: left;
width: 738px;
height: 70px;
background-color: #0033CC;
border: 1px solid #000;
border-bottom: 0;
background-image: url(../../images/banner.gif);
}
#nav {
text-align: left;
padding: 3px;
width: 732px;
height: 24px;
background-color: #fff;
border: 1px solid #000;
border-bottom: 0;
}
#nav a:link {
text-decoration: none;
color: #000;
}
#nav a:visited {
text-decoration: none;
color: #000;
}
#nav a:hover {
text-decoration: none;
color: #ccc;
}
#nav a:active {
text-decoration: none;
color: #000;
}
#content {
position: relative;
background-color: #0099CC;
}
#text {
text-align: left;
position: absolute;
left: 0px;
width: 492px;
height: 400px;
top: 0px;
border: 1px solid #000;
padding: 3px;
background-image: url(../../images/text.gif);
}
#photos {
text-align: center;
position: absolute;
right: 0px;
top: 0px;
width: 232px;
height: 400px;
border: 1px solid #000;
padding: 3px;
}
#footer {
position: absolute;
top: 402px;
left: 0px;
width: 738px;
height: 70px;
background-color: #0033CC;
border: 1px solid #000;
border-top: 0;
}
..photo {
margin: 5px auto 0px auto;
width: 100px;
height: 100px;
border: 1px dashed #000;
}
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
