|
Re: CSS weird block problem IE only - help!!!
Looking at your code more closely you have quite a few oddities and things you are using but don't seem to understand their meaning.
<div id="wrapper"> is one of them. Your CSS for this is
- Code: Select all
html, body, #wrapper {
min-height: 100%; /*Sets the min height to the
height of the viewport.*/
width: 100%;
height: 100%; /*Effectively, this is min height
for IE5+/Win, since IE wrongly expands
an element to enclose its content.
This mis-behavior screws up modern
browsers*/
margin: 0;
padding: 0;
}
html>body #wrapper {
height: auto; /*this undoes the IE hack, hiding it
from IE using the child selector*/
}
#wrapper {
position: absolute;
top: 0;
left: 0;
}
which makes absolutely no sense to me. You don't need all that stuff. If it's a footer that stick to the bottom of the page that you want, check out Sticky footer
The position: relative is really screwing everything up IMO. With a one column layout, you don't need any of that.
CSS
- Code: Select all
html, body, #header, #navigation, #maincontent {
margin: 0;
padding: 0;
}
html {
background: #000 url(http://www.aubmedia.com/urbantan_web/images/webback1.jpg) repeat-y 0 0;
font: 11px Arial, Helvetica, sans-serif;
}
body {
margin: 0 auto;
width: 713px;
}
/********************* main separations *************************/
#header {
/* add style here */
}
#navigation {
/* add style here */
}
#mainbody {
width: 713px;
overflow: hidden; /* clearing floats */
}
/********************* #mainbody: styles ************************/
#content {
float: left;
width:393px;
padding:20px 0 20px 20px;
}
#sidebar {
float: right;
width:280px;
padding:20px 20px 20px 0;
}
/* etc.... */
HTML
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css">
</head>
<body>
<!-- header -->
<div id="header">
</div>
<!-- END OF header -->
<!-- navigation -->
<div id="navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Something</a></li>
<li><a href="">Another</a></li>
<li><a href="">Look at me!</a></li>
</ul>
</div>
<!-- END OF navigation -->
<div id="mainbody">
<!-- content -->
<div id="content">
<h1>Some news title</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed placerat. Integer aliquam orci non velit. Vestibulum facilisis, enim ac pellentesque bibendum, felis lorem congue quam, sit amet vestibulum libero ligula ut felis. Morbi suscipit. Mauris gravida. Suspendisse semper, ipsum et condimentum suscipit, tellus tortor feugiat purus, nec aliquet lectus nulla at sapien. Vivamus euismod. Vestibulum ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus gravida, neque quis faucibus porta, leo diam pulvinar eros, eget eleifend purus metus ac nulla. Vivamus faucibus. Sed tempus. Suspendisse tortor elit, pretium vitae, malesuada ac, scelerisque sed, eros. Ut mi pede, rhoncus quis, malesuada id, volutpat nec, arcu. Maecenas venenatis, magna ornare porta aliquam, enim arcu ultrices nunc, vitae tristique nisl arcu ut pede. Ut pede ipsum, posuere at, laoreet nec, viverra vel, nibh.</p>
<p>Curabitur dapibus rutrum nisi. Praesent molestie cursus nisi. Sed adipiscing congue urna. Duis ullamcorper, sem eu tristique viverra, odio lacus sollicitudin lectus, in tempus dolor nunc sit amet metus. Vivamus viverra, lacus in eleifend pellentesque, justo odio porttitor ipsum, et sollicitudin elit ligula vel mi. Cras metus. Aliquam odio felis, consequat vel, placerat et, mattis id, nisi. Proin at elit in nibh tempus dapibus. Vestibulum placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas lacus elit, adipiscing at, iaculis id, volutpat vel, tortor.</p>
</div>
<!-- END OF content -->
<!-- sidebar -->
<div id="sidebar">
<p>Some side stuff here</p>
<p>more bla bla here</p>
</div>
<!-- END OF sidebar -->
</div>
</body>
</html>
|
CSS weird block problem IE only - help!!!
Jun 7th, 2007, 13:22
CSS weird block problem IE only - help!!!
Similar Threads
