Block links, width/height problems

7,435

Expert 4TB

In your css for 'a:link' add 'display:block'.

I have to say you need to bring your markup up to date. Most of that was deprecated 10 years ago.

Nov 18 '09 #2

haha, I know I know... I learned my HTML about 10 years ago.. Teachers ain't free so I downloaded all browsers and as long as it all looks and functions well on the important ones I don't mess with it.. Thank you tho, I'll try and see what happens

Nov 18 '09 #3

ok, tried display:block in the a:link, and no difference from type:block :/ ... I'm trying to get it to stretch out.. You can still go above and below the link the the text "un-highlights" but the <td's> mouseover is still activated. I'm beginning to think I'm gonna have to live with it.

Nov 18 '09 #4

7,435

Expert 4TB

But it does work. I didn't notice you put 'type:block'. There is no such thing. Remove that and see what happens including, of course, display:block. If it still doesn't work, which browser are you testing in?

Nov 18 '09 #5

Like I said, I had type:block, and it worked in IE and google, but won't completely stretch to the whole TD... I removed it and corrected it with the display:block... same thing. There's a sort of an invisible non-<a> border around the link. Can I add padding in the link? I just want the whole <td> to be clickable for the link. possibly the cellpadding from the table itself is doing it?? I'm using IE strictly, then I go to Google Chrome and Firefox to see how it looks.. and if it's okay, I leave the coding and edit it enough to where I want it on each browser. I'm real picky about fancy fast-loading effects. But "I" want to make them if you know what I mean. I like to think I have a certain easy-going style.

Nov 18 '09 #6

7,435

Expert 4TB

Then it is working better, just not as good as you want.

Nov 18 '09 #7

7,435

Expert 4TB

@magnesium
Never, ever do that. IE is, by far, the worst browser on the planet. Always, always use a modern, standards compliant browser such as .... anything but IE. Once you know your markup is correct, THEN and only then look at it to see if/when IE screws it up. But the quirks and bugs in IE are well known as are the hacks to fix it.

Nov 18 '09 #8

7,435

Expert 4TB

It's working as it should in Firefox, Chrome, Safari and Opera. I don't have IE available right now to check there. It looks like the link works all the way up to the border of the td except where the graphic is on the left side. Are you saying you want the graphic to be clickable, too?

Nov 18 '09 #9

Yea, the link are is clickable to the top, but it's not like centered in a block, you go below the link text, and the link is no longer "hovered".. just the TD ... I haven't worked on it in a couple days so I haven't had a chance to see if it's a cellpadding prob. The left images are only lil fancy pics, ya know.. not supposed to be clickable. I like IE's un-judging looks unto my shoddy coding, lol

Nov 20 '09 #10

display block in li NS7.1 vs IE

Okay, figured out my problem... I had cellpadding in the link's <td> which yes.. It was a PART of the the problem. The other problem is, in the left 'ASCII-text-piclettes' the font size was 4. The link's font sizes are 3. So I changed it, deleted all the extra crap, and BAM! there we go. Not the font size I wanted but you press Ctrl+a on the doc and the entire TD the link is in gets selected showing that the whole thing is clickable *:D ... Here's the solved version:

Expand|Select|Wrap|Line Numbers

 <html>

<style type="text/css">

