TOPIC: Large space between read more and write comment in IE

Hi!

I have also one minor problem - in IE the space between write comment and read more is about 1/3 larger than in other browsers. See live and attached pic.

www.joomla-studio.net/beverinasnovads

Valters

Happens in FF 3.5 too.

Open up the CSS file for the Nu template - there will be several because it's Dynamic CSS, here's what the URL is:...so just search for a.readon in every CSS file.

Find ...... and change height from 20px to, for example, 1px to make line spacing practically nothing.

If you want to have 'Comments' and 'Read More' both on the same line let me know, you'll have to edit the Nu PHP for that.

Daniel if you see this, maybe we could improve the options for where to place Comments/Readmore button? EDIT: Thinking about a new extension to completely customize the bottom-bar of Frontpage/intro views...

Hi, Jonus!

No, changing of line heihgt of .readon is not an option. I need to maintain the space between write comment and read more and only eliminate that additional space which someway is added in IE and FF3.5 as You say (for me FF3.5 is OK).

Possibly there are neccessary some additional definitions in css and the big question is - which ones and where...

All that is seemingly connected with differences in the code of Nu 1.5 template in comparision with Nu 1.0.x template. For 1.0.x. template there was not added any additional space between write comment and read more.

Of course, putting both links on one line would be the best solution. Only then it is neccessary that "read more" goes first:

read more write comment (1 comment)

Valters

Hey,

keep in mind that height: line-height: and font-size: are three completely different things. The reason why you have a gap is because the layer box dimensions are taller (bigger in height) than the line-height value. It's effectively adding a padding value by making the layer box bigger than its contents require.

If you actually delete the whole height:20px; line, it should dynamically calculate the box dimensions from the line-height automatically and use a default.

In good theory, if you're only dealing with text in the inner HTML of a tag (like span, div, a, etc) it's best to leave height: at a small value and leave it up to line-height. Only if there are img tags or other non-text content that might overflow the line-height calculated automatically would you make height: bigger than line-height:.

All that is good and well, that's a personal rule I've always stuck to and it works for me in every case. So in conclusion, changing the height: attribute to a superfluous value like 1px or even removing the height: attribute entirely will not destroy this text-only element because line-height: is still effective for the text.

height: shouldn't even be there in my opinion - I'm convinced it's just left over from a baseline canvas template that YooTheme use internally. height: is only really needed if you have a custom icon graphic on readon class in the template (some YooTheme's do, some don't).

Anyway, it can't hurt to play with the values of height: and line-height: for the a.readon styling though. Try removing height: entirely. If you need a little more space and they are too close (looks fine in my opinion though) then you can use padding-top:5px; or something to add a little space to the top. You can also experiment with height:1px;line-height:100px; and then try height:100px;line-height:1px; and see the difference between the two - all that theoretical and "in practice" rambling will make more sense seeing it in action