I have a background image that I'm trying to use as a logo. All's fine in Chrome & FF, but it's not showing in IE8. The background images simply don't load. How can I get them to show in IE8?
this is the code:
<header>
<h1 class="logo">
Henry C. Lee Institute of Forensic Science
</h1>
</header>
css:
header {
margin: 0 10px 38px 7px;
padding: 30px 0 0 0;
}
header h1{
width:232px;
}
header h1 a {
background:url('images/logo.png') 0 0 no-repeat;
display:block;
height:89px;
text-decoration:none;
text-indent:-9999px;
width:243px;
}
Add in head of your page next:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
In css you need write default styles for new html5 tags:
header, footer, section, nav, article {
display: block;
margin: 0;
padding: 0;
}
html5shiv.js - create new html5 tags in DOM. Old browsers like IE8 don't know about html5 tags.
https://code.google.com/p/html5shiv/
Your
header h1 a {
....
}
needs a line-height.
give proper float property. it's affecting it.
Related
I want to css sprite (sprite image total width:45px and total height:15px consists of three image ) but there is a problem in IE9/8/7. link and hover work but when click the button (active) sprite image slipping to left 1px. issue for only IE 9/8/7.How can I fix this?
CSS:
body{
margin:0;
padding:0;
}
.button{
background:url(sprite-image.png) no-repeat 0 0;
width:15px;
height:15px;
cursor:pointer;
}
.button:hover{
background:url(sprite-image.png) no-repeat -15px 0;
}
.button:active{
background:url(sprite-image.png) no-repeat -30px 0;
}
.cont{
width:200px;
height:200px;
float:left;
margin:50px 0 0 100px;
}
HTML:
<body>
<div class="cont">
<div class="button"> </div>
</div>
</body>
"link" and "hover" and "active" FF,Chrome,Safari,Opera like this;
but IE 9/8/7 active look like this;
I concretized above images to make it look better . My sprite image;
Why not use IE-conditional comments;
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
And then write eg CSS-rules like .lt-ie9 .someclass{}to target a IE-version. I use them to fix some IE-specific css-stuff. No dirty hacks, no hastle just css. Did you check with eg Firebug Lite what happens?! outline: 0 none?
Add a Internet explorer specific stylesheet to the <head></head> section.
<!--[if lt IE 9]>
<link rel="stylesheet type="text/css" href="/css/ie.css" />
<![endif]-->
and in ie.css do something like:
.button:active{
background:url(sprite-image.png) no-repeat -29px 0 !important;
}
(There's Always an issue with ie , phew !)
I created a fake sprite using your graphic to see what you are seeing but looking good in my fiddle in all IE 7-9 (note i just change positioning and made it construsive (less):
http://jsfiddle.net/Riskbreaker/Rr8p2/
body{
margin:0;
padding:0;
}
.button{
background:url(images/sprite.png) no-repeat 0 0;
width:14px;
height:15px;
cursor:pointer;
}
.button:hover{
background-position:0px -27px;
}
.button:active{
background-position:0px -27px;
}
.cont{
width:200px;
height:200px;
float:left;
margin:50px 0 0 100px;
}
Remember the positioning I made up so you can adjust. I never had the active IE issue before...but let me know what you are seeing....if the issue persist and you don't want another file then do this:
IE7: *.button:active{background-position:0px -28px;} (or whatever the correct position is )...
IE8: .button:active{background-position:0px -28px\9;}.........
IE9....not sure your latest but it should not have any issues (latest)
I have faced similar issues with IE8 before but IE9 worked fine in my case (not sure about IE7 but it must be like IE8 for this thing).
It can be resolved/improved by one of these 2 approaches:
1) Modify the image (maybe in resolution, color combination etc.) and try if it works. Why this might work? Because in your example, IE appears trying to do some image manipulations "intelligently" which unfortunately go wrong at times (especially for small images/pixel perfect cases) and you can just hope that it doesn't fail badly for your new images.
2) Use background-position accuracy of 0.5px units.
Note "background-position: -15.5px 0;" in the following code. This solution will reduce your frustration by at least 50% :-) I am afraid that you might need to provide IE specific CSS for this solution but that should be fine ... You can add the browser identifier class name on tag using JavaScript or with technique mentioned # http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ and then use those class names when you write browser specific CSS.
The solution:
.button {
background:url(images/sprite.png) no-repeat 0 0;
width: 15px;
height: 15px;
cursor:pointer;
}
.button:hover {
background-position: -15.5px 0;
}
.button:active {
background-position: -30px 0;
}
.cont {
width: 200px;
height: 200px;
float: left;
margin: 50px 0 0 100px;
}
You can use below trick which will help to give manual value
For IE7 (underscore before the value)
.button:hover {
background-position: _-15.5px 0;
}
Or
IE-7 & IE-8(need to add\9)
.button:hover {
background-position: -15.5px\9;
}
For IE8only (\0/)
*+.button:hover {
background-position: -15.5px\0/;
}
Try this change in css:
.button{
background: url(sprite-image.png) no-repeat left 0;
width: 15px;
height: 15px;
cursor: pointer;
}
.button:hover{
background: url(sprite-image.png) no-repeat center 0;
}
.button:active{
background: url(sprite-image.png) no-repeat right 0;
}
I created a beautiful faux legend for a box that surrounds some text: jsfiddle. However, my solution uses :before and :after pseudo classes, which won't work in IE 7 and IE 8. Bummer.
So I decided I would set out to try to define my own spans to use in the place of the :before and :after pseudo classes. Unfortunately, my solution seems to work for the :before replacement, but not the :after replacement: jsfiddle. Also, the contents of the box have been shifted upwards for some inexplicable reason.
Is it possible to accomplish what I am doing through CSS and HTML alone? I don't want to bring any Javascript or jQuery into the mix.
Thanks!
http://www.webdevout.net/test?01&raw:
<!doctype html>
<html>
<head>
<title></title>
<style>
html {
overflow-y: scroll;
background: #ff3366;
font: 16px serif;
}
fieldset {
border: 3px solid #ffc2d1;
}
legend {
background: url(http://img820.imageshack.us/img820/4242/spritearrowdown.png) no-repeat 3px 50%;
padding: 0 0 0 13px;
}
html > /**/ body
legend { /* if the way it looks in IE8 really bothers you: */
position: relative;
right: -13px;
}
</style>
</head>
<body>
<form action="foo">
<fieldset>
<legend>Model Forecast Guidance</legend>
Fieldset
</fieldset>
</form>
</body>
</html>
I am trying to set up a basic layout where the header and footer carry on across the width of the page no matter what resolution the user is set to.
I have managed this but now I am having a problem where the main container div will not expand properly height wise to encompass the divs within. It seems to expand to only a certain height and then goes no further, no matter what height or min-height style you change.
Here is the basic structure:
<div id="page">
<div id="content">
</div>
</div>
<div id="footClear"></div>
<div id="footer">
</div>
The footer code is to force the footer to stick to the bottom of the page no matter the height of the main container (id="page")
My CSS for these parts is:
#page {
margin:0 auto;
width:1000px;
background:red;
padding:0px;
min-height:100%;
position:relative;
margin-bottom:-47px;
}
#content {
}
#footer {
width:100%;
height:22px;
position:relative;
margin:0 auto;
background:#000000;
text-align:center;
padding-top:3px;
font-size:12px;
}
#footClear {
height:22px;
clear:both;
}
A link to what to my site is here if you want to have a look: www.therapyoracle.co.uk/new
You can see the page div is in red, and does not carry on down the page.
On your live site, #page has height: 100% set, which is causing the problem.
It's coming from your ie6.css! This is how you're trying to make it load in only IE6:
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]—>
The hyphens in the HTML above are wrong. Replace that HTML with this:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]-->
And ie6.css will then only be loaded in IE6, instead of all browsers, and your problem will be fixed.
If you take the height out of you body this will fix it for you as below
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
padding: 0;
margin: 0;
}
Delete margin-bottom:-47px; and delete #page {height: 100%;} in ie6.css
Maybe I misunderstand how CSS Conditional Comments work, but I thought the bit in the middle of the conditional would only show up for IE... however Chrome and Firefox are both evaluating it, and having the left margin be 35px not -20px... What am I missing?
.policies li li { margin-left: -20px; }
<!--[if IE]>
.policies li { margin-left: 45px; }
.policies li li { margin-left: 35px; }
<![endif]-->
Conditional comments only work in HTML, not CSS. A common technique is to load a separate external stylesheet just for IE. Lately I've taken to just loading a single one for IE <= 8 and then using hacks inside that stylesheet to target IE 6 / 7 / 8 respectively.
Put
.policies li { margin-left: 45px; }
.policies li li { margin-left: 35px; }
into separate file like styles-ie.css, then include it in your page after all common CSS files and wrap in a conditional comment:
<!--[if IE]>
<link to your styles-ie.css />
<![endif]-->
Here is a Microsoft's reference.
<div class="HeaderLink" id="Home">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDB1</title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>
<body id="HeaderFive">
<div class="HeadPanelElement" lang="en" id="HeadPanel"> Blog
Videos
Home
Contact
About MDB1 </div>
</body>
</html>
</div>
#charset "utf-8";
/* CSS Document */
.HeadPanelElement{
position: absolute;
width: 10%;
left: -10%;
}
#HeadPanel{
left: 15%;
width: 100%;
height: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
border: dashed;
border-color: #C00;
border-width: 2px;
font-size: 1em;
Intentions are for the page to layout like this
Why aren't the position attributes working?
quick to do ...
#HeadPanel
{
display: inline;
width: 100%;
}
.HeadPanelElement
{
width: 10%;
/* or
padding: 10px; */
}
the real factor here is the display: inline; which will layout the div in a side by side fashion.
You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.
position: absolute; will help you get that interesting layout.
For declarations like left and top to make any sense, you need to apply them to positioned elements:
#foo {
position:absolute;
top:10%;
left:25%;
}
Your elements don't appear to have be positioned as absolute or relative.
There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Foo Example</title>
<style type="text/css">
#foo {
position:absolute;
top:10%; left:10%;
background:yellow;
padding:10px 20px;
border:1px solid #000;
color:#000;
width:30%
}
</style>
</head>
<body>
<!-- all markup goes here -->
<div id="foo">Hello World</div>
<!-- all markup goes here -->
</body>
</html>
Online Demo: http://jsbin.com/efukol/edit
There are a few things going on here:
The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.
This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.
I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.
Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.
Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.
Now to get these things going across, you can go a few ways:
/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}
/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}