image overlap - a mixed css/tables problem - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

image overlap - a mixed css/tables problem

heini

8:35 pm on Nov 24, 2002 (gmt 0)

I'm wrestling to get my code cleaned up on a site.
In a rather dirty hack I had a image in the top left corner of the screen overlap into the main table - for a very nice effect. Worked well in IE, Opera, Moz.

But, it involved an additional outer table, and stuffing the image between the <tr>and the <td> tags :)

I just know this can be solved with css positioning, but after hours of fiddling I decided to give in and ask for tips...

crash

8:38 pm on Nov 24, 2002 (gmt 0)

"image in the top left corner of the screen overlap into the main table "

as in it didn't just lay over the main table but adjusted it somehow? not quite getting what you need, can I see what you have/had? perhaps that would clear up what your looking to do.

andreasfriedrich

8:44 pm on Nov 24, 2002 (gmt 0)

img.topleftcorner { 
 position: absolute; 
 top: 0px; 
 left: 0px; 
}

will remove the image from the document flow and position it in the top left corner.

Andreas

heini

8:45 pm on Nov 24, 2002 (gmt 0)

It's a 90px wide logo, of which the right 10px overlap into the table.
The logo starts at 10px left of the window, the table at 90px left of the window.

[edited by: heini at 9:18 pm (utc) on Nov. 24, 2002]

Nick_W

9:02 pm on Nov 24, 2002 (gmt 0)

img.topleftcorner {
position: absolute;
top: 0px;
left: 10px;
}

With a small adjustment to andreases code that should do it. You can even place your image at the bottom of your html as it is postioned absolutely.

Nick

heini

9:19 pm on Nov 24, 2002 (gmt 0)

>position absolute
True. That's what I did. Works well in Opera. Absolute positioning for the image, and just declaring a margin-left for the table.
In IE however the image sits where it's supposed to sit, while the table has the correct left margin but starts below the image.

Nick_W

9:26 pm on Nov 24, 2002 (gmt 0)

Odd. Have you tried placing the img tag at the bottom of your html? -- I can't think what might cause that off hand, it's late and my eyes hurt ;)

Nick

andreasfriedrich

9:28 pm on Nov 24, 2002 (gmt 0)

The above works for me in IE6 both in quirks and standard compliant mode.

Andreas

heini

9:30 pm on Nov 24, 2002 (gmt 0)

Nick, putting the image at the bottom of the code makes the image start below the table.
Another quick question: you think I need to add something like position: absolute or relative to the main table also?

Nick_W

9:40 pm on Nov 24, 2002 (gmt 0)

Difficult to say, can we get a simplified code snippet?

Nick

heini

9:49 pm on Nov 24, 2002 (gmt 0)

From the style sheet:
table.main
{
margin-top: 0px;
width: 760px;
border: 0px;
padding: 0px;
margin-left: 77px;
border-collapse: collapse;
}
img.logo
{
position: absolute;
margin-top: 10px;
margin-left: 10px;
border: white groove 2px;
width: 90px;
height: 117px;
}
file:
<body>
<img class="logo" src="some.jpg">
<table class="main">

BTW: Andreas, your example code interestingly works in IE, but not in Opera...

Nick_W

9:57 pm on Nov 24, 2002 (gmt 0)

margin-top: 10px;
margin-left: 10px;

Well, although it validates, I'd change that to:

top: 10px;
left: 10px;

If that doesn't work then there's no reason why a position absolute of the table wouldn't work.

But, saying that, there's no reason I can spot why your code doesn't work....?

Nick

andreasfriedrich

10:07 pm on Nov 24, 2002 (gmt 0)

heini, I just tested it and your code works just fine in IE6 and mine does as well in Opera6.02.

This is rather strange. Could you make this page available online and stickymail the URI?

Andreas

heini

10:14 pm on Nov 24, 2002 (gmt 0)

I'd rather not, Andreas. It'll be a client's site. I use IE6.0.2600, FWIW.
Thanks, Nick - that didn't change the result for IE. Darn, all looks just great in Opera..

Longhaired Genius

10:32 pm on Nov 24, 2002 (gmt 0)

Try styling the image with a z-index. I think this might keep IE5 happy.

heini

9:25 am on Nov 25, 2002 (gmt 0)

Update: The code was/is okay. Got it working at around 2 am. How? Removed the border-collapse bit from the style sheet, and all was fine.
Now the funny thing is, when I pasted the border-collapse declaration back in it still worked....

Anyway, I'm going through the complete code again, rebuilding it piece by piece.

Thanks for your help guys.