5 replies [Last post]
herrslime
Offline
newbie
42:29:10N 83:22:32W
Last seen: 18 years 16 weeks ago
42:29:10N 83:22:32W
Timezone: GMT-5
Joined: 2004-08-12
Posts: 10
Points: 0

I just finished a tutorial on Westciv. The final site should look like this: http://www.westciv.com/style_master/academy/hands_on_tutorial/finished_project/index.html

Mine looks like this: http://www.omerod.com/Test/

As you can see the #main-content is way down the page but I can not see what is wrong in the css. It should align at the top just below the picture.

I checked my CSS against the one used on the tuttorial site and don't see any difference except maybe the order of things in the css file.

Thanks for your help. My CSS follows

+++++++++++++++
/*This is the core style sheet of the site*/

body {
background-color: #dedede;
color: #666666;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif, "Times New Roman";
font-size: 1em;
background-image: url(images/page-bg.gif);
margin: 0em;}

p {
font-size: .8em;
text-align: justify;
line-height: 1.7em;}

p.footer {
font-size: .5em;
text-align: center;
font-weight: bold;}

h1 {
font-size: 1.2em;
text-align: right;
font-style: italic;
letter-spacing: 5px;}

h2 {
font-size: 1.1em;
text-decoration: underline;}

#header {background-color: #ffffff;
border-bottom: 1px #000000 solid;
padding-left: 125px;
padding-right: 125px;
padding-top: 10px;
padding-bottom: 10px;}

#header p {
font-size: .6em;}

#main-content {
background-color: #ffffff;
border: 1px #000000 solid;
margin-left: 180px;
margin-right: 180px;
padding: 10px;
margin-top: -50px;}

#navbar {
position: absolute;
top: 400px;
left: 0px;
background-color: #ffffff;
width: 180px;
border-top: 1px #000000 solid;
text-align: center;
font-weight: bold;}

#navbar a:link, #navbar a:visited {
display: block;
color: #7e7e7e;
background-color: #ffffff;
border-bottom: 1px #000000 solid;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;}

#navbar a:hover {
background-color: #dedede;}

#outer-image {
background-image: url(images/pale-clouds.jpg);
height: 249px;
background-position: center top;
background-repeat: repeat-x;}

#inner-image {
background-image: url(images/clouds.jpg);
height: 199mm;
background-repeat: no-repeat;
background-position: center top;}

/*This is the core style sheet of the site*/

herrslime
Offline
newbie
42:29:10N 83:22:32W
Last seen: 18 years 16 weeks ago
42:29:10N 83:22:32W
Timezone: GMT-5
Joined: 2004-08-12
Posts: 10
Points: 0

CSS problem

Can anybody help me with this?

indy_jones
indy_jones's picture
Offline
Regular
USA
Last seen: 18 years 15 weeks ago
USA
Timezone: GMT-5
Joined: 2004-08-16
Posts: 11
Points: 0

typo . . . seems like

Here's your problem:

#inner-image {
background-image: url(images/clouds.jpg);
height: 199mm;
background-repeat: no-repeat;
background-position: center top;} 

Change the mm to px and you should be all set. I haven't tested this, so make sure you give it a once-over in a few different browsers. Laughing out loud

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

CSS problem

Hi indy_jones,
The only noticable difference I can see is that that the westciv example page is in Quirks mode where as yours is in Standards mode.

By the way yours works fine in Firefox.

What you could try is positioning the #main-content div absolutely.

Hope that helps

indy_jones
indy_jones's picture
Offline
Regular
USA
Last seen: 18 years 15 weeks ago
USA
Timezone: GMT-5
Joined: 2004-08-16
Posts: 11
Points: 0

maybe both . . .

Since I use firefox exclusively I did not notice at first the problem with the css because, as you mentioned, the problem is not visible in that browser (or Opera or netscape for that matter).

However, IE6 *groan* seems to choke on the millimeter unit in the css that I pointed out, making the div 199mm in height which is roughly 5x the intended height of 199px, depending on your resolution.

I do think that the mode is the deciding factor here, but eliminating the mm and sticking with px creates code that is much easier to debug and much more browser-friendly.

herrslime
Offline
newbie
42:29:10N 83:22:32W
Last seen: 18 years 16 weeks ago
42:29:10N 83:22:32W
Timezone: GMT-5
Joined: 2004-08-12
Posts: 10
Points: 0

CSS problem

The mm vs px thing was the problem. Like anything else the typos or minor errors are what end up being the problem and usually the hardest thing to find. I went thru the CSS 3 times and never noticed that.

Thanks all.