|
CSS - Horrible, Horrible Css Overflow Problem.
I cannot find the problem. I spent long enough time trying to get a similair look in both IE and FireFox, now I am the closest to it, and there is an overflow problem. It is working in IE, however, FireFox is not displaying it how I want it to be displayed.
http://kingtoad.net/development/eticket/ Similar TutorialsI'm pretty green with CSS (okay, ALL of html ) I used a template from Mollio.org, then modified it, problem is things just dont look right in IE. url: http://www.m87-blackhole.org/foo/ css file: http://www.m87-blackhole.org/foo/css/wushuwest.css js http://www.m87-blackhole.org/foo/js/common.js The biggest problem is the handling of png+transperancy, I added a fix for it in common.js but it doesnt seem to work very well. Also, the head image, in firefox it has a width of 800, which is what I want, but in IE it spans the entire page, how can I fix that? Any ideas, pointers or resources? Thanks, Mike Essentially it lines up correctly but when I view it in firefox it doesn't. How should I tweak my code to make this work? Here is the url: http://www.westcadet.com/designs/index.htm Here is the CSS code snippet that is making this all work Code: /*--------------- Navigation Layout Begin ---------------*/
#HeaderTopLeftInnerRight {
width:618px;
height:100px;
vertical-align:top;
}
#NavMenu {
width:600px;
padding-top:22px;
}
#NavMenu ul {
list-style: none;
margin-left:22px;
}
#NavMenu li {
float: left;
padding-left:8px;
padding-right:8px;
}
#NavMenu li a {
color:#FFFFFF;
text-decoration: none;
}
#NavMenu li a:hover {
color:#EB2A2D;
}
.NavChosen {
background-color: #858181;
color:#FFFFFF;
}
Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue. The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up. If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is: http://www.favillephoto.com/new website/index.html I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there. Thanks in advance for your help. This is the css file for my index page: Code: body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 760px;
height: 2040px;
padding: 20px;
background: #FFFFFF url('images/img07.gif') no-repeat left bottom;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
height: 2070px;
padding-top: 10px;
padding-right: 10px;
background: #ffffff url('images/img07a.gif') no-repeat right bottom;
}
#sidebar a {
color: #dddddd;
}
#sidebar a:hover {
color: #999999;
text-decoration: underline;
}
#sidebar ul {
margin-left: 0;
padding-left: 0;
list-style: none;
font-size: 92%;
}
#sidebar ul li {
background: url('images/img13.gif') no-repeat 0px 12px;
border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px
}
#sidebar ul li.first {
border: none;
}
#sidebar ul li h2 {
margin: 0;
font-size: 100%;
}
#sidebar ul li h3 {
margin: 0;
font-size: 92%;
}
#sidebar ul li p {
color: #dddddd;
margin: 0;
}
#sidebar p {
color: #dddddd;
margin: 0;
font-size: 92%;
}
.boxed {
margin-bottom: 10px;
background: #113c5c url('images/img10.gif') no-repeat left bottom;
}
.boxed .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxed .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
.boxedPrintoftheMonth {
margin-left: -790px;
background: #113c5c url('images/img10PotM.gif') no-repeat left bottom;
}
.boxedPrintoftheMonth .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08PotM.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxedPrintoftheMonth .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
This is the css for the rest of my pages: Code:
body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
img.left1 {
float: left;
margin: 0 70px 0 70px;
}
img.right1 {
float: right;
margin: 0 70px 0 70px;
}
img.left2 {
float: left;
margin: 20px 100px 20px 100px;
}
img.right2 {
float: right;
margin: 30px 120px 20px 120px;
}
img.left3 {
float: left;
margin: 0 110px 0 110px;
}
img.right3 {
float: right;
margin: 20px 60px 0 60px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 990px;
padding: 20px;
background: #FFFFFF url('images/img07b.gif') no-repeat left bottom;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
Hi everyone, I am having a problem with the 'overflow' property in Internet Explorer6. I am working on an image slide show.The images are displayed in two divs whose CSS is as follows: #imageBox { margin: auto; width: 450px; border: 1px #000 solid; overflow: hidden; height:90px; z-index:500;} #imageBoxInside { width: 10000px; height:90px;float:left;overflow:hidden; z-index:200; } #imageBox img { float: left; padding: 0px; margin: 0px; } #imageBox br { clear: both; } In mozilla firefox it is working perfectly. But in IE6 the 'overflow' property doesn't work . Please help. This is most likely a well documented problem, but I can't seem to find information on it. The site I'm building looks very nice in Firefox, but in IE6 my thumbnail gallery flows outside its container and overlaps everything and there is a scrool bar, but it does nothing. For pages with text inside the scroll, instead of the thumbs, it works fine. See it for yourself: http://brucethorn.com/php/index.php/paintings << bad http://brucethorn.com/php/index.php/resume << good Also, some odd but subtel things happen in Opera and the thumbsnails don't float right/borders cut off on one side/gaps etc, but it is not devistating. The filmunits(thumbs) are inside "scroll" which is inside "content." The relevant(I hope) CSS is below: div.scroll {height:344px; width:800px; margin:8px 0px 8px 0px; overflow:auto;} div.content {height:392px; width:800px; margin:auto; text-align:center;} #filmunit {height:128px; width:128px; border:4px solid black; margin:8px; float:left; position:relative; overflow:hidden;} #filmunit[id] {display:table; position:static;} #filmsub {position:absolute; top:50%;} #filmsub[id] {display:table-cell; vertical-align:middle; text-align:center; position:static;} #filmimage {position:relative; top:-50%;} #filmimage[id] {position:static; top:-50%;} Thank you! Can anyone give me a lead as to where to start fixing the job IE6 is displaying my website? It looks ok in IEmac, safari, firefox, opera and netscape. My style sheet validates, and the xhtml for the page is valid with exception of the php counter within the div on the side, yet I took that out and tested and the same results occurred in IE6. Any help is greatly appreciated. url = bluewebpages.com EDIT: side menu, with addition of 'height:15px' to the #side ul li a, should display fine when i upload the changed css file, but the posts still display out of whack... Hello, I have a basic test page with 3 boxes ( http://www.pages4u.net/css/overflow.html ). Firefox renders my page as I want but IE makes it very different way. How can I correct the IE version? Thanks in advance! Please look at the site I'm designing for my friend he http://www.vpntunnel.net/newsite/ http://www.vpntunnel.net/newsite/css/general.css Notice how #content is running over the specified width, well outside the #container, even. This is noticeable with h1 on the homepage and on the FAQ page. I'm not quite sure what's causing it. Also, if someone could help me center the page in IE, that'd be great. I'd rather not use text-align: center; in the body. My CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } I am trying to make a realy simple CSS menu but I came across a stupid thing. When I try to do a click on one of the submenus the whole menu shifts to the right. This is dumb because the ul has a padding of 1em. Why is it behaving this way when overflow is set to hidden in FFox ? Is there a workaround or a solution ? But here is the menu page. The CSS is in the source but I will also post it here. Page Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<style type="text/css">
#mainnav{
line-height: 1.33;
background: #CCC;
margin: 0;
padding: 0;
vertical-align: top;
/*This is the problem in FF*/
overflow: hidden;
/*If overflow is Hidden then FF shifts the submenu and the main menu to the right (1em)*/
width: 183px;
border: thin red dashed;
}
#mainnav ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
width: 100%;
}
#mainnav li{
font-size: 90%;
margin: 0;
padding: 0;
width: 100%;
}
#mainnav ul ul, #mainnav ul ul ul{
/*The left margin*/
margin: 0 0 0 1em;
padding: 0;
}
#mainnav li a{
color: #000051;
text-decoration: none;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
#mainnav ul li a{
padding: 0.8em 0.5em 0.8em 1em;
border-bottom: 1px solid #333;
}
#mainnav ul li a:hover{
background-color: #C0C090;
padding: 0.8em 0.5em 0.8em 1em;
border-bottom: 1px solid #333;
}
#mainnav ul ul li a, #mainnav ul ul ul li a{
padding: 0.2em 0.5em 0.5em;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
}
#mainnav ul ul li a:hover, #mainnav ul ul ul li a:hover{
background-color: #C0C090;
padding: 0.2em 0.5em 0.5em;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
}
#mainnav .navsectionhead{
color: #FFFFFF;
text-decoration: none;
background-color: #3D556B;
display: block;
margin: -2px 0 0;
width: 100%;
}
#mainnav .subnavsectionhead{
color: #FFFFFF;
text-decoration: none;
background-color: #9A9A73;
display: block;
margin: -2px 0 0;
width: 100%;
}
#mainnav li .navsectionhead a{
color: #CDCD9A;
text-decoration: none;
background-color: #3D566C;
display: block;
margin: 0;
width: 100%;
}
#mainnav li .navsectionhead a:hover{
color: #FFFFFF;
background-color: #466580;
}
#mainnav ul .here{
color: #FFFFFF;
text-decoration: none;
background-color: #3D556B;
display: block;
margin: -2px 0 0;
padding: 0.8em 0.5em 0.8em 1em;
width: 100%;
border: none;
}
#mainnav ul ul .here{
color: #FFFFFF;
background-color: #333333;
display: block;
margin: -2px 0 0;
padding: 0.2em 0.5em 0.5em;
width: 100%;
}
html>body #mainnav li a, html>body #mainnav .navsectionhead, html>body #mainnav .subnavsectionhead, html>body #mainnav .subnavsectionhead a,
html>body #mainnav ul .here,
html>body #mainnav ul ul .here, html>body #mainnav ul ul ul .here{
width: auto;
}
</style>
</head>
<body>
<div id="mainnav">
<ul>
<li><a href="">:: Home</a></li>
<li><span class="navsectionhead"><a href="Gallery.php">:: Gallery</a></span>
<ul>
<li><a href="">> Sept 2005</a></li>
<li><a href="">> Oct 2005</a></li>
<li><a href="">> Nov 2005</a>
</ul>
</li>
<li><a href="">:: Download</a></li>
<li><a href="">:: School Related Info</a></li>
<li><a href="">:: Shoutbox</a></li>
<li><a href="">:: About</a></li>
</ul>
</div>
</body>
</html>
Thank you in advance. I'm having some very bizarre display issues with some styled lists on one of my pages in internet explorer. It's displaying fine in Firefox and Safari, however. Any help or insight would be greatly appreciated: http://dev.lotusguild.info/roster/manage The background isn't cover the list properly and selected list items seem to float in place while the rest of the list scrolls. Thank you in advance! Hi again, Can anyone let me know if they have encountered this problem before. Its caused me around 12hrs of headaches so far.. The problem is that in Firefox this works perfectly, but in IE7 i cannot get it to be 100% of the browser window, it always takes 100% of the gif image. A good test is with a browser window of 800x600 If I change class test to fixed width for example width:614; instead of width:100%; then it seems to work perfectly again. Many thanks in advance. G. -----SNIP <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> .test { z-index:1; width:100%; overflow: auto; } </style> </HEAD> <BODY> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td><img src="(URL address blocked: See forum rules)" width="169"></td> <td width="100%"> <div class="test"> <table><tr><td><img src="(URL address blocked: See forum rules)"></td></tr></table> </div> </td> <td><img src="(URL address blocked: See forum rules)" width="169"></td> </tr> </table> </BODY> </HTML> ------- I see my images have been removed, the two outer cells are just a 169 wide spacer The inner image was 850 wide, just add any image of this size to try. Thanks again. G hi the following img will help u understand the layout of my page. my page content is in <td id="cont"> my links are in <div id="scroll"> i have got several links in that div and i made the div scrollable with the following code. Code: <table id="tab"><tr> <td id="iframe"> <div id="scroll"> <ul> %%links%% </ul> </div> </td> <td id="cont">%%content%%</td> </tr></table> Code: #tab{width: 100%;}
#iframe{width: 25%;
vertical-align: top;
padding-top: 3em;
}
/* only for ie */
* html #scroll{overflow: auto;
width: auto;
height: 100%;
text-align: left;
}
/* only for firefox */
#scroll{overflow:auto;
width: auto;
height: auto;
text-align: left;
}
#cont{width: 75%;
height: 100%;
vertical-align: top;
text-align: center;
padding: 2em;
}
my links <div> is scrollable in ie but not in firefox. in firefox i see all the links with no scrollbar. i know i would get a scrollbar in firefox if i say height:400px; instead of height: auto; but that's the problem. i want the height of <div id="scroll"> to depend on <td id="cont">. that means the height of the scrollable links should depend upon the height of the content. thank you I have a division containing an object for which I would like scrollbars to appear when (and only when) needed... to do this I have set "overflow: auto" ... and it works as desired -- everywhere except Internet Explorer for Windows... in that browser the scrollbars always appear no matter how small the object. the relevant segment: <div style="float:left; margin-top:1em; width:220; height: 220; overflow:auto;"> <object style=" overflow:auto;" data="/danceFeed.php?$getString" type="text/html" width=220 height=219 ;> Set your location defaults to display local events automatically</a> </object> </div> I have also tried "overflow:hidden" & "overflow: visible" (in both places); omitting it in the object; adding "overflow:hidden" to the page body (as recommended by at least one "bug site") and trying variations on the size of the object relative to the containing div. No luck. The border of the object is clearly visible, so when the object is smaller than the available space, the (unneeded) scrollbar extends well below the bottom of the object... any ideas for a work around? hi guys, i was wonering if it was possible to do the following: Say i have three columns, and i want to list category names (dynamically from a database). how would I make it so the first 'column' would stay at a fixed height and forward the next category name into the top of the next column? I know this is an odd question. ebay has a working example of what I'm trying to achieve here. if you view all categories you will see they have 3 columns, and the categories flow through each of the three. i have a feeling the solution to this might be quite easy, but i just haven't found it. anyone know how to do this? (sorry posted to wrong forum) I'm having a little trouble with the Overflow attribute on my side scrolling website. I have uploaded 2 versions one and two of the same site, one with
Code: overflow:hidden; overflow-x:visible; and one with just. Code: overflow:hidden; the first one is completely static in safari and won't scroll at all but scrolls really nicely in firefox (with a scroll wheel as there are no scroll bars). The second one has a horizontal scroll bar but goes really wierd and starts scrolling horizontally as well which I don't want to happen as it messes up my site. Is there a way to get the site to scroll horizontally without scrolling vertically? I have tried it both this way and by only using Code: overflow-y:hidden; but it has similar results. Any help on this would be greatly appreciated Hi, I'm new to CSS (and Javascript) and am wondering how to fix a <div> overflow on my site (www.logicland.co.uk). here is my CSS code: Quote: /* Font CSS */ body { font-family: Arial, Helvetica, sans-serif; } #footer { font-size: 11px; } /* Layout CSS */ body { padding: 0px; margin: 0px; background-color: #D0DFEF; } #container { margin: 10px; border: 1px solid white; background-color: #6699FF; } #header { padding: 1px 7px 1px 7px; border-bottom: 1px solid white; height: 60px; background-color: #6C86DC; } #columnA { width: 150px; position: relative; float: left; padding: 5px; } #columnB { margin-left: 160px; margin-right: 160px; padding: 10px; border-left: 1px solid white; border-right: 1px solid white; background-color: #CCD5F2; } #columnC { width: 150px; position: relative; float: right; padding: 5px; } #footer { padding: 1px 3px 1px 3px; border-top: 1px solid white; text-align: right; background-color: #DDE3FF; } Is there simply a property I can change to cause the right <div> to push the footer down like the middle column does. Any info would be great. Cheers, BuckRogers01 My layout is not liquid. everything is fixed position. If the veiwer adjusts his text size in his browser then part of the content text in the div's will be pushed out of sight because {overflow:hidden;} has me covered. How do I get the content in the div to become scrollable in this case? I don't know if it's possible but I don't really want to have scroll bars on my div's UNLESS the user adjusts text size and forces it to happen. Can this be done and if so any Ideas on how to do it? Hi, Please use Firefox and look at: https://67.18.220.222/~duoboots/secure/test_start.php Only on Firefox do I see scrollbars on the right white box. The white box is fixed width, and is supposed to expand vertically with the content. However, the white box does not expand as much as I'd like to. Eventually, as the content gets bigger, Firefox displays unwanted scroll bars. Then, if I simply press 'Refresh'... the scroll bars disappear, and Firefox displays the page exactly how I want it! Its really wierd because I can't test this properly. Once the page is refreshed, there are no scroll bars. But, a general user won't press Refresh..and will end up at that page eventually, to find unwanted scroll bars. I've tried it on Opera, and a friend said its definitely a Firefox bug. I am sure the <table> is causing the problem - because all other pages display fine. The scroll bars are only appearing on this particular page, with a <table>. Note : if you do not see scrollbars... then thats not a surprise, because Firefox is acting strange on this one.... I mainly see the scroll bars after signing in and accessing the actual PHP page that is dynamically generated. The above link is just a static version whose code I copied and pasted. Anyway, if anyone has had any similar problems with tables and overflow-scrollbars.. please could you let me know what you did about it? Some CSS: Code:
table.oa_results {
border: 1px solid #C9AA90;
border-collapse: collapse;
width: 310px;
}
table.oa_results td {
border: 1px inset #C9AA90;
padding: 2px 2px 2px 4px;
}
table.oa_results th {
border: 1px inset #C9AA90;
padding: 2px 4px;
font-weight: bold;
text-align: left;
}
.whitebox_general_oa {
width: 387px;
background: #FFFFFF;
line-height: 18px;
overflow:visible;
display: block;
clear: both;
}
Thanks very much! |
|||||||