Using CSS, but need a lil help styling this table

try using {border-collapse:collapse;} on your table

thanks, I haven't heard of that before. Any thoughts on the rest of the site?

Hi there

Had a look at your site in Firefox and the background image ends at the bottom of the headers - presumably because the divs below are both floated so they're taken out of the normal flow of HTML and as far as the container goes - don't exist.

If you apply the background image to the Body rather than the container element it works fine in Firefox, IE and Opera 7

as follows:

body {
background:#abbac3;
color: #002448;
font: 11px/1.4em Arial, Tahoma, Verdana, sans-serif;
background:url(bg_repeat.jpg) repeat-y;
background-position: top center;
 }

thanks a lot Hells, I hadn't even attempted working on browser issues yet, I have been designing this site mostly mostly for IE. Bigups, thanks for the tip!

~B

is border-collapse: collapse the equivelent to cellspacing="0"?

Tip: Design and code for browsers compliant with the specs i.e Mozilla/FF then check and correct for lesser browsers such as IE, you will find less heartache this way with only minor corrections to make for browser bugs rather than finding out later that IE gave you a false impression that your coding was correct.

Your background image would be fine on the #container div if you cleared your floats, an example of where IE misleads due to it's incorrect expansion of float parent elements.

For the best technique on clearing floats read through and implement this page:
http://www.csscreator.com/attributes/containedfloat.php

Hugo.

As your site is a business I would really recommend having a look at http://www.browsercam.com/

It takes screenshots of your site on various platforms and using whatever OS you want (very long list) and then presents them to you on a page so you can see any obvious browser problems.

It's not usually a free service but there is a free trial period - if you really want your site to work cross-browser and cross-platform (which is always sensible) then I'd suggest having a go.

As people have said before - get Firefox and Opera on your PC - code for Firefox and fix for the others, it's much easier that way round and more likely to work on other browsers and platforms (thus preventing you going completely insane!).

wow, thanks for the suggestions, definatly gonna take note of what yal said.

Had a look at your site in Firefox and the background image ends at the bottom of the headers - presumably because the divs below are both floated so they're taken out of the normal flow of HTML and as far as the container goes - don't exist.

If you apply the background image to the Body rather than the container element it works fine in Firefox, IE and Opera 7

as follows:

body {
background:#abbac3;
color: #002448;
font: 11px/1.4em Arial, Tahoma, Verdana, sans-serif;
background:url(bg_repeat.jpg) repeat-y;
background-position: top center;
 }

I applied this code, and it fixed the alignment problem, but I list by background color outside of the container. I definatly don't want a white background, where should I place the background color so that it takes affect ouside the container. Thanks

Hi again

On relfection, I think Hugo was right - the "proper" way to do it, given what you want, would be to sort out the floats and the rest will follow.

If you put the background image back where it started and do exactly what it says in the article linked in Hugo's message above then it will work perfectly (I've tried it locally and it works).

Just takes one extra class in the HTML and copy and paste the css code in the article.

I will definatly take this to heart Hugo, thanks, you always come thru.

I have tried to implement the code from the article, I'm just not seeing where I am going wrong. I learned a lot about clearing floats though from the article.

I added a footer, and cleared the floats hoping it would fix the content above. I didn't see much of a change.

Hells could you help me out with your findings. Thanks!

Hi MysterB,
Just had a quick look at your page it looks as though your footer is acting as the clearing element needed to expand the container div using the clear:both property to clear either of the two columns.
I just changed the 'background-image' to 'background' on the container div and the image seemed to flow nicely, the shorthand background property is better supported than background-image. give it a go and see if it works for you.

Hugo.

everything worked out Hugo, I'm so happy. Definatly learned a thing or two from this, thanks!