I am working on a site (new to HTML/CSS). I have a main container div which holds other layout (div, table etc) elements. I added a background img (attach: background-container.png) to the main container div to give a drop shadow effect (similar to this attached screenshot of a site: drop_shadow_example_site.png). Surprisingly, the technique works for IE6,7,8 but not for firefox and chrome. I am attaching two screenshots: 1.screenshot in firefox and chrome (attach:comp does not work in FF & chrom.png) and 2. screenshot in IE6,7,8 etc (comp works in IE6,7,8.png).
I have also attached a zipped code files (html,css,img etc).
Link to SiteCode.zip
http://dl.dropbox.com/u/27899629/SiteCode.zip
Thanks for your help.
Regards,
appu.
Add the lines below to your css:
.container {
clear: both;
overflow: hidden;
}
Related
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'm having a problem in Google Chrome. I'm using a simple hover state on a display:block; link to change only the background:url(); property on the hover.
Google Chrome shows the actual hover change ok, but when I mouse out of the area, the background goes transparent/disappears.
Here's my CSS:
#branding #logo a {
width: 259px;
height: 201px;
border:none;
display: block;
background:url(images/logo.png) top left;
}
#branding #logo a:hover {
background:url(images/logo_hover.png) top left;
}
The actual site is here: http://beerblestudy.org. Again this is only happening for me in Chrome. Any thoughts?
It's working for me an all browsers. Try deleting your cache because it's working normally. I recomment you to delete the lines top left since they aren't necessary
Your background is disappearing in chrome here too.
I know I shouldn't "me too" on here, but this is odd and what brought me here was the same problem I'm having on a site I built recently: http://macvillain.com - the right hand column image blocks.
I tested thoroughly on most browsers (not ie6 or 7 - I've banished them) and has been fine in chrome for the past two weeks until today. Sometimes clearing cache etc works for a little while then it comes back. I don't get it...
UPDATE:
Hi I got an answer on the Google Chrome forum which said:
"Chrome uses strictly HTML5. Validate HTML code http://validator.w3.org/"
I had forgotten to do this and there were a couple of invalid things which I fixed and now all is fine and dandy.
I suggest you do the same.
Try this technique: I saw a JQuery plugin that automatically download images specified in CSS style sheets.
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
http://philliesnation.com/
I am currently debugging this site for Internet Explorer and am running into two issues:
In IE7/8/9 at the bottom of each post there is a "Filed Under:" section that has a ul set at 200px wide. But for some reason in IE it is being shrunk down to 50px by adding an inline style to each li item. Therefor, the section shows up vertical instead of horizontal. In FF/Ch/Saf it looks fine.
In IE7 the main navigation is not properly working. If you scroll over nav points you get a dropdown with more information, but on on three tabs: News/Features/Multimedia these dropdowns dont work at all.
I did not build this site but am helping to debug it and have been trying for numerous hours on end to figure out why these bugs occur. Any help is much appreciated.
To fix your first issue: In your func.js you have the following line:
if( $.browser.msie ) {
$('.post-links ul li').css({ 'width' : '50px' });
};
Thats whats messing up the width of your "File Under.." section in IE. Remove that and all is well (i see no reason why to keep it).
For your second issue: I can't quite diagnose the problem because your site keeps freezing my IE browser (it's so heavy!!) but from what i can tell your nav script is not firing in IE correctly, so you're going to have to force it with some conditional comments in the header of your document, like so:
<!--[if lt IE 9]>
#navigation li:hover .dd-menu {
display: block;
}
<![endif]-->
I'm trying to get this to work:
<!doctype html>
<html>
<style>
section{
display: none;
}
section:only-child {
display: block;
}
</style>
<body>
<section>This should be visible</section>
</body>
</html>
I believe that the text 'This should be visible' should be visible! This is also the case in Firefox. Firebug, as well as Safari's Web Inspector think so as well.
However, if you open the page in Safari (OSX and iPhone), the text is not showing. Why is this?
I tested your code, also with a doctype, and with a non-HTML5 element (a div). All webkit browsers I could test had issue: Safari-on-Windows 5, Chrome Windows, Chrome Linux, Epiphany-webkit.
When I changed from display states to background colours, however, webkit worked fine. Changing other display states like float also worked fine.
This is very likely a bug (though I didn't see one via search engines, but I did not search bugs.webkit.org) purely to do with changing display states. It also works fine if the element is first set to block and :only-child is set to none, so it would specifically be overriding the display: none. Opening element inspectors seems to trigger the CSS display which remains until refresh.
Your code (if you add a doctype too) seems to be a pretty good test case. If this bug isn't already on bugs.webkit.org you could submit this code.
*edit okay I definitely have Javascript on, still don't see the ability to have this be a comment rather than an answer, which is what I originally intended.
I have the same problem and I found this workaround:
http://jsfiddle.net/ZxAnH/
section {
height: 0;
overflow: none;
}
section:only-child {
height: auto;
}
It wouldn't hide the elements margins but as a wrapper it could be enough to hide some elements. Did you found another workaround?
I would like to do the following by using CSS (instead of tables) :
displaying images (with caption underneath)
the images have different width (but the same height)
the images should be vertically aligned
by using css (as opposed to tables) the number of images per line would be automatically fit to the screen resolution
I tried the following css :
div.float {
float: left;
width: expression(document.body.clientWidth < 443 ? "442px" : "auto" ); /* set min-width for IE */
min-width: 442px; /* sets min-width value for all standards-compliant browsers */
text-align: center;
}
Unfortunately such css works well under Firefox or Chrome, but does not work under Internet explorer 9.
Any help in this matter would be greatly appreciated. Thank you in advance, Patrick.
http://phrogz.net/CSS/icons.html
(Note that this page is referring to 7-year-old web browser versions. Things are even better now.)