Fri, 2005-06-10 00:49
Hi, i have created a site that can be viewed at http://www.members.westnet.com.au/grymrr/tickner
The problem is that in Internet Explorer it displays fine, however in Firefox the tables are all stretched out etc. I am guessing that it has to do with my CSS scripting somewhere. Could someone please take a look at it and tell me what is wrong because i am new to XHTML and have no clue! and yes i know that i have used tables for the entire layout, so is it possible to fix without restarting again using DIV's?
CSS layout Coding:
body, html {
margin: 0px;
width: 100%;
height: 100%;
background-image: url(../images/layout/background.gif);
background-repeat: repeat;
}
#contentholder {
width: 700px;
height: 100%;
padding: 0px;
background-color: #FFFFFF;
}
#content {
padding-left: 18px;
padding-right: 18px;
padding-bottom: 18px;
padding-top: 5px;
vertical-align: top;
font-family: verdana;
font-size: 11px;
color: #89A0C3;
background-image: url(../images/layout/content-background.jpg);
background-position: right;
background-repeat: repeat y;
}
#footer-left {
padding-top: 5px;
height: 39px;
width: 429px;
background-image: url(../images/layout/footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}
#footer-right {
padding-top: 5px;
height: 39px;
width: 271px;
background-image: url(../images/layout/content-background.jpg);
background-position: right;
background-repeat: repeat y;
}
.footer-fmlogo {
margin-left:10px;
margin-right: 15px;
margin-top: 7px;
float:left;
}
.footer-cpalogo {
margin-right:10px;
float:right;
}
#header {
padding: 0px;
height: 119px;
width: 700px;
vertical-alin: top;
}
#navbar {
padding-left: 15px;
height: 32px;
}
If somebody could help me then this would be much appreciated. Thankyou
Fri, 2005-06-10 09:37
#1
:: XHTML/CSS Problem in Fieworks
Some tips to help you.
1) Remove this: <?xml version="1.0" ?>, it throws IE into quirks mode, which makes it display wrong.
2) Ditch dreamweaver and use a text editro to create your sites.
3) Stop using tables for layout, they're designed for tabular data.
4) Research on shorthand CSS, it makes your CSS smaller and easier to manage.
body, html {
margin: 0;
width: 100%;
height: 100%;
background: url(../images/layout/background.gif) repeat;
}
#contentholder {
width: 700px;
height: 100%;
padding: 0;
background-color: #FFF;
}
#content {
padding: 18px;
padding-top: 5px;
vertical-align: top;
font: normal 11px verdana, sans-serif;
font-size: 11px;
color: #89A0C3;
background: url(../images/layout/content-background.jpg) repeat-y 100% 0;
}
#footer-left {
padding-top: 5px;
height: 39px;
width: 429px;
background: url(../images/layout/footer.jpg) no-repeat bottom left;
}
#footer-right {
padding-top: 5px;
height: 39px;
width: 271px;
background: url(../images/layout/content-background.jpg) repeat-y 100% 0;
}
.footer-fmlogo {
margin: 7px 15px 0 10px;
float:left;
}
.footer-cpalogo {
margin-right:10px;
float:right;
}
#header {
padding: 0;
height: 119px;
width: 700px;
vertical-align: top; <-- TYPO WAS HERE
}
#navbar {
padding-left: 15px;
height: 32px;
}