I am working on my website ( http://idefinland.com ) and have problem with displaying navigation. It looks good in all browsers and with any resolutions. Ideally it looks like this:
![Proper navigation][1]
Sometimes in Chrome and Safari navigation drops out of the header. It looks like this:
http://h1964807.stratoserver.net/files/share/9_1_2012/XxtmQqaFD0a0tEqylkdg.jpg
Then I reload the page and the problem disappear.
Has anyone ideas on what could be a reasons for such a problem?
Read the directions in footer.css -- there's some code you need to put in your HTML file to fully enable this stylesheet. Specifically, this needs to go between the <head>..</head> tags:
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
Related
I have a weird issue where IE8 doesn't appear to render my background image using imported CSS.
Because of IE8's problematic issues and its lack to support many CSS3 elements, I am forced to use conditional logic to load specific stylesheets for my site content. I am using MVC4 and my _Layout page has the following in the header:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="#Url.Content("~/Content/DeprecatedSite.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 8]>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<style type="text/css">
.gradient {
filter:none;
}
</style>
<![endif]-->
In my deprecated.css file I have the following:
#main {
background:url('/Images/iecollage.png');
background-repeat:no-repeat;
width:100px;
}
In my site.css, I have this comparable code for the same ID tag:
#main {
background:url('/Images/collage.png');
background-repeat:no-repeat;
background-size:920px;
width:100px;
}
I had to use 2 differently sized images and attribute definitions to correct the way the browsers interpreted the Markup. I am comparing the results using IE8 and Chrome.
When I launch the site, the home pages reflect the appropriate corresponding images and renders everything as expected.
My problem occurs when I navigate to another page which resides outside the Home directory (if that really makes any difference with respect to the issue).
The page has the following in-line code:
<div id="spotlight" style="position:relative;left:-50px; top:2px; height:820px;margin: 0;width:650px;">
In my Site.css file I have the ID styled as such:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
width:100px;
}
In the Deprecated.css the style is:
#spotlight {
background:url('/Images/orange_spotlights3.jpg') no-repeat;
}
In Chrome, the style gets loaded from the imported stylesheet. But in IE8 I get a blank area where the image should be loaded.
The quirky behavior I noted is that if I were to remove the following lines from the Site.css file, then both Chrome and IE8 will render the image but I loose the transparency effect in Chrome which is not the intent of separating the ID's to different stylesheets.
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
Its as if the 2 stylesheets are confusing the browsers or something.
Any explanation would be greatly appreciated.
As it stands, I am thinking of simply scrapping any support at all for IE8 because its getting to be too much of a bother trying to create 2 different accomodations to render the elements.
If you're using MVC it may be a problem with the absolute path which is kind of what it sounds like is happening. (Try pulling up your developer tools in Chrome or FF and check out the console while doing a page reload see if you get a 404 on the image GET request)
You can try something like ../../Images/orange_spotlights3.jpg where each ../ is one folder level up. You could also look at using a helper like #Url.Content("/images/orange_spotlight3.jpg") or try the absolute path all together.
Ok, after doing some blundering with the stylesheets I managed to get both to play together. What I ended up doing was retaining the comments for all the previously mentioned lines in the
Chrome stylesheet except for opacity:.60
So my stylesheet that will be used to support all other browsers other than IE8 now looks like this:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
opacity:.60;
width:100px;
}
The other stylesheet for IE8 remained as is and both pages render the image appropriately according to their assigned stylesheets.
Apparently the following attributes don't work well in IE8 and can obviously cause problems:
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
I have tested this using Firefox, Chrome and IE8. I have not seen if there are issues with any other browsers but I would imagine this should work with Safari as well.
What I still have no explanation for is why those elements affected IE8 browser when they clearly did not exist in its assigned stylesheet.
In the next revision of this site, I will definitely drop support for IE8 altogether. As much as I'd like to make it available to users having out-dated versions of IE 8 and earlier, its just added labor to try to keep up a dead horse. :-)
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):
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've spent most of today trying to work out why the css on my site isn't working correctly in IE7. You can see the site at http://www.ecocamel.com
When you land on the product scroller page with the shower heads. .. everything is a mess, with mouseover popups partly showing without any mouseover, and products flowing out of the container to the right..
I tried adding overflow:hidden, and position:relative, which did fix quite a lot of it.. but it then caused the website to chop off part of the left / right arrows on other browsers...
SO I've removed everything for now. Just infuriating that it works perfectly on every other browser. How can I work out the best way of fixing it without impacting other browsers? I guess I can add the overflow:hidden / postion:relative stuff with a conditional IE7 statement so it doesn't impact other browsers.. but that still doesn't resolve things properly.
A good method is to use conditional comments.
You could use:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
In this cases extra classes are put on the html tag for you to style explicit for IE6/7/8
Like:
div {color:#ff00ff}
.ie7 div {color:#00ff00;}
In the case of using conditional IE7 statements, while it seems a crap way to do it, if that is the only alternative without re-writing your CSS then that is the best solution.
As GordonM has mentioned, it's hard for us to know what's going on without seeing the code. But as you're using position:relative, I may suggest trying to use z-index so that the popup's display on top of everything (like they should do).
As well as this, have you followed the CSS box model correctly? What I tend to do is write these basic statements when I create a div or p tag:
div {
float:left;
width:100%;
margin:10px;
}
This is cross browser compliant, as I used to work for an agency who wanted their websites to use just one CSS file for all browsers. It is possible to build a web page with HTML and CSS and make it work on every single browser (excluding IE6) without the use of conditional statements. But as I think you've come/coming to the end of development, you aren't in a position to re-write your CSS completely. So try the z-index idea first, then try applying the above code to any affected div.
Google "conditional css for IE" and you'll find a plethora of tutorials showing you how to create conditional CSS for only IE version x+ or specifically ie7.. even all browsers but IE. Most websites require some, if not a ton of IE tweaking. Also, look in to a reset.css to set all margins and paddings to 0 to help with consistency.
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. :)