Silly Image Problem, Please help me to see how silly I am for not seeing this.

[wheatleyweb]

Hello all,

I'm working on my second full CSS site. I'm trying so hard to conform, and I know if I stick with it, I'll eventually get it. Anyway I'm just working on the basic layout for the site. Its a 2 column fixed center layout. I have a auto-height script on the navigation column to match that of the pageContent. Anyway, almost everything is as it should be layout so i can begin adding content, except for one simple issue with my top and bottom rounded image borders for the pageContent section. As you can see, in IE6/7 it looks fine, however in FF2.0 I cannot get the images to stick to the top or bottom of the DIV???? Attached are the images, can you please take a look at my markup and CSS to help me solve the problem? I want this site to at least be IE/FF friendly.

SreenShots:

IE:
http://i61.photobucket.com/albums/h41/number23db/ie.jpg

FF:
http://i61.photobucket.com/albums/h41/number23db/ff.jpg

The link is here:

http://www.esrgc.org/test/Untitled-4.htm

You may notice that the navigation column doesnt resize when you first visit the site, if you click refresh it does. If you have any suggestions for my script that may remedy that, it would be great.

Thanks for all your help guys.... I'm getting there with this CSS stuff, but I'm far from there.

wheatleyweb

[foodpk]

It's your #pageContent div. It has a set background-color of #ffffff. Removing that should remove the nasty things on top and on the bottom.
However, I don't think that the tops will be aligned. Instead of having a div and then putting <img src="top_content.jpg"> inside it, like you did, I would suggest setting top_content.jpg as the background image of that div.

[wheatleyweb]

yeah but I need it to also be at the bottom of the div and I cannot place t2o background images upon the div? right? or am i thinking about this all wrong.

Thanks for your help and anyone elses

[wheatleyweb]

lol nvm... I got it man. Thanks for that, I sometimes look to deeply for answers that are right there in front of me.

Thanks again.

wheatleyweb

[foodpk]

Glad you solved it!
Keep on building with standards, rock on!

[wheatleyweb]

hey food!!! ive got a new problem and I cannot figure it out... I used the divs at the top and bottom of pageContent and it works fine in FF, but in IE there is like a 10px buffer on the bottom that I cannot explain. Could you or anyone take a look at it and tell me what's going on. It has the same properties as the top img div???

the link is now: http://www.esrgc.org/test/Untitled-5.htm

[ratherblue]

In your CSS:


html, body {
margin:10px 0 10px 0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(../images/bg/page_bg.jpg);
}


margin: 10px 0 10px 0;

the order goes top right bottom left.

So yea.. you're actually setting a 10 px margin at the bottom of your page.

[wheatleyweb]

ratherblue... thanks for the though... actually I want the margin at the bottom of the page.

What I was speaking of is the white content section... if you look at it in FF 2.0 it looks great, but if you use IE6 the content_bottom.jpg displays 10px north of the bottom of the div#pageContent, and it should be at the bottom to create a rounded bottom...

[ratherblue]

Well, looking at it again, that was probably intended.

The other padding (what I think you're talking about) is probably from your paragraph tags. <p> automatically pads your text, which could be what that is at the bottom.

[ratherblue]

Blah, I was looking at it in FF and didnt see the problem, one sec

[wheatleyweb]

yeah... that's not it either....

I tried playing with the <p> padding, div padding, etc. I can place a -10px margin on the content_bottom.jpg, and it will look fine in IE, but then in FF it is pulling the footer up underneath it... UGH, this seems way to frustrating to me, but simple and I can't get it

thanks for any help and blue i appreciate yours

[ratherblue]

Add: background-position:bottom; to #contentBottom

[wheatleyweb]

OMG i could kiss you right now i guess ethernet love will have to do... thanks for that....

this may be a stupid, but why does IE read px so differently.

Thanks again ratherblue. you have made my friday.

[ratherblue]

this may be a stupid, but why does IE read px so differently.

Every browser has their little quirks. There are plenty of annoying FF ones as well. Once you have been using CSS for years, you will learn `em all :)

And I am glad I could help :D

[wheatleyweb]

blue.... well i want to thank you again for your help previously, but now im having issues with IE7.... the footer seems to stick in the middle of the div#pageContent... I cannot get it to stick to the bottom. If I place a larger top margin on the footer it will work, but then it is too far down on other browsers???

is there a fix for this... am I going about this layout all wrong?

or am I going to have to place a browser script on the page and use browser specific stylesheets?

Thanks for any help

heres the link again

http://www.esrgc.org/test/Untitled-5.htm

wheatleyweb