body {cursor:url(http://www.angelfire.com/mn3/magnesium/wagtail.ani);

      border:1 solid gray;

      margin-left:2px;

      margin-right:2px;

      margin-top:2px;}

a:link {text-decoration:none;

        font-family:arial;

        display:block;

        letter-spacing:2;

        color:gray;}

a:selected {text-decoration:none;

            color:white;}

a:visited {text-decoration:none;

           color:gray;}

a:hover {text-decoration:none;

         color:white;}

</style>

<body bgcolor="#282828" text="gray">

<div id="sidebar_menu">

<table border="0" cellspacing="1" cellpadding="1" bgcolor="#4444aa" width="200"><tr><td bgcolor="black">

<table border="0" cellspacing="2" cellpadding="3" bgcolor="#7777dd" width="100%" height="100"><tr><td align="center" valign="middle" bgcolor="#171717" background="http://www.angelfire.com/mn3/magnesium/buttonbg.jpg">

<font size="3" face="arial" color="white" style="letter-spacing:5;"><b>Steve's Spot</b></font>

<table border="0" cellspacing="1" cellpadding="0" bgcolor="#4444aa" width="75%" height="2"><tr><td bgcolor="#282828" style="overflow:hidden;"></td></tr></table>

<font size="1" face="arial" color="gray" style="letter-spacing:2;"><u>&nbsp;M e n u&nbsp;</u></font>

</td></tr></table>

</td></tr>

<tr><td bgcolor="black">

<table border="0" cellspacing="0" cellpadding="2" bgcolor="#7777dd" width="100%"><tr><td align="left" valign="middle">
 
<table border="0" cellspacing="0" cellpadding="2" bgcolor="black" width="100%"><tr><td align="center" valign="middle" width="15%" background="http://www.angelfire.com/mn3/magnesium/buttonbg.jpg"><font color="white" size="3" face="arial"><b>►</b></font></td><td align="left" valign="middle" bgcolor="#282828" width="85%" background="http://www.angelfire.com/mn3/magnesium/buttonbg2.jpg"><font size="3" face="arial" color="white" style="letter-spacing:2;"><b>&nbsp;Home</b></font></td></tr></table>

</td></tr></table>
 
</td></tr>
 
<tr><td bgcolor="black">

<table border="0" cellspacing="2" cellpadding="0" bgcolor="#7777dd" width="100%"><tr><td align="left" valign="middle">

<table border="0" cellspacing="0" cellpadding="0" bgcolor="black" width="100%"><tr><td align="center" valign="middle" width="15%" background="http://www.angelfire.com/mn3/magnesium/buttonbg.jpg"><font color="#9999ff" size="3" face="arial"><b>☻</b></font></td><td align="left" valign="middle" bgcolor="#282828" width="85%" background="http://www.angelfire.com/mn3/magnesium/buttonbg.jpg" onMouseover="this.background='http://www.angelfire.com/mn3/magnesium/buttonbg2.jpg';" onMouseout="this.background='http://www.angelfire.com/mn3/magnesium/buttonbg.jpg';">

<a href="http://"><font size="3"><b>&nbsp;About Me</b></font></a></td></tr></table>

</td></tr></table>
 
</td></tr>
 
<tr><td bgcolor="black">

<table border="0" cellspacing="2" cellpadding="0" bgcolor="#7777dd" width="100%"><tr><td align="left" valign="middle">

<table border="0" cellspacing="0" cellpadding="0" bgcolor="black" width="100%"><tr><td align="center" valign="middle" width="15%" background="http://www.angelfire.com/mn3/magnesium/buttonbg.jpg"><font color="#9999ff" size="3" face="arial"><b>&fnof;</b></font></td><td align="left" valign="middle" bgcolor="#282828" width="85%" background="http://www.angelfire.com/mn3/magnesium/buttonbg.jpg" onMouseover="this.background='http://www.angelfire.com/mn3/magnesium/buttonbg2.jpg';" onMouseout="this.background='http://www.angelfire.com/mn3/magnesium/buttonbg.jpg';">

<a href="http://"><font size="3"><b>&nbsp;My Facebook</b></font></a></td></tr></table>

</td></tr></table>
 
</td></tr></table>

</td></tr></table>

</div>

</body>

</html>

Nov 20 '09 #11

Similar topics

by: Jeff Thies | last post by:

I'm trying to do a nav list using list items. Roughly this is putting links styled display: block and with a background color. In IE5 (windows, haven't tried Mac yet), adding the display:...

Finding the value of "TOP" from prior block-containers used

by: TadPole | last post by:

Hi all, My main problems are::::::::: 1. Set a value within a block container that can be used and changed by subsequent templates/block-containers/tables etc.. 2. get/determine/find the...

.NET Framework

cross browser display block none

by: ruby_bestcoder | last post by:

Hi Im having problem in firefox with display:none/block. I have essentially 3 li elements. In each element there are a few nested div:s. Clicking on one of the divs, makes another div to...

Javascript

Display a block of text in Firefox & Safari

by: drew197 | last post by:

I am a newbie. I am editing someone elses code to make it compatible with Firefox and Safari. In IE, when you click on the proper link, a block of text is shown in a nice paragraph form. But, in...

Javascript

display:inline block elements

by: CES | last post by:

All, I was hoping that someone might be able to help me with a few questions on Aligning Block Elements properly... Basically I have a row that has a fixed width of 900px. Within the row their is...

problem display:none/block divs via JavaScript

by: cssExp | last post by:

hello, Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out,...

Javascript

IE 7 bug: declared width for table cell wrongly affects inner block

by: Jukka K. Korpela | last post by:

Sub titulo "Re: DIV borders different in IE7 when in td" scripsit Ben C: This seems to be the heart of the matter, and I'm trying to get a real discussion started, by moving the discussion to...

Margin-bottom of last child in overflowed block is not rendered

by: GTalbot | last post by:

Hello fellow authoring.stylesheets colleagues, Can someone please explain why the bottom margin of the last inflow block-level child in an overflowed parent should not have its margin reachable....