Hello DP, I have an issue with the following page (http://puddle.info/issue/), I need the full tab to be clickable, but it cant be because of the padding I have put on the hyperlinks. Is there anyway that the hyperlink is still clickable as well as making the whole containing tab clickable + keep the text padded to where it is? (Ps if so could it also work in IE ) Thank you very much for any help!!!! Tearing my hair out over this
First of all you need a doctype to your pages. I would recommend either xhtml 1.0 transitional or html 4.01 The problem was that your margins made the text where you wanted but also voided all links in the margin space. If you really want it where the text is still at the bottom and the whole tab clickable you could use a crude method of using an onclick on the entire tab. I am still working on it and these are just my few suggestions. You can keep my code or just take my suggestion. Either works Hope this helps. Note that this code makes the entire tab clickable but it doesn't make the text where you want it. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="http://puddle.info/issue/" /> <style type="text/css"> /*<![CDATA[*/ * { margin:0; padding:0; } #tabsContainer{ background-image:url("backgroundLine.gif"); background-repeat:repeat-x; float:left; height:44px; left:75px; position:relative; top:51px; width:744px; } #tab1{ background-image:url("tab1.jpg"); width:240px; margin-left:28px; } #tab2{ background-image:url("tab2.jpg"); width:233px; } #tab3{ background-image:url("tab3.jpg"); width:208px; } #tab1, #tab2, #tab3{ float:left; height:43px; position:relative; display:inline; } #tab1 a{ width:100%; height:100%; color:#616161; } #tab2 a{ width:233px; color:#ffffff; } #tab3 a{ width:208px; color:#f3f3f3; } #tab1 a, #tab2 a, #tab3 a{ height:43px; position:relative; float:left; text-decoration:none; font-family:Calibri; font-weight:bold; font-size:20px; } /*]]>*/ </style> <title></title> </head> <body> <div id="tabsContainer"> <div id="tab1"><a href="" title="">Link 1</a></div> <div id="tab2"><a href="" title="">Link 2</a></div> <div id="tab3"><a href="" title="">Link 3</a></div> </div> </body> </html> Code (markup): ~eric
try making the link the same size as the div and without margins. then just adjust the line-height and text-indent to bring the text to the middle a bit, i.e.: #tab1 a, #tab2 a, #tab3 a { float:left; font-family:Calibri; font-size:20px; font-weight:bold; height:43px; width:100%; position:relative; text-decoration:none; text-indent:36px; line-height:50px; } Code (markup): just remove all the width and margin declarations from the individual link definitions, but keep the color declarations. you can change the values of the text-indent and line-height to whatever you feel btw. also, i haven't tested this in ie, just firefox; but i'm hopeful that it works. hope that helps a bit. edit: i spaced out a bit while writing this and didn't see eric's post
Thats quite all right. You basically said what I said. Well bad news. There is no way to move the text down (as far as I know anyway) without margins or padding and doing them causes there to be blank link space. I would keep the code as it is and just do an onclick event on the entire tab(s). If someone has javascript enabled then it is what you wanted. If not then they still have a majority of the tab they can click. ~eric edit: A way you can improve the size of the link space on the tab would be to increase the font size. Even a little can make a big difference. Also try taking up the margin-top and margin-left one or two pixels. Still looks great and theres even more link space.
This works great - but not in ie 6 - is there anything that can be done to fix ie 6? Thankyou very much