I'm new to development, and I can't wrap my head around why this will not display correctly in Firefox. I simply have a centered div with a background, and a background in the body. Nothing will display in Firefox.
Because your div/body has no content and does not have a fixed height/width.
Fixed. :) Thanks folks! I had my header in an include file in the /include folder. So I was pointing to my css using relative path ..\style.css. Apparently this works in IE and Chrome but not Firefox. /style.css made it work!
Related
I am trying to place an mp4 video into the background of a web page, with a container sitting on top displaying the page's content.
The video obscures everything though, even though I have the z-index set on the video css and on the bootstrap container
snippet - https://bootsnipp.com/user/snippets/Q0jbX
Is there a step I am missing?
I worked it out and updated the snippet https://bootsnipp.com/user/snippets/Q0jbX with the answer for anybody experiencing the same.
I added a class that had position:relative in it, and included it in the container, that solved my problem.
I have been stuck on this for a long time.
This page has several image icons to the left of the text content. These images get loaded perfectly fine in Chrome, Firefox, and IE9, but in IE8, they don't get loaded. IE8 is perfectly fine loading the actual image link directly, so I know it's not a fault with the image itself.
In fact, this only happens on that one page. The other pages are able to load images just fine.
Can anyone explain this huge mystery? Thanks!
the problem seems to be the css rule
.entry-content IMG
{
max-width:97.5%
}
When I remove it the images get displayed... do not know why this happens =/
edit
IE8 seems to have a problem with img tags where the width attribute and the css "max-width" attribute is set... maybe just remove on of them.
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input
Here is my site:
http://smartpeopletalkfast.co.uk/pp/
The very bottom menu is laid out correctly in every browser ive tested, including IE8 and IE7. However with IE9 its starts further to the right than it should and the twitter icon is pushed down to the next line. How can I fix this?
I tried to install firebug lite to see whats going on but I cant extract the firebug-lite.tar.tgz file.
http://getfirebug.com/firebuglite
Thanks
Turns out one of the relatively positioned divs needed to be given a set width.
I am trying to create a landing page here: http://www.serik.me and it looks good in Chrome & Safari but is not working in Firefox. Specifically, the #bottom ID is getting pushed up into the #righthalf ID.
When I tried to validate the CSS I ran into a bunch of errors with the embedded flash. I also tried all sorts of positioning fixes (absolute, relative, floats etc) but nothing seems to work.
Is it a problem with my in the HTML?
Any idea what I am doing wrong? I want the three rounded tables at the bottom to be centered across the entire page below the content above it. Thanks in advance!
Add this to your stylesheet:
.bottom {clear:both}
That should be all you need. Sorry I can't explain why it's working in Chrome and not Firefox, but this should at least get you on your way. (Tested in FF4)
The bottom isn't really centered, but it looks the same in Chrome as in FF with that fix.
I didn't see any major problems with your html, although it didn't validate for alt attributes and the embed stuff. Those shouldn't be affecting your layout though.
Good luck, the site looks nice.