Space between BG images in FF

[cjwsb]

SITE (http://www.bartlett-family.net/BBCON/index3.html)
CSS (http://www.bartlett-family.net/BBCON/main3.css)

In IE, everything's displayed as I'd like it.

In FF, you can see a gap (looks about 10px high) between the middle BG image and the top & bottom.

Anyone know why? I can't figure it out to save my life...

Thanks!

Chris

[nikkiH]

#centerinner2{
background: url('images/raised_center_MIDDLE2.jpg') repeat-y center center;
margin:0px 0px;
width:684px;

^^^
You didn't give it top and bottom margins of 0, so it's defaulting.
(guess)

[sesshyzkidz]

The problem is the top/bottom margins declared in #centerinner2 p. Try this-
margin: auto 10px;

Edit: nikkiH's code has a possible solution also. Give the top/bottom margins a value of -10px

[cjwsb]

#centerinner2{
background: url('images/raised_center_MIDDLE2.jpg') repeat-y center center;
margin:0px 0px;
width:684px;

^^^
You didn't give it top and bottom margins of 0, so it's defaulting.
(guess)

Unfortunately, that's not it. I already tried. :(

Thanks, though.

Chris

[cjwsb]

The problem is the top/bottom margins declared in #centerinner2 p. Try this-
margin: auto 10px;

Edit: nikkiH's code has a possible solution also. Give the top/bottom margins a value of -10px
We have a winner! That was it. Thanks a million. That was driving me NUTS!

Chris

[bazz]

Just about to shut down for the nioght but here goes for a quicky.

is 35px not a bit high for your centerinnerbottom and centerinnertop images? or what about making the center (text) portion, have a top and bottom margin of -15px (or thereabouts).

Hope that is of some use

Bazz

[bazz]

oh well, those replies weren't there when I started this :)

[cjwsb]

This page is now 99.9% done, IMO. Everything displays flawlessly in IE. In FF, it's 99.9% correct. In FF, if you look closely at the bottom left-handed corner, just to the right of the WCAG logo, you can see a very small area that's out of whack. It's not there in IE. I don't know why that's there in FF, but if it's possible, I'd like to get rid of it. If not, it's not a huge deal, but it would be nice.

Anyone?

Chris

[cjwsb]

This page is now 99.9% done, IMO. Everything displays flawlessly in IE. In FF, it's 99.9% correct. In FF, if you look closely at the bottom left-handed corner, just to the right of the WCAG logo, you can see a very small area that's out oh whack. It's not there in IE. I don't know why that's there in FF, but if it's possible, I'd like to get rid of it. If not, it's not a huge deal, but it would be nice.

Chris
On this note, I figured something out. This part of the CSS controls placement of the validation images/links on the bottom left corner:

#valid {
padding-top: 250px;
margin-bottom: 5px;
margin-left: 0px;
border: none;
}

Now, if I make padding-top 175px or less, the little thing I was explaing above disappears in both browsers. Anything over 175 and it displays. Play with it and you'll see what I mean.

Here's what I'd like to do, if possible:
Center those images inside the tan area on the left, about 10px up from the bottom. Now, I'd like this to happen regardless of page length. For example, check out http://www.bartlett-family.net/BBCON/lc.html (the lc.html is for Long Content) and notice where they are.

At any given page height, how can I situate those 3 images in the lower lefthanded corner?

Thanks!

Chris

[_Aerospace_Eng_]

lower left hand corner of the browser or the container that they are in? If the container make the container position:relative; and use position:absolute; for those images. You will now need to give left and bottom values for those images.
Okay don't make your div with id="left" position:relative; remove that line
from that CSS
#left {
background: url('images/left_panel3.gif') no-repeat left top;
color: #000000;
margin-top: 0px;
margin-left: 0px;
width: 125px;
float:left;
min-height:333px;
position:relative; /*remove this line*/
}
and use this for the #valid CSS and the #valid img's
#valid {
padding-top: 250px;
margin-bottom: 5px;
margin-left: 0px;
border: none;
position:absolute;
left:10px;
bottom:10px;
}
#valid img {
display:block;
}

[sesshyzkidz]

That would be a question about using positioning. An easier alternative would be to make the #centerinner2 div scrollable when content overflows. Adding a height and "overflow: auto" to #centerinner2 should work for that.

Edit: Aerospace beat me! His solution should do what you want. I couldn't figure out why it wouldn't move down when I used "position: absolute" and "bottom: 10px", so I offered an alternative. :thumbsup:

[cjwsb]

Thanks, gentlemen.

With your help and my own tweaks, all is well!

Chris