PDA

View Full Version : Links; Height:100% Problem



dotty_
Nov 10th, 2006, 11:30 AM
This is going to be difficult to explain, but i will try my best.

I have a table on my webpage, and the height is not defined as my content will define how much space the table height should take up.

In my table, there are two columns. One is for all my content (text/images) and the other is for a link.

Now this link is set out like this,


<td width="50" bgcolor="#000000">
<div id="j"><a href="j.html"></a></div></td>

Now, my CSS code to style this link is like the following,


#j {
display: block;
width: 50px;
height: 100%;
background: url('normal.gif') no-repeat 0% 50% !important;
}

#j a {
display: block;
width: 50px;
height: 100%;
background: url('normal.gif') no-repeat 0% 50% !important;
}

#j a:hover {
background: #FFFFFF url('hover.gif') no-repeat 0% 50% !important;
}

Now the thing is, the website works great in firefox. Firefox picks up the height 100% great. However, in Internet Explorer, it doesnt pick up the height 100% business. so what occurs, the gif images are displayed at the very top of the column (i think internet explorer somehow interprets it as height="0")

Now, what is my easiest solution?
This is a real blow in the design of my page because i was just browsing/checking/testing my page in firefox, and when i accidently blew it up into internet explorer. Problems problems problems..

Bill Posters
Nov 10th, 2006, 11:53 AM
It may be wise to add some actual content to the link.
Aside from possible layout problems, you also risk usability and accessibility problems by having empty anchors.

Suggested reading:
http://www.mezzoblue.com/tests/revised-image-replacement/#gilderlevin

dotty_
Nov 10th, 2006, 12:01 PM
Sorry, i don't really understand what you're trying to get at.

Could you please clarrify further?

I had a read of the page, and it had some deal with replacing images?

Normal.gif and Hover.gif in my webpage however does not take up the entire height of the column.

Its supposed to look like a big bar link.

Bill Posters
Nov 10th, 2006, 12:15 PM
The first thing to try is to put some content in the anchor.
This may trigger the height in IE.

e.g

<td width="50" bgcolor="#000000">
<div id="j"><a href="j.html">something here</a></div>
</td>

I'm not at all clear why you have the same background image on the div and on the anchor which fills it.
Why is that?
The div is likely to be unnecessary.

Perhaps it would be clearer to me if you post a link to the site, so I can see precisely what effect you're trying to achieve.

dotty_
Nov 10th, 2006, 12:25 PM
I don't hae anywhere to host the file.

Basically, think two columns in one table
Left column has a small image that is supposed to be in the center of the column (both height and width) and when a:hover, the whole entire column is supposed to change color, and another image appears (as seen in the code supplied)

This "link" column's height is defined by the other column which contains content. Now the content column will have different heights at different times (hence why i want the height to be 100%)

If you would like, i can supply the full html/css code.

dotty_
Nov 10th, 2006, 12:41 PM
And there is something in the "anchor" as you call it; i have no idea what it means, and thats the gif file. i can set a pixel height, but i cant set a percentage height to the link column.

Bill Posters
Nov 10th, 2006, 12:49 PM
And there is something in the "anchor" as you call it;
I call it an anchor, because that's what it is.

The <a></a> tags refer to anchor elements.

You have nothing in the anchor, no content.
You have a background image, but that is not content.



i have no idea what it means,
You don't know what an anchor is?
Without wishing to cause offense, it genuinely sounds as though you have very little understanding about markup.

I suggest you leave the more intermediate stuff like rollovers until after you've got to grips with the building blocks themselves.

dotty_
Nov 10th, 2006, 01:13 PM
oh none taken. but because i dont know what they are titled, it doesnt mean im incompetent. i know how to use it.

i have seen it on a wordpress theme/skin and ive looked at the code and taken it and manipulated it to suit my code (however, they have specified width and height in pixels, not percentages)

it works perfectly fine in firefox. but internet explorer does not like it.

would you want to have a look at my html code itself and run it on ur machine?