IE7 vs Firefox

S

Shelly

We am having a real problem with CSS consistency between IE7 and Firefox.
We are working on the template for the page. It is
http://ftp.blueskycampinsurance.org/new. In Firefox there is a small blue
bar near the bottom that doesn't appear in IE7 (it shouldn't be there). The
heights of all containers are automatic. We can't figure out why.

If anyone can help, it would be greatly appreciated.

Sheldon


Here is the css:
body {
background-color: #53381B;
font-family: Arial, Helvetica, sans-serif;
}

#wrapper, #header, #container-out, #container, #container-in,
#content-holder, #footer, #trees{
margin: 0 auto;
}

#wrapper {
width: 900px;
}

#header {
height: 173px;
background-image: url(../i/img-header.jpg);
width: 900px;
}

#container-out {
width: 817px;
background-color: #6bd5d1;
}

#container {
width: 804px;
background-color: #77d265;
}

#container-in {
width: 793px;
background-color: #53381B;
}

#container-top {
width: 793px;
height: 3px;
background-image: url(../i/img-topbar.jpg);
}

#content-holder {
width: 787px;
background-color: #FFFFFF;
padding-top: 1px;
padding-bottom: 1px;
}

#footer {
width: 817px;
background-image: url(../i/img-footer.jpg);
height: 105px;
}

#trees {
width: 283px;
height: 186px;
position: absolute;
margin-left: 619px;
top: 625px;
}

..footer-text {
margin-top: 0 auto;
padding-top: 12px;
font-size: 12px;
font-weight: bold;
}

..main-text {
font-size: 14px;
margin-left: 30px;
margin-right: 30px;
}

..text-trees {
font-size: 14px;
margin-left: 30px;
margin-right: 250px;
}

..subheader {
font-size: 16px;
font-weight: bolder;
margin-left: 30px;
color: #77d265;
}

#mainleft {
font-size: 14px;
margin-left: 30px;
width: 240px;
float: left;
padding-bottom: 15px;
}

#maincenter {
font-size: 14px;
width: 240px;
float: left;
padding-bottom: 15px;
}

#mainright {
font-size: 14px;
width: 240px;
float: left;
padding-bottom: 15px;
}

li {
list-style-image: url(../i/img-bullet.jpg);
}

span {
margin-left: 3px;
color: #000000;
}
 
J

Jim S

We am having a real problem with CSS consistency between IE7 and Firefox.
We are working on the template for the page. It is
http://ftp.blueskycampinsurance.org/new. In Firefox there is a small blue
bar near the bottom that doesn't appear in IE7 (it shouldn't be there). The
heights of all containers are automatic. We can't figure out why.

If anyone can help, it would be greatly appreciated.

Sheldon
Click to expand...
No blue bar here in FF v2.0.08
 
B

Beauregard T. Shagnasty

Shelly said:
My mistake:

http://ftp.blueskycampinsurance.net/new/
Click to expand...

Start by correcting the errors. Perhaps the different browsers are
attempting to correct them in a different way.

<http://validator.w3.org/check?verbose=1&uri=http://ftp.blueskycampinsurance.net/new/>
This page is not Valid XHTML 1.0 Transitional!
Result: Failed validation, 29 Errors

<http://jigsaw.w3.org/css-validator/...&uri=http://ftp.blueskycampinsurance.net/new/>
Sorry! We found the following errors

New pages should be Strict, not Transitional. You aren't transitioning
from any legacy pages. And use HTML 4.01 Strict, not XHTML. Google for
the hundreds of posts why.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Also, stop assigning font size in pixels. See:
http://k75s.home.att.net/fontsize.html

Seems you are suffering from div-itis.

<div id="wrapper">
<div id="header"></div> <-- empty?
<div id="container-out">
<div id="container">
<div id="container-in">
<div id="container-top"></div> <-- empty?
<div id="content-holder"> ...
 
S

Shelly

Jim S said:
No blue bar here in FF v2.0.08
Click to expand...

I also have FF v2.0.08 and there is a blue area between the main content
area and the bottom grean area. That is the blue that I was talking about
that doesn't appear in IE7.

Sheldon
 
B

Ben C

I also have FF v2.0.08 and there is a blue area between the main content
area and the bottom grean area. That is the blue that I was talking about
that doesn't appear in IE7.
Click to expand...

It's the top margin on <p class="footer-text"> which in FF is correctly
collapsing with the top margin of <div id="footer">.

Either add margin-top: 0 to the p, or if you want the margin, but not to
have it collapsed, put padding-top: 1px on #footer.
 
S

Shelly

Ben C said:
collapsing with the top margin of <div id="footer">.

Either add margin-top: 0 to the p, or if you want the margin, but not to
have it collapsed, put padding-top: 1px on #footer.
Click to expand...

Thank you very much.

Sheldon
 
A

Andy Dingley

We am having a real problem with CSS consistency between IE7 and Firefox.
Click to expand...

Lose the XHTML doctype declaration - use HTML 4.01 Strict instead.
This is particularly the case for this page, as it bears little
relation to XHTML at all.

Then fix the validation errors.

_Only_ then worry about CSS inconsistencies. It's hard enough to get a
valid site to work right. Because each browser corrects errors
differently, you've no hope of doing it for invalid code.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Interfering CSS 1
Help with my responsive home page 2
Need help with code on website (noob) 2
Align img inside nav tabs section 5
Login button code 8
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Help needed with code 5
Slideshow not working properly 2

Members online

Total: 24 (members: 1, guests: 23)
Robots: 219

Forum statistics

Threads
473,764
Messages
2,569,567
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top