Tables or CSS? (For my site)

I need to display three graphics on one row, side-by-side. One is on the left end, one is one the right end, and one in the middle as a background image. The total length of the three combined is 702 pixels. I need to display them on the page centered, is the problem (with the <center> tag). When I try to do this, the left image and middle (background) image display, but they do not connect. The third (right side image) displays beneath them. Since I need them centered, I can't really use DIV positioning to do this (to my knowledge). Would I need to use a table to get them all on one row? I'm trying to recode my site and break away from using tables, so bear with me.

Here is my code for this section:

CSS:

#00 {
padding: 0px;
width: 702px;
height: 25px;
z-index: 0;
}
#01 {
padding: 0px;
background: url("00_01.gif");
width: 698px;
height: 25px;
z-index: 0;
}

HTML:

<div id="00">
<img src="00_00.gif" width="2" height="25" alt="" border="0" align="left">
<div id="01">&nbsp;</div>
<img src="00_02.gif" width="2" height="25" alt="" border="0" align="right">
</div>

Like almost every programming language, your class & ID names cannot start with a number. Additionally, you should give your classes and ID's meaningful names. If an item is not set to absolute positioning, z-index is ignored.

I don't know what your layout is supposed to look like, but you can either use absolute positioning, or floats.

For centering using CSS, check out bluerobot.com (I think that's the link -- if not, check out the css crib sheet at mezzoblue.com).

Why can't you use a 702px wide background image? Don't see the point with those tiny 2px width images. Just use padding to accomplish some space on left and right side like this:

padding: 0 2px 0 2px;

Or is it something I didn't understand of what you are trying to do?

1) I need the two graphics on the ends to complete the border effect of the background graphic (it's a pixel border... hard to explain).

2) I've never had any problems with naming my classes with numbers before, but I took your advice and changed them anyway to make things easier when my code gets bigger and more complex.

3) I've found a way to get the two graphics on the ends using float properties (I also managed to do this last night somehow, at 2 a.m. feeling groggy and very sleepy), but I always end up with these funky two-pixel spaces on each end. I can't seem to get rid of those two extra little spaces on each end of the block. Can anyone help me? It's driving me insane, I tell ya.

I've tried using the clear technique (nesting another DIV block within the first just to add the clear), but it didn't work. I've even tried adding a 1px border or padding, and nothing. I dunno how people say CSS is better than tables, with all this frustration.

#topbar {
background: url("topbar_bg.gif");
padding: 0px;
margin: 0px;
border: 0px;
width: 702px;
height: 25px;
}

<div id="topbar">
<img src="topbar_left.gif" style="float: left">
<img src="topbar_right.gif" style="float: right">
</div>

Can you post the URL to the page in question, as it's very difficult to understand what you're trying to do without seeing the problem.

My friend has agreed to host the page for me (my site is having some odd problems right now). Here it is:

http://www.firey.net/blah/test.htm

The two weird things on the ends shouldn't be there (the extra space on each end that makes it look funky).

Haven't had a good look through yet, but I can tell you straight off that it looks fine in FireFox - perhaps you should look into using the correct doctype... http://www.alistapart.com/articles/doctype/ - i suggest either HTML4.01 Strict or XHTML 1.0 Strict

YES! Thank you SO much. Once I declared the right doc type the page worked like a charm. I can't believe I've went through all this frustration and banging my head, thinking that I was somehow missing something in my code, when it was my ghey IE6 all along. *Shakes a fist at Microsoft!*


Thanks again!

Congrats! Correct DocTypes are essential these days - they make such a huge difference. It'll save you many headaches in the future if you use the correct one - can I suggest you shoot for XHTML1.0 Strict whenever possible.

You may wish to read up on the box model hack if you wish to support IE5/5.5. Check out http://positioniseverything.net for heaps of very kewl articles.

Instead of making another thread, I'll just ask these few questions here.

1) I'm getting errors with the W3C validator saying the border attribute of the IMG tag is not HTML 4.01 compliant. Is there a way to define this with CSS? I put "img { border: 0; }" in my CSS file, but does that even do anything?

2) Errors with alt="" with the W3C validator. I thought you should always set alternative text to nothing, even if you don't want alt text. It will probably do the same thing with my title="".

3) Is there a way to define alt and title text with CSS? It'd be easier to just slap that into all of my IMG tags (in the case of alt="" and title="" for design images that simply make the page look nice).

4) W3C errors with target="_blank". How should I assign the target to a new window?

1) You may want to brush up on your CSS: http://www.w3.org/TR/CSS1
the border attribute loks like this:
border : width line-type color;

2) Where were you using alt="" - there is nothing wrong with using that on image tags

3) Not sure what you mean here. CSS is for presentation only. IF you are using your CSS to layout your page, theorectically there should NOT be any images in the page that have empty alt & title tags. Spacer images are not needed when creating pure CSS layout! yay!

4) From memory, target="blank" is valid HTML Strict, but not XHTML Strict. Regardless, a replacement for target="_blank" can be found here: http://www.sitepoint.com/article/1041

I just started studying CSS three days ago (between working a 9-5 job as well), so I'm still a bit of a n00b.

I was using the alt="" property for regular graphics (like logos) but I guess I should go back and put some alt text in there for lazy punks that have really old browsers or have graphics turned off or whatnot.

My layout is now completely coded in CSS (I don't use spacer images), but I asked about the alt and title attributes because I don't really see a point in writing alt text for images when most browsers show graphics on web pages anyway... but I will go back and change that.

Thanks for the link to the new window method, and for all the help!

Kewlies! If you need a hand with anything, just give me a holla.

Lakahn,

Don't forget that certain users don't have the choice of using image-supported browsers. Another aspect of standards-compliant design is "accessibility", which includes users with disabilities (sight or hearing)... So although it may seem like a bit of a pain in the a*s to add alt/title text for your images, just keep in mind the benefit you're providing to those without a choice.

Also, for images you wish to add no alt text to, use " " (add a space), and it will validate just fine!

Alt-text is also noticed by searchengine spiders, it will not boost your ranking, but all small steps will help you. And welcome to the CSS-world, I'm so glad that I some months ago left table-designing.