<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ascii">
<title></title>
<style type="text/css">
div.banner-curved-corners {
float: left;
background-color: blue;
width: 15px;
height: 100px;
}
div.banner-image {
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="banner-curved-corners"></div><div class="banner-image"></div>
</body>
</html>In IE there is a gap between these two blocks. I can't figure out how to get rid of it. I've tried setting the margins and padding of each block to 0 but that didn't help. Any ideas>Make your second DIV float:left and give it a set width.
div.banner-image {
float:left;
width:785px;
height: 100px;
background-color: green;
}That has created new problems. Here is the new code with the changes in red.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ascii">
<title></title>
<style type="text/css">
div.banner-curved-corners {
float: left;
background-color: blue;
width: 15px;
height: 100px;
}
div.banner-image {
float: left;
width: 100%;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="banner-curved-corners"></div><div class="banner-image"></div>
</body>
</html>The first DIV needs to be a fixed size and the second DIV should be as wide as necessary to fill the remaining horizontal space.The closest I think you will get is:
div.banner-image {
float:left;
width:100%;
margin-right:-15px;
height: 100px;
background-color: green;
}
Otherwise you will most-probably need to resort to JavaScript, then.
In any event, you should be working around the problem programming for all resolutions:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ascii">
<title></title>
<style type="text/css">
body{background-color:white;color:black;font-family: Arial, sans-serif;font-size: 11px;margin:0;text-align:center;}
#mcontainer{width:800px; margin: 0 auto;}
.alignleft{text-align:left;}
div.banner-curved-corners {
float: left;
background-color: blue;
width: 15px;
height: 100px;
}
div.banner-image {
float: left;
width: 785px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="mcontainer">
<div class="alignleft">
<!-- main container -->
<div class="banner-curved-corners"></div>
<div class="banner-image"></div>
<!-- /main container -->
</div>
</div>
</body>
</html>In any event, you should be working around the problem programming for all resolutions...
That is what I was (am) trying to do. Your trick with the negative margin on the second DIV did the trick. Thanks.If you take the negitive margin approach, the IE conditional comment really comes in handy in this situation so we don't ruin the output of good browsers like Firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ascii">
<title></title>
<style type="text/css">
body{margin:5px; padding:2px;}
div.banner-curved-corners {
float: left;
background-color: blue;
width: 15px;
height: 100px;
}
div.banner-image {
height: 100px;
background-color: green;
}
</style>
<!--[if IE]>
<style type="text/css">
div.banner-image {
float:left;
margin-right:-15px;
width: 100%;
height: 100px;
background-color: green;
}
</style>
<![endif]-->
</head>
<body>
<div class="banner-curved-corners"></div><div class="banner-image"></div>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ascii">
<title></title>
<style type="text/css">
div.banner-curved-corners {
float: left;
background-color: blue;
width: 15px;
height: 100px;
}
div.banner-image {
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="banner-curved-corners"></div><div class="banner-image"></div>
</body>
</html>In IE there is a gap between these two blocks. I can't figure out how to get rid of it. I've tried setting the margins and padding of each block to 0 but that didn't help. Any ideas>Make your second DIV float:left and give it a set width.
div.banner-image {
float:left;
width:785px;
height: 100px;
background-color: green;
}That has created new problems. Here is the new code with the changes in red.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ascii">
<title></title>
<style type="text/css">
div.banner-curved-corners {
float: left;
background-color: blue;
width: 15px;
height: 100px;
}
div.banner-image {
float: left;
width: 100%;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="banner-curved-corners"></div><div class="banner-image"></div>
</body>
</html>The first DIV needs to be a fixed size and the second DIV should be as wide as necessary to fill the remaining horizontal space.The closest I think you will get is:
div.banner-image {
float:left;
width:100%;
margin-right:-15px;
height: 100px;
background-color: green;
}
Otherwise you will most-probably need to resort to JavaScript, then.
In any event, you should be working around the problem programming for all resolutions:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ascii">
<title></title>
<style type="text/css">
body{background-color:white;color:black;font-family: Arial, sans-serif;font-size: 11px;margin:0;text-align:center;}
#mcontainer{width:800px; margin: 0 auto;}
.alignleft{text-align:left;}
div.banner-curved-corners {
float: left;
background-color: blue;
width: 15px;
height: 100px;
}
div.banner-image {
float: left;
width: 785px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="mcontainer">
<div class="alignleft">
<!-- main container -->
<div class="banner-curved-corners"></div>
<div class="banner-image"></div>
<!-- /main container -->
</div>
</div>
</body>
</html>In any event, you should be working around the problem programming for all resolutions...
That is what I was (am) trying to do. Your trick with the negative margin on the second DIV did the trick. Thanks.If you take the negitive margin approach, the IE conditional comment really comes in handy in this situation so we don't ruin the output of good browsers like Firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ascii">
<title></title>
<style type="text/css">
body{margin:5px; padding:2px;}
div.banner-curved-corners {
float: left;
background-color: blue;
width: 15px;
height: 100px;
}
div.banner-image {
height: 100px;
background-color: green;
}
</style>
<!--[if IE]>
<style type="text/css">
div.banner-image {
float:left;
margin-right:-15px;
width: 100%;
height: 100px;
background-color: green;
}
</style>
<![endif]-->
</head>
<body>
<div class="banner-curved-corners"></div><div class="banner-image"></div>
</body>
</html>