CSS - Problem With Clickable Area And Small Line-height

Hi,

I've been a close watcher of this forum for some time now, and it's now that I've run into a problem I can't figure out.

http://donimusic.com/test/

In the above site (currently in progress), I have made the #ctop and #cbottom divs a height of 2px, yet in IE it displays the height much more and thus creates the image to repeat itself. I can't figure out how to fix this (for view wanted - view in FF).

Thank you kindly for your help.

Stacey

On the home page of my site (http://awsmiedev06.awecomm.com), there is a large clickable area for Life Insurance, Health Insurance & Disability Insurance.

However, when you get into the internal pages of the site, the clickable area is much smaller, making it harder to click on the 3 Insurance Navigation items. You have to almost click on top of the words to get the arrow to turn into a hand so you can click on it.

Why is this? Why is the clickable area large (and perfect) on the home page but not on the internal pages?

This is the code for the navigation items:

Code:

.cl2a /*disability*/
{
background-image:url('images/awh-hover.png');
background-repeat:no-repeat;
width:349px;
height:42px;
float:right;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
margin-left:-24px;
}
.cl2d /*disability*/
{
background-image:url('images/cl_2.jpg');
background-repeat:no-repeat;
width:349px;
height:42px;
float:right;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
margin-left:-4px;
}

a.cl2:hover /*disability*/
{
width:346px;
height:42px;
float:right;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color :#163752;
padding-top:9px;
display:block;
margin-left:-2px;
}
.cl3a /*life*/
{
background-image:url('images/aws-hover.png');
background-repeat:no-repeat;
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
}
.cl3d /*life*/
{
background-image:url('images/cl_3.jpg');
background-repeat:no-repeat;
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
a.cl3:hover /*life*/
{
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}

.cl4a /*health*/
{
background:url('images/awd-hover.png') no-repeat top left;
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
}
.cl4d /*health*/
{
background-image:url('images/cl_4.jpg');
background-repeat:no-repeat;
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}

a.cl4:hover /*health*/
{
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}

Any help will be greatly appreciated!!!

Hi all, hope someone can help with this.

Page with problem:

html Code:

http://central12.com/hovv.htm

CSS Code:

http://central12.com/hov.css

Basically I used Eric Meyer image pop up tuturial, got it working ok in firefox, but in IE when I hover over the link the text jigs down a bit.
I know I can stop this by removing the line-height attribute on the p tag, but wanted this to remain as it is a style I want across the site in general.
Any way to keep the line height and remove the IE text jog.
Thanks for any help.

Hi all --
I've been messing w/ this for awhile and don't know why it isn't doing what I want. I have some headings, and the color, size, etc. all work but when the heading wraps to the next line, they are too close together... I've tried everything I can think of, like line-height normal, inherit, pixels,percent, you name it, doesn't change.

here is a page example:
http://www.keepsakequilting.com/landing/halloween2010.aspx

they are the pinkish headings near the images..

here is the css I have:

#lpage-titlel {
font-family:century gothic,avant garde,arial,sans-serif;
color:#AD4266;
font-size: 110%; line-height:normal;
font-weight: bold;
padding: 0;
margin: 8px 2px 5px 17px;
text-align: left;
}
#lpage-titler {
font-family:avant garde,century gothic,arial,sans-serif;
color:#AD4266;
font-size: 100%;
line-height:normal;
font-weight: bold;
padding:10px;
margin: 8px 2px 5px 5px;
text-align: left;

}
#lpage-titler a {color:#AD4266;text-decoration:none;}
#lpage-titler a:hover {color:#AD4266; text-decoration:underline;}
#lpage-titlel a {color:#AD4266; text-decoration:none;}
#lpage-titlel a:hover {color:#AD4266; text-decoration:underline;}


What am I missing?? Any help would be greatly appreciated. THANKS

Hi all,

I am trying to automate everything on my test website and I have one more angle to cover.

In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height.

Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder)

My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement.

Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values?

I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit.

Whew!