1 reply [Last post]
Klayemore
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2005-06-10
Posts: 4
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

:: 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;
} 

Verschwindende wrote:
  • CSS doesn't make pies