mwbarry Posted August 16, 2011 Share Posted August 16, 2011 I just launched a site and I want the text for title to line up with the text for the content such that you could hold a ruler horizontally and the top of the text would be aligned with it.It works perfectly in Opera. Safari and Chrome show the content about 10px above the title. Firefox shows the content about 10px below the title.How would I fix this so that all browsers show the text lined up?html <div id="content"> <table border="0" align="center" width="890px"> <tr> <td rowspan="2" width="90px"></td> <td width="291px" valign="top"> <div id="title">TITLE<br />GOES<br />HERE<br /></div> </td> <td rowspan="3" width="419px" style="padding-top:0px" valign="top"> <div class="p">blah blah blah text text information blah blah blah text text information blah blah blah text text information<br /><br /></div> <div class="p">blah blah blah text text information blah blah blah text text information blah blah blah text text information<br /><br /></div> </td> </tr> <tr> <td> <div id="subtitle"><em>subheader below the title goes here</em></div> </td> </tr> <tr> <td> </td> </tr> </table></div> css #title { font-family:helvetica, sans-serif; font-size:45pt; color:#303030; text-shadow:1px 1px 1px #ffffff; font-weight:bold;}#subtitle { font-size:18pt; font-family:times new roman, serif; color:#606060;}.p { font-family:helvetica, sans-serif; color:#303030;} Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2011 Share Posted August 16, 2011 different browsers have different margin and padding settings by default, so to make them all appear identical, you will have to reset all element margins and padding to zero, and redefining margins for paragraph and header elements. *{padding:0;margin:0;}body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}p{margin:0.9em 0;}h1, h2, h3, h4, h5, h6{margin:0.9em 7px;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;} Link to comment Share on other sites More sharing options...
mwbarry Posted August 17, 2011 Author Share Posted August 17, 2011 I don't think padding is the issue. If you highlight the text, the top of the highlight is lined up, but the text itself is at a different level in each browser Link to comment Share on other sites More sharing options...
dsonesuk Posted August 17, 2011 Share Posted August 17, 2011 I think in this case, the problem is the line height used for the different size text, the larger the text, the larger the line-height compared to the smaller.try adding the text within a outer container and add a top margin to match the top of title text<div class="p_outer"><div class="p">blah blah blah text text information blah blah blah text text information blah blah blah text text information<br /><br /></div><div class="p">blah blah blah text text information blah blah blah text text information blah blah blah text text information<br /><br /></div></div>.p_outer {margin-top:10px;} Link to comment Share on other sites More sharing options...
mwbarry Posted August 19, 2011 Author Share Posted August 19, 2011 I think in this case, the problem is the line height used for the different size text, the larger the text, the larger the line-height compared to the smaller.try adding the text within a outer container and add a top margin to match the top of title text<div class="p_outer"><div class="p">blah blah blah text text information blah blah blah text text information blah blah blah text text information<br /><br /></div><div class="p">blah blah blah text text information blah blah blah text text information blah blah blah text text information<br /><br /></div></div>.p_outer {margin-top:10px;}that works for safari and chrome, but then opera would be ~10px below the title and firefox would be ~20px below the title Link to comment Share on other sites More sharing options...
ShadowMage Posted August 19, 2011 Share Posted August 19, 2011 Out of curiosity, what DTD are you using? If any at all? (If you don't know what a DTD is, check here)I suspect you are not using any DTD at all, because I tried it with a Strict DTD:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">And every browser showed it exactly the same. With the paragraph text slightly higher than the title.Add a DTD (anyone from the link above should work, but a Strict one is probably best) and try this:<td rowspan="3" width="419px" style="padding-top:0px" valign="top"><div class="p" style='margin-top: 8px'>blah blah blah text text information blah blah blah text text information blah blah blah text text information<br /><br /></div><div class="p">blah blah blah text text information blah blah blah text text information blah blah blah text text information<br /><br /></div></td>dsonesuk's solution should work also, then. Link to comment Share on other sites More sharing options...
mwbarry Posted August 19, 2011 Author Share Posted August 19, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Thats the DTD I use on all my sites.Not sure how you're seeing it lined up in every browser then. I've checked it on firefox, safari, opera and chrome and there are differences and I've had 3 of my friends look at it and have seen the same differences. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 19, 2011 Share Posted August 19, 2011 Thats the DTD I use on all my sites.Not sure how you're seeing it lined up in every browser then. I've checked it on firefox, safari, opera and chrome and there are differences and I've had 3 of my friends look at it and have seen the same differences.Is there more code that you haven't posted?EDIT: Or better yet, do you have a live link? Link to comment Share on other sites More sharing options...
mwbarry Posted August 19, 2011 Author Share Posted August 19, 2011 this is the site Link to comment Share on other sites More sharing options...
ShadowMage Posted August 19, 2011 Share Posted August 19, 2011 Ok, the next question is what versions of FF, C, and O are you using? I'm still seeing the same behavior across all three (Paragraph text slightly higher than title, with top margin fixing it). I am on FF5, C 13, and O 11.5EDIT: Safari 5 and IE 8 show the same, too. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 19, 2011 Share Posted August 19, 2011 I'm getting exactly the same results as shadowmage, I presume you have tried clearing history cache on making these changes? Link to comment Share on other sites More sharing options...
mwbarry Posted August 20, 2011 Author Share Posted August 20, 2011 Yea i have cleared everything in all browsers. Chrome 13, Safari 5, Opera 11.5, Firefox 5.... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.