Ok, I am pretty new to CSS in terms of using it for layout and am having one of the seemingly simple but maddeningly frustrating problems that have always made me go back to using tables.
The problem is when I raise the "post_author_container" with margin-top: -35px; Firefox wants to take the text all the way to the left. It is a little hard to explain so take a look at the attached pictures for what I mean. IE gets it right and puts the text just to the right of the avatar.
Here is my code
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> a.forum_post_poster:link {color: #990000; text-decoration: none; font-size: 25px; line-height:26px; font-family: "Trebuchet MS","Arial","Verdana","sans-serif"; font-weight: normal;} a.forum_post_poster:active {color: #990000; text-decoration: none; font-size: 25px; line-height:26px; font-family: "Trebuchet MS","Arial","Verdana","sans-serif"; font-weight: normal;} a.forum_post_poster:visited {color: #990000; text-decoration: none; font-size: 25px; line-height:26px; font-family: "Trebuchet MS","Arial","Verdana","sans-serif"; font-weight: normal;} a.forum_post_poster:hover {color: #8f8f8f; text-decoration: none; font-size: 25px; line-height:26px; font-family: "Trebuchet MS","Arial","Verdana","sans-serif"; font-weight: normal;} .post_author_container { margin-top: -35px; padding-bottom:5px; z-index:6; } .post_score_container { margin-top: -22px; float:right; z-index:6; } #liquid-round { width:70%; margin:0px auto; background:#c1c1c1 url(http://www.sitename.com/img/forum_imgs/post_box_leftline.gif) repeat-y left top; } .top { width:100%; height:36px; background:url(http://www.sitename.com/img/forum_imgs/post_box_tleft.gif) no-repeat left top; } .top span { display:block; position:relative; height:36px; background:url(http://www.sitename.com/img/forum_imgs/post_box_tright.gif) no-repeat right top; } .center-content { position:relative; background:url(http://www.sitename.com/img/forum_imgs/post_box_rightline.gif) repeat-y right top; padding:1px 1px 1px 1px; margin:-1px 0px 0px 0px; } .bottom { height:16px; background:url(http://www.sitename.com/img/forum_imgs/post_box_bleft.gif) no-repeat left bottom; } .bottom span { display:block; position:relative; height:16px; background:url(http://www.sitename.com/img/forum_imgs/post_box_bright.gif) no-repeat right top; } .avatar { margin: -36px 0px 0px -1px; border:solid 1px #000000; float:left; z-index:6; } .postxt { margin-top:-5px; padding-left:5px; padding-right:5px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; line-height:14px; color: #650000; } </style> </head> <body> <BR /><BR /> <div id="liquid-round"> <div class="top"><span></span></div> <div class="center-content"> <img class="avatar" src=/img/no-avatar.jpg /><div class="post_author_container"><a href="http://www.sitename.com/user/view_profile.php?uid=2" class="forum_post_poster">Vertex</a></div><div class="post_score_container">Post Score 12 </div> <!-- CONTENT BEGIN --> <div class="postxt">this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text <BR /> this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text </div> <!-- CONTENT END --> </div> <div class="bottom"><span></span></div> </div> </body> </html>
Bookmarks