DIV Space 1

[AnakinPt]

Hi.

I have a web site that i'm working on and it is made using tables.

I need to place an image inside of the table and i'm using a DIV tag with relative positioning.

The problem is that the DIV tag has a blank space that I can't remove placing too much space between tables.

You can see the website in [URL unfurl="true"]http://testes.securus.pt[/url]

See the mouse icon and the space between 2nd and 3rd tables in the left.

Anikin
Hugo Alexandre Dias
Web-Programmer
anikin@anikin-skywalker.com

 

[ChrisHirst]

a div is a block element that places a implied <br> at top and bottom.

use margin:0 on the element to remove it.


Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[monksnake]

You can just put a span in place of the div.

<.

 

[ChrisHirst]

you could, but you can't set a height & width on a span

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[monksnake]

true true

<.

 

[AnakinPt]

This doesn't work.

I tried this piece of code but appears the blank space (1st table in the right column).

<div id="layerIconLoja" style="position:relative; left:152px; top:47px; z-index:1; display:visible; margin:0"><img src="/images/simbolocarrinho.gif"></div>

Anikin
Hugo Alexandre Dias
Web-Programmer
anikin@anikin-skywalker.com

 

[monksnake]

Call me crazy, but I don't see anything wrong.

What broswer are you coding this in??

I'm in FF 1.5.0.9 and IE6.

<.

 

[AnakinPt]

Firefox, FF with IE tab and IE7.

None works.

Anikin
Hugo Alexandre Dias
Web-Programmer
anikin@anikin-skywalker.com

 

[Vragabond]

I don't understand. If you want the icon to appear a little higher, just make it's top a little lower value. Or is that number something special and should be exactly what it is right now. I didn't see that it would relate to anything important.

On the other hand, visible is not a valid value for display property.

 

[AnakinPt]

If you go to the address i provided before, you can see what i need.

The div exists to place the shopping cart icon inside the table.


Anikin
Hugo Alexandre Dias
Web-Programmer

 

[Vragabond]

I guess I thought your problem was something else.

Ok, you're dealing with replaced content, which is not the best way of keeping everything flowing. Replaced content (using top, bottom, left, right with relative positioning) takes the element off its original position and puts it in the position specified (via top, bottom, left, right) while leaving its exact size as a gap in its original position. For you that means. Between your tables you have the div (or span, makes no difference) with the picture inside. If you look closely, the gap between the tables is that of the size of the image. Because div (or span) will be the size of the image inside and even though you then move it to another place, its original spot remains a gap. You can try and put a bigger picture in and you will see the gap growing bigger. Likewise with a smaller picture.

I don't think you're using an ideal approach (apart from non-ideally using tables for these lists when (well, well) lists (unordered or definition) would work much better. I would do it like this:

<table>
 <tr>
  <td><div style="position: relative;"><img style="position: absolute; right: 0; top: 0;"></div></td>
 </tr>
</table>

The div will create position boundaries in the first row of the table (which should be <th> instead of <td> but we will neglect this for the moment). Image will then be placed absolutely (not affecting the flow) in the top, right corner of this div that spans the entire table cell. Your image will be where you want it. Then you would move all this CSS in a separate stylesheet (use classes and dependant selectors) and you're done.

 

[AnakinPt]

Thank you for your help. It was a gratefull hint.

Anikin
Hugo Alexandre Dias
Web-Programmer