I have an ennoying bug with CSS on my new site.
This is a random bug with chrome only. It appears usually at first visit and disappears with a refresh (F5) or a window resize. To make it reappearing, you have to refresh the page (sometimes up to 10 times).
When the bug appears, two links ("Blog" and "Qui suis-je") of the menubar are some pixels too low, and outside of the chrome's computer css boxes (in developpers tools).
(source: ksxav.net)
]
Here is a gif with and without bug :
After searching on google, I tried the following things :
Fixing Varnish for avoiding the 304 bug (bug described here)
I tried to copy all the content of CSS targeted with #import url(css url) into the main CSS file (described here)
Remove all my custom css
I was able to reproduce the bug on 4 differents computers (same Chrome version)
Same results. I also see the same thing on the theme's developper's website (here. Remember, sometimes you have to refresh / close and reopen the tab to view it).
Do someone has an idea? The theme's developper says he can't reproduce the bug, but as I said, I saw it on 4 different computers...
Thank you.
Here are informations :
Chrome 44.0.2403.89, no plugins at all
Wordpress up to date (4.2.3)
Theme up to date
This looks like a vertical alignment issue, but it's probably not. There are a couple things you can do here, though, to try to force the issue:
Drop floats
The a child elements within your li are floated. That's not necessary and I'd recommend removing them.
Fake it
There's no reason you have to rely on the actual document flow to display this where you want it. I'm going to warn you in advance, this one feels icky to write but works like a charm.
On your original a elements
Copy the text of the a to a span, and plop it right next to the other
Example
Mes chiennes
<span>Mes chiennes</span>
Set the following CSS rules:
#nav li {
position: relative;
}
#nav li span {
visibility: hidden;
}
#nav li a {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This is a little bit of voodoo where we make the span reserve the actual space needed for the word, and then force the element to display perfectly centered within the tab. The transform bit just drags it so the center of the element is at the top and left coordinates you provide, so feel free to play with those to get them where you want them.
Hope that helps.
I am trying to resolve an issue with an image slider in IE9.
Please see http://betelec2.placeneuve.com/index.html
The same page is rendered using php at http://betelec2.placeneuve.com/index.php and it works fine, but the load time is slow, so the home page has been "recreated" using static content with the .html file extension.
The site is htpassword protected and the username and password are placeneuve and patali123 respectively.
The issue I am having is that in IE9, the slider is disregarding the list styles. It is displaying the images stacked one above the other (rather than in a row with overflow hidden) and it is using default unordered list styles (with bullets). Furthermore, it is ignoring the positioning of the text overlay. Finally, it is doing the same thing to the image thumbnails that appear below the slider.
If you look at the site in Chrome, FF or Safari, it works without a glitch.
IE9's developer tools are not very useful, at least for me, and I am a bit lost as to how to resolve this.
Unfortunately, I received this site from someone else who had concatenated and minified the CSS and didn't provide the original CSS, so finding the selectors is pain as well. However, the relevant CSS selectors start with .rg-ss-
Anyone able to assist would be most appreciated.
Use following:
.fatfooter2 ul li {
list-style: none outside none;
margin-bottom: 0;
display: inline; /* display inline should put your list items in line *\
}
I just finished my portfolio site, which is my first attempt with html5 and it looks great in Chrome. But when I tested it in IE and FF, exept IE9, there are some major differences that all occur in the header. I think this is because the header has a fixed position. I did this because of the menu. I created a one pager and if I didn't set the position on fixed, the menu disappeared when you clicked on a menu item.
A second error is that with IE all the images get a blue border, which doesn't appear on Chrome.
And a third error is the font in the header is also different with IE. I used an #font-face font for it.
My HTML and CSs code validates on W3C.
You can find the website at www.nathaliedehertogh.be
Can someone please help me out with this one.
All you need to do is add clear:both to #menu, and border:0 to img.
The blue outline is default in some browsers to show that the images are links.
You need a clear in your header to allow the content to flow as wanted after.
The blue border for IE simply needs a CSS setting:
img {
border: 0;
}
As for the font, some fonts don't read correctly in IE. The error I get is:
#font-face failed OpenType embedding permission check. Permission must be Installable.
You don't have a height defined in your div 'kopregel'.. this is causing an issue since you have elements with heights defined inside it.
NOTE: I see it all broken in FF, stuff is being smooshed to the right.
The problem with your header is you need the clear function in your css.
Here is the new and edited code.
#content, hr {
clear: left;
margin-left: auto;
margin-right: auto;
width: 80%;
}
No issue with fixed positions this is just a common issue, hope this helps let me know!
Another major Difference Chrome vs IE check this out
http://technofizzle.blogspot.in/2013/04/chrome-and-ie-display-image-completely.html
The following CSS works in Firefox, Chrome and Safari. But for some reason IE 9 it isn't displaying the legend. The other CSS is displaying properly in IE 9. I have experimented but cannot find the answer. It should display orange legend headers with white text and a black border.
Site address: http://www.mconchicago.com
CSS :
legend{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
width: 49.2em;
padding: 2px 6px
}
My stylesheet is a mess as I learn by trying things. I think there might be a conflict in it somewhere.
Full Stylesheet can be viewed here:
Your problem is not only on the orange header, you have 61 Errors and 15 warnings on your document markup.
See this link to know exactly what errors are, where are they located, and how to solve them!
Also, you should read a bit about HTML:
Google's HTML, CSS, and Javascript from the Ground Up
Opera Web Standards Curriculum
SitePoint
The MDN (Mozilla's Developer Network)
W3.org HTML element reference
Source: http://w3fools.com/ (thanks to Spudley )
I would hazard a guess at it not working because you're trying to put the heading in a legend element. Legends are only for forms, but this is a page / section heading rather than a form legend.
Replace <legend> with <h1> and update your CSS accordingly.
You should also get used to writing valid HTML as invalid code can also lead to inconsistencies between browsers as they attempt to make sense of your code in their own ways. Use the W3C validator and work through the errors
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mconchicago.com%2F
Sometime after this string of events took place the entire site was relaunched. I have archived the old files. If you want to see the results of this advice, for the time-being at least, you can view http://www.mconchicago.com/MCON/
An image set as the background of a DIV is displayed in IE, but not in Firefox.
CSS example:
div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}
(The issue is described in many places but haven't seen any conclusive explanation or fix.)
Sorry this got huge, but it covers two possibilities that consistently happen to me.
Possibility 1
You may find the path to the CSS file isn't correct. For example:
Say I have the following file structure:
public/
css/
global.css
images/
background.jpg
something/
index.html
index.html
On public/index.html the following paths will include the CSS file:
#1: <link href="./css/global.css"
#2: <link href="/css/global.css"
#3: <link href="css/global.css"
However on public/something/index.html number 1 and 3 will fail. If you are using a directory structure like this (or an MVC structure e.g.: http://localhost/controller/action/params) use the second href type.
Firebug's Net monitor tab will tell you if the CSS file can't be included.
On the subject of paths remember that images are relative to the path of the CSS file. So:
url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */
Hover over the url() part of the background attribute in Firebug's CSS tab to check if the file's being loaded.
Possibility 2
It could be that the div has no content and thus has a 0 height. Make sure the div has at least a line of something in (e.g.: lorem ipsum delors secorum) or:
div.something {
display: block; /* for verification */
min-height: 50px;
min-width: 50px;
}
Check Firebug's layout tab (of the HTML tab) to check the div has a height/width.
Strangely enough, after smashing my head on the keyboard for hours, I added display:table; to the DIV's style and the background image magically appeared in FF.
It looks like a background-attachment issue. It needs to be set to fixed (not scroll) to work in FF.
See: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
Happend with me. The jpg does shows in IE but not in Firefox or Chrome. Here is the solution
Change the following css for the element where image is displayed. It can be span, div or any other element :
display:block
Old post but I just Had a similar problem images not showing up in Firefox turns out it was Ad-block add-on, had to change the names of my images
Try putting the image name in quotes, e.g.:
background-image: url('image.jpg');
I've had a similar issue. The reason is that firefox is sensitive for missing fields in your css. Chrome will (sometimes) auto complete missing field, thus the issue appears on your firefox browser.
You need to add a display type, because right now it is being translated to 0 height.
In my case:
.left-bg-image {
display: block; // add this line
background-image: url('../images/profile.jpeg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
opacity: .6;
min-width: 100%;
min-height: 100vh;
}
Make sure that the image you are referring to is relative to the css file and not the html file.
try this.
background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;
Instead of using URLs relative to the page/stylesheet, a cross-browser solution is to give a relative URL starting with the application/domain root.
/* Relative to Stylesheet (Works in Firefox) */
background: url('../images/logo.gif');
/* Relative to Page (Works in IE, Chrome etc.) */
background: url('images/logo.gif');
/* Absolute path (Fine, unless you change domains)*/
background: url('http://www.webby.com/myproduct/images/factsheet.gif');
/* Domain Root-relative path (Works in Firefox, IE, Chrome and Opera) */
background: url('/myproduct/images/factsheet.gif');
FYI: As far as I'm concerned, there is no requirement to use quotes in CSS URLs, I've used them here 'cause it looks prettier.
I solved a similar problem by renaming the CSS class. MSIE allows CSS class IDs to begin with numbers; Firefox doesn't. I had created a class using the width of the image in pixels e.g. .1594px-01a
I actually knew it was non-standard syntax but since it was working fine in MSIE I had forgotten about it. After trying all the other stuff it finally dawned on me that it could be a simple as the naming, and as soon as I put a letter in front of the class, presto!
For me, it was a matter of the file-name being case-sensitive. I'm not sure if it was CSS or if it was my Ubuntu operating system, or if it was firefox, but the way that I finally got the background images to display was by referring to BlueGrad.jpg instead of bluegrad.jpg. The former of the two is how it was saved. I didn't think it would be case sensitive, but it was.
You could try this:
div.something {
background: transparent url(../images/table_column.jpg);
}
The other declarations are shorthand CSS properties, and I afaik they are not needed.
Do you have this online somewhere? I'd like to see if I can fiddle with it a bit. (locally)
More questions than answers I'm afraid, but they might help you get to the right answer:
Is it possible that you are collapsing the div in Firefox in some way (with some floats or similar)?
Is there any other content in the div to ensure it's large enough to display the image?
Have you installed Firebug and taken a look at the CSS definitions on the page?
Are you absolutely sure the image is a JPG file and not a PNG/Other file?
I'm wondering if IE is letting you get away with something other browsers are not.
Likewise, is the files case exactly as specified?
There's this HTML 'base' tag like in
<head>
<base href="http://example.com/some/bizarre/directory"/>
</head>
If this is present in your page, the image for the url is not relative to your current url, but to the given base url. I wouldn't know why IE displays it and Firefox doesn't, though.
The Webdeveloper Firefox extension provides the option to "Display broken images" - this may come in handy. Also, you might try "Live Http Headers" to see if/what image is requested and what the return code is.
I had a similar problem regarding the CSS background-image property in FF. It worked fine in IE but refused to work in FF ;) After reading a few posts I established that the issue was indeed that there was no content in the div except for a table (I was trying to make the background image adjust to the size of the broswer without collapsing or expanding and therefore used a much larger image in the background of the div in order to form a 'cropping' of sorts.) The solution for me it seems was to simply 'cheat' by placing an img tag that displayed a blank .png file that I then re-adjusted to the the correct height of the image with width set to 100%. This worked for my problem, and I hope it helps anyone else who is running into a similar problem. Probably not the best fix, but it's a fix ;)
The only other thing I can think of besides what has already been said is the way the picture was created. If you made/edited the image in Photoshop, make sure you save as Save For Web...
Sometimes if you use a JPG image for Photoshop without saving as a Web image, it may not appear in Firefox. I had that happen a few weeks ago where a graphic artist created a beautiful header for a mini site and it would NOT appear in FF!
Wait...
Try setting a width and height on the div to expand it. It may be a no-content issue in your div.
For those, who encounter the problem in FF, but not in Chrome:
You could mistakenly mix between different value types for the position.
For example,
background: transparent url("/my/image.png") right 60% no-repeat;
Will make this error. The fix could be:
background: transparent url("/my/image.png") 100% 60% no-repeat;
My mistake was to use '\' instead of '/'. Worked OK in IE, but not in other browsers.
I found two things that were causing this problem:
I was using a .tif file which Firefox did not seem to like - I changed to a .png file.
I added overflow:auto; to the CSS for the div - display:block; did not work for me.
It may look very weird, but this works for me >
#hwrap {
background-color: #d5b75a;
background: url("..//design/bg_header_daddy.png"), url("..//design/nasty_fabric.png");
background-position: 50% 50%, top left;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat;
}
Yes, a double dot and double slash ... ??!!?? ... I can't find anything on the internet that reports this strange behaviour.
[edit]
I've made a seperate post > https://stackoverflow.com/q/18342019/529802
(It doesn't seem like these are the exact circumstances as of the OP but the issue is somewhat related and I've found a workaround for that which I want to share)
I've had the same problem – background-image visible everywhere except in Firefox – and for me, the issue had to do with the fact that I'm working on a browser add-on.
I'm injecting a file style.css in the pageMod module with the contentStyleFile attribute. In it, there's the rule background-image: url(/img/editlist.png); where I'm referencing an image file external to the add-on. The problem here is that Firefox, unlike other browsers, misinterprets this external domain root as the add-on's internal root!
The css-file is a 1:1 port from the Chrome version of the extension/add-on, so I didn't want to mess around with it. That's why I've added an additional contentStyle rule in combination with a copy of that image in my resource folder. This rule simply overwrites the rule inside the css-file.
(In hindsight maybe even a more elegant method than before …)
Nobody mentioned background-origin so there you go :
background-image:url('dead.beef');
background-size: 100% 100%;
background-origin:border-box;
Solved the problem for me ; my background apparently was outside my div.
In my case it caused by "Strict" mode in FF Privacy & Security settings. After I have changed to "Standard" all background images had become visible.
This worked for me:
1) Click on the background image table.
2) Right click on the status bar at the bottom of the page.
3) Click Inline styles.
4) Click the Background styles tab.
5) If you see 'Transparent' in the colour title, that is the problem.
6) Click the colour box and select a colour (white is a good choice.)
7) The colour title should now read white.
8) Click OK.
9) Save the page.
10) Upload the page and overwrite the existing file.
11) Refresh the page and your background picture will display.
Note: Please ensure that you have uploaded your background picture jpeg. I forgot to upload the background jpeg once and spent ages trying to sort it before I realised my error.
Regards
Martin