|
CSS - A Way Around The Firefox Scrollbar Problem
Here's the bug I found with Firefox: when you use code like this:
css Code:
Original - css Code .scrolling { height: 100px; overflow: auto; } .scrolling Firefox gives it the same width as the unscrolled version, forcing you to scroll right to read everything. Even css Code: Original - css Code overflow: scroll; overflow: scroll; produces a horizontal scrollbar, although the division is now the correct width. But I've found a css-only way around this: css Code: Original - css Code .scrolling { height: 100px; overflow: -moz-scrollbars-vertical !important; overflow: auto; } .scrolling I know, it's not kosher to use nonstandard code, but it works on both IE and Firefox. Try it! Similar TutorialsHi, I'm having a problem with FF & scrollbar when I center my page. When the page is smaller then the window, the scrollbar in FF is complete hiden, not disabled like in IE. Let's say I have two pages, page1 don't need scrolling and page2 does. So, when I jump from page1 (no scrolling) to page2 (scrolling) my page will shift to the left when the scrollbar apears. Is there a way to always display the scrollbar like in IE --- display but disable, when need it enable. Thank you! Hello I know that on IE I can control the look of the scrollbar via: * scrollbar-face-color * scrollbar-highlight-color * scrollbar-shadow-color * scrollbar-3dlight-color * scrollbar-arrow-color * scrollbar-track-color * scrollbar-darkshadow-color Is it possible to control its look also in Firefox 1.0 and Opera 7.54? regards Hello; Could anyone tell how to kill the scrollbars from IE, Firefox, Netscape.,please. My following code just work for IE, it doesn't not affect another browsers. #newst {overflow: scroll; overflow-y: scroll; overflow-x: hidden; overflow:-moz-scrollbars-vertical;} <textarea name="newst" id="newst" rows="10" cols="45" ></textarea> I use tables as little as possible, and as such have very little experience of them with CSS - and I'm having a weird problem. I wanted to create a table that has blocks of rows with their own 2px solid border, but with a 1px dotted border between cells. There are other rows between these blocks with no border at all. I've posted a very cut-down version of the page, including just the relevant part of the style sheet, at <http://www.highway57.co.uk/tests/tabletest>. Because of an IE issue (of course! - see below) I ended up resorting to a fairly clumsy method: in the blocks referred to above, all the cells start with a 1px dotted border all round, then there are classes for t, r, b and l that have the corresponding border reset to 2px solid. As there are only two columns, every cell has either one or two of these classes applied. I'm using border-collapse: collapse. This works fine in IE6, IE7, Opera (Mac and Win), Safari, OmniWeb and even Netscape 7.2 (Mac), but in the other Gecko browsers I have - Firefox and Camino - the table sprouts a superfluous vertical scrollbar which scrolls exactly 1 pixel. Rogue horizontal scrollbars I've dealt with before (usually a width issue), but I can't understand why I should get this vertical one, and it's driving me nuts - nothing I try gets rid of it. OK, so why am I doing it this clumsy way? Originally I put each of the bordered blocks of rows in its own tbody, and applied borders to tds, trs or tbodys as appropriate, but neither IE6 nor IE7 appears to support borders on trs and tbodys - can anyone verify this? Nevertheless, I still got the scrollbar problem in Firefox: apart from the IEs, the visible result was exactly the same. Any clues would be gratefully received! This code works in IE but not in FF. Does Firefox not support these? <style type="text/css"> <!-- A:link { text-decoration: underline; color:"#ffffff"; } A:visited { text-decoration: underline; color:"#ffffff"; } A:active { text-decoration: underline; color:"#ffffff"; } A:hover { text-decoration: none; color:"#fffffff"; } Body { background:url(http://n0madism.tripod.com/mbg.jpg); background-color:#000000; background-repeat: no-repeat; font-family:Georgia; color:#ffffff; font-size:10 pt; text-align:left; scrollbar-face-color : #000000; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000; scrollbar-arrow-color : #FFFFFF; } td { font-family:Georgia; color:#ffffff; font-size:10 pt; } --> </style> (sorry posted to wrong forum) 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? Hay everyone! Trying to change the scrollbar colour... The problem is that it changes the font size of the menu at the top and shifts some other stuff around, generally annoying stuff. BUT!, the scrollbar colour does change!! Any help would be great Here is the code from the begininng.... <STYLE type="text/css"> <!-- BODY { scrollbar-face-color: #000000; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #333333; scrollbar-darkshadow-color: #333333; scrollbar-shadow-color: #333333; scrollbar-arrow-color: #000000; scrollbar-track-color: #333333; } --> </STYLE> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- DW6 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <link rel="stylesheet" href="emx_nav_left.css" type="text/css"> <script type="text/javascript"> <!-- ....blah blah blah and the rest of the site! Cheers - i'm probably being really dumb! JonOSaX Hey All, I'm currently testing out an idea for using Facebook Comments within a clients site. The space given to input the is very limited so I have implemented an auto scroll using Mootools. Everything seems OK but when you go to the page the scroll bar is not present, so you are unable to scroll down to see the comments towards the bottom and click the page numbers. The only way in which I can make the scroll bar show is if I right click and click Inspect Element both on Firefox and Chrome (it works perfectly!!!). I would appreciate it greatly if someone could have a look and let me know what I am missing and where I have gone wrong. The link to the page is http://www.theblitzparty.com/communityspirit/comments Thanks Hi there, I have set up some scollbar colours for IE. I have some scrollable divs that are using the css, but the main scrollbar to the right of the browser does not have the css applied to it. This is my css: PHP Code: scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #d4e5ab; scrollbar-darkshadow-color: #517107; scrollbar-face-color: #719e07; scrollbar-highlight-color: #add450; Any ideas why that is? Hi All, As an avid reader of these forums for sometime, I can usually find the help I need by searching through the posts but my latest problem is killing me. I have spent close to 15 hours trying all kinds of methods to fix it but with no luck. Can anyone help? In IE my page looks fine, just as I want it but firefox throws a fit when viewing on 800 x 600 (as in the nav buttons and text do not align properly, (auto expand, start a new line)). In essense they do not align properly when the nav buttons are forced to wrap. Here is the test page Here is my CSS: (div top is the top banner. div nav is the nav button area.) html Code: Original - html Code div.top{ margin:0px; width:100%; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$banner_img); background-repeat: repeat; text-align:center; font-family: $font_style; font-size: 24px; color: $site_text_colour; } /*To make the block autostretch on IE*/ * html .top {left:3px;} * html .top {right:3px;} * html .top {width:100%;} div.nav{ margin:0px; width:100%; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$nav_bg); height:40px; } /*To make the block autostretch on IE*/ * html .nav {left:3px;} * html .nav {right:6px;} * html .nav {width:100%;} * html .nav { height:30px;} .cssnav { position: relative; font-family: arial, helvetica, sans-serif; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/rollover/$button_colour); border:none; background-repeat: no-repeat; white-space:wrap; display: inline; top:-15px; height: auto; padding-right:5px; width:120px; margin: 0; padding-bottom:10px; } * html .cssnav {top:0px;} .cssnav a { display: inline; color:#000000; font-size: 11px; width: 120px; height: 25px; color: white; text-align:center; text-decoration: none; } .cssnav img {height: 10px; width:120px; border: 0; padding-bottom:5px;} * html .cssnav img { height: 30px; width:120px; border: 0; } * html a:hover {visibility:visible} .cssnav a:hover img{visibility:hidden} .cssnav span { position: absolute; left: 15px; top: 8px; margin: 0px; padding: 0px; cursor: pointer; color:$link_text; text-align:center; font-size:12px; font-weight:bold; }
div.top{
margin:0px;
width:100%;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$banner_img);
background-repeat: repeat;
text-align:center;
font-family: $font_style;
font-size: 24px;
color: $site_text_colour;
}
/*To make the block autostretch on IE*/
* html .top {left:3px;}
* html .top {right:3px;}
* html .top {width:100%;}
div.nav{
margin:0px;
width:100%;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$nav_bg);
height:40px;
}
/*To make the block autostretch on IE*/
* html .nav {left:3px;}
* html .nav {right:6px;}
* html .nav {width:100%;}
* html .nav { height:30px;}
.cssnav {
position: relative;
font-family: arial, helvetica, sans-serif;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/rollover/$button_colour);
border:none;
background-repeat: no-repeat;
white-space:wrap;
display: inline;
top:-15px;
height: auto;
padding-right:5px;
width:120px;
margin: 0;
padding-bottom:10px;
}
* html .cssnav {top:0px;}
.cssnav a {
display: inline;
color:#000000;
font-size: 11px;
width: 120px;
height: 25px;
color: white;
text-align:center;
text-decoration: none;
}
.cssnav img {height: 10px; width:120px; border: 0; padding-bottom:5px;}
* html .cssnav img { height: 30px; width:120px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: 15px;
top: 8px;
margin: 0px;
padding: 0px;
cursor: pointer;
color:$link_text;
text-align:center;
font-size:12px;
font-weight:bold;
}
I have messed with above code so much trying to get it right that I know it is a bit of a mess now but scared to change anything in case I mess up IE as well. There is another problem with Firefox in that the hover buttons don't align but that's another story. Any help greatly appreciated. Hello, I'm new to CSS.. I made my design in Photoshop.. Sliced it.. and then set the design through the CSS.. I set the complete design and it looks great in IE but when I see it in Firefox it is completely out of order.. Can anyone please guide me what is the problem? I can give you my CSS if you require.. Have you ever seen this kind of problem before.. What am I doing worng? I will really appreciate your help in this regard. Cheers! This is a css script that works wonderful in IE: [SIZE=2]A:link {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} A:visited {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} A:hover {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:21; color: #faf994;} A:active {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} BODY { COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; BACKGROUND: #000033;} TD { COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; FONT-SIZE: 16px } #screen {LEFT: 10%; WIDTH: 80%; POSITION: absolute; TOP: 10%; HEIGHT: 80%} #screen IMG { VISIBILITY: hidden; WIDTH: 0px; CURSOR: pointer; POSITION: absolute; HEIGHT: 0px } #canvas SPAN { FILTER: alpha(opacity=99); LEFT: -1000px; WHITE-SPACE: nowrap; POSITION: absolute; opacity: 99 } #bankImages {DISPLAY: none} [SIZE=2] But when it comes to firefox, the links on top if the script does not work at all. How can I place the A:link, A:visited, A:hover, A:active somewhere, in the HTML or in a separate css and make it work? If I just use the links A:link, A:visited, A:hover, A:active and a BODY {COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; BACKGROUND: #000033;} in a css it will work in both IE and firefox. greatful for some help! Hanna Da I'm currently working on my first HTML site using CSS and it appears exactly as I want it to on IE, but does not on Firefox. On IE it's centered in the middle of the screen and there are no gaps, but on Firefox it's left justified and there is a gap between a couple graphics. I ran it through an HTML and CSS validator and supposedly it is error-free, so does anyone know what the problem may be? Thanks in advance. Adam http://thesuperbeedesigns.com/Lora/ FYI the page isn't functional, the links don't go to live pages. Site Here Check the site out first in IE6, the index page displays correctly with the images as backgrounds for tables (yes I know tables are not good in my situation, but its what I have). Then look at the site in FF, the images I desginated as backgrounds in the tables will not display. Also the border color for the tables on the index page will not display whit in FF. I dont know why the code would work in IE and not FF. Can someone please hlep me out. If i use style tags instead of CSS I can make the images display... check this link please, once in IE and then in FireFox http://www.acapi.com/en/ and the CSS for the Quick Search background is Code:
.qiqsearch {
background-attachment: fixed;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-position: 15px 15px;
}
what should i make to make it appear? I'm in the process of switching my table driven site to a CSS one. I guess I'm having trouble with positioning, I have all the text stuff pretty down, but this is giving me troubles. Here is what it should look like, (screen from IE) http://www.samuraiblog.com/utl1.jpg Here is what it looks like in anything but IE (screen from Firefox) http://www.samuraiblog.com/utl2.jpg Here is my CSS snippet: Code: h3{
color:#666666;
font-size:medium;
font-variant:small-caps;
letter-spacing:.1ex;
border-top:1px solid #999999;
border-bottom:1px solid #999999;}
#title {
width: 800;
height: 250;
position: absolute;
top: 0;
left: 0;
backround-color: white;
}
#b-title {
width: 800;
height: 166;
position: absolute;
top: 250px;
left: 0px;
backround-color: black;
}
#quote {
position: absolute;
top: 270;
left: 16;
float: left;
height:70;
width: 700;
}
and here is direcly from HTML, Code: <div id="title">
<table id="Table_01" width="800" height="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/title-nav_01.jpg" width="800" height="192" alt=""></td>
</tr>
<tr>
<td>
<img src="images/title-nav_02.jpg" width="223" height="58" alt=""></td>
<td> <a href="/blogs"><img src="images/title-nav_03.jpg" alt="" width="98" height="58" border="0"></a></td>
<td> <a href="/forums"><img src="images/title-nav_04.jpg" alt="" width="133" height="58" border="0"></a></td>
<td> <a href="/folding"><img src="images/title-nav_05.jpg" alt="" width="136" height="58" border="0"></a></td>
<td> <a href="/the-arts"><img src="images/title-nav_06.jpg" alt="" width="210" height="58" border="0"></a></td>
</tr>
</table>
</div>
<div id="b-title"><img src="images/title-bottem.jpg" width="800" height="166" /></div>
<div id="quote">
<h3>"There once was a man from nan tucket and he sat on a bucket and read
computer Magizines all day long..." -Sam</h3>
</div>
Any suggestions? Thanks, -Sam Hi there, I am new to this world of web development and this forum. Would be looking for help from all the experienced techies and where possible also help it out. I have written the following code but it is working in IE but not in Firefox. [Code] ______ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Lets Learn, Teach And Educate</title> <meta name="description" content="Education For All"> <meta name="keywords" content="Kids Forum, Kids Education, Kids Fun Learning, Professional Knowledge, Professional Education Material, General Educational Links, General Education Topics"> <style type="text/css"> body { background: url('Graphics\SaraswatiGoddess.jpg') no-repeat center fixed; } </style> </head> <body> <div></div> </body> </html> ________ END CODE Got it validated thru W3C and CSS but still no success. |
|||||||