joe92 Posted July 1, 2011 Share Posted July 1, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> .boldText:hover { font-weight:600; opacity:0.99; } <div style="vertical-align:bottom;height:1.7em;border:solid 1px #000;"> Some text with styling that will make it <span class="boldText">go bold on hover</span> </div> What I want to achieve is to have the text aligned at the bottom of the div so that when the selected text goes bold, it doesn't cause the other text to jump down to keep in line with it. I started with vertical-align:bottom; being in a class then switched it to inline. I have tried using a <p> tag and also using a table thinking it was something to do with the div. The p tag didn't work either, however the table did but only when the css was applied to the table cell and only when it was inline styling. I would much rather not use a table for styling purposes though. I know that the style sheet is linked up properly as I have many other classes on the page coming from this sheet. What am I doing wrong? Cheers Joe. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 1, 2011 Share Posted July 1, 2011 as far as i know this is not possible without using position absolute. which will be pretty tricky and far from dynamic when there is also text after the span. Usually a different color is chosen for these types of things. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 1, 2011 Share Posted July 1, 2011 the only thing you can do without causing the line to shift in the vertical axes is the following. <style type="text/css"> .boldText{ margin-right:12px; /* this to compensate growth horizontally on hover */ } .boldText:hover { font-weight:bold; opacity:0.99; vertical-align: bottom; /* this */ margin:0; /* remove margin */ } </style> <div class="stuff"> <p>Some text with styling that will make it <span class="boldText">go bold on hover</span> lalalalala lalala<br /> lalala lalala mamama lalala amamama amamamamama </p> </div> p.s. but this will never look very cool. I suggest to just take another color. bold text just changes the dimensions of the element, and you need to deal with that or if your in to css3 use text-shadow. (comes close to bold Quote Link to comment Share on other sites More sharing options...
joe92 Posted July 1, 2011 Author Share Posted July 1, 2011 Thanks for the response. Guess I shall be using another color then or have a look at the text-shadow you mentioned. That's a shame really, I quite like the effect bold gives. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.