I have two demo pages here:
http://quiltersrule.com/beta/index.html
http://quiltersrule.com/beta/retail.html
When hovering over "Instructions & Products" as well as "Events", the last child link does not have a full background until you hover over it. The "About Us" is just fine. I have tried messing around with z-index, but this does not seem to be the problem. I have no idea what to do.
All the code and everything should be accessible via View Page Source so I'm not going to try to paste it here.
Edit: Forgot to mention this happens in IE only. Sorry!
UPDATE:
If the issue is only in IE, then an IE specific stylesheet is what you need:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Full tutorial
Original:
Looks fine to me (Chrome v27, OS X 10.8):
Related
Lately I've noticed a strange behaviour in my browsers, when developing a website or doing some debugging.
When I click on View Source to check the site's HTML source code, the external stylesheets that I coded as links appear now inlined, that is, in its entirety.
What appears is something like this:
<style media="screen" type="text/css" style="display:none">
/*a bunch of CSS styles here, lines and more lines of CSS*/
</style>
...instead of the typical:
<link href="mystyle.css" rel="stylesheet" type="text/css">
It's happening with Firefox, Chrome, Safari, IE... with any browser I use.
Do you know guys what could be going on?
It happens to be only when I use my iPhone as a modem... no idea why.
I know this is not an uncommon problem, but my layout that works in all other browsers blows up completely in IE (8 and 9).
I don't know if protocol is to post all the code here or just a link...
it is: www.megadyne.com/safezone/index.php
I think the relevant part is that I have a container div which is position:relative and then a bunch of divs inside that are position:absolute and the inner divs are being pushed out in IE.
There are lots of other problems with the layout—only in IE, but hopefully they are related?
Thanks in advance!
Brian
Take a look at the css for http://html5boilerplate.com/ it does a pretty good job standardizing all the css for browsers before you put in your code. Try using their css and putting #inline your css into their css where it asks for your custom css, and see if that fixes the issue.
if that doesn't work you can have a separate css file for IE with the HTML5 code
//If browser is IE version 8 or greater
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Turns out there was something wrong with my declaration. Fixed that and all is right with the world again.
If you check out the site below in Safari 5/OSX or IE7/Win, the right bottom column starting with "Stay Updated" (#secondary) is super-narrow.
In the CSS it's set to the same width as the "column" directly above it, #socialsidebar. Instead of being 31.6667% of the total width of the page I think it might be rendering as 31.6667% of #socialsidebar.
http://216.172.167.18/~julia/books/
The width is correct in every other modern browser. Any ideas why this would be happening for Safari 5/OSX and IE7/Win and how to fix it?
Thank you for your help!
Using the IE developer toolbar and setting a width of 100% to #secondary seems to fix this. I would recommend setting up a seperate IE7 stylesheet the same way you setup custom classes on your <html> tag:
<!--[if IE 7 ]>
<link rel="stylesheet" type="text/css" media="all" href="ie7.css">
<![endif]-->
or
<!--[if IE 7 ]>
<script type="text/css>
enter code here
</script>
<![endif]-->
As to why exactly it's happening, IE7 has some weird display quirks to it. I rarely dig deep enough to figure out what's exactly going on, as I prefer to spend as little time with it as possible.
A possible resource: http://www.satzansatz.de/cssd/onhavinglayout.html
I was missing a close-div for the #socialsidebar div. D'OH. Thanks to everyone else who got sucked into my web of stupidity and took the time to look at this. :)
I'm having problems with this website http://cspa.wa.edua.au.
The website is fine in most browsers however in IE the drop downs go behind the slider. I'm using aviaslider and super suckerfish for the navs.
Any CSS experts out there can have a quick look and let me know what I need to change so this problem is fixed.
The problem is with IE7 and is not to do with HTML5. Instead it is a conflict with the z-index of the aviaslider and associated script.
Adding position: relative and z-index: 99 to the <nav> element should fix the problem.
You just need the HTML5 shiv by the looks of it.
Try this in ur <head>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
The beginnings of a site here:
http://qaa.miltonfame.org/
html and css pass validation tests
Page displays fine in all Mac browsers I have tried (Safari, Firefox, Camino)
Page displays fine in Windows 7 FireFox
Nothing but background renders in Explorer 8 Windows 7 (and in other Explorer versions via screenshot services.) View Source shows that Explorer is getting the content - it's just not appearing on screen.
No idea how to approach addressing this - any suggestions would REALLY be appreciated.
Thanks a million.
My friend, you haven't closed your script tag for jquery. I saved a local copy and tested it - the content shows up once the tag is closed.
<script type="text/javascript" charset="utf-8" src="jquery-link" />
It needs to be like this :
<script type="text/javascript" charset="utf-8" src="jquery-link"></script>
Cheers! :)
Also you've got a script tag and meta tag at the bottom that you may need to take care of.
I'm going to take a shot in the dark and say that if you remove the following, you'd have better success:
<!--[if lte IE 7]>
<script src="/js/ie7/IE8.js" type="text/javascript"></script>
<![endif]-->
Since you say that HTML and CSS passes, you can pretty much rule that out. Your source doesn't look that complicated. That leaves JavaScript, and the only IE specific thing in your source are those lines.