Chrome was recently updated and now some of my sites with a style of word spacing is wrapping to the second line with the last word. You can view it at the link below, with the header (H1) tag. Is this a bug or is there a work around? This is on Windows 7 64 bit.
http://exposurebasketballtournaments.com/3008/3rd-4th-boys-basketball-tournament
I am using chrome canary(V.26 on Windows 7) and I see this effect as well. I used chrome inspector to see if it was in the css code and it seem that this code
in element
<div class="event-details">
body.event .event-header .event-details {
float: left;
}
is causing this effect, correct me if I'm wrong :)
EDIT
If this is your site you can prevent it by adding this to the code min-width: 540px;
or just removing float:left
This question on SO might be similar to your problem.
It appears to me that the width of the element is less than the width of the text so it is wrapped. Try increasing the size of the element.
This is a bug that have been reported, please refer to Issue #170226 for more information. It has not been fixed as of Chromium Version 27.0.1413.0 (182441).
Before it is fixed, I suggest applying Chrome specific CSS to set word-spacing: 0; to elements that suffered from the problem. To do so, checkout CSS Browser Selector.
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
I am doing this site for a friend http://www.kidsmartnyc.com/ and there is an enormous white space in IE8 below the middle image that is not visible in any other browser or any other version of IE. Please help, I have tried everything:)
Change your css, you defined #page1 h1 { height:250px;} .. change this...
I'm seeing a couple of things:
Like Jordy said, you set a height on your #page1 h1 tag. That's usually not necessary. The reason you're not seeing it is because the h1 tag is empty, like this:
<h1></h1>
Below that in the code, you just have a couple of tags that are also creating more space. Take those out and you should be fine.
I have a web page that prints correctly on Chrome, Safari and IE, but has the followign problem on Firefox:
It prints just the header on the first page. The rest of it is blank.
The actual content is shown only on page 2.
Googling a bit about it i found that the "float: left" style is causing it.
If i remove the "float: left" it prints ok, but it does not look as it is supposed to as it needs to display 2 columns beside each other in print as well as on screen.
Is there a solution to this problem?
Thanks.
Hi I had a similar problem but I had an extra blank page at the END when I printed. IE would do the same thing, so I figured I had CSS issues.
Long story short, I found that if you have a paragraph as the first element in the body element, and the paragraph has the 'margin' property set in CSS, it printed a blank page at the end. Interestingly, it only printed a blank page if there was only one page. If I removed the margin from the style OR added an element before the paragraph it did not print the extra blank page.
JAB
I found that setting the page height in your HTML a little smaller than indicated in the printer's page height prevents the blank page issue.
Try using a print style sheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
In this style sheet you will be able to remove the float:left for print and not have it effect the layout in the browser.
Al
The extra blank page in Firefox can also be caused by the use of display: flex and min-height: 100vh, which I had used to create a sticky footer.
To fix, just add a print style setting display: block and min-height: 100%.
Had the exact problem - header followed by a blank page or half a page. If your layout relies heavily on tables, it could be a vertical-align rule set to anything but middle or baseline.
Setting the rule to middle as shown fixed it
#media print {
table tr td {
vertical-align: middle;
}
}
I have my content in a table and this fixes the problem.
tr { page-break-inside: avoid; }
After a lot of tries, I found that if you have page-break-after: always; Firefox would show an empty page at the end if you're applying it to the last element. You can use something like :not(:last-child) to prevent it.
I also had a blank page as my FIRST page.
I got around this by using:
position: absolute;
top:0;
This forced the content to the top of the first printed page (you need to apply it to whatever you want to be at the top of the very first page). I am using tailwind css and had the print:hidden class on all of my other layout items. (such as nav and footer)
#media print {
.print\:hidden {
display: none;
}
}
I think the problem was an artifact from switching to print mode was remaining somewhere. When I switched to the print emulator in Firefox dev tools there wasn't anything above it looking at the box model, so I was stumped. luckily the above band-aid solution worked like a charm.
Would have liked to been able to figure out the root problem tho...
For those who use Bootstrap:
In imported _print.scss file they set
page-break-inside: avoid;
on tr element. That was causing extra blank first page in my case.
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