CSS - About Crossbrowser Scrollbar Colors
Hi guys
I've this code, it looks fine in IE (damn..) but it does not look in Firefox Code: body { scrollbar-track-color: #D8AFAF; scrollbar-face-color: #660000; scrollbar-highlight-color: #927373; scrollbar-3dlight-color: #663333; scrollbar-shadow-color: #660000; scrollbar-darkshadow-color: #660000; scrollbar-arrow-color: #FF0000; } What's wrong ? - my Firefox version (1.0.1) - the css code ? thanks Similar TutorialsThis 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> hi, can anybody tell me that how can i will make following css styles to be viewed same in both internet explorer and mozilla explorer(cross browser compatibility). here is my code thanks mrjameer <style type="text/css"> html, body { margin: 0px; padding: 0px; border: 0px;background: url(bg1.gif)repeat-x; background-color:#66CCFF; } #navcontainer ul { padding-left : 0; margin-left : 80px; margin-top:20px; background-color : #036; color : #FFFFFF; float : left; width : 73.2%; font: 100% tahoma;line-height: 1.7; } #navcontainer ul li { display : inline; } #navcontainer ul li a { padding : 0.2em 1em; background-color : #036; color : #ffffff; text-decoration : none; float : right; border-right : 1px solid #fff; } #navcontainer ul li a:hover { background-color : #369; color : #fff; } #header { margin-left : 80px; margin-top : 0; float:left; } #right { position : relative; height : 779px; width : 267px; float : right; margin-right:72.3px; background-color : #ffffff; margin-top : -8px; color:#000000; font: 100% tahoma; background-image: url(h2.jpg); background-repeat: repeat-x;} #left1 { position : absolute; /*right : 155px; */ margin-right:400px; margin-top : -8px; margin-left:160px; height : 230px; width : 564px; float : left; font: 100% tahoma; /*background-color : #FFFFFF; */ color:#23238e; background-image: url(a1.jpg); background-repeat: repeat-x;} #left2 { position : absolute; /*right : 155px; */ margin-right:400px; margin-top :221px; margin-left:160px; height : 296px; width : 564px; float : left; font: 100% tahoma; background-color : #e6e6e6; color:#000000; background-image: url(a2.jpg); background-repeat: repeat-x;} #about_imgtable { width:218px; margin-left:50px; margin-top:8px; position:relative; /*margin:auto;*/ /*border:1px dotted navy;*/ border-style:groove; padding:1px; border-color:#006400; clear:right; border-width:2px; color:#ffffff; background-image: url(hostingbg.jpg); background-repeat: repeat-x; } #about_img { float:left; padding:0 10px; margin-top:5px; } #about_right_text { display:table-cell; } #product_imgtable { width:220px; margin-left:300px; margin-top:-158px; position:relative; /*margin:auto;*/ /*border:1px dotted navy;*/ border-style:groove; padding:1px; border-width:2px; border-color:#006400; background-image: url(tutorialsbg.jpg); background-repeat: repeat-x; color:#ffffff; } #product_img { float:left; padding:0 10px; margin-top:5px; } #product_right_text { display:table-cell; } #community_imgtable { width:470px; margin-left:50px; margin-top:14px; position:relative; /*margin:auto;*/ /*border:1px dotted navy;*/ padding:1px; border-style:groove; clear:right; border-color:#006400; border-width:2px; background-image: url(toolsbg.jpg); background-repeat: repeat-x; color:#ffffff; } #community_img { float:left; padding:0 10px; margin-top:5px; } #community_right_text { display:table-cell; margin-top:10px; } #left3 { position : absolute; /*right : 155px; */ /*margin-right:500px;*/ margin-top :517px; margin-left:160px; height : 291px; width : 285px; float : left; font: 100% tahoma; background-color : #ffffff; color:#000000; background-image: url(a3.jpg); background-repeat: repeat-x; } #lo { width:260px; height:200px; margin-left:10px; margin-top:40px; position:relative; /*margin:auto;*/ /*border:1px dotted navy;*/ padding:1px; background-image: url(greens.gif); background-repeat: repeat-y; color:#ffffff; border-styleutset; border-color:#ff69b4; } #login { margin-left:100px; margin-top:30px; } #offline { margin-left:40px; margin-top:30px; } #left4 { position : absolute; /*right : 155px; */ /*margin-right:500px;*/ margin-top :517px; margin-left:445px; height : 291px; font: 100% tahoma; width : 279px; float : left; background-color : #ffffff; color:#000000; background-image: url(a4.jpg); background-repeat: repeat-x; } #shamroc_imgtable { width:260px; height:190px; margin-left:10px; margin-top:5px; position:relative; /*margin:auto;*/ /*border:1px dotted navy;*/ padding:1px; background-image: url(scriptsbg.jpg); background-repeat: repeat-x; color:#ffffff; border-styleutset; border-color:#FF69B4; } #shamroc_img { float:left; padding:0 20px; margin-top:5px; } #shamroc_right_text { display:table-cell; word-spacing:5px; } #blank_footer { width : 831px; clear : both; height : 150px; background-color : #6f636b; font: 100% tahoma; color : #000066; text-align : center; position : absolute; margin-left : 160px; background-image: url(a5.jpg); background-repeat: repeat-x; color:#ffffff; } #footer { width : 831px; clear : both; height : 150px; background-color :#ffffff; color : #000000; text-align : center; position : absolute; margin-left : 160px; margin-top:150px; font: 100% tahoma; background-image: url(g.jpg); background-repeat: repeat-x; } </style> I'm currently working on a rather challenging development (at least for me) and trying to resolve some CSS strangeness that I can't track down the root of. The basic design is working out... or was until I started checking for cross-browser compatibility. Currently: It looks good/works in Safari/Gekko and IE5Mac. The top of the page draws correctly in Firefox/Netscape/Mozilla, but the content areas are white rather than showing through to the Faux-columns below (I even tried setting redunant background: transparent on the divs to see if it was a parenting bug) Opera 7+ looks pretty much right, except it is adding a 15px margin to the top of the body of the page (before the viewport) that no other browser is adding. I haven't even seen it in IE5/6 Win, but I'm pretty sure it's screwed there. If anyone is particular familiar with one of these issues, I'd greatly appreciate it if you could point me in the right direction of an article or point out a chunk of my code that doesn't make sense or is causing the error. The template page is here. The CSS document can be seen here. Thanks in advance to anyone who has time to assist. -- Aiden I am currently workin on a new design for my site and have decided to go tabless (the way it should be). I have gotten pretty much as far as I can apart from adding the content. I have been testing my design in both IE6 and FireFox 1.0.4. I have noticed some problems in width in both browsers. Here is the link to my site: Panik Design's New Layout In IE6 the main div does not stretch out to 700px, It only lines up with the header div when i change the width to 704px. But when I do that , Firefox is then out of line because Firefox measured it correctly the first time. As for Firefox problem. FF is not measuring the module widths correctly. They are set to 150px and would like them to display like they do in IE6. I will now post my code: Code: <html> <head> <title>Panik Designs</title> <style type="text/css"> body { margin: 0px; background: #fff; color: #000; font-size: 10pt; font-family: verdana; } h1 { font-family: verdana; color: #000; font-weight: bold; font-size: 24pt; } #header { border-left: 2px solid #000; border-right: 2px solid #000; background: #FBF2D9; width: 700px; margin: 0; } #main { position: relative; width: 700px; border-left: 2px solid #000; border-right: 2px solid #000; height: 100%; background: #FBF2D9; } #leftcontent { position: absolute; padding-top: 10px; left: 0px; background: #FBF2D9; width: 150px; text-align: center; } #rightcontent { position: absolute; padding-top: 10px; right: 0px; background: #FBF2D9; width: 150px; } #centercontent { position: absolute; left: 150px; padding: 10px; background: #FBF2D9; width: 400px; text-align: left; } #moduletop { position: relative; width: 140px; padding: 5px; color: #fff; font-weight: bold; text-align: center; border: 1px solid #000; background: #26476C; } #modulebottom { position: relative; width: 140px; padding: 5px; color: #fff; font-weight: bold; text-align: left; font-size: 10pt; border: 1px solid #000; border-top: 0px; background: #4184B4; background-image: url("images/modulefill.jpg"); background-position: 0% 100%; background-repeat: repeat-x; } </style> </head> <body> <center> <div id="header"><img src='images/header.jpg'></div> <div id="main"> <div id="leftcontent"> <div id="moduletop">: Navigation :</div> <div id="modulebottom"> Item one<br> Item two<br> Item 3<br> </div> This is the left content </div> <div id="centercontent"><h1>Heello</h1><br>Thisis where the center content will go. blah blah blabh blah all of this is fun fun fun i like cheese.</div><div id="rightcontent"><div id="moduletop">: Statistics :</div>This is the right Content</div> </div> </body> </html> I have not added a doctype because it adds even more problems to the page. As shown on this page: Doctype problems: Doctype problems 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? I am using a table bg mouseover CSS effect. In FireFox and my dreamweaver workspace, the page looks fine. However in IE, the section where I used the CSS effect has a slightly different color. What could be the cause of this? Thanks. wait, i just figured out that its the image that is a different color... so my new question is, why? Hey everyone. I posted this in another forum, but we were unable to get the issue resolved, so I thought I would try posting here. I am having trouble getting some colors to work on my pages with CSS. I went through and made an index.html, in which I setup all my layout, graphics, colors, etc. I then took that and turned it into header.php and footer.php, with a new index.php file. My problem is that now when I upload up index.php to the server and go to view it, all the text formatting and layout of the page works fine, but the background, heading, link, etc. colors are just showing up as the defaults. The colors that I am working with are not from the websafe pallet, but I think that they are supported by most browsers (519A00, 5B4C34, 33435A, E5EDF9). Now that I think about it, it cant be browser support because it all works just fine in the index.html file. The link to the previous forum post is here There was a rather long discussion on possible causes there, but we never found a solution. I would really appreciate any help you may be able to offer. Thanks in advance, -Jonathan hello everyone, I can't get colors to show in firefox for the life of me. I have this used by a javascript mutliple times and need different colors. Help please, let me know if you need more info. Code: .signalButton{ width:80px; height:4; background-color: #0066FF; } Thank You, Wasim Hi, Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website? Thanks Excuse me but i am a little thick on this one: How do I create different colored link style for say a: 1. navigation bar 2. footer bar 3. main body Does making classes make sense in this situation doug Suppose I have the following: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My site</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #outer_div { width: 800px; height: 300px; background-color: red; } .interior { background-color: #ffffff; } </style> </head> <body> <div id="outer_div"> <div class="interior"> <p>Hello I am some text. </p> <p>How are you today?</p> <p>Would you like some waffles?</p> </div> </div> </body> </html> The way this appears in FireFox (I haven't tested in other browsers yet) is that the 3 lines print on a white background that spans the width of the browser and then sits on top of the red background. The way that I would like it to appear is for the white background to extend only as far as the longest line. Also, I can't assume that it will only be paragraph tags, it may be links, images, headers, lists, well anything. My question is how can I achieve this? Basically I don't want the inner div to automatically be as wide as the outer div but only as wide as it needs to be. I see that CSS3 will finally have support for this, but I thought I'd stumbled upon support in CSS1 or CSS2(.1) also. I even printed it out, though I can't find it now. Does anyone know how to alternate row colors in CSS2.1 without resorting to tr.row1 and tr.row2 or scripting? Hello all I need help please :-) I have a website I am making that will have various boxes and each box has to have a different link color and hover over color. My issue is that teh css does not work in terms of making all the links display the correct color as outlined in the css file. here is my css file maybe someone can tell me what is wrong (I will comment in the file also whats not working Code: <style type="text/css"> body { background-image: url(./images/pgbg.gif); color: #000000; /*the below link attributes does not work */ visited: color:#000000; text-decoration: none; link: color:#000000; text-decoration: none; focus: color:#000000; text-decoration: none; active: color:#000000; text-decoration: none; hover: color: #CC0000; } .header{ background-image: url(./images/header.png); background-color:#E6E6E6; position:absolute; width: 900px; height: 100px; left: 50px; top: 5px; } .navbox1{ /*General Links Navbox*/ background-image: url(./images/navbg.png); position:absolute; background-color:#E6E6E6; width: 170px; left: 60px; top: 115px; padding-left: 5px; /*the below link attributes does not work */ visited: color:#E6E6E6; text-decoration: none; link: color:#E6E6E6; text-decoration: none; focus: color:#E6E6E6; text-decoration: none; active: color:#E6E6E6; text-decoration: none; hover: color: #CC0000; } .navbox2{ /*Users Links Navbox*/ background-image: url(./images/navbg.png); position:absolute; background-color:#E6E6E6; width: 170px; left: 60px; top: 310px; padding-left: 5px; /*the below link attributes does not work */ visited: color:#E6E6E6; text-decoration: none; link: color:#E6E6E6; text-decoration: none; focus: color:#E6E6E6; text-decoration: none; active: color:#E6E6E6; text-decoration: none; hover: color: #CC0000; } .loginbox{ /*Login Box*/ background-image: url(./images/navbg.png); position:absolute; background-color:#E6E6E6; width: 170px; left: 60px; top: 400px; padding-left: 5px; } .content{ background-color:#E6E6E6; position:absolute; width: 700px; height: 455px; left: 250px; top: 115px; padding-left: 10px } .footer{ position:absolute; width: 700px; left: 100px; top: 585px; color: #D6E7D3; } </style> Hey all. I am attempting to create a memberlist type page for my website that has a list on the left and when clicked it shows the members information on the right. I have the positioning down and everything but the problem I am running into is how it displays in IE and Firefox. In Firefox my list looks exactly how I would like it to and works fine. In IE however, the png images i used for the "Memberlist Title" and the bottom rounded edges image appear a different color than the list items... . Also, when clicked the list item stays highlighted with the rollover color and I cant figure out why. Here is my css its at bestinefight.net/memberlist.php Code: /* Memberlist */ #navcontainer { width: 210px; margin-left:109px; } #navcontainer ul { margin-left: 0; padding-left: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a { display: block; width: 200px; background-color: #4B4535; padding: 0px 0px 0px 10px; border: 0; } #navcontainer a:link, #navlist a:visited { font-size:10px; color: #dbdfaa; text-decoration: none; border: 0; padding: 0px 0px 0px 10px; outline:none; } #navcontainer a:hover, #navlist a:active { font-size:10px; background-color: #8B8063; color: #dbdfaa; border: 0; text-decoration:none; outline:none; } #profile_holder { background-image:url(profile.png); background-position:top; background-repeat:no-repeat; width:300px; height:200px; float:right; margin-right:30px; } #profile { width:260px; height:180px; margin: 40px auto; } #memberlist { width:250px; height:300px; float:left; } #memberlist_title { background-image:url(memberlist.png); width:228px; height:31px; margin-left:100px; } #memberlist_bottom { background-image:url(memberlist_bot.png); height:21px; width:210px; margin-left:109px; } Here is the code for my page. Code: <div id="memberlist"><div id="memberlist_title"></div><div id="navcontainer"> <ul id="navlist"> <li><a href="#">Aslad</a></li> <li><a href="#">Bilos</a></li> <li><a href="javascript:ajaxpage('memberlist/Boustij.php', 'profile');">Boustij</a></li> <li><a href="#">Brak</a></li> <li><a href="#">Cydian</a></li> <li><a href="#">Diablo</a></li> <li><a href="#">Equilibruim</a></li> <li><a href="#">Cydian</a></li> <li><a href="#">Faller</a></li> <li><a href="#">GoOsE</a></li> <li><a href="#">Melik</a></li> <li><a href="javascript:ajaxpage('memberlist/Mika.php', 'profile');">Mika</a></li> <li><a href="#">Nekos</a></li> <li><a href="#">Normanalata</a></li> <li><a href="#">O'rian</a></li> <li><a href="#">Pooga</a></li> <li><a href="#">Romu'lis</a></li> <li><a href="#">Sena</a></li> <li><a href="#">Tepor</a></li> </ul> </div> <div id="memberlist_bottom"></div> </div> <div id="profile_holder"><div id="profile"></div></div> I'm trying to get some simple css formatting to work and it works the way I want but not in explorer, it won't show my color/border/image anything attributes until I literally highlight the content via the mouse. And not always. Of course, it works fine in firefox and the css validates so.....please glance over it and see if you can find any errors. thanks! here's the url http://www.emotika.com/testing/test.htm here's the source 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=iso-8859-1"><title>Untitled Document</title> <style type="text/css"> <!-- body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: .8em; } .arrows{ margin: 0px 0px 2px 5px; } .headingrule{ margin-right: 3em; margin-left: 1em; background-image: url(images/gradient.jpg); background-repeat: repeat-x; } #maincontent{ margin-top: 1em; margin-bottom: 1em; margin-right: 200px; } .maincontentbox{ background-color: #F0F0F0; border: 1px solid #CCCCCC; margin-left: 3em; margin-right: 3em; margin-top: 1em; margin-bottom: 1em; padding: 4px 8px; } #rightcontent{ position: absolute; width: 200px; top: 1em; right: 0px; padding: 5px; border: 1px solid #CCCCCC; } #footer{ background-color: #F0F0F0; clear: both; } #wrapper { position: relative; width: 100%; margin: 0px; } --> </style> </head> <body> <div id="wrapper"> <div id="maincontent"> <div class="headingrule"> <img class="arrows" src="images/arrows.gif"> WELCOME... </div> <div class="maincontentbox"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor, dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor. Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin metus arcu et lectus. </p> </div> <div class="headingrule"> <img class="arrows" src="images/arrows.gif"> WEEKLY SPECIALS... </div> <div class="maincontentbox"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor, dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor. Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin metus arcu et lectus. </p> </div> <!--End Main Content Div--> </div> <!-- Absolutely Positioned Right Div {{ Removed from Document Flow }} --> <div id="rightcontent"> CONTACT INFO <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 2</a></li> </ul> <p> </p> </div> <!-- Footer Div Stretches Total Width --> <div id="footer"> here's the footer </div> <!--End Wrapper Div --> </div> </body></html> I'd like to be able to make some links on my page one color and others a different color so they show up appropriately on different backgrounds. how would i go about doing this? thanks I am trying to create two different colored back grounds. By everytime i go to page properties it seems to add within the space that I need a different color. I am using dreamweaver 8. How do I go about adding two different colors? Thanks in advance. Here is a sample picture of where i need the different colors to be: ... since i am a noob i guess i cant post urls.. I used draw layers to sepearte the page in three parts the top part is my banner middle is the navigation bar third is the body the draw layers are in between some background space I would like to make the background black and the layer backgrounds white.... anyone help? I have a CSS that manages my site, but I've got a list of links that are dynamicly created with php/mysql. I have two lists that I would like to use non-CSS colors for their links. Is there a way to override the CSS to force certain colors on the links? I've tried using the normal <p> or style settings, but the main links portion of the CSS always takes precedence and I can't seem to make it work for me. A little background for you...the lists are as follows: 1 - a list of currently open jobs in the company 2 - a list of all jobs in the company Both lists are also links to the job descriptions. List 1 is created based on whether the database has the job flagged as open, so its never static. List 2 is not static either because it lists the jobs in the database. My apologies if this is a total newb question, however I am quite a newb with CSS (but trying to learn). What I am trying to do is change a color (say red) from position 0,0 to black at position 100,100. I am sure this is possible as I have seen a couple of close examples but nothing that matches what I am trying to do (and I must admit with my limited understanding of CSS I can't figure it out). ANy help will be greatly appreciated. Thanks. TJ |