I am trying to make a website which behave differently on IE browser. I am doing this by calling a different css for IE browser and for another for different browser. But on IE browser IE SPECIFIC css is not being called
<html>
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie.css" if="IE 8"/><![endif]-->
<head>
<link href="new.css" rel="stylesheet"/>
</head>
<body id="bdy">
<div id="wrapper">
<div id="header">
<div id="logo">
<div id="log_in">
</div>
</div>
</div>
<div id="menu">
</div>
<div id="main">
<div id="left_div">
</div>
<div id="right_div">
<div id="table_items"></div>
<div id="addv"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
If you are targeting IE8 version only then you have to use this conditional statement.
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
If you don't want to create seperate css file then following syntax.
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
For example you have class called borderright and you want to apply different style for ie8 then add your class like below.
.ie8 .borderright
{
/*Your Style goes here*/
}
your code:
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie.css" if="IE 8"/><![endif]-->
is placed before head tag.
Put that code inside head tag !. And remove if="IE 8" part
Related
My embed method is coded like that:
<embed type="text/html" src="header.html">
Now, I succeeded to embed the header.html file into the index.html but as a result I got also a weird long padding gap from the top header.
This is the header.html file:
<div class="top-main-area text-center">
<div class="container">
<a href="index.html" class="logo mt5">
<img src="img/logos/logo4.png" />
</a>
</div>
</div>
<header class="main">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- MAIN NAVIGATION -->
<div class="flexnav-menu-button" id="flexnav-menu-button">Menu</div>
<nav>
<ul class="nav nav-pills flexnav" id="flexnav" data-breakpoint="800">
<!-- a couple of li here -->
</ul>
</nav>
<!-- END MAIN NAVIGATION -->
</div>
<div class="col-md-6">
</div>
</div>
</div>
</header>
<div class="gap"></div>
Here is how I embed it in the index.html:
<head>
<!-- Bootstrap styles -->
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/font_awesome.css">
<link rel="stylesheet" href="css/styles.css">
<!-- IE 8 Fallback -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
<body class="boxed bg-cover" style="background-image: url(img/backgrounds/wood.jpg)">
<div class="global-wrap">
<embed type="text/html" src="header.html">
I tried to play with the CSS settings but i didn't succeed.
Why i keep getting that long padding gap?
I tried to play with the CSS settings but i didn't succeed.
It is a separate (and invalid) document. <embed> is functioning as a (poorly defined) <iframe>.
You are missing the Doctype and the head element. You don't have a stylesheet in it, so you get the default margin / padding on the body element.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am fairly new at web design and cannot seem to get a side bar working for my website.
Basically I got my files and code from www.berriart.com/sidr/ and did exactly what they asked, however the side navigation bar is still not working.
All that comes up is blue hyperlinks under my banner, you can see it here: www.justpaste.it/lzhg.
I have pasted my html underneath if anyone could please help me that would be wonderful!
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"></div>
</div>
<div class="navbar">
<a id="simple-menu" href="#sidr">Toggle menu</a>
<div id="sidr">
<ul>
<li>List 1</li>
<li class="active">List 2</li>
<li>List 3</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
</div>
<div class="content">
<div class="posts">1</div>
<div class="posts">2</div>
<div class="posts">3</div>
<div class="posts">4</div>
<div class="posts">5</div>
</div>
<div class="footer">asdfafdsasfsdasfad</div>
</div>
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
</body>
</html>
</pre>
It looks like you forgot to add jQuery.
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
So the title says it, ill upload screenshots of the issue:
Here are the images.
I have tried to fix this but im not the most experienced coder out there. If any one has run into this problem or knows the solution please answer :) Its proboly something simple that i cant find because im stupid, LOL. Any way thank you for looking :)
This is my index.html:
<!DOCTYPE HTML>
<!--
Aerial by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Oracle RPG</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header">
<h1>Oracle RPG</h1>
<p>A BETTER EXPERIENCE • BUILT FOR THE GAMER • BY THE GAMER</p>
<nav>
<ul>
<li><span class="label">Forums</span></li>
<li><span class="label">Donor Area</span></li>
<li><span class="label">Youtube Channel</span></li>
<li><span class="label">Ranks & Apply Area</span></li>
</ul>
</nav>
</header>
<!-- Footer -->
<footer id="footer">
<span class="copyright"><font size="1">© Untitled. Design: HTML5 UP.</span></font>
</footer>
</div>
</div>
</body>
</html>
In your all your css files you state your div with id #bg as follows:
bg {
background-size: 2250px auto; /*the first value is different in all css files*/
width: 6750px;
}
The first value is the width of you images and the second one the height. The width is different in each of the css files (wide, normal, mobile, etc) so what you have to do is just change the width of the background-size to whatever you want and your problem is gone! :)
I use this code inorder to load ie.css for IE browser only. but it not work, ?I'm confused!
Who can help me?
<html>
<head>
<title>Demo for IE</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
</head>
<body>
<h1>Testing for IE</h1>
</body>
</html>
Conditional comments are no longer supported in IE10 and IE11. So most likely, you're using either one of these versions
For your reference:
https://msdn.microsoft.com/en-us/library/ms537512.aspx
http://en.wikipedia.org/wiki/Conditional_comment
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
</head>
<body>
</body>
</html>
This will apply ie.css on IE below IE9. You can change IE version.
I positioned links on one image which has 3 buttons, (something like this).
The positioning works with Firefox and Chrom, but with my "favorite" IE(11).. well.. I see the link on the image as an invisible very small character. If I was a user, I wouldn't notice it and think the link isn't working.
I can't publish my real code, but I will change the names in it.
HTML (there is a "lps" class div before this code):
<img src="http://example.ag/nts/images/category/subcat/btns.jpg" style="margin-top: 25px;
margin-bottom: 35px;">
<div class="promotioncontent">
<a class="how modal_link" href="#"> </a>
<div class="term" style="display: none;">
<div class="termcontent">
<div class="termheader"><h3>WORK</h3>
</div>
<div class="termtext">
<img src="http://example.ag/nts/images/category/subcat/work.jpg">
<a class="openprize opennext" href="#"></a>
</div>
</div>
</div>
<a class="prize modal_link" href="#"> </a>
<div class="term" style="display: none;">
<div class="termcontent">
<div class="termheader"><h3> TABLES</h3>
</div>
<div class="termtext">
<img src="http://example.ag/nts/images/category/subcat/tables.jpg">
<a class="openfaq opennext" href="#"></a>
</div>
</div>
</div>
<a class="faqs modal_link" href="#"> </a>
<div class="term" style="display: none;">
<div class="termcontent">
<div class="termheader"><h3>FAQs</h3>
</div>
<div class="termtext">
<img src="http://example.ag/nts/images/category/subcat/FAQ.jpg">
</div>
</div>
</div>
</div>
Only the relevant CSS:
.lps a.how {
right: 50%;
margin-right: 189px;
}
.lps a.modal_link {
position: absolute;
bottom: 70px;
display: block;
width: 233px;
height: 76px;
text-decoration: none;
}
What can be the cause of the problem and how can I fix it without ruining it on the Firefox and Chrome browsers?
Answer to accept
Instead of placing invincible elements over sprite image, use background-image as that sprite and just change background-position for each element. That way you can put any size spacing between elements, no matter of spaces between sprite images.
use a different stylesheet for IE support without ruining other browsers layout in head tag
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>
<!--[if gte IE 8]>
<style>
body
{
background:Red;
}
</style>
<![endif]-->
<!--[if gte IE 7]>
<script>
alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer.");
</script>
<p>Thank you for closing the message box.</p>
<![endif]-->