Positioning td's with div's

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
benton
Forum Newbie
Posts: 4
Joined: Mon Feb 22, 2010 8:25 am

Positioning td's with div's

Post by benton »

I have a page using tables that I need to add another section to. No matter what I try when doing that, there is always a few pixels difference in the alignment of the heights between the new and old tables. So I thought I would try using div's because I read that they can provide better position control. But I'm not very well versed in its usage and am failing right off the bat. Here is what I have:

Code: Select all

 
<td align="left" valign="top"><table border="0" cellspacing="0" cellpadding="0">
 <div style="position: absolute; left:772px; top:251px;">
  <tr>
   <div style="position: relative; left:2px; top:2px;">
    <td><img src="images/right_buy.jpg" alt="buy" width="220" height="40"></td>
   </div>
  </tr>
         
  <tr>
   <div style="position: relative; left:2px; top:52px;">
    <td><img src="images/right_sell.jpg" alt="sell" width="220" height="40"></td>
   </div>
  </tr>         
 </div> 
</table></td>
 
The above is being placed beside an existing table. It is placed properly and the first image is where it should be. But no matter what I do, the second image starts directly below the first image, without any space between them. It is that space that I need to control.

Would someone please point out any mistakes with the above code?
mikosiko
Forum Regular
Posts: 757
Joined: Wed Jan 13, 2010 7:22 pm

Re: Positioning td's with div's

Post by mikosiko »

what browser are you testing it?....
The box model has some differences depending on the browser where you are seeing your pages... in many cases you need to apply "hacks" in your code to be able to produce a similar result.

google "box model"

here is a good start
http://www.communitymx.com/content/arti ... 53B6F20B41

also you can look for "Blueprint CSS" which is a good framework to design your pages
benton
Forum Newbie
Posts: 4
Joined: Mon Feb 22, 2010 8:25 am

Re: Positioning td's with div's

Post by benton »

I used IE 7 and FF 3.5 - the page displays the same in both. I wasn't aware of the box model but it turns out I am using the Block model, according to http://www.brainjar.com/css/positioning/. From my understanding of what that says, and what I have, the code is correct.

To test it, I placed it in its own page and the result is the same. The images are joined together.

Code: Select all

<html>
<head>
</head>
 
<body>
<td align="left" valign="top"><table border="0" cellspacing="0" cellpadding="0">
 <div style="position: absolute; left:772px; top:251px;">
  <tr>
   <div style="position: relative; left:2px; top:2px;">
    <td><img src="images/right_buy.jpg" alt="buy" width="220" height="40"></td>
   </div>
  </tr>
         
  <tr>
   <div style="position: relative; left:2px; top:52px;">
    <td><img src="images/right_sell.jpg" alt="sell" width="220" height="40"></td>
   </div>
  </tr>         
 </div> 
</table></td> 
</body>
</html>
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Positioning td's with div's

Post by kaszu »

DIV is not a valid child of TABLE or TR;
TD is not a valid child of BODY
benton
Forum Newbie
Posts: 4
Joined: Mon Feb 22, 2010 8:25 am

Re: Positioning td's with div's

Post by benton »

Thanks. Rearranging the div's did allow the images to separate and I can control the spacing better but it isn't any better than my original, all html, code. The spacing is different between IE and FF and I can't get the alignment exact with the table beside it. I guess the problem must be somewhere else in the code although I thought that by using css in its own div with absolute positioning would override that. Thanks to you both for your help. I'll keep going at it.
mikosiko
Forum Regular
Posts: 757
Joined: Wed Jan 13, 2010 7:22 pm

Re: Positioning td's with div's

Post by mikosiko »

benton wrote:Thanks. Rearranging the div's did allow the images to separate and I can control the spacing better but it isn't any better than my original, all html, code. The spacing is different between IE and FF and I can't get the alignment exact with the table beside it. I guess the problem must be somewhere else in the code although I thought that by using css in its own div with absolute positioning would override that. Thanks to you both for your help. I'll keep going at it.
in my first post I said...
"The box model has some differences depending on the browser where you are seeing your pages... in many cases you need to apply "hacks" in your code to be able to produce a similar result."

even when modern browsers versions require this hacks every day less
benton
Forum Newbie
Posts: 4
Joined: Mon Feb 22, 2010 8:25 am

Re: Positioning td's with div's

Post by benton »

Yes, I understood. It is not knowing what those hacks are that is preventing me from fixing this, thus the post.

But I backed up and took another look and realized I didn't need, I don't think, all of thos internal table parts. So I removed those and changed it to absolute positioning. I realize this is not the best positioning method to use but it's the only one I could make any progress with. My code now looks something like

Code: Select all

<td align="left" valign="top"><div style="position:absolute; left:756px; top:272px;">
 
<div style="position:absolute;...</div>
<div style="position:absolute;...</div>
<div style="position:absolute;...</div>
<div style="position:absolute;...</div>
</div>
</td>
 
The above works fine in IE and displays exatcly as I want it to. In FF, the top image is moved down two pixels, othewise, it looks good too. Does anyone know where those extra pixels might be coming from or if there is a hack for such a problem?
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Positioning td's with div's

Post by Sindarin »

Couldn't you use the <span> tag instead?
Post Reply