Tue 8 Jul, 2003 01:17 pm
I'm creating a new stylesheet for my site. I have 2 images that I want to place at the top of the page - one top left, the other top center. I'd like to avoid tables but I'm having the most infuriating time trying to get the images aligned.
First I gave them the same tag:
background-position: top left;
background-position: top center;
Then I gave them each there own tag, putting the div in the right place in the html. No matter how I do it, they both show up, but aligned at top left, overlapping, no matter what browser I use. I've tried placing the center image with and without spacing pixels.
Is it possible to have two top images? I need them on the same line. Or should I suck it up and just put them on tables in html? Everything else on the sheet is perfect and this is my only sticking point.
I also tried relative and absolute positioning - of course, absolute placed it in the center but under everything and relative does not appear to be in the center, but more to the right......
Ah, maybe no one will have an answer. If I come up with one I'll post it for anyone else who has this issue.
Link me I need to see the rest of the css and html, I'll have a look when I go to work.
BTW, css layout is hell. You will eventually be back to tables if you value your hair.
I designed 3 or 4 sites for a company that was so enamoured by css that they wanted not a single table.
I did it but I now hate opera and netscape and most versions of IE.
Even the ground breaking sites that most of the css code you will use comes from have display problems. ALA shows half a page with some versions of IE.
What you describe doesn't sound liek a browser specific issue but brace yourself for a ream of browser issues.
Have you tried to float one div?
I kind of gave up and just slapped them in tables. I'll give the float a try and if that doesn't work I'll leave them as is. Thanks for the offer to help. No reason to have anyone else waste anymore time - like an idiot, I've spend hours already.
Ok, heck, one table won't kill ya. ;-)