i am developing a site and getting black outline in ie8
its looking great in all other major browser but not in ie-8
please help me this is my live link
http://www.cadellfoods.com.au/food-service-products.html
(the section in circular shape)
please help me
the code for all images is as following
#Section1
{
background:transparent url('Images/Chilled.png') no-repeat;
background-repeat:no-repeat;
border:none; outline:none; outline:0;
border-width: 0;
}
Seems OK in IE 8 too here. maybe you have issues in IE 8 on windows XP
as a good practice, you should not start your ID's or classes with capital letters.
Might not be it, but I have noticed IE puts borders on linked images. You need to undo those defaults.
#Section1 a:link img {
border:none;
}
Don't forget the :hover and :visited pseudos.
Just in case try these too
#Section1 img {
border:none;
}
#Section1 a:link {
border:none;
}
Related
Let's say that this is my HTML.
<div id="spirit_tutorial_reward">
<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size: contain;"></div>
<div id="spirit_tutorial_reward_header">45 Spirit</div>
<div id="spirit_tutorial_reward_text">Use Spirit to recruit new Rusherz in the Locker Room!</div>
</div>
And this is my styling:
#spirit_tutorial_reward
{
position:absolute;
top:77px;
left:371px;
width:45%;
}
#spirit_tutorial_reward_icon
{
background:url(../images/gift_icon_spirit.png) top no-repeat;
width:60px;
height:60px;
position:absolute;
top:0px;
left:0px;
float:left;
}
#spirit_tutorial_reward_header
{
font-size: 15px;
font-family:"NFLEndzoneSansBold";
color: #000;
position:absolute;
left:69px;
top:0px;
float:left;
}
#spirit_tutorial_reward_text
{
font-size: 15px;
font-family:"NFLEndzoneSansBold";
color: #000;
position:absolute;
left:69px;
top:22px;
float:left;
}
On no-zoom or normal mode , the images appear to have chopped off on Firefox (see attached image) but when I zoom my page , the image appears to becoming better (see attached image). I am facing this issue only in Firefox. Can anyone here help me out.
EDIT : FIDDLE demo for the problem
This worked for me in one of my recent encounters. This prevented the image from being cut off:
transform: rotate(0.0001deg);
Try setting background-size to 59px which i did in that fiddle and worked as expected.
i.e
<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size:59px;"></div>
If this answer was helpful.Dont forget to mark to apport or mark as answer
Thanks
AB
I think it's a subpixel problem. That's the reason the image works fine in some zoom modes.
I edited your jsFiddle to set the background-size to 99.9%, and then works properly. You can see the example here.
Note: I put the !important to overwrite the inline styles... feeling lazy, you know ;)
If you want the background image to cover whole page.. apply the image to background and give background size:cover to it..
you may try this:
body {
background-image: url(your-image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #EEE;
background-size: cover;
}
you may refer this http://www.css3.info/preview/background-size/
I am trying to put a border around it, but i can't. Here is what i have as far as CSS:
body{ margin:1em; }
body *{ font-family: RussellSquare}
body{background-color: #363636;}
input[type=number]{
font-size:1em;
width:2.5em;
padding:3px;
margin:0;
border-radius:3px;
border: 1px solid #000;
text-align:center;
}
input[type=number]:focus{
outline:none;
}
It works just fine. Try it yourself on different browsers here.
Short explanation would be:
border is CSS property that is supported on all major browsers.
border-radius is CSS3 property that runs on all modern browsers. IE 6/7/8 is not one of them.
In case you want to know more about Internet Explorer support of border-radius
Read: Support for "border-radius" in IE
For some reason I cannot display the dropdown menu on IE when I add a z-index in the header of any number. When I remove it, it works. However the dropdown then appears behind the container and content in Firefox and Chrome. So either I take it out or leave it in, I cant seem to satisfy all browsers. So i tried making a separate IE stylesheet without the z-index but that doesnt work either. I know the separate IE CSS is working because I changed the backgrounds but it uses the dropdown menu in the master stylesheet.
Website is www.stingrayimages.ca
Thank you for your help
Edit: So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div. Anyway to fix the dropdown menu without adding z-index to the head div?
Edit: I got the dropdown to work on IE9 firefox and chrome. Not IE 6, it just blew up.
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
z-index:1;
}
OK so I had a look and there's good news and bad ;)
the opacity filter in the #head div means that overflow: hidden is being triggered, which is why no menus (it's the unfortunate side effect of filters and overflow I'm afraid).. remove that and you can have your z-index which you need anyway
next to get the transparency (opacity) for your dropdowns you can just use rgba(255,255,255,0.9) on the #nav ul li ul rule instead of #fff; (though leave #fff before that rule for fallback for browsers that can't do rgba() yet.. read more!)
That's nearly everyone happy - now you can also do rgba() transparency for IE using the gradient filter..
so the rule I landed up with looked like this (in an IE conditional comment):
#nav ul li ul {
zoom: 1;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
/* behavior: url(PIE.htc);*/ /* yuk filter */
}
and I thought it would be good to go..
BUT the Bad News
the behavior is commented out because you can only have one or the other, transparency or rounded corners, :( apparently
I didn't do too much research though so YMMV
I also noticed a problem or three in IE7, not sure if you want to support that but in case you do.. or want to check my final code which got it to this stage I pasted it in PasteBin
that code replaces your main CSS - the #head rule and whole /*navigation*/ section
Update: more good news and a little bad!
you can have the transparency and the rounded corners thanks to CSS3 PIE's own -pie-background property, but not the box shadow as well, the way PIE deals with box shadow means it fills the div instead of just drawing on the outside so the -pie-background reading of the rgba background is transparent but shows the grey color used for the shadow!
My solution:
I added a border to make up for loss of box-shadow, it's not looking too bad, and it's working across IE's ;)
here's an update to the I conditional comment above:
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul {
box-shadow: none;
-pie-background: rgba(255,255,255,0.9);
border: 3px double #eee;
border-width: 0 3px 3px 3px;
behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->
I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless!
If you add a z-index and position to the #container as well, it should solve your problem. z-index only applies to positioned elements.
#container {
position:relative;
z-index:0;
}
It is also worth reading Overlapping and z-index, which summarises the properties and also describes the problems when using z-index and IE.
Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it. I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version.
So IE will have multiple copies of the same style being applied. Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property.
You have filter:alpha(opacity=93); in both style.css and ie-style.css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently. If you remove the filter from both stylesheets then the menu correctly displays in IE8.
If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.
Have a look at this solution : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Another solution that I used already is quite easy, but a pain in the *. You must all the parent container a specific lower z-index value than the one you want to show on top of the others.
Like so :
<parent>//z-index 1
<child>//zindex 2
<yourdropdown>//z-index3
Update 1
The menu didn't show correctly in my chrome so I fixed the #head z-index to 80 and it did way better. Do the following to get the layout the same in IE and Chrome and Firefox. Watch out though, I only tested those change on the homepage.
Add this to the .conbox class :
.conbox {
position:relative;
}
Place the logo correctly
#logo {
position:absolute;
left:0px;
top:0px;
}
Remove the #nav positioning
#nav {
margin-top:80px;
z-index:3;
}
The problem is, I can't even see any effect on the menu mouseover in IE!!
Setting z-index: -1 for elements that menu overlays and z index of men div resolved this problem for me.
#bodyWrapper
{
background: none repeat scroll 0 0 #E4F7FE;
overflow: hidden;
position: relative;
width: 100%;
padding: 0 0 60px;
z-index: -1;
}
I'm new to this site having stumbled across it recently (and am loving it!) and was wondering whether someone can help me - I'm using Kelvin Luck's fantastic date picker and for some reason a background image is not behaving properly...
Here's the code straight from my CSS sheet:
a.dp-choose-date {
background: url (../calendar.png) no-repeat scroll 0 0 transparent;
display:block;
float:left;
height:16px;
margin:5px 3px 0;
overflow:hidden;
padding:0;
text-indent:-2000px;
width:16px;
}
however when the background image is viewed through firebug, firebug doesn't show the style for the background image at all:
a.dp-choose-date {
display:block;
float:left;
height:16px;
margin:5px 3px 0;
overflow:hidden;
padding:0;
text-indent:-2000px;
width:16px;
}
Would anyone have any ideas as to why this is happening? I've never seen this before!
The url by the way is http://www.s330042945.websitehome.co.uk/contact.php
Many thanks,
Andy
You need to remove the space between 'url' and the '('. This needs to be:
background: url(../calendar.png) no-repeat scroll 0 0 transparent;
I have some basic CSS on a table and I cannot get a border to display in IE6, IE7, or IE8. The border shows up in Chrome and Firefox. Here's the CSS:
#infoTable { width:500px;
margin-left:auto;
margin-right:auto;
border-collapse:collapse;
border-width:thin !important;
border-style:solid !important; }
#infoTable td { max-width:150px;
padding-left:5px;
padding-right:5px;
font-size: 10px;
padding-bottom:15px;
border-collapse:collapse;
border-width:thin !important;
border-style:solid !important; }
In my multiple attempts to get this to work, I added the !important tags to try to get it to work. Any help is appreciated.
Thanks,
Eric R.
use of border-color property
Provide a border-color as well.
Edit:
Though, to be honest, I placed a table with the same styles as you provided in a plain HTML file, and a faint gray border showed up just fine in IE7.