|
CSS - Simple Css Problem (hopefully) With Tables And Rollovers...
I'm trying to create a very simple navbar with css rollovers. I made one based on a tutorial on the macromedia website but it's not quite right (in Internet Explorer anyway)
If you have a look here you can see what I want it to look like: http://www.eveythingfree.buildtolea...ieds/index2.php Now here is my attempt: http://www.eveythingfree.buildtolea.../whynotwork.php It looks fine in Mozilla but in IE the right hand side of the table doesn't exist (there is no 1 pixel black line). What have I done wrong? Heres the css properties: Code: .button a {
background-color: #e9e9e9;
border: 1px solid #333333;
display: block;
text-decoration: none;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
}
.button a:hover {
background-color: #DDDDDD;
border: 1px solid #333333;
color: #CC0000;
text-decoration: none
}
Can anyone spot it? Unlike in the design I'm trying to replicate, I want to have 1px lines dividing the links. This works in the 2nd example except for the problem on the right. I really hope someone can shed some light on all this. Thanks in advance, Robert Similar TutorialsHi Everyone. Apologies if this problem has been posted before or if it's simple - I'm very new to CSS! I'm having some problems inheriting text size from a class in a table. I have a table that inherits from a class (clsRoundCornersTable below) that specifies that text size should be 12px. This works fine except when I have another table defined within my original table which has text at the default size. I'm assuming that my sub table is not inheriting from the parent but instead is using the <TABLE> definition below but I thought that text size would filter down. Can anyone help???? TABLE { border-width:0px; border-style:solid; width:100%; text-align:left; } TR { border-width:0px; border-style:solid; } TH { vertical-align:top; border-width:0px; border-style:solid; } TD { vertical-align:top; border-width:0px; border-style:solid; } .clsRoundCornersTable { border:0px; padding:0px 0px 0px 0px; width:100%; background-color:whitesmoke; font-size:12px; } Im trying to create a page with a side bar, (http://xidus.ath.cx/blog/moot) with this style sheet Code:
.centery {
position: absolute;
background: #ffffff;
}
.right {
position: absolute;
right: 20px;
top: 49px;
width: 200px;
background: #ffffff;
border: 1px solid #000000;
}
And i use this code to create the two tables Code: <div class="centery"> blahblah blah[really lots of text]</div> <div clas="right">blahblahblah</div> But if there is too much writing in the center one it will go under the right box, or if the window is resized the text goes under the right box :P Is there some way to prevent this? Thanks Hello there, at the moment I have this CSS which I apply to a table cell by <a class='menulink' href='etc etc' Code: A.menulink {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:link {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:visited {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:active {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:hover {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #000000;
padding: 0px;
}
The problem I have is with the width:138px. If I apply this class to a cell that isn't 138px, it automatically goes that size. And if I delete the width:138px lines, then the class only works when you go over the word, not when you hover over the cell. So does anybody know how to change the CSS so that a width doesn't have to be defined so that I can apply the class to any size cell? Thanks Ok, Here what I need to figure out. I have a set of images on my main page. My Site and then I have a set of images to be over put on top of them with some kind of roll over/over lay. these images look like this Rollover images. on my main page if you hit refresh the photo gallery image is random from a directory. This removes the posablity of static images for that. my current css is at http://www.guthnur.net/style.css. Can anyone tell me how to put my transparent image over a image in the same div? I want to create a menu where when you rollover and option it changes color ... this I've done. The next thing I want is for the active page to stay the rollover color ... how do I do this? Code:
<html>
<head>
<style type="text/css">
#navcontainer { width: 200px; }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #329CAA;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #99D041;
color: #fff;
}
</style>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="200"> <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div></td>
<td> </td>
</tr>
</table>
</body>
</html>
I got most of this code from: http://css.maxdesign.com.au/listamatic/vertical08.htm delete I recently found out that you can use CSS to do rollover images. And I thought, thats much better than DHTML/javascript/whichever your preference to call it is for rollovers, but my question is, if there is a way to use CSS for a transition out image. Like, say for example the image is of outlined text by default, the user mouses over the image and the text will slowly fill with orange, and then when the user mouses off of the image, the orage in the outlined text fades out. That's easily done with javascript, but I'm not sure if its possible to do with CSS. Is it? Thanks in advance. how can I do a CSS rollover like the rollover that is on amazon.com? for example when you rollover an image and a box shows up with links and a search box. how is that done? is that with CSS layers? if so, how do you go about doing something like that? link: amazon example i have nested tables but table inside is inheriting properties from table outside. i have written classes for both tables in css and i dnt want inside table to inherit. what can i do? I'm using what seems to be called a "liquid two column" CSS layout. Its a main column of 100% width left padding the width of the side bar. In the main column, I need to use table, but I'm stumpt on how to insure it doesn't extend beyond the right edge of the main column div. Can this be done? Since the side column is 200px, the main column has a left margin of 200px. So this means a table with a width of 100% actually extends 200px past the right edge of the main column. Playing with the right margin of the table seems to be the right direction, but just not sure how to make the table fill the space right, and work the same in bot FF and IE. Any ideas? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
#container
{
width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#leftnav
{
float: left;
width: 250px;
margin: 0;
padding: .5em;
}
#content
{
margin-left: 250px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#leftnav p { margin: 0 0 1em 0; }
.testTable {
border: 1px solid gray;
margin-right: -283;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="leftnav">
<p>
Side Column
</p>
</div>
<div id="content">
Stuff Here
</p>
<table class="testTable"><tr><td>eeee</td></tr></table>
<p>
Stuff Here
</p>
</div>
</div>
</body>
</html>
[edit] The purpose of the table will be to display row data from a DB. I have a problem with positioning elements on a page. It is no problem to position everything (text, header, logo's, banners) but somehow the div or table that contains the content of page does not grow when the contents do (it's the div/table with the white background). It is no problem to position everything exactly including the background table but then when the text grows longer the table or div ( I tried both and both give the same problem ) does not grow longer so part of the text is not readable anymore. Wierd thing is that when I only give the main div positions and not the text and images the div will adapt to it's contents but then I can't position my header as I want to. The page is located here and the css is attached to this post as a txt file. What did I overlook? I've searched the internet but I can't find anything. I followed the instructions he http://www.meyerweb.com/eric/css/edge/popups/demo.html but they "only" work in mozilla, konqueror, opera... http://new.lfcompany.com/design.php what gives? Hello all I'm putting together a site and would like to make my HTML pages use an external style sheet (the site's pages will have exactly the same content and button links at the top 1/4 of the page). I am unsure how to get my rollovers to work using a style sheet. Currently, my HTML has an internal script that does the job... Is it possible to set my rollovers in the external style sheet, thus allowing me to have that content easily updated for all pages on the site? I know this is a fundamental CSS question but bear with me, I'm still learning the code, thanks! Even if I can code one of the buttons to have the rollover in CSS, I could do the rest. Here is my code that works for HTML; it needs to be transferred to CSS as a base style sheet... can it be done? Thanks in advance! Code: <html>
<head>
<title>MY SITE EXAMPLE</title>
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
homeon= new Image(98,40);
homeon.src="images/b-home-on.jpg";
aboutuson= new Image(98,40);
aboutuson.src="images/b-aboutus-on.jpg";
productson= new Image(98,40);
productson.src="images/b-products-on.jpg";
servsuppon= new Image(98,40);
servsuppon.src="images/b-servsupp-on.jpg";
downloadson= new Image(98,40);
downloadson.src="images/b-downloads-on.jpg";
custinqon= new Image(98,40);
custinqon.src="images/b-custinq-on.jpg";
dealerinqon= new Image(98,40);
dealerinqon.src="images/b-dealerinq-on.jpg";
contacton= new Image(98,40);
contacton.src="images/b-contact-on.jpg";
homeoff= new Image(98,40);
homeoff.src="images/b-home.jpg";
aboutusoff= new Image(98,40);
aboutusoff.src="images/b-aboutus.jpg";
productsoff= new Image(98,40);
productsoff.src="images/b-products.jpg";
servsuppoff= new Image(98,40);
servsuppoff.src="images/b-servsupp.jpg";
downloadsoff= new Image(98,40);
downloadsoff.src="images/b-downloads.jpg";
custinqoff= new Image(98,40);
custinqoff.src="images/b-custinq.jpg";
dealerinqoff= new Image(98,40);
dealerinqoff.src="images/b-dealerinq.jpg";
contactoff= new Image(98,40);
contactoff.src="images/b-contact.jpg";
}
function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}
function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
//-->
</SCRIPT>
</head>
<body bgcolor="#000000" background="images/bglines.jpg" text="000000" topmargin="0">
<font face="Arial, Helvetica, Sans-Serif">
<center>
<table border="0" cellspacing="0" cellpadding="0" width="784">
<tr>
<td bgcolor="FFFFFF">
<table border="0" bgcolor="FFFFFF" cellspacing="0" cellpadding="0">
<tr>
<td width="784" height="150" background="images/gb-top-bar.jpg">
</td>
</tr>
<tr>
<td width="784" height="40" border="0" cellspacing="0" cellpadding="0">
<a href="index.htm" onMouseover="lightup('home')" onMouseout="turnoff('home')"><img src="images/b-home.jpg" name="home" width="98" height="40" border="0"></a><a href="aboutus.htm" onMouseover="lightup('aboutus')" onMouseout="turnoff('aboutus')"><img src="images/b-aboutus.jpg" name="aboutus" width="98" height="40" border="0"></a><a href="products.htm" onMouseover="lightup('products')" onMouseout="turnoff('products')"><img src="images/b-products.jpg" name="products" width="98" height="40" border="0"></a><a href="support.htm" onMouseover="lightup('servsupp')" onMouseout="turnoff('servsupp')"><img src="images/b-servsupp.jpg" name="servsupp" width="98" height="40" border="0"></a><a href="downloads.htm" onMouseover="lightup('downloads')" onMouseout="turnoff('downloads')"><img src="images/b-downloads.jpg" name="downloads" width="98" height="40" border="0"></a><a href="custinq.htm" onMouseover="lightup('custinq')" onMouseout="turnoff('custinq')"><img src="images/b-custinq.jpg" name="custinq" width="98" height="40" border="0"></a><a href="dealerinq.htm" onMouseover="lightup('dealerinq')" onMouseout="turnoff('dealerinq')"><img src="images/b-dealerinq.jpg" name="dealerinq" width="98" height="40" border="0"></a><a href="contact.htm" onMouseover="lightup('contact')" onMouseout="turnoff('contact')"><img src="images/b-contact.jpg" name="contact" width="98" height="40" border="0"></a>
</td>
</tr>
<tr>
</table>
<table>
<tr width="784">
<td width="392"><font size="1"><a href="dealerlocator.htm">Find a dealer near you!</a>
</td>
<td width="392" align="right"><font size="1">
<font size="2">
<SCRIPT>
document.write(Date())
</SCRIPT>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Hi, I have the following CSS code:
Code: a.HomeBN{
background: url('../images/common/nav/btn_home.gif');
width:62px;
height:42px;
}
a.HomeBN:hover{
background: url('../images/common/nav/btn_home_hover.gif');
width:62px;
height:42px;
}
then on my page, I have the following: Code: <a class="HomeBn" href="index.php"></a> The problem is that the home button does not appear at all. what am I doing wrong? thanks Hi, Now that the Information bar in IE blocks script from running, my usual Fireworks rollovers always produce the error. I have heard CSS is a good alternative. The code below shows how i have 5 images with links. These are what i would like to be rollovers. Could anyone give me some help on this? Cheers. Code:
<tr>
<td><img name="index_r2_c1" src="images/index_r2_c1.gif" width="7" height="30" border="0" alt=""></td>
<td><a href="index.htm"><img src="images/index_r2_c2.gif" width="82" height="30" border="0" class="rollover"></a></td>
<td><img name="index_r2_c3" src="images/index_r2_c3.gif" width="22" height="30" border="0" alt=""></td>
<td><a href="about.htm"><img name="index_r2_c4" src="images/index_r2_c4.gif" width="128" height="30" border="0" alt=""></a></td>
<td><img name="index_r2_c5" src="images/index_r2_c5.gif" width="24" height="30" border="0" alt=""></td>
<td><a href="catalogue.htm"><img name="index_r2_c6" src="images/index_r2_c6.gif" width="150" height="30" border="0" alt=""></a></td>
<td><img name="index_r2_c7" src="images/index_r2_c7.gif" width="15" height="30" border="0" alt=""></td>
<td><a href="order.htm"><img name="index_r2_c8" src="images/index_r2_c8.gif" width="92" height="30" border="0" alt=""></a></td>
<td><img name="index_r2_c9" src="images/index_r2_c9.gif" width="15" height="30" border="0" alt=""></td>
<td><a href="contact.htm"><img name="index_r2_c10" src="images/index_r2_c10.gif" width="121" height="30" border="0" alt=""></a></td>
<td rowspan="2" colspan="2"><img name="index_r2_c11" src="images/index_r2_c11.gif" width="144" height="44" border="0" alt=""></td>
</tr>
Hi all, I've got a simple menu where the buttons are all in HTML text, but I want to put a rollover image behind them - is this possible? Cheers. I'm trying to get my buttons to rollover using a single image and change the background position on a:hover... and I'm having a bitch of a time figuring out why they're not working. I'm building them almost exactly how I always do, but I can't for the life of me see what's going wrong here. Hoping somebody can take a peek at my code and tell me what I did wrong here... http://www.crackin.com/dev/index.html Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Melt Away Massage</title>
<style type="text/css">
<!--
body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #000;}
body {margin: 0px; background: url(images/pageBg.jpg) no-repeat center top fixed #fff;}
img {margin:0px; padding:0px; border:none;}
.float img, .float div {float:left;}
.clear {clear:both; height:0px;}
#nav1 div {width:223px; height:98px; margin:0 0 13px 10px;}
#nav1 a {display:block; width:100%; height:100%; background-position:left;}
#nav1 a:hover {background-position:right;}
#nav2 div {width:161px; height:34px; position:relative; top:-12px;}
#nav2 img {position:relative; top:-12px;}
#nav2 a {display:block; width:100%; height:100%; background-position:top;}
#nav2 a:hover {background-position:bottom;}
#content_frame {position:relative; top:-12px; margin:0px; padding:0px; height:100%; width:100%; background:url(images/index_bodyBgStretch.jpg) repeat-y;}
#content_subFrame {margin:0px; padding:0px; height:100%; width:100%; background:url(images/index_bodyBgTop.jpg) no-repeat top;}
#footer_wrap {width:100%; height:140px; background:url(images/foot_bg.png) repeat-x; position:relative; margin-top:-133px;}
#footer {min-height:121px; min-width:955px;}
#footer div {position:relative; z-index:10; padding:60px 60px 0;}
-->
</style>
</head>
<body>
<div id="wrapper" style="width:100%;">
<div style="position:absolute; width:100%; height:33px; top:175px; background:#fff;"></div> <!-- SUB TITLE STRIPE -->
<div id="content_wrap" style="width:955px; margin:0 auto;">
<!-- SEARCH BAR -->
<span class="float">
<form style="position:absolute;">
<a href="#"><img src="images/index_01.png" width="129" height="32" /></a>
<div style="width:394px; height:32px; background:#fff;">
<input name="search" type="text" style="margin-top:7px;" /> INSERT DATE CODE
</div>
</form>
<span style="float:right;">
<img src="images/index_02.png" width="432" height="32" />
</span>
</span> <!-- END FLOAT -->
<div class="clear"></div>
<!-- END SEARCH BAR -->
<img src="images/index_03.png" width="955" height="143" /><br /> <!-- MAIN TITLE -->
<img src="images/index_04.png" style="position:relative; left:373px;" /><br /> <!-- SUB TITLE -->
<!-- REDUCED WIDTH CONTENT WRAP -->
<div id="sub-content_wrap" style="width:936px; margin:0 auto;">
<span class="float">
<div style="background:url(images/index_MainImg.jpg); width:703px; height:321px;"></div>
<span id="nav1">
<div><a href="#" style="background:url(images/nav_1services.jpg);"></a></div>
<div><a href="#" style="background:url(images/nav_2rates.jpg);"></a></div>
<div><a href="#" style="background:url(images/nav_3book.jpg);"></a></div>
</span> <!-- END NAV1 -->
<span id="nav2">
<img src="images/index_05.png" />
<div style="width:160px;"><a href="#" style="background:url(images/nav_4new.jpg);"></a></div>
<div><a href="#" style="background:url(images/nav_5specials.jpg);"></a></div>
<div><a href="#" style="background:url(images/nav_6about.jpg);"></a></div>
<div><a href="#" style="background:url(images/nav_7contact.jpg);"></a></div>
<img src="images/index_06.png" />
</span> <!-- END NAV2 -->
</span> <!-- END FLOAT -->
<div class="clear"></div>
<!-- MAIN CONTENT FRAME -->
<div id="content_frame">
<div id="content_subFrame">
<div style="padding:10px; min-height:300px;">
INSERT CONTENT HERE
</div>
</div>
</div>
<!-- END MAIN CONTENT FRAME -->
</div> <!-- END SUB-CONTENT_WRAP -->
<!-- END REDUCED WIDTH CONTENT WRAP -->
</div> <!-- END CONTENT_WRAP -->
<div style="background:url(images/foot_bgMid.jpg); width:955px; height:121px; margin:0 auto; position:relative; top:-12px; z-index:5;"></div> <!-- BODY BASE -->
<div id="footer_wrap">
<div id="footer">
<div style="float:left;">
FOOTER CONTENT GOES HERE
</div>
<div style="float:right;">
FOOTER CONTENT GOES HERE
</div>
</div> <!-- END FOOTER -->
</div> <!-- END FOOTER_WRAP -->
</div> <!-- END WRAPPER -->
</body>
</html>
I have been trying various things all night but I cannot figure it out.... Here is the link to the page in question: http://www.atlantahrd.com/index_new.htm In Safari and IE6 it looks right - horizontal navigaiton bar across the top. In IE/Mac (5.2) the navigation bar just centers itself on the screen and shows up as a vertical list. It is driving me crazy! Can anyone point me in the right direction? Thank you so much! Also, the CSS file is as follows: Code: .Name {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #990000;
}
.Address {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #990000;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #990000;
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
margin-right: 10%;
margin-bottom: 0px;
margin-left: 10%;
}
#logotext {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 32px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
color: #000000;
letter-spacing: 2px;
}
#logotextCaps {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 50px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
color: #000000;
}
#navlist {
font-size: .9em;
position: absolute;
left: 0px;
top: 87px;
margin: 0;
width: 750px;
}
#navlist li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
text-align: center;
}
#navlist ul {
margin: 0;
padding: 0;
}
#navlist a {
padding: 0px 15px 0px 16px;
border: 1px solid;
border-color: #000000;
background-color: #000000;
text-decoration: none;
}
#navlist a:link, #navlist a:visited {
color: #ffffff;
}
#navlist a:hover, #navlist a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
background-color: #ffffff;
color: #000000;
}
#logostripetop {
background-color: #990000;
position:absolute;
left:0;
top:3px;
width:750px;
height:17px;
z-index:1;
visibility: visible;
}
#logostripebottom {
background-color: #990000;
position:absolute;
left:0;
top:60px;
width:750px;
height:17px;
z-index:2;
visibility: visible;
}
#homeresourcebox {
position:absolute;
left:4px;
top:10px;
width:364px;
height:30px;
z-index:3;
visibility: visible;
}
#atlantabox {
position:absolute;
left:45px;
top:7px;
width:85px;
height:24px;
z-index:4;
background-image: url(images/atlanta.gif);
layer-background-image: url(images/atlanta.gif);
border: 1px none #000000;
visibility: visible;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
}
#directorybox {
position:absolute;
left:226px;
top:58px;
width:85px;
height:24px;
z-index:5;
background-image: url(images/directory.gif);
layer-background-image: url(images/directory.gif);
border: 1px none #000000;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
visibility: visible;
}
#leftbox {
position:absolute;
left:0px;
top:125px;
width:150px;
height:300px;
z-index:8;
overflow: visible;
visibility: visible;
}
#centerbox {
position:absolute;
left:160px;
top:125px;
width:460px;
min-height:300px;
z-index:7;
overflow: visible;
visibility: visible;
}
#rightbox {
position:absolute;
left:630px;
top:125px;
width:120px;
text-align:center;
height:300px;
z-index:6;
overflow: visible;
visibility: visible;
}
#copyright {
position:relative;
width:250px;
text-align:center;
height:20px;
margin-top:0;
z-index:9;
visibility: visible;
}
Been toying with this for awhile now and looking at different tutorials but no such luck. What I have so far: http://www.archanix.com/root/ http://www.archanix.com/root/root.css What I need it to look like: It should turn pink when rolled over. Hi, I am facing a problem while viewing tables in Firefox 1.5.0.1. Everything is fine till the number of rows are less than the table height. As soon as it increases the height, the scroll bard donesn't appear. Instead, it overlaps with the rest of the area. It worked fine in the older versions in IE, Mozilla and Firefox. But now it depending on the height, it hides the rest of the user area as it overlaps it. Can anyone help ? Thanks |
|||||||