PDA

View Full Version : Bold a:hover and text-wrapping


torifile
2006-10-31, 09:33
I'm working on the side bar of my site and I've got it almost right. I'm having a problem with text-wrapping when I hover over a link. Specifically, I'm using a font-weight: bold for hovers and for some of my links, that takes it from a single line of text to 2 lines of text.

Here it's one line (http://www.durhamdbt.com/recommended-readings/) normally, but when you hover over "mindfulness related", it goes to 2 lines. At least in Safari and Omniweb. FF doesn't do this, but I think that's because the fonts seem a little smaller.

I could change the font size in the sidebar to make it a touch smaller, but that seems like a crude hack. What would you guys recommend? TIA.

Brad
2006-10-31, 09:35
You could use "white-space: pre" on the a:hover so it doesn't break and wrap onto multiple lines.

torifile
2006-10-31, 10:01
You could use "white-space: pre" on the a:hover so it doesn't break and wrap onto multiple lines.
Brilliant! It worked perfectly. I've really got to learn this stuff... :)

drewprops
2006-10-31, 10:05
Brad what does that do??

torifile
2006-10-31, 10:05
I spoke too soon. Now I'm having the opposite problem. On this page (http://www.durhamdbt.com/recommended-readings/mindfulness-related/), the page name is 2 lines and when I hover it goes to one. I tried doing the same fix for that element (current-page-item) and <li> arrow is in the wrong place (it's where it should be if the item were 2 lines).

drewprops
2006-10-31, 10:06
hehehehe that's kind of fun

torifile
2006-10-31, 10:07
hehehehe that's kind of fun
:lol: Yeah, it's not a bug it's a feature! ;)

Brad
2006-10-31, 10:10
:D

Simple! For whatever class you're using to make that bold in the sidebar, apply "white-space: pre" to it too!Brad what does that do??

It makes the text whitespace work like it's in the old <PRE> HTML tag. That forces spacing to match exactly what the spacing is in the source code. If you have a space in the source, it'll act similar to a &nbsp character. If you have a newline in the source, it'll act similar to a <br>.

torifile
2006-10-31, 10:14
Simple! For whatever class you're using to make that bold in the sidebar, apply "white-space: pre" to it too!
Almost but this is the arrow problem I'm talking about:

http://homepage.mac.com/torifile/.Pictures/arrowproblems.jpg

Any thoughts about that?

edit: This is the source for that <li>

<li class="page_item current_page_item">
<a href="http://www.durhamdbt.com/recommended-readings/mindfulness-related/" title="Mindfulness Related">Mindfulness Related</a>
</li>

Brad
2006-10-31, 10:19
I checked your source and found the problem. You have a newline and space after the </a> and before the </li>. So, the "white-space: pre" is forcing that newline to be displayed in the output.

If you can't get rid of the newline, change the CSS so that "white-space: pre" only applies to the <a> tag instead of the <li> tag.

torifile
2006-10-31, 10:27
The <a> tag fix works for now. I'll look and see why there's a newline there later. Thanks, Brad. :)