The background image doesn't appear in IE8, but it works fine in all browsers, including IE9
Relevant CSS:
#player {
background: url('/images/tv-screen.jpg') center top repeat-x;
padding: 25px 26px 0 -1px;
width: 660px;
height: 403px;
border: #555 solid 1px;
margin-top: 0;
margin-bottom: 0;
}
Relevant HTML:
<p id="player">...//some data ..</p>
The CSS looks okay.
I think IE8 fails on the tag itself: <p id="player>. The id attribute doesn't have a closing ". If this causes the id to be misinterpreted, the CSS selector will
not match it.
the problem is : there is iframe inside iframe which blocking the background I don't know why , even I make the two iframe with wmode=transparent.
so I created a background in last iframe by js in IE less than 9 only.
thanks guys for your time .
are you using the correct DOCTYPE ?
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Have you tried removing the negative padding that you have set. This can cause issues in ie7/8.
Related
This question is based on this JSFiddle. It is a navigation design with two top level menu items and three submenus (structured for accessibility without script). An element to look at may be:
<nav class="top-menu">
There is one pressing issue:
Just open the JSFiddle in Internet Explorer and see. Why does it drop down like that only in IE? Even in IE9 and 10.
Any help here will be greatly appreciated!
I have noticed that "top-header" blocks had different heights, and to fix this I've added line-height CSS rule:
.top-header {
padding: 0 0 5px 0;
display: inline-block;
margin-left: 20px;
position: relative;
+ line-height: 28px;
}
And it currently seems same for me in IE and Chrome.
Updated fiddle
add
height :136px \0/;
at the end of .top-header
and the problem will be solved check
jsfiddle
You may use some 'tape' to fix this in IE. :)
Via CC, add a border-bottom: white 10px solid; or outline:white 10px solid;
http://jsfiddle.net/SKJvv/7/ http://jsfiddle.net/SKJvv/8/
It doesn't explain much what layout is playing about.
(CC included : http://jsfiddle.net/SKJvv/10/ )
Please bear with me as I'm fairly new to hand coding my web pages. I applied my CSS and HTML from the website I created to skin a Blogger page to match look and feel. Everything appears fine when testing in FireFox release 17.0.1, but the background for my div #body_wrap fails to repeat more than a few times in IE 8.
I'm probably missing something simple, but I would appreciate any help in determining the cause. I would like to know if it's IE related or just poor code that FireFox is picking up the slack on.
Here is the link to the blog:
http://www.zenmotostore.blogspot.com/
Here is the CSS for the div containers involved:
#body_wrap {
width: 1074px;
margin: 0px auto;
padding: 0px;
position: relative;
background: url(http://www.zenmotostore.com/images/repeat_bgd_shadow_blog.png) top repeat-y;
clear: both;
}
#body_content_wrap {
width: 984px;
margin: 0px 45px 0px 45px;
padding: 0px;
padding-bottom: 7px;
background: #000000;
position: relative;
clear: both;
}
#scrollofzen_header {
width: 983px;
height: 191px;
margin: 0px 0px 0px 0px;
padding: 0px;
background: #000000 url(http://www.zenmotostore.com/images/scroll_of_zen_header.jpg) top center no-repeat;
position: relative;
clear: both;
}
The div #scrollofzen_header sits above the Blogger content code in the HTML. Both are contained in the #body_content_wrap div.
Let me know if I need to include more code here on the post. Thanks in advace for any help you might have!
Your problem seems to be with this CSS declaration:
.body-fauxcolumn-outer
{
background: url(http://www.zenmotostore.com/images/page_bgd_zen.jpg) #b8924f fixed no-repeat 50% top;
}
If I use the IE dev tools to disable this rule then the page seems to work fine (as I expect it to anyway).
Looks like it might be a clear issue. Depends on version of IE. You could look into css height: 100%;, or another way would be to add <div class="clear></div> as the last child element in #body_wrap.
.clear {
clear: both;
}
//then the markup
<div id="body_wrap">
//Your content and stuff
<div class="clear"></div>
<div> //close body_wrap
Internet explorer has a big problem with using images in css. Whenever I try to use them it doesn't work. Not since the very latest edition of IE have they allowed background-images.
You need to define a height for the div that you want to have a background-image
Background Images aren't supported IE8 or below
http://www.w3schools.com/cssref/pr_background-image.asp
So, I have an issue with the hover state of a link in IE8. Code is as follows:
<div id="navigation">
Home
</div>
And the CSS:
#navigation {
float: right;
height: 29px;
margin: 50px 0 0 23px
}
#navigation a {
color: #FFF;
float: left;
font-size: 120%;
height: 25px;
margin-right: 7px;
padding: 2px 10px;
text-align: center;
width: 104px;
}
#navigation a.home {
background-color: #f4e034;
}
#navigation a.home:hover {
background-color: #fffbd4;
}
Now, this works fine in every other browser I have tested in (Chrome, Safari, FF, IE6, and IE7), it just won't change the background color of the link in IE8 on hover.
I have tried adding display: block and display: inline-block to the a element. I have also tried adding !important after the background-color in the hover tag. I have also made sure that there are no other elements in the CSS that is affecting this.
Googling this problem gives me a bunch of things regarding the IE8 beta, which this is not. It also gives me answers for menu related links, which this is not. It gives me answers for things being affected that aren't background-color. And it gives me things where changing the font-color works, but not the background-color (neither works in my case).
Just wondering if anyone else has ever noticed this issue and has something they can provide on this. Let me know, thanks in advance.
I had the seem problem as yours. I tried every way as you did but it has no use.
My final solution was to set a background-color on the element you need to hover, then it worked.
I felt shocked at that time and I don't know why still now.
Do you have a DOCTYPE specified on your HTML page? It might seem obvious, but I've had similar problems with the :hover state in IE8 - especially when editing old sites.
The solution for me was to add a DOCTYPE above the opening HTML tag on your HTML page
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
I hope this helps!
I'm looking for a way to do something which in my opinion should be super simple, but I couldn't figure it out...
I want a graphical element on my web page which is exactly 1 pixel high, 100% wide and has a certain color, let's say red. It should look exactly the same in all browser and should preferably not break the semantics too much.
I don't want to use any images for this and I don't want to use more than one HTML element. Of course, I will not use JavaScript.
I tried the old classic which probably many of you know:
<div class="hr"></div>
<style ...>
.hr {
height: 1px;
background: red;
width: 100%;
font-size: 1px; /* IE 6 */
}
</style>
The problem with the above solution is that IE6 will render this as two or three pixels high, to fit the non-existing contents of the div.
Any ideas?
just do
.hr {
height: 0px;
margin: 0px;
border-bottom: 1px solid #FF0000;
font-size: 1px;
}
I went through the same thing when I was new to CSS.
adding an overflow: hidden; style should fix it also.
I don't have IE6 handy to test, but an actual HR tag can work in modern browsers. Took me a couple of tries to realise you set the background color not the border color:
hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; }
(adjust to suit)
I don't have IE6 to test this, but I remember it had to do something with the line height. Have you tried this?
line-height: 1px;
I've styled some unordered HTML lists and their heading to look like this in Firefox:
alt text http://img24.imageshack.us/img24/711/screenshot001nij.png
Unfortunately, in IE7, they look like this:
alt text http://img11.imageshack.us/img11/8343/screenshot002e.png
The relevant HTML is
<div class="list-column">
<h4>Types de pêche</h4>
<ul>
<li>Pêche en lac</li>
<li>Pêche en Rivière</li>
</ul>
</div>
And the CSS is:
.list-column {
float: left;
margin-right: 20px;
width: 20em;
}
div.list-column h4 {
background-color: #FDD041;
padding: 5px !important;
}
ul li {
background-image: url(images/arrow.gif);
background-position: 0 11px;
background-repeat: no-repeat;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 6px;
margin-left: -20px;
margin-top: 2px;
padding: 2px 0 2px 18px;
}
I suspect the fact that the div containing the list is floated left is probably the root of my problems, but I'm not sure how to workaround the poor display in IE7?
Update:
I tried adding a 'zoom: 1' property to the 'ul' elements to see if giving the elements 'layout' would fix the problem in IE, but it didn't.
The problem is definitely not related to the rounded corners. I turned them off temporarily but it didn't change anything in IE (apart from the appearance of the corners).
Thanks,
Don
IE and the other browsers have a different default style sheet.
IE indents list items by putting a ‘margin-left’ on the <ul>. The other browsers put a ‘padding-left’ on the <ul>.
So if you want to look the same in all browsers, set both ‘margin-left’ and ‘padding-left’ explicitly on <ul>. In your case, you would want to add something like “margin: 0; padding: 24px” on your “div.list-column ul, ul.round” rule.
(The default list ‘margin-left’ in IE is, to be precise, ‘30pt’.)
A common solution for this is setting the width of the element. This will make IE everything inside the bounds of that width.
I think this is a case of IE-7 auto indending the li's
the easiest way to debug this is to install IE-8; switch to compatible ie-7 mode.
then launch the developer tools from the tools menu
You can then inspect the individual elements and check if there are hidden padding or margins being applied
I think that it can depend from different default padding on ie and firefox. Try to use reset.css in your code if you haven't already done it.
P.s. in ie8 you have developer tools which are similar to firebug. Try to use them and see if you can't understand the issue...