|
CSS - Help With Missing Images And Colours In Ff
Hi everyone!
I am having a problem with some missing colours and images in firefox. I have validated my XHTML 1.0 and CSS as OK. It looks correct in IE 6.0 but not in FF, i am sure someone will know the answer straight away! address is http://www.wellandpower.net charlie Similar TutorialsNot sure if this is really a CSS problem but... In IE only, the bottom pixels are missing from some images. It's fine in Firefox though: Example The images in quesiton are the Zodiac and 13 Moon images (underneath the avatar). Anyone know what might cause this? Thanks, Hi, Is there a way to tell the browser to replace certain colours with other colours? For example replace #FF0000 with #00FF00? Also is there anyway to refer to the parent of an element? Thanks, Matthew how can i colour the scroll bars on my page - i.e. the ones when you have to scroll up and down the page, but also, the ones used within form elements such as drop down lists. I have tried using css, but to no avail. My page consists of two frames - one on the left and one on the right. Thankyou. Hi, Why does the following not change my scrollbar colours? PHP Code: body { font: 14px Arial, sans-serif; color: #18387B; background: #687BA3; margin-top: 5px; margin-left: 5px; SCROLLBAR-FACE-COLOR: #FF9900; SCROLLBAR-HIGHLIGHT-COLOR: #FF9900; SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #666666; } Hi. I've got an element in my CSS such as: PHP Code: .footer { width: 760px; background-color: Aqua; } I'm trying to use it in a table to have the table take on the properties of the .footer element. Currently I'm using it like this: PHP Code: <TABLE class="footer" ALIGN="CENTER" BORDER=0 CELLPADDING=2> <tr><td>MY CONTENT</td></tr></table> Should the bg of the table not be what I set in the CSS element??? Hi, I use blog software (Wordpress) to run my site and this allows me to use different themes. I have created three themes that are exactly the same except for the colours used. I would like to seperate the layout definitions from the colour definitions so that I can call the layout css on all of them and then call the required colour css. I have tried taking out all references to colour and then putting those references into a new css and then calling that but unfortunately it didn't work. I am presuming that some definitions require more than just colours. Can somebody help seperate the layout from the colours for me? I'm sure there are other "issues" with the css, so if anything else is bad please let me know. I have attached the relevant css as a text file. TIA Phillip That's about the height of it. I have been trying to pick colours for the site I'm playing with. I can't find any pastal (my preference - not necessarily the best, I'm still learning) colours I like in the Web Safe Colours. So, I started snooping around the internet . . . mostly to find out how bad it is that I'm not considering IE 5.x when developing. I found this information at Upsdell: Browser News and it appears to be dated Nov 19th 2005. It suggests that ~1% are restricted to the 256 colours. Is this site reputable for information accuracy and is it reasonable to conclude that web safe colours are a thing of the past? Cheers! Hi guys i am lost big time. ive spend well over 10 hours trying to think, try, to solve this problem. i have got 6 Horizontal CSS Dropdown Menu to make but each one of them must have there own colours , green, blue, yellow, pink etc. and in that the hover colour must match the colour menu that your on at the time i.e be slightly darker. any ideas on how i would do this its driving me mad, ive tryed classes, divs java but am just getting no where Hi Everyone. I'm a new member and so please forgive me if I don't immediately understand all the jargon. However I have a problem and I was hoping someone might be able to help. I have searched the web and W3 schools but couldn't find the answer I was looking for. I am using strict HTML with an external CSS style sheet. I have a several paged website I am creating for part of a University assignment. I have several links which have 3 colours for 3 states. Link, visited and highlight. These work perfectly. (For me anyway). I have now been told to remove 'circular references'. I understand this to be; If I am on the 'Home' page, then 'Home' is no longer a link. (The cursor turns to a text bar instead of a hand) I have removed href from the html to stop this happening. leaving just <a>Home</a> This is fine, however, the colours that I specified in the css now no longer apply and the text is just black. I have followed the instructions in the web pages that I have seen to retain the colours, or add them to an inline style sheet, but nothing seems to work. I can only achieve adding one colour (but not making it change when visited or hovering) or changing the colour of ALL links. Sorry if this is confusing.. I hope someone can help! The relevent code is below. HTML <head> <style type="text/css"> .homebut a:link {color: red;} .homebut a:visited {color: purple;} .homebut a:hover {color: orange;} <!--none of the above seems to work--> </style> </head> <body> <div class="homebut"> <a>Home</a> </div> CSS /*This is applied to all links but doesn't work when I remove HREF from the HTML*/ a:link { COLOR: #0099FF; text-decoration:none;} a:visited { COLOR: #00FFFF; } a:hover { COLOR: #FFFFFF; } Hi, I'm having trouble with changing the colour of link, vlink and alink in a webpage layer. I use CSS to set the colours in the main page body tag but am unable to change the colour of the hyperlinks in a layer on the same page to a different set of colours. This causes some of links to be unreadable and i'd like to be able to change the colours of the links in the layer but keep the colours on the main webpage. Anyone got any idea how to do this?. Is CSS the way to go?. The website is written in PHP if that makes any difference. Many thanks for any help. Hello, I want to make a shadow effect for my content panel. To do this I made 4 div inside a wrapper. The main content, the shadow top right, the shadow right and the shadow footer. In the code below I just used simple colors. The problem is that the div which should be on the right side is missing. What can be wrong? Here is my code: 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.main {
width: 400px;
}
.main .content {
background-color: #CCCCCC;
width:390px;
float:left;
}
.main .topcorner {
background-color: #006666;
margin: 0px;
padding: 0px;
float: left;
height: 10px;
width: 10px;
}
.main .right {
background-color: #FF9933;
margin: 0px;
padding: 0px;
float: left;
width: 10px;
}
.main .bottom {
background-color: #99FFCC;
clear: both;
height: 10px;
width: 400px;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="content">Main content<br>with shadow border</div>
<div class="topcorner"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
For some reason on my site when I add a customer to my business directory using wordpress my sidbar moves under everything. I think im missing a div tag or something like that but can figure it out. Can anyone help me? I have tried everything I could find to try and it still underlines the links .. I don't want it to in any browser... Here's the CSS: Code: <style type="text/css">
<?php { ?>
.toggler { background-image:url('modules/mod_news/img/<?php echo $backgr ?>'); background-size:24px; background-repeat:repeat-x; text-decoration:none; cursor:pointer; color:<?php echo $backtext?>; font-weight:bold; margin: 0; padding:3px; font-size:<?php echo $fontsize?>px; font-family:Arial, sans-serif;}
<?php } ?>
.toggler:hover { background-image:url('modules/mod_news/img/silvergradient.gif'); font-family:Tahoma; font-size:16px; font-color:black;} .element{ padding:0 5px; }
.image { margin:10px 20px; } .tool-tip { float: left; background: #ffffcc; border: 1px solid #D4D5AA; padding: 5px; max-width: 200px;}
.tool-title { padding: 0; margin: 0; font-size: 100%; font-weight: bold; margin-top: -15px; padding-top: 15px; padding-bottom: 5px; background: url(modules/mod_news/img/arrow.png) no-repeat;}
.tool-text { font-size: 100%; margin: 0;}
</style>
I have put the text-decoration: none; in every place I can think of and it just doesn't work. If I put blink that works ... what am I missing here? Thanks!! I know this should probably be turend into pure css but for now I'm stuck with tables i have the following table structure Code: <table class="subitemtable"> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItemOn"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> </table> using the following css styles Code:
.subItemTable{
width:100%;
border-collapse: collapse;
margin:0px;
padding:0px;
}
.subItem{
margin:0px;
border-bottom: 1px solid #0E59AE;
border-right: 1px solid #0E59AE;
background-color:#e8e8e8;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItem a{
font-size: 9.5pt;
color: #666666;
}
.subItem a:link,.subItem a:visited{
text-decoration:none;
}
.subItem a:hover{
text-decoration:underline;
}
.subItemOn{
margin:0px;
border-right: 1px solid #fff;
border-bottom: 1px solid #0E59AE;
background-color:#ffffff;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItemOn a{
font-size: 9.5pt;
color: #666666;
}
.subItemOn a:link,.subItemOn a:visited{
text-decoration:none;
}
.subItemOn a:hover{
text-decoration:underline;
}
my problem is after the first cell the bottom right most pixel of the border is just missing. This happens in firefox and IE ..The attached picture should show what I'm talking about. Thanks for your help hey all, i'm kinda stumped on this one. Take a look at that page in FF and it's all good, but in IE, all the content on the left side of the content box is missing. Don't know what's causing it. here're the styles. [edit]it seems the form doesn't show up on the contact page in IE either.[/edit] Any help'd be appreciated. I'm having a big problem with IE5/Win... my navigation menu and footer divs (which also contains a few links) are both MIA in IE5! I'd say once every four or five page refreshes will load the page as it should be loaded. Checking the source reveals the correct code regardless of whether my navigation shows up or not. Has anyone ever heard of this problem? I don't want to give a URL or source code, but I will say that the setup of the page is pretty standard: <div id="header"> ... </div> <div id="container"> <div id="navigation"> ... </div> <div id="content"><div id="spacer"> ... </div></div> <div id="footer"> ... </div> </div> When I view the segment below, I can't see the background image in Fx (Win32 and IceWeasel), however when I view it when editing the CSS in Chris Pederick's Web Developer Toolbar, it's there. I know it's probably something really stupid that I've overlooked, but if someone could point me in the right direction, I'd be grateful Code: .tuesday {
background-image: url('images/tu.jpg');
}
Code: <div class=tuesday> blah blah </div> Hello All, I'm working on this site at the moment: http://www.whitecapgraphics.com/APP Unfortunately I seem to be missing the drop down menus in IE6. Can anyone explain why? (No, I haven't made it standards compliant yet and I am aware that the png is not transparent in IE6. Aside from that feel free to pick on me for anything else, I take criticism well.) CSS: Code:
* {margin:0; padding:0;}
body {
background-image:url(images/background.gif);
color:#450109;
}
a {
color:#450109;
text-decoration:none;
font-weight:bold;
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:.9em;
}
a:hover {
color:#D6970C;
text-decoration:overline underline;
}
div#main {
background-color: #FFFFFF;
margin: auto;
width: 95%;
border-width: 0px 5px 0px 5px;
border-style: solid;
border-right-color: #450109;
border-left-color: #D6970C;
border-bottom:15px solid #450109;
}
#main #logo {
background-image:url(images/logo.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:#71001E;
}
#main #leftflourish {
float:left;
}
#main #rightflourish {
float:right;
}
div#navigation {
background-color:#400000;
float: right;
margin: 0;
width: 100%;
min-height: 24px;
}
div#navigation ul {
margin-left: 193px;
padding-left: 5px;
padding-right: 5px;
}
div#navigation ul li {
background-color: #400000;
float: left;
list-style-type:none;
width: 25%;
position: relative;
z-index:99;
}
div#navigation a {
text-decoration:none;
font-variant:normal;
color: #DFCDB6;
text-align:center;
display: block;
width: 100%;
line-height: 25px;
font-family: serif;
font-size:1.1em;
font-weight:normal;
}
div#navigation a:hover {
color: #FFCC00;
}
div#navigation ul li ul {
width: 90%;
padding: 0;
margin:0;
margin-left:5%;
margin-right: 5%;
position:absolute;
display: none;
}
div#navigation ul li ul li {
width: 100%;
}
/* shows drop down on hover */
div#navigation ul li:hover ul, div#navigation ul li ul:hover {display:block;}
div#lcolumn {
width: 190px;
float: left;
margin: 0;
padding: 0;
position: relative;
top: -66px;
z-index:999;
}
div#lcolumn ul li {
list-style-type:none;
text-align:center;
width: 167px;
padding-bottom: .1em;
}
#main #body #lcolumn ul li a {
background-image: url(images/yapdropback.jpg);
display: block;
background-repeat: no-repeat;
min-height: 24px;
color:#DFCDB6;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:.9em;
line-height: 24px;
letter-spacing: -.02em;
font-variant:small-caps;
}
#main #body #lcolumn ul li a:hover {
color: #ffcc00;
}
#main #body #lcolumn #featureContent {
padding-top: 24px;
}
#main #body #lcolumn #featureContent div{
padding-right: 30px;
padding-top: 60px;
background-image: url(images/featuresback.jpg);
background-repeat: no-repeat;
}
#main #body {
background-image:url(images/chaser.jpg);
background-position:bottom right;
background-repeat:no-repeat;
position: relative;
margin-bottom:3em; /*1.25 + 1.75*/
clear:both;
}
#main #body #content {
padding-left: 200px; /*fix for IE - it's including from side of L Column*/
position: absolute;
top: 48px;
z-index:1;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
line-height:1.1em;
text-transform: uppercase;
color: #350000;
width: 50%;
}
#main #body #content div ul li {
float: right;
list-style-type:none;
padding-left: 2%;
top: .4em;
line-height:2.2em;
display:block;
font-weight:bold;
}
h2 {
position:relative;
width: 98%;
background-image:url(images/navback.jpg);
background-repeat:repeat-x;
padding-top:1%;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
text-indent: 2em;
}
#main #body #content div ul {
width: 46%;
position: absolute;
top: .4em;
right:0;
padding-right:4%;
}
h1:first-letter {
font-size: 1.7em;
}
#content p {
padding: 2em;
}
#main #footer {
text-align: center;
position:relative;
top: -1em;
}
/* Aslett Clearing Method */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
* html #main #body #content {padding-left:0px; width:78%;}
.clearfix {display:block;}
/* end backslash hack */
I got the following, which is perfectly displayed in IE: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#container { overflow: hide; }
#container .content { float: left; margin: 0px 0px -2000px 0px; padding: 0px 0px 2000px 0px; }
</style>
</head>
<body>
<div style="width:585px;overflow:hidden;" id="container">
<div style="width:585px;height:9px;background-image: url(images/product/mid_top2.gif);background-repeat:no-repeat;padding:0px;float:left"></div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;clear:both"></div> <!-- div missing in FF --->
<div class="content" style="width:583px;background-image: url(images/product/mid_back2.gif);background-repeat:repeat-x;">
content goes here..
</div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;float:left"></div>
<div style="width:585px;height:7px;background-image: url(images/product/mid_bottom2.gif);background-repeat:no-repeat;clear:both;float:left"></div>
</div>
</body>
</html>
But the div at the left-side (see comment) is just not shown in Firefox. Can anyone explain why? When printing pages from this site http://www.sorensteensen.dk/kvl/ one or two lines disappear when the pages break. I have no idea why. Anyone knows about it? Soren Steensen |
|||||||