|
CSS - Strangest Css Problem I've Seen... Firefox Bug? Tables, Scrollbars, Overflow
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! Similar TutorialsI am working on a site with some simple CSS, and working with Firefox as a testing browser for the first time. The site layout has the main content in a 640px DIV that is centered in the browser. I had been driven crazy by what I thought was a bug in my coding, where certain pages would "shift" several pixels to the left. The problem only occurred in FF, not IE6. It wasn't until several possibilities were exhausted that I realized the problem was the scrollbars in FF. The CSS has the following: Code: div {position:relative;margin:auto;width:640px;background-color:orange;text-align:center;clear:both}
Because the margin is set to AUTO, it is centered within 100% of the browser window. When there is no vertical scrollbar, there's no problem. But when that vert scrollbar appears it takes up real estate in the FF window, pushing the centered DIV to the left. Is there a solution for this? I know most of the world uses IE, but I use FF and my sincere hope is that the rest of the world follows. Hi everyone. I recently redesigned my website and while it looks great in firefox, I'm having huge problems in IE 6.0. I have several pages with >50 thumbnails, and whenever these pages load in IE, scrollbars appear to the right and bottom of the div and quickly move by themselves to the upper left hand corner of the screen as the thumbnails load, shrinking the content into a little box of nothing in the upper left hand corner. The link to the site is in my profile, I am not allowed to post a url here since I'm new. The main page of the site is fine, but any of the links at the left will cause the problem because of all the thumbnails. I have been using "Group Photos" as the page to test. I am still a newbie at CSS and got this template for free and have tweaked it a bit. It came with an IE hack ("fix.css") that maybe isn't working properly. This is the IE hack: Code:
html
{overflow:hidden;}
body
{height:100%; width:100%; overflow:auto;}
Here is the relevant code from my main stylesheet ("eyecandy.css"): Code:
#sidebar
{position:absolute; top:0; left:0; width:220px; height:100%; overflow:auto; background:#e0e0e0; text-align:right;}
body > #sidebar
{position:fixed;}
#menu a
{display:block; width:202px; padding:2px 18px 3px 0; color:#606060; background:#e0e0e0; font-size:1.1em; font-weight:normal; text-decoration:none; letter-spacing:-1px;}
#content
{width:685px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}
Can anyone help? I hate I can't even post a link to the site directly or even the css file to make it easier. Both the CSS files I named are in the parent directory if you want to see them. 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 Hi, I'm using a Mambo system but creating the template at the moment. All was fine until I had to use a Mambo menu and style a particular menu icon. i.e. a selected menu icon is marked: <a.... class="mainlevel" id="active_menu" >my link</a> So I used the following style to highlight this: Code:
a#active_menu.mainlevel {
background: #9595C9;
color: #FFFFFF;
}
It works - but, here's the strange part: I copied and pasted all my HTML into a "z.html" file to make this as easy to debug as possible. Here it is: http://www.pip.lk/z.html - If I view that with IE 6.0, the Newsletter link (bottom left) is supposed to be highlighted but it isn't. http://jaysonsgroup.com/zpip/z.html - The same EXACT html file, just on a different account within the same server. The html file even references the same URL of the original site above, so both html files share the same stylesheet. This, on IE, highlights the newsletter link correctly. It can't be a style problem, can it? It works on one account, it doens't on another. If - for some reason - you CAN see the newsletter link highlighted on this page: http://www.pip.lk/z.html - then there's obviously something wrong with my own machine and not the site itself. Please let me know. Thanks very much! Is there a method or property which will tell me if the above div has visable scrollbars? I need to resize some elements based on whether the scroll bars are visable or not. I don't want to have them visable all the time, only if needed. 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 The site I am working now has a discussion group. Sometimes someone will post a pic and the thread will break the 955px boundary of the wrapper. In Firefox, what happens is the thread will leave the wrapper. In IE, the thread makes the wrapper expand. In an ideal world I'd have all images resized or not even limit myself to a 955px width, but this won't work with this site... I'd like to know if it is possible to make the thread div leave the wrapper in tact at 955px like it does in Firefox. Thanks in advance :} I have a div that I have set the overflow property to auto - enabling scroll bars when the content is longer then the fixed size of the div. This doesn't seem to work in Safari, or and older version of Firefox. I could use overflow: scroll, but then there is a scroll bar when the content doesn't overflow. Is there any clever fix for this? Cheers, whiteatom Hi There all, I've got this problem with a overflow div tag. I've tried just about everything possible. Easy way of saying it, I want a content box that is basically form 80px of the page down to the bottom of the browser. This "content box will be scrollable, but i want a menu to be the top 80 pixels of the page. EDIT: IE just does the content in the full page! Here's sample here of my small css: Code: <style type='text/css'>
#content {
top: 75px;
bottom: 0px;
width: 100%;
position: absolute;
overflow: auto;
}
</style>
Thanks in advance! James Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers? Check this out: Test Page. It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred. Thanks, Darin Hi, I have faced a strange issue with the CSS overflow property while using nested DIVs.The DIV with class main has the DIV main-1a as its child which in turn has the DIV with class main-1a-child as its child. As the height of main is not fixed, so it is supposed to increase with main-1a and main-1a-child. But in Mozila FireFox, the height of main is not getting increased with the child DIVs. When the overflow property is set to hidden in main, then only the height of main gets increased with its childs. The issue is fine in IE6 regardless of the overflow property. Any help/explanation in this regard will be very helpful. <html> <head> <title>My Page</title> <style type="text/css"> .main { position:relative; width:800px; display:block; border:1px solid #000000; margin:auto; padding:10px 10px 10px 10px; background:#BABB99; height:100%; overflow:hidden; } .main-1a { width:780px; float:left; background:#FFFFFF; border:1px solid #FF0000; padding:10px 10px 10px 10px; } .main-1a-child { width:760px; float:left; border:1px solid #000000; padding:10px 10px 10px 10px; background:#BABB99; } </style> </head> <body> <div class="main"> <div class="main-1a"> <div class="main-1a-child"> <p>text of div1 a2</p> <p>snkjkjsd</p> <p>snkjkjsd</p> <p>snkjkjsd</p> </div> </div> </div> </body> </html> 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! 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... 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. 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! 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. 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 |
|||||||