line height issues

[pepe_lepew1962]

Hello:

I am trying to change my line height and it just is not working. I have copied code right off the internet and it still doesn't work. I have included a link to show the problem with a line height of 1px, just to test and is still doesn't work. Please help.


http://www.pepelepew1962.x10.mx/corners.html


Thanks

[mlegg]

you code shows you are using PT, not PX

p
{
  color: green;
  line-height: 1pt;
}

[Beverleyh]

I can't see a specific font-size so the page will be defaulting to 16px. A line-height of 1px or even 10px is rather inappropriate with that font-size and I suspect you may be confusing px with em (1em is the default equivalent of 16px)

If you're working with px, 26px would be better. Try increasing your line-hight to a minimum of 20px to see a reasonable effect.

[pepe_lepew1962]

Ok, but if the default goes to 16px or any othersize for that matter, with a line-spacing of 1pt or 1px, would the next text not practically overwrite it? That is the part I don't understand. Other than learning, my ultimate goal is to get the XXX very large ( no, it is not x-rated ), with the title underneath smaller.

[Beverleyh]

Here's a px, pt, em, % chart to help you with sizing conversions http://reeddesign.co.uk/test/points-pixels.html

[Beverleyh]

my ultimate goal is to get the XXX very large ( no, it is not x-rated ), with the title underneath smaller.

it would be better to set an explicit font-size on the h1 and h6 elements rather than rely on default browser sizing;

h1 { font-size: 20px; }
h6 { font-size: 10px; }

use whatever font-size you like to get the desired sizing effect.

But from a markup-meaning perspective, an h6 tag probably isn't appropriate for a title (at the top of a page). Unless you specifically intend to tell Google that your title is way down on the importance scale - h6 is the least important title - right down the list from all the other h tags (more likely expected towards the bottom of your page).

I would suggest the your XXX/OOO titles are the most important and so the h1 tag is most appropriate there, but the lines directly underneath -- should they not hold greater importance in the structure of your page? Might a h2 or h3 tag be better? (As an importance indicator for Google anyway?)

Use the h1-6 scale to rank the importance of your headings (h1 being the most important heading and h6 being the least important heading) but use CSS and font-size to control the visual sizing.

[pepe_lepew1962]

Okay, I have made a few changes that I hope help. FYI, thanks for your help and time. The company has no logo, so instead they want just text. So, the logo part is AJAX and the sub logo is business. For a text logo, it sux and I am trying to get the "business" part under the "AJAX", very snug. I also am trying to get the other 2 boxes to be on the same line ... so all 3 on the same line.

[Beverleyh]

Ok - for all 3 rounded corner boxes to sit on one line you would need to set them all as;

display:inline-block; 
float:left;

There are other ways to manipulate the positioning - for example, you could use absolute positioning on the children with relative positioning on the parent http://css-tricks.com/absolute-posit...e-positioning/ - but floats are good too. Have a play and see what way you like best.

With the floats make sure that their combined widths and margins are less than the width of their container otherwise they will push out and drop onto the line below. You can set them extra narrow and then expand them til they fit snugly in the container.

Also you will probably need to clear the float on the container div with clear:left;

Hope that helps.

[pepe_lepew1962]

Okay, got something to work ... thank you !!!!