So when working with this site locally on my computer the hover over image works perfect. However, when I put the site up on a server then the image doesn't appear.
I'm referring to the links with the grey background image. I've provided the css specifically for the Contact us link.
http://bankruptcyimmigrationlaw.com/NEWSTARTLAW/Home.html
...
#Contact_us li:first-child a {
padding:9px 5px 15px 30px;
margin-top:25px;
background-image:url(../images/DefaultNavBg.png);
background-position:-30px -15px;
background-repeat:no-repeat;
height:76px;
width:350px;
border-bottom:none;
text-decoration:none;
}
#Contact_us li:first-child a:hover {
padding:9px 5px 0px 15px;
margin-top:25px;
background-image:url(../images/CurrentNavBg.png);
background-position:-30px -15px;
background-repeat:no-repeat;
height:76px;
width:350px;
border-bottom:none;
cursor:pointer;
text-decoration:none;
}
It appears that your images isn't where you think it is, I'm getting 404. It could be that you didn't upload it, or if your testing on Windows and deploying to *Nix it could be an issue with the case of the file (or directory) name.
You didn't send the image to the server:
http://bankruptcyimmigrationlaw.com/NEWSTARTLAW/images/CurrentNavBg.png
returns 404
Tip: Using webrowser with some king of inspector - for an example Chrome with build-in inspector or Firefox + Firebug is best friend of every webmaster, webdevloper, webdesigner, etc.
Edit
Try to avoid CaseMixing in all your file names and paths. This is very reason of mistakes and bugs, so using same variation of lower case is definitely better.
My favourite notation is_lower_case_underscored.jpg,
using hypens is other recommended way, however it can be reason of mistakes when creating filenames with JavaScript as the hypen can be recognized as minus operator by accident.
Related
i read a ton of similar problems and test all solutions but no one works...
this is my css:
.button
{
background-image:url(../Immagini/pulsante.jpg) !important;
background-color:#004878;
padding:0.4em 1em;
text-decoration:none !important;
border-radius:5px 5px 5px 5px;
border:1px solid #C5DBEC;
font-weight:bold;
cursor:pointer;
margin-right:0.1em;
overflow:visible;
position:relative;
text-align:center;
display:inline-block;
behavior: url(../Scripts/css3Pie/PIE.php);
}
i add a simply alert in the file (even in the htc ones) and it's shown so the file is loaded.
as you can see i use the php version to avoid server problem but nothing change
i try even to remove !important in css but still it didn't work
What i miss?
EDIT
this is my folder structure:
ROOT
-->Defalut.aspx
-->Pages
-->Page.aspx
-->Scripts
-->cs3Pie
-->PIE.php
-->all other css3Pie...
-->Css
-->Style.css
From css3pie.com about behavior:
Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
Just you absolute path
-ms-behavior: url("http://css3pie.com/pie/PIE.htc");
or path relative to html:
/* You need to use this code if your html file in <site>/index.php
And PIE-file in <site>/Scripts/css3Pie/PIE.php
Also check if your get access to PIE-file from your browser
via link like http://<site>/Scripts/css3Pie/PIE.php
*/
-ms-behavior: url("/Scripts/css3Pie/PIE.php);
> Working example on CodePen (tested in ie8)
I am designing my theme for my website, and have no other CSS files in my folder besides template.css.
.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}
.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 960px; margin: 0 auto;}
.header-wrap { height: 118px; background: url('files/img/background/bg-header.png')
repeat-x; border-bottom: 1px solid #6A6A6C}
.nav-wrap { height: 38px; background: url('files/img/background/bg-nav.png') repeat-x;
border-top: 1px solid #D9D9DB; border-bottom: 1px solid #B8B8BA}
.body-wrap { background: #F4EDDB url('files/img/background/bg-body.png') repeat-x;}
I don't believe that the issue is relating to that but there must be something else doing this to my webpage:
The red lines show the whitespace that is being generated for some unknown reason. I have been looking at this for a while and have not been able to find the source. I was wondering if anyone has had an issue like this before? Or someone that might be able to point me in the right direction to fix the matter. I have also tried multiple browsers and have the same issue. I have also made sure that it wasnt just an administration issue. It keeps happening no matter what. I am using Google Chrome currently.
--EDIT--
Here is my jsfiddle for those of you who asked (it still does it on there too) this has the full html
http://jsfiddle.net/RCMh7/
Add this to your css.
body { margin: 0px; padding:0px}
Or google "reset.css" and add it into your theme, the Eric Meyer one is fairly popular.
http://www.cssreset.com/
you should put margin-top:0 and margin-left:0 on this divs.
can you show on jsfiddle for us? or a link page?
Use the firebug for firefox tool to check that CSS issue . It might be occurring just due to some background image or CSS file. For all CSS linked to that theme check that theme's .info file also.
Although As per my experience you will able to get exact source of CSS by using firebug .
It may be some background kind of image or CSS effect.
I'm, styling a hyperlink which has an own class.
.myLink
{
display:block;
padding: 4px 9px;
margin: 0px 6px;
}
.myLink:hover
{
background-color: #E4E4E4;
padding: 4px 9px;
margin: 0px 6px;
color:#000;
}
For the removing, I have this:
.myLink, .myLink:active, .myLink:visited
{
color:#000;
text-decoration:none;
}
In IE everything is working fine, but in Firefox my link gets underlined WHILE clicking on it.
I thought, if I definde the ":active" part, it's going to work, but it isn't.
Help please.
This sounds less like a CSS issue but more like browser preferences/overrides. I'd try to add !important to the text-decoration attribute, but actually looking for the reason would be the even better solution. Best solution would be checking the origin of the style using a tool (IE's developer tools or Firefox' Firebug).
If your are using a CMS or something with pre defined CSS files, it might be a browser specific CSS file causing this, as they will override the main CSS file. Even if you are not using a CMS or something with browser specific CSS files try Firebug in Firefox, this will tell you where in the CSS file the style is coming from and what CSS file is generating it.
www.getfirebug.com
Either use !important or make sure your ".myLink, .myLink:active, .myLink:visited" rules are below in order
(before I start I should say yes, I have done all the stupidity checks, yes the link is in my history and has been visited etc)
I'm using Chrome version 6.0.472.63, although it's important that this works on all browsers.
It works on Firefox, IE and Opera.
Basically all i'm trying to do is change the background image of a link if the link has been visited.
I've done alot of trial and error testing so bear with me for multiple examples.
This is what I had originally
.forum_box .title a {
background-image:url(../images/f_unread.png);
background-position:10px center;
background-repeat:no-repeat;
background-color:transparent;
color:#2D4054;
font-size:14px;
padding:10px 12px 10px 44px;
text-decoration:none;
display:block;
font-weight:bold;
}
.forum_box .title a:visited {
background-image:url(../images/f_read.png);
}
Works in every browser except Chrome. Next I tried just making it a colour rather than image.
.forum_box .title a:visited {
background-color:red;
}
Same again, however I changed the link to #fff instead of transparent and the visited link changed red, so apparently the bg colour only works if you set a bg colour for the parent.
.forum_box .title a {
background-image:url(../images/f_unread.png);
background-position:10px center;
background-repeat:no-repeat;
background-color:#fff;
color:#2D4054;
font-size:14px;
padding:10px 12px 10px 44px;
text-decoration:none;
display:block;
font-weight:bold;
}
.forum_box .title a:visited {
background-color:red;
}
However it still doesn't solve my image problem. So in one final attempt I tried this in the hope that for some reason Chrome would only work when the same properties where present in both.
.forum_box .title a {
background:#fff url(../images/f_unread.png) no-repeat 10px center;
color:#2D4054;
font-size:14px;
padding:10px 12px 10px 44px;
text-decoration:none;
display:block;
font-weight:bold;
}
.forum_box .title a:visited {
background:#fff url(../images/f_read.png) no-repeat 10px center;
}
That didn't work either and again continued to work on Firefix, Opera and IE. So I come here to Stack Overflow very confused.
Any help would be greatly appreciated!
UPDATE:
I've attempted a jQuery solution, although it still doesn't work. Despite having :visited links and I can confirm their visited state by changing the font color to red. jQuery('a:visited').length returns 0.
Same problem here.
Changing background-position in a CSS Sprite on a:visited is working for me in Firefox 3.6 but not in Chrome 6.
But probably soon it will stop working in Firefox too. (maybe for FF 4?)
It's a privacy problem, and you can read here a Mozilla article about it (March 2010) http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/
And the bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=147777#c160
I think only possible solution is to use creatively the background-color instead of images.
It's probably a security issue.
Check this post on the mozilla security blog.
I can certainly imagine how they would do it.
Chrome appears to have disabled css for :visited ( except for color ).
This would be to prevent the history sniffing exploit.
See http://www.azarask.in/blog/post/socialhistoryjs/
You might need your single quotes around your img url...
Browsers are funny about when they do care about quotes and when they don't....
This is done for security reasons, as it was possible to load a lot of different images and detect which links the user had visited, any property sending an specific request, or loading a specific resource, depending on what the user has visited is technically seen as a security issue, as it can leak personal interests of the user.
https://blog.jeremiahgrossman.com/2006/08/i-know-where-youve-been.html
I have an image over a table that has been style with CSS. When I have my image on the table without a href it is fine, once I apply an href the transparency is no longer working. Any way around this?
Table css
table.list_data {
background-color:#F3F3F3;
border:1px outset #A1A1A1;
border-collapse:collapse;
border-spacing:2px;
font-family:'MS Shell Dlg';
font-size:13px;
font-style:normal;
font-variant:normal;
font-weight:normal;
width:100%;
}
Happens in Chrome and FF, haven't tried IE but I expect the same.
html.....
<td><img alt="Add A job" src="images/add.png"/></td></tr><tr><td>joe bloggs</td>
try adding the following:
a{
background: transparent !important;
}
a img{
background: transparent !important;
}
This is not a terribly good idea to do in a production site. This indicates that there is something wrong with your css code. Try looking through the css and find whatever is causing your anchor tags to have a non-transparent background.
If you want to assure that you have transparent PNGs no matter how the code is, use TweakPNG.
http://entropymine.com/jason/tweakpng/