• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

image placement with CSS

 
Kristin Stromberg
Ranch Hand
Posts: 91
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I hope this question isn't too out of place here... I have a table displaying phone numbers. If a phone number is the user's primary phone number, I'd like to display an image to the left of the table cell containing the number (like an arrow or a checkmark.... something to make it stand out from the others). It doesn't look like I can do this using background image of the table cell because the image will actually need to be to the left of the cell (outside of the table altogether). Can someone point me in the right direction here?

So here's what I would like to see (second number in the list is the primary phone #):

Because of the way the page is formatted (this is actually an embedded table), I don't want to add another column to the table to contain the arrow.
[ October 06, 2008: Message edited by: Kristin Stromberg ]
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64959
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Why can't you just put an image element in the cell before the data?
 
Kristin Stromberg
Ranch Hand
Posts: 91
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There's no cell before the data.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64959
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I was talking about the cell with the data.

Trying to place the marker outside of the table is just not feasible. You are either going to have to place the image in the cell with the data, or add another column in which to place the marker.

If you want to try and be tricky, you could try to use a background image will some cell padding, but that's starting to get needlessly complicated. I'd just place an image with your marker in the marked cells, and if you need things to line up, use CSS padding in the non-marked cells.
[ October 06, 2008: Message edited by: Bear Bibeault ]
 
Kristin Stromberg
Ranch Hand
Posts: 91
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ah, gotcha. Thanks Bear, that's what I was thinking as well. However, I did manage to get close to what I'm looking for by adding the image inline to the table cell but then positioning it outside the cell like so:

.primary_address {
position: relative;
left: -30px;
margin-right: -20px;
}

This renders pretty consistently in IE and FF. Am afraid to check other browsers :-)
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64959
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yeah, that's really fragile and I'd not rely upon it.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic