CSS not working right. Could someone take a look?

Hi all,

I have a site which is driving me quite mad.

http://www.bartlett-family.net/jonathan

You will need a username and password:

username:
password:

Can someone look at it in IE, not NS or Opera (you'll see why in a minute)? I'd appreciate it. I attached my CSS file to this post to look at. Basically, the style is how i want it, but in the "main" area, the image loading is not loading all the way. It actually seems to only load as far as any text, etc go! Can someone tell me why that is? I can't figure it out to save my life! What I would like is to have the "h2" title, the paragraph underneath, then finally, the image. What can I do in the CSS to make that happen? I'm reading a CSS book to help, but haven't found out how yet.

Also, I have noticed that this site doesn't fit perfectly on smaller monitors. I thought that it would based on the CSS. Can someone tell me why it doesn't all fit on one screen. It all fits on the 21" monitor I work on, but on my wife's 15" LCD, it has a vertical scrollbar.

Now, as far as NS and Opera. If you do look at it in either of those browsers, you'll see that it looks AWFUL! In NS, the image loads similarly to IE, but there are no "nav" areas on the sides like the CSS calls for. In addition, all 8 links are on the left, not 4 on each side. In Opera, the H2 is not centered and neither is the paragraph. The image does not show up at all. The links are correct with 4 on each side, but the "nav" areas (the blue) only goes down about 2 inches!

I know that there are inconsistencies between browsers regarding CSS, but is it REALLY this severe? Internet Explorer will give you the best look at the site, unfortunately.

Can someone give me a hand? It's quite important that I get this working. It is even more important that I learn it because it has proven to be quite frustrating! Thanks a million, everyone!

Chris

because your image is a background image it doesn't govern how big the element will be, as it would if you inserted the image into the page via <img src

way to get around it, add a height to your main class

eg:
height: 100%;

That should do the trick....

GREAT! That did it! Well, sorta...

Thank you so much, Phil. It looks great on my 21" monitor, as well as on 17" and 18" LCD panels I have tried it on! Now, could I ask you something else? The image and the text from the paragraph overlap on my wife's 15" LCD panel. I tried changing


to

which helped a little. There is now less overlap on her monitor, but there is, of course, a larger area where their is empty space on the larger monitors. It still looks fine, though on the bigger ones. Is there a way to get around this?

Also, can I make the page be the same size no matter what size monitor it is being viewed with? I mean, on my 21" monitor, let's say, it fell about 3 inches short on all sides, but it would fit perfectly on a 17" monitor. Know what I mean? I hope I am explaining it ok. Actually, Google is a good example of what I mean. The home Google page is small and will definitely fit onto any size monitor! I would like to do something similar to that, can I?

Oh, before I forget... On the right side of the page, in the right "navbar" area, you'll notice that the links are on the left side of the right navbar. Can I move those to the right side of the navbar, so that they are along the right side of the whole page?

And finally, what about the browser inconsistencies with NS and Opera? Are those two browsers really this BAD at CSS? They look terrible on this page, and i don't think this CSS is doing anything outstanding, do you?

Thanks a million, Phil!!! I appreciate your help so far, and thank you in advance for any further assistance.

Chris

Correction... The SIZE of the monitor does not matter. It's the resolution of the monitor. Anything 1024 x 768 and under is resulting in the text and image overlapping, even on my 21" monitor. How can I design the site so that this doesn't happen? I'm sure there will be people visiting who use lower resolutions! I natively use 1280 x 1024. Can this be done? Thanks!

Chris

Indeed the text overlaps the image because of the resolution not screen size.

As for a fix. Well really you can't do anything other than either make the image smaller or place the image on the page in another way.

IMHO I'd go for making the image smaller AND placing the image in the document itself rather than as a backround.

Also while I was there I noticed the page is not XHTML compliant. I suggest you either make the document HTML or fix the 56 XHTML errors.

You might check Bluerobot for ideas on layout. Specifically, the reference covers a 3-column layout such as what you're working toward.


Actually, Moz/NS6+ and Opera are very good. It's IE that sucks.

cheers,

gary

Thanks for the suggestions, guys. I will be sure to look into everything you suggest!



I'm NOT even remotely an advocate for IE (or MS in general), but how can that be true? IE is the only one that is working even remotely correctly! And, thoughout my short history of working with web pages, it has thus far proven to be the most stable and useable with CSS and javascript. The other browsers just don't seem to support anything I do! Weird... I'm just speaking from my experience.

Thanks guys!

Chris

it all comes down to standards and how they are implemented.

Many people believe that Mozilla is the best browser in the world because it renders pages as they should appear according to W3C guidelines.

IE is more forgiving than Mozilla but doesn't render everything correctly.

Netscape v 7 is Mozilla (well a version of), Netscape 6 isn't that bad at standards but you'll havea few issues. Netscape 4 ... forget it! Really buggy css support that can actually crash the browser if you're not careful!

Opera 6 & 7 both offer reasonable standards support.

So as a rule of thumb - if it looks right in Mozilla it will look right in IE 5.5 or 6 and Opera 7 - testing your pages in a standards compliant browser will make your life a heck of a lot easier.