|
CSS - Scrollbar Properties Are Not Being Displayed Despite The Css Settings
Hi,
I have the definition of the <body> tag in my external CSS file as follows: body { background:URL("fundo5.gif"); scrollbar-arrow-color: yellow; scrollbar-base-color: black; scrollbar-dark-shadow-color: yellow; scrollbar-track-color: green; scrollbar-face-color: blue; scrollbar-shadow-color: white; scrollbar-highlight-color: silver; scrollbar-3d-light-color: black; } However, this settings do get displayed on IE 6.0 Do I have to set any other properties so that I can change the colors of the scrollbar? thanks in advance Daniel Similar TutorialsIf you go here company.com layout It looks correct in IE or Firefox But in Chrome/Opera the text is a different Font and is bigger and it messes stuff up. Here is the CSS where font is defined for body. All other elements are defined with the same Font declaration. body { background: #e3edc2; color: #333; font: .8em, arial, helvetica, sans-serif; margin: auto; padding:0px; } 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? Hello Again, My new site design for www.everything.ie is finally coming together mostly due to the great help I've been getting here. The next little problem I need help with is this. Have a look here first: http://www.grahamvard.com/everything.html Look at the headings for the catagories (grey background with red writing). I'm trying to replicate them on my test site but can't quite get it right. Look here to see my attempts: http://www.eveythingfree.buildtolea...fieds/index.php It's basically alright but I want to make the grey headings boxes bigger so they occupy almost the full width of the 3 columns just like in the example page. Because this part of the page is controled by a php script which generates the text and layout, the only thing I can alter is the style sheet in this case the heading font, .cfmaincat Here's the piece of the .css that controls the heading: Code: .cfmaincat {
FONT-SIZE: 11px;
COLOR: #cc0000;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
background-color: #e9e9e9;
width: 100%;
height: 100%;
}
I can't work out what I need to change to fix this, I really hope some of you can. I'm sure it's fairly straightforward, I just don't know what to do. I tried increasing the padding but because the length of words of the heading vary, so too do the grey boxes generated this way. I need them to be all the same size, like in the design example. Many Thanks, Robert Hello all! Is there a way to set a resolution % for a certain type of resolution size and any above that resolution to another specific % For example I want it to be: 1024x 768 : width : 90%; and anything higher than 1024x 768 to be 80% since 90% on a resolution higher than 1024 for my navigation is just too make of a banner. Please help/advice. Regards, Kingofqueens. I've got an image placed inside a div tag where the div is set to a height and width of 100%. The div has a "fixed" position with a "left" value set to "-36px", which ensure's it shows up exactly where I want it to. Everything that I setup in the style sheet works fine with Firefox 1.5x; the problem - big surprise - is that it doesn't work at all in IE6. Basically what's happening in IE is that the scroll bars are still showing up (which I don't want to happen) and it doesn't appear to be recognising the negative-positioning either. I'm just now learning to use div tags so there's probably some trick I haven't figured out yet. Here's the code I'm using. Code:
<style type="text/css">
<!--
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: #566f5f;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
text-align: center;
}
#myTable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: fixed;
left: -36px;
}
-->
</style>
</head>
<body>
<div id="myTable"><img src="images/picture.jpg" width="1071" height="738" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="812,437,828,463,1038,409,1018,390" href="mailto:info@email_address.com" alt="Contact Us" />
</map></div>
As I mentioned, it works great in FF but not in IE. If anyone has any ideas or suggestions it would be a massive help Thanks! I need to change some page setup setting for print like orientation, headers and footers Is it possible to define it in CSS. Happy New Year! I'm having issues with my website in progress, http://www.vilardojardim.com/about.html Everything seems to be displaying fine in Firefox, Safari and Explorer 8.0.6, but the IE 'Compatibility View Settings' makes the layout go all wiggy. Is there any way of automatically turning this off? Or, can someone help me out with a way to adjust the CSS to avoid the problem altogether? Thanks in advance for any assistance. I've found out that IE and Firefox both handle CSS page structure differently. I have a CSS container of width: 740px Height: 960px and IE prints the page with extra spaces at the top and bottom while this same setting is a bit short both width and height wise in Firefox. How do I compensate for both two browsers by using the same CSS file? I don't want to create different CSS for each browser. I have FF 2.0 and IE 7. However, I assumed many of my users will still be using IE6. Any help is appreciated. Hi, I've been struggling for a long time now about how to create a CSS menu with opacity of whatever rating. If anyone can help me out by telling me how or a good code source place please please let me know. I found a software which costs a $139 and i really feel its not worth it. So if someone can please help me out. Thanks. I have done my best to GOOGLE this problem but am not coming up with anything. I'm fairly certain that there is some setting/code that I need to add in CSS that would make this error go away. When I view my site in INTERNET EXPLORER, the main content box is shoved down almost below the sidebar/nav menu. The site works fine in FIREFOX & CHROME. I was hoping someone could help me. I have attached a picture of what it looks like in IE. I would like to know if anyone has done something like this - I need to have the look and feel of a site totally configurable through a web interface. All data is going to be stored in a database and I would like to know whether I can autogenerate or update a style sheet based on data from a database. Has anyone done this? Or is this the wrong approach to take in such a case? I also have several clients using the same site, each needing to have their own configurations. I would like to avoid having to have a separate style sheet for each client if possible. Can the properties in a stylesheet be set dynamically on a session per session basis? I am using wordpress for my blog/site. I am using Freshnews theme from woothemes as the theme for the blog. Here is the link: demo.woothemes.com/freshnews The font is not that good and it is way too small and the spacing is bad (too congested). How do I change the fonts, size, spacing (line and paragraph) throughout the blog. I know I would have to change it somewhere in the stylesheet. But where exactly and how? And what are the ways to get this done? Should I install a font somewhere? Should I use webfonts (like google webfonts)? What is the advantage in using this? or what are the other ways? i have images, but i have this Code: * a {
text-decoration:none;
font-weight:bold;
color:#665637;
}
* a:hover {
color:#B39760;
border-top-style: double;
border-top-width: 1px;
border-top-color: #665637;
}
and my anchored images take on the hover property. how can i stop them from doing this and just stay as they were? Hi All, I'm new to the forum. My website's Index page is losing all my body font and color settings, though layout is correct. All of the subfolders' index pages and other pages throughout my website remain unaffected. I've sanity checked it all, and it validates OK. I have an email in to the webhost for some input, but I hoped to get some advice from other CSS-ers who might be in the know. My website is: NickiGreenwood.com I am a romance author and sideline-web-design-junkie. Any help, advice, or even a point in the right direction would be a huge, huge help. Thanks, all. Nicki Greenwood - Romance Author I see that document.getElementById('foo').style.width is a valid property, but yet I see documentation which accesses the style's properties as an array element, example: document.getElementById('foo').style['width']. Are both equivalent? What would be the property equivalent for 'text-align'??? document.getElementById('foo').style.textAlign?? Where can I find the docs for this? You know how you can modify Mozilla css with properties like css Code: Original - css Code -moz-border-radius: 4px 4px 4px 4px; -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-radius: 4px 4px 4px 4px; Is it possible to get something like this to work with IE? See on F/F the box is rounded.. but on IE its just a complete square ( duh that's because I'm modding Mozilla css properties ). I'm trying to write a function that will resize a few <div>s on my page when it loads. Before I got too far, I wrote a simple function to alert the current height of each <div> to be resized. It looks like this: Code: function resizeDivs()
{
var saidDivs = new Array("cBodyMid", "cLeftPane", "cLeftPanelData", "cRightPaneData");
for(i=0;i<saidDivs.length;i++)
{
var el = document.getElementById(saidDivs[i]);
curElHeight = el.style.height;
alert(curElHeight);
}
}
All I get is 4 empty alert boxes. All of the styles are defined in an external style sheet a la: Code: #myDiv {
height: 25px;
}
and they are all assigned to <div> tags a la: Code: <div id="myDiv">here's my div</div> However, if I create a div with the height specified as an inline style, it works. I've got to be missing something really simple here. Anyone know how to get that height property? Hey all, I'm developing an app for a client, and I've implemented quite a bit of it already, and it includes CSS. Code:
<style>
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
}
</style>
As you all might know, this changes all <td> tags into this particular style. Is there a class that I can include that contains NO properties (default)? I'm not even sure if it's possible. I just don't want to go back and add class tags everywhere. Guys I have the following issue regarding links and colours: The colours of links are set thus: a:link : White; a:hover : Blue; a:visited : White; The problem I have is that I want a hovered link to turn blue even if it has been visited. Is there anything I can do about this...? I have a style for links that I use in my main navigation menu, like so: Code:
a.main_nav
{
color:#FFFFFF;
font-size:12px;
}
a.main_nav:link{ text-decoration: none }
a.main_nav:visited{ text-decoration: none }
a.main_nav:active{ text-decoration: none }
a.main_nav:hover{ text-decoration: underline; }
How can I wrap all the links in a <div> and not have to specify the class on each <a> ? |
|||||||