Menu
im using css for a layout and when my DIVs touch a border it makes a scroll where you can see my white background.my current solution is disabling scrollbars but this looks crappy.how could this be fixed.
id post a link but itd be useless, cause of my solution.
id post a link but itd be useless, cause of my solution.[/QUOTE]
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Machete Ted's</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<span id="logo"><img src="images/Square-Logo.png" alt="Machete Ted's logo"></span>
<h1>Page Title here (if you want one)</h1>
</div>
<div id="leftbar">
<h2>Top 10</h2>
</div>
<div id="rightbar">
<p>right column stuff</p>
</div>
<div id="content">
<h2>Under Construction</h2>
</div>
<div id="footerpush"></div>
</div>
<div id="footer">
<p>footer stuff</p>
</div>
</body>
</html>
[/CODE][CODE]* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #707070;
color: #FFFFFF;
min-width: 920px;
}
p {
margin-bottom: 1em;
}
#wrapper {
margin: 0 272px 0 272px;
background-color: #8B7355;
border-left: 2px groove #363636;
border-right: 2px groove #363636;
min-height: 100%;
}
#header {
height: 250px;
border-bottom: 2px groove #363636;
margin: 0 -274px;
background-color: #8B7765;
position: relative;
}
#header #logo {
float: left;
}
#header h1 {
padding: 20px;
float: left;
}
#leftbar {
width: 252px;
padding: 10px 12px 10px 0;
margin-left: -262px;
display: inline;
float: left;
position: relative;
}
#leftbar h2 {
text-align: center;
color: #CDAD00;
font-size: 200%;
}
#rightbar {
width: 252px;
padding: 10px 0 10px 12px;
margin-right: -262px;
float: right;
display: inline;
position: relative;
}
#content {
padding: 10px;
}
#content h2 {
text-align: center;
text-transform: uppercase;
font-size: 200%;
}
#footerpush {
clear: both;
height: 117px;
}
#footer {
height: 95px;
background-color: #2E2E2E;
border-top: 2px groove #363636;
margin-top: -117px;
position: relative;
padding: 10px;
}[/CODE]Here I started with the universal selector to zero ALL browser-applied default margins and padding from everything for an even start point. Next I set the height of html and body to 100%, so there is a reference height (my point no 3 above). The body then gets the usual font base and the background colour of the side columns are the body background (as the side column won't really extend full height, it will just look like they do). A min-width is also set here so that the content area does not squash too small when the window size is reduced. A default bottom margin is also added back to any paragraphs (using only bottom margin gets around margin collapse issues with containers).[CODE]body {
width: expression((documentElement.clientWidth < 918) ? "920px" : "auto");
}
#wrapper {
height: 100%;
}
#header #logo {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Square-Logo.png')
}
#header #logo img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}[/CODE]First problem for IE6 is that it doesn't understand Min-width, so an IE-specific expression can be used to set the width of the body to 920px should the default "auto" setting be too small.0.1.9 — BETA 6.17