I searched all over the web to find a solution for this issue, but I was not lucky.
I know when it comes to styling web pages for IE is worse than watching grass grow.
So, I have a problem with the padding. It works just fine in IE9 and all other browsers, but it fails in IE7 and IE8. Probably lower versions too (I will check on that later)
Th e UL suppose to be in-line with a back-ground
thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
a{font-weight:bold;color:#369;}
a:link{text-decoration:none;}
a:visited{color:#936;text-decoration:none;}
a:hover{text-decoration:underline;}
.manubar a:link{color: #FFFFFF;}
.manubar a:visited{color: #DFFFDF;}
.manubar{
padding:10px 0 0 0;
height:26px;
text-transform:uppercase;
background-color:#FF8C00;}
.manubar ul{list-style-type:none;padding:0;margin:0;}
.manubar ul li{text-align:center;border-left:1px solid
#999;display:block;float:left;}
.manubar ul li:first-child{border:0;}
.manubar ul li.insert{width:191px;}
.home{width:94px;}
.insert{width:94px;}
.offer{width:94px;}
.search{width:114px;}
</style>
</head>
<body>
<div style="height:30px; width:100%;">
<nav class="manubar">
<ul >
<li class="home" >
Home
</li>
<li class="insert">
Post
</li>
<li class="offer">
Offer
</li>
<li class="search">
Search
</li>
</ul>
</nav>
</div>
</body>
</html>
The nav tag is introduced in HTML5. So obviously it will not support in older browsers. Replace nav tag with div tag to make it work. (Check browser compatibility section in the provided link)
Fiddle (Replaced nav with div)
or else
Stick the below code in the Head tag
<!--[if lt IE 9]>
<script>
document.createElement('nav');
</script>
<![endif]-->
<style type="text/css">
nav{
display: block;
}
</style>
Source
Working Fiddle
Related
HTML
<div class="div1">
<ul class="dropdown">
<li>example</li>
</ul>
<div>
CSS
.dropdown{
visibility: hidden
}
.div1:focus .dropdown{
visibility: visible
}
I'm trying to make click event in css using focus without jquery and I need it when I am clicking on div1 it will hide a dropdown ul.
Is there any way to do that?
You can't do that with "focus", but you may do that with "active". Active is accepted by most browsers as the "click" event (i.e. while you click on an element it is active).
Check the code below. I have just tested with Chrome and it works as you intended. Also tested with Internet Explorer; it "sort-of" works with this too (the second selector is specifically for IE).
Hope this helps you out. Good luck!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
.div1 {
border: 1px solid green;
}
.div1:active .dropdown {
display: none;
}
.dropdown:active {
display: none;
}
</style>
</head>
<body>
<p>This is my web page</p>
<div class="div1">
test
<ul class="dropdown">
<li>example</li>
</ul>
<div>
</body>
</html>
What about using javascript
<div id="div1">
<ul class="dropdown" id="ul1">
<li>example</li>
</ul>
<div>
<style>
.hidden {
visibility: hidden;
}
</style>
<script>
document.getElementById('div1').onclick=function(){
var element = document.getElementById("ul1");
element.classList.add("hidden");
};
</script>
JSFiddle: http://jsfiddle.net/4Ls0ygp3/
I am writing HTML for a page and have used bootstrap 3 as well. The page appears to be fine in FF, Chrome, IE9 but its not working properly in IE8, IE7.
Problem: The main content seems to be stretched fully across the page, i.e. behaves like fluid where as in other browsers works fine.
Things I have tried: As given in other forums, I tried including respond.js, meta tag as in below code ( "X-UA-Compatible" content="IE=edge"), HTML5shiv but nothing seems to work. I read that bootstrap 3 doesnt support IE7 officially but even IE8 gives this problem. It looks like the container class is not applied to IE8/7.
Can anyone please help on this? Below is the HTML for that. Also, its on fiddle - http://jsfiddle.net/CPaDb/2/
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="logo-cont">
<a href="home.html" class="logo-link></a>
</div>
<div class="main-cont">
<div class="site-box-cont">
<ul class="site-box-list clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<script language="javascript" type="application/javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" type="application/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript" type="application/javascript" src="js/respond.min.js"></script>
</body>
</html>
CSS
.logo-cont {padding:35px 0 35px 250px;}
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; }
.main-cont {background:#2d3a42;}
.site-box-cont {width:670px; margin:0 auto; padding:150px 0}
.site-box-list li {float:left; margin:0px 15px 15px 0px;}
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;}
.site-box:hover {background:#acd037;}
There are a number of issued going on... among them, you're using the XHTML 1.0 doctype, instead of the HTML5 type; you're missing a closing quote mark on the "home.html" link.
Since JSFiddle is not compatible with IE8 testing, I can't post a JSFiddle demo. But I have IE8 and tested the following code in IE8, FF17 and Chrome 29. Let me know if you need anything further or have any questions.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
.logo-cont {padding:35px 0 35px 250px;}
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; }
.main-cont {background:#2d3a42;}
.site-box-cont {width:670px; margin:0 auto; padding:150px 0}
.site-box-list li {float:left; margin:0px 15px 15px 0px;}
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;}
.site-box:hover {background:#acd037;}
</style>
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="logo-cont">
</div>
<div class="main-cont">
<div class="site-box-cont">
<ul class="site-box-list clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>
My webpage's view differ at different resolutions. I am using MS Superpreview for testing. Here are the screenshots at 1024x768 and 1280x1024.
https://dl.dropboxusercontent.com/u/27899629/stack/1024x768.png
https://dl.dropboxusercontent.com/u/27899629/stack/1280x1024.png
Here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spanchem - Chemical Cleaning Services, Mumbai India</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen, projection"/>
<!--[if IE 6]>
<![endif]-->
<style type="text/css">
img#pngfix { behavior: url(iepngfix/iepngfix.htc) }
#header {
}
#header_bg{
background:url(images/header_bg.png) no-repeat;
width:100%;
min-height:171px;
height:auto !important;
height:171px;
z-index:9999;
border:1px solid red;
}
#top_menu {
left:435px;
position:relative;
top:-115px;
z-index:-999;
color:blue;
}
</style>
</head>
<body>
<div id="header">
<div id="header_bg" ></div>
<div id="top_menu"><img src="images/menu_bg.png" id="pngfix"/></div>
<div id="m_banner">Banner</div>
</div>
</body>
</html>
I would like to the reason as to why my pages renders differently at different resolutions and how to correct it.
I want my <a> tag gets underlined when hovered. I have the following code, but it doesn't work.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
a.hover:hover {text-decoration: underline;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" style=" text-decoration:none; color:red" href="">Site Map</a>
</div>
</form>
</body>
</html>
This:
a:hover {text-decoration: underline;}
<a style=" text-decoration:none; color:red" href="">Site Map</a>
doesn't work either.
What should I do? What is the problem?
The style attribute is more specific than any selector, so it will always be applied last in the cascade (horrible !important rules not withstanding). Move the CSS to the stylesheet.
a.hover {
color: red;
text-decoration: none;
}
a.hover:hover {
text-decoration: underline;
}
(I also suggest a more semantic name for the class).
The inline style overrides the style on the page.
Remove the inline style and uses this:
<style type="text/css">
a {text-decoration: none;}
a:hover {text-decoration: underline;}
</style>
Also advise you not to use <style>, uses an external css file. Will greatly facilitate maintenance.
I think that you should write code like:
(Demo here: http://jsfiddle.net/BH7YH/)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
a {text-decoration: none; color:red}
a:hover {text-decoration: underline;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" href="">Site Map</a>
</div>
</form>
</body>
</html>
when you use hover you cannot use inline styles.
you have to write it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
a.hover
{
text-decoration: none;
color:red
}
a.hover:hover
{
text-decoration: underline;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" href="">Site Map</a>
</div>
</form>
</body>
</html>
This will work for you.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ABC</title>
<style type="text/css">
a.hover {text-decoration: none; color: red;}
a.hover:hover {text-decoration: underline;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" href="">Site Map</a>
</div>
</form>
</body>
</html>
Read more about css specification.
This might help!
a.hover:link {text-decoration: none;}
a.hover:hover {text-decoration: underline;}
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>
The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.
Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.
You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex
This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>