I am working on a website, the site is http://fredsrewards.loyaltylane.com/fredsshopper. There is a navigation menu at the top of the page. The links don't work in Chrome or Firefox but they do work in IE9. The site uses a few javascript files. I have tried changing things in the CSS and HTML but nothing works. The site was built using MVC 3. Any advice would be greatly appreciated. Thank you in advance.
It's because you have another div (phar_panel) on top of the navigation.
You can fix it by setting:
#m_box {
/* rules you already have */
position: relative;
}
#phar_panel {
/* rules you already have */
width: 230px;
height:31px;
right:30px;
position: absolute;
}
#phar_panel img {
/* rules you already have */
left: 230px;
position: absolute;
}
Also, be careful, you have more than one element with the same id (navigation) in your page!
Related
the IE doesn't show SVG images on my website.
The first image that isn't shown is a logo image which is put via :before content in front of a Logofont.
the css code is the following:
.logo-svg:before {
content: url('images/logo.svg');
}
.logo-svg {
height: 1.6em;
width: 1.6em;
display: inline-block;
margin-right: 0.2em;
position: relative;
top: 0.2em;
}
Then a few images, that are background images for icons are not shown too, the CSS is here:
.author-link-posts {
background-image: url("/images/icons/svg/archive.svg") !important
}
Has somebody an idea why the IE doesn't show the SVG or maybe a workaround or something like this?
Regards,
Markus
SVG is not supported in IE8 and below. Is this issue happened in all other browsers? Also you can use modernizr as a fallback.
Basically Modernizr will add a "no-svg" class in tag.
The solution are the paths. I had to put the slash before the path, so it works in the IE.
I have a weird problem whit my css and I cannot find a solution on the net…
I have this css for my “submenu” of the navigation bar on this site: http://ahornung.tk when I look at the submenu in every browser except Safari it needs a margin-top: -43px; for it to look ok but in Safari it does not…
Does a css detect web browser and ignore css if Safari rule exist?
.submenu {
position: absolute;
z-index: 1000;
display: none;
left: 100%;
margin-top: -43px;
border: 0.5px solid black;
}
Update:
In Safari it looks good whit out margin-top: -43px;...
Difficult to tell exactly what is going on but rather than using margin-top try using top:0 and adjust as required.
Been working on a site for quite a while and almost have it done. I am now mainly dealing with an SVG issue in Safari & Chrome (webkit based browsers). When I load the SVG on the homepage there it is larger than in Firefox and IE. This causes the image (head of the hat man) to slightly be cut off or hidden as it is displayed as larger image than in Firefox for example.
Safari screenshot:
Firefox screenshot:
I found this thread on SO. There they suggested to use:
svg { max-height: 100%; }
This CSS change as it is on the site:
.hatman {
position: absolute;
bottom: 15px;
left: 50px;
right: 30%;
}
.hatman .hatman-slide {
height: 100%;
max-height:100%;/*added as suggested */
width: 100%;
}
.hatman #profile {
position:absolute;
left: 0px;
}
.hatman #hat {
opacity: 0;
}
That did however not work for me. The answer was not accepted by the OP either. Another similar issues is described at SO here, but no answer yet either. Has anyone a suggestion how to fix this?
In the end this was more an issue with Webkit dealing with the SVG resizing.
This JavaScript was used to fix the max height issue
function TSafariFix() {
jQuery(window).resize(function() {
TSafariFix_Resize();
});
TSafariFix_Resize();
}
jQuery(document).ready(function(){
Hatman = new THatman();
SFix = new TSafariFix();
});
I've recently installed a photo gallery WordPress plugin on my school's website, and everything seems to be working except one thing: the navigation bar is overlaying images:
Everything seems to work in other themes.
Where and how can I fix this?
I'm running the latest version of Iceweasel that is in Debian's repos, but I've checked with other browsers too.
try this one.
#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
padding: 20px;
z-index: 9999;
outline: none;
display: none;}
I've got some simple html and css (see below) that shows a flex app inside a Div tag. In most browsers (ie8, chrome, FF), the object doesn't have a border or a vertical scrollbar. In ie9, both a scrollbar and a 3D etched border are shown. I'd like to remove those, I tried various border styles but nothing seem to help. Does anyone have a solution for this? Is this a known problem for ie9 only?
I'm kind of new to Html, CSS, javascript, etc. and I have to say, IE browsers are a pain!
#mapLocation
{
position: absolute;
top: 131px;
left:0;
z-index: 0;
bottom: 120px;
width: 100%;
z-index: 2;
border-style: none;
}
#mapObject{
position:relative;
width: 100%;
height: 100%;
z-index: 2;
border-style: none;
}
</style>
<div id="mapLocation" >
<object id="mapObject" type="text/html" data="otherFile.html"></object>
</div>
Thanks for any help,
Ggilmann
I just had the same issue. It may be a compatibility mode that is switched on in your IE9 browser. Try to uncheck it.