Does not appear correctly in Firefox

[Cre8ivDesign]

Hi Everyone,

I'm new to the CSS coding and have a website that appears perfect in IE - more forgiving I know, however it's all jumbled in Firefox.....I'm hoping someone can help.

The temp link is:

http://www.createdesign.ca/sapphire/

The main page appears fine except for the bottom portion is not centered....

When you enter, that's when it gets interesting!! It's probably an easy fix for someone who is much more experienced....any help would be great appreciated.....

Below is the CSS

Thanks in advance!

body {
background-image: url(ims/background.gif);
background-color: #151515;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}

#page {
width: 100%;
text-align: center;
}

#sidebar {
width: 253px;
float: right;
height: 100%;
background-color: #f2f8e5;
color: #4d4d4d;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 12px;
padding: 27px 35px 0 29px;
}

#content {
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
width: 598px;
text-align: left;
}

#main {
background-image: url(ims/backer.jpg);
background-repeat: no-repeat;
height: 300px;
background-color: #ffffff;
}

#maincontainer {
position: relative;
width: 598px;
padding-top: 300px;
height: 100%;
}

#mainarea {
float: left;
width: 316px;
margin-left: 29px;
padding-bottom: 30px;
}

#mainarea2 {
color: #4d4d4d;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 12px;
width: 316px;
padding: 27px 0 0 0;
}

#mainbody {
padding-right: 20px;
}

#mainbodyheader {
padding-bottom: 15px;
}

#footer {
background-color: #1b2675;
color: #b2c7e9;
font-size: 10px;
padding: 7px 29px 8px 29px;
}

#footer a { color: #ffffff; }
#footer a:link { text-decoration: underline; }
#footer a:visited { text-decoration: underline; }
#footer a:hover { text-decoration: underline; }
#footer a:active { text-decoration: underline; }

#topblue {
background-color: #1b2675;
height: 88px;
}

#intro {
background-color: #ffffff;
background-image: url(ims/intro.jpg);
background-repeat: no-repeat;
height: 223px;
}

#bottomblue {
background-color: #1b2675;
height: 88px;
}

#introfooter {
width: 598px;
color: #6f6f6f;
font-size: 10px;
padding: 7px 29px 8px 29px;
}

p {
margin: 0;
padding: 0;
}

.style1 {
color: #ffffff;
}

 

[traingamer]

Start with a full, valid document type so browsers won't be rendering the page in quirks mode.

See HTML <!DOCTYPE> tag - I suggest the HTML 4.01 transitional for a start.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[Cre8ivDesign]

Ya, I tried that........The original person who did the template for me did not use it so I just didn't add it for this one.....the original one appear fine, which can be seen at:

http://www.halo-incorporated.com/english.html

There is no DOCTYPE on this either and it appears fine???

When I apply a DOCTYPE, I get the same results in IE as I do in firefox.....then they both appear jumbled....

 

[johnwm]

Without a complete and valid doctype it will be very difficult to even start to tackle any layout problems. Sort that first, then remove any characters that are not in your declared character set, then get your page to validate by visiting

http://validator.w3.org/check?verbose=1&uri=http://www.createdesign.ca/sapphire/home.html

and fixing the errors it shows up. Then get your layout to work properly in FF (which is fairly close to being standards compliant). Finally view the page in IE and see what kludges you need to add to make it work there.

If you have specific problems with the last few parts of the exercise, please post back and we will be glad to help further

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Cre8ivDesign]

Okay, I'll investigate that further and will post back if I still have those issues....Thanks

 

[Vragabond]

When I apply a DOCTYPE, I get the same results in IE as I do in firefox.....then they both appear jumbled....

That's a great start. At least all your browsers display the page the same way. It's much easier to debug this way than to have every browser doing their own thing.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Cre8ivDesign]

Hi All,

Okay so I've got some stuff figured out....

Now the only thing I can't seem to figure out is the bottom footer.....needs to be like what is shown here:

http://www.createdesign.ca/sapphire/footer_example.gif

I can't get it to go to the bottom....in IE it appears on the bottom, however when I add the background color in, then it looks off on the left hand side....the white color or margin turns blue.

In firefox, it seems the alignment is off and the text appear on the bottom right, while the blue color appear up in behind the main white background.....

Any help would be great as this is driving me nuts.....

Here's the update link:

http://www.createdesign.ca/sapphire/home.html

Here's what the footer should look like:

http://www.createdesign.ca/sapphire/footer_example.gif

Here's the updated CSS:

http://www.createdesign.ca/sapphire/CSS_text.html

 

[johnwm]

Your page still doesn't validate, mainly because you still have multiple <div>s with the same id which will confuse browsers. id must be unique on a page. Use classes instead of id if you want to have several divs with the same CSS

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Cre8ivDesign]

Hi, it validates fine now....just changed some of the CSS....

the links above are updated......any ideas now??

 

[BillyRayPreachersSon]

You need to clear your floats (i.e. your left & right columns).

One way of doing this is to put a styled DIV right after the column markup but inside the main DIV:

<div style="clear:both"></div>

although, personally, I swear by this markup-free method:

http://www.positioniseverything.net/easyclearing.html

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

P.S. In the graphic, you show a blue footer. Your footer will never be blue because you are never telling it to be blue.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]