13 replies [Last post]
MysterB
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-01-30
Posts: 44
Points: 0

Its been a while since I have used tables, but using a table was the quickest way to keep this chart I have on my page organized. Here is a link to the page, please view it in Explorer.

http://domesticdisturbancednb.com/home.htm

and the stylesheet

http://domesticdisturbancednb.com/style2.css

Here are the two question I have for now.

In the rows of the table that have a background color, there are gaps between each cell. I want to get rid of those gaps. Should I use a border or what, something of the same color to make it a flush row. Color is #C9CCCF.

Second question. For some reason the styles that I have applied to the links for this site aren't taking full affect in this table, and some of the links are showing up white. I want to write a new set of styles for the links in this table. Link color #002448, and #000000 for hover.

Those are the two issue I want to work out tonight. If you want to offer help or advice, then here are a few other issues I want to work on after I conquer these two.

- cross-browser issues

My site looks fine in IE on a PC, I havent tested it on other browsers. If you want to help me with that post your findings and things I could do to correct these issues.

- CSS Photo Gallery

I have seen Stu Nichols gallery, but my gallery will be setup into several categories, holding 50-75 images each. I need to come up with a good way to load all these thumbs in a timely manner for 56K users. Got advice on that subject, post it up. \

*If you go thru my site and any issues hit you feel free to bring them to my attention. This is my first CSS site, and its nearing completion. Thanks for the help!

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 15 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Using CSS, but need a lil help styling this table

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

MysterB
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-01-30
Posts: 44
Points: 0

Using CSS, but need a lil help styling this table

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

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 12 years 38 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Using CSS, but need a lil help styling this table

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;
 }

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

MysterB
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-01-30
Posts: 44
Points: 0

Using CSS, but need a lil help styling this table

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

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 37 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Using CSS, but need a lil help styling this table

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Using CSS, but need a lil help styling this table

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 12 years 38 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Using CSS, but need a lil help styling this table

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!).

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

MysterB
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-01-30
Posts: 44
Points: 0

Using CSS, but need a lil help styling this table

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

MysterB
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-01-30
Posts: 44
Points: 0

Using CSS, but need a lil help styling this table

HellsBells wrote:
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;
 }

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

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 12 years 38 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Using CSS, but need a lil help styling this table

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.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

MysterB
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-01-30
Posts: 44
Points: 0

Using CSS, but need a lil help styling this table

Hugo wrote:
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.

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Using CSS, but need a lil help styling this table

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

MysterB
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-01-30
Posts: 44
Points: 0

Using CSS, but need a lil help styling this table

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