Now that I understand what a âhackâ actually is, I certainly agree. Thereâs nothing like incorporating into a system an inevitable failure to fix a problem.
I have a few more questions though, pertaining to the following code.
1. Are IE hacks as long as you isolate them in the <!â[if lt IE 7]>, because it is a âdeadâ browser? Couldnât it just rote on a server for the next thousand years and still work properly as long as the 3005 browsers support the ancient html and CSS and all the time ignoring the hack because it is lt IE7?
2. Is there any way in CSS to have a centered fluid design?
3. Only on IE there is a gap between the mainnav div and the bax1 box2 and box3 divs. I have set everything I can think of to margin: 0; and IE7 doesnât make a difference. Is this a bug?
4. Does IE7 cause IE to use the standard box model?
5. When using IE7 on a web page am I correct in understanding that since IE7 is a JavaScript that if a person accessing that site with IE and has not enabled JavaScript that it will render with all the non-support for CSS?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
html {
background: white url(mossy_tree_1.jpg) no-repeat fixed center center;
}
body {
padding: 0px;
margin: 40px 60px;
min-width: 500px;
max-width: 900px;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=70);
opacity: 0.7;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: black;
}
h1 {
font: 3em monotype-corsiva;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
div#header {
margin: 0;
padding: 0 0 0 5px;
background-color: darkgreen;
color: goldenrod;
border-top: 1px solid white;
border-right: 1px solid white;
border-bottom: 3px solid white;
border-left: 3px solid white;
}
div#header a {
position: absolute;
color: white;
font: bold .6em sans-serif;
margin: 0;
padding: 0;
}
div#header h2#contact a {
top: 50px;
right: 70px;
}
div#header h2#hours a {
top: 70px;
right: 70px;
}
div#mainnav {
margin: 0;
padding: 0;
}
div#mainnav ul {
margin: 5px 0 0 0;
padding: 0;
}
div#mainnav li {
float: left;
border-top: 1px solid white;
border-right: 1px solid white;
border-bottom: 2px solid white;
border-left: 2px solid white;
}
div#mainnav li a {
font-weight: bold;
background-color: green;
padding: 0 10px;
}
div#mainnav li a:hover {
background-color: white;
}
div#container {
margin: 0;
padding: 0;
clear: both;
position: relative;
min-height: 150px;
width: 550px;
}
div#box1, div#box2, div#box3 {
position: absolute;
margin: 0;
padding: 0;
top: 0;
bottom: 0;
color: green;
background-color: yellow;
border-top: 1px solid white;
border-right: 1px solid white;
border-bottom: 3px solid white;
border-left: 3px solid white;
width: 150px;
min-height: 150px;
-moz-opacity: 0.9;
-khtml-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=70);
}
div#box1 {
left: 0;
}
div#box2 {
left: 200px
}
div#box3 {
left: 400px;
}
div#content {
background-color: white;
margin: 10px 0;
padding: 5px;
}
</style>
<!--[if lt IE 7]>
<style type='text/css'>
div#box1, div#box2, div#box3 {
height: 150px;
}
div#container {
height: 150px;
}
</style>
<![endif]-->
</head>
<body>
<div id='header'>
<h1>Logo</h1>
<h2 id='contact'><a href=''>Contact Us</a></h2>
<h2 id='hours'><a href=''>Open Hours</a></h2>
</div>
<div id='mainnav'>
[list]
<li><a href=''>Home</a></li>
<li><a href=''>Staff</a></li>
<li><a href=''>Dr. Malpretis</a></li>
<li><a href=''>Vaccines</a></li>
<li><a href=''>Ninnies</a></li>
<li><a href=''>Home</a></li>
<li><a href=''>Staff</a></li>
<li><a href=''>Dr. Malpretis</a></li>
</ul>
</div>
<div id='container'>
<div id='box1'>
<h3>Puppy Starter Kits</h3>
<h3>Kitten Starter Kits</h3>
</div>
<div id='box2'>
<h3>General Care</h3>
</div>
<div id='box3'>
<h3>Old Dogs</h3>
</div>
</div>
<div id='content'>
<h1>Title</h1>
<p>This is some text about veterinary services and care. This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.This is some text about veterinary services and care.</p>
</div>
</body>
</html>
List of questions from 100% CSS Beginner
