I am trying to learn coding of my family web site with no tables. My site <!-- w --><a class="postlink" href="http://www.carlbeck.com">www.carlbeck.com</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.carlbeck.com">http://www.carlbeck.com</a><!-- m -->) is currently 100% CSS but does not work with any browser but IE6.
My current problem is that I cannot create a box that will contain anything but text. I want the <div class="borderbox"> to contain and legthen to include the two images. It works for IE6 but not other browsers I check with.
Can someone give me guidance?
Here is my code for this test:
<!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=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#centercontent {
background: #fed;
margin-top: 70px;
margin-left: 159px; margin-right:159px;
border: 1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 161px; margin-right:161px;
}
html>body #centercontent {
margin-left: 161px; margin-right:161px;
}
.borderbox {
margin-top:30px;
background: aqua;
color: navy;
border: inset 3px aqua;
text-align: center;
}
</style>
</head>
<body>
<div id="centercontent">
<div class="borderbox">
I highly recommend you subscribe to these Newsletters.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.langa.com/newsletter.htm" target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/FLANGA5.JPG" style="float: left;
width:125px; height: 35px" alt="Langa Icon">
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.scotsnewsletter.com/subcenter/subscribe.asp"target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/scot125.jpg" style="float: right;
width: 125px; height: 35px" alt="Scott Newsletter Icon">
</a>
</div>
</div>
</body>
</html>You can resolve it by putting a div (or other element) underneath your floated ones with clear: both; as the css property.
Basically when you float your images browsers other than ie decide that the background isn't supposed to carry on down as there's nothing in the box - it's floated away.
I've seen a full explanation somewhere of why itdoes it, but all you need to do to resolve it is put clear both on something underneath the images.<!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=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#centercontent {
background: #fed;
margin-top: 70px;
margin-left: 159px; margin-right:159px;
border: 1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 161px; margin-right:161px;
}
html>body #centercontent {
margin-left: 161px; margin-right:161px;
}
.borderbox {
margin-top:30px;
background: aqua;
color: navy;
border: inset 3px aqua;
text-align: center;
}
</style>
</head>
<body>
<div id="centercontent">
<div class="borderbox">
I highly recommend you subscribe to these Newsletters.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.langa.com/newsletter.htm" target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/FLANGA5.JPG" style="float: left;
width:125px; height: 35px" alt="Langa Icon">
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.scotsnewsletter.com/subcenter/subscribe.asp"target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/scot125.jpg" style="float: right;
width: 125px; height: 35px" alt="Scott Newsletter Icon">
</a>
<div style="clear: both;"> </div>
</div>
</div>
</body>
</html>Thanks DaveSW,
By putting my text below the images instead of above I was able to use your input.
Now I would like to limit the <div class="borderbox"> with a width and keep it centered. When I add "width: 300px;" to ".borderbox" and "text-align: center;" to "#centercontent", the box is centered in IE6 but not in other browsers.
Can you help here?
Carlapply margin: auto; to the div to center it in any browser other than ie.
.borderbox {
margin: auto;
margin-top:30px;
background: aqua;
color: navy;
border: inset 3px aqua;
text-align: center;
width: 300px;
}
If you look at this code, I've put the margin:auto at the top of the list, and overridden it for margin-top by putting it underneath.Thanks agian DaveSW,
That solved my centering problem and I see "text-align: center;" must be in "#centercontent" to make IE6 happy.
The "margin-top: 30px;" worked fine in Opera, Netscape 7, and firefox but not in IE6. I took the "margin-top: 30px;" out of ".borderbox" and made:
<div class="borderbox" style="position: relative; top: 30px;">
and it looked pretty good in all browsers.
Is this an acceptable way to solve this problem or will it cause other problems?
It's funny that I read that Firefox is sopposed to be the most standard but IE6 seems to work as you would expect.
Thanks again,
CarlPosition relative takes the box and moves it relative to it's normal position. Therefore I'm guessing that it might in some browsers cover up anything that was up to 30px further down the page.
My solution would be to nest two divs...
<!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=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#centercontent {
background: #fed;
margin-top: 70px;
margin-left: 159px; margin-right:159px;
border: 1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 161px; margin-right:161px;
}
html>body #centercontent {
margin-left: 161px; margin-right:161px;
}
.borderbox {
margin: auto;
text-align: center;
width: 300px;
}
.borderbox div {
margin-top:30px;
border: inset 3px aqua;
background: aqua;
color: navy;
}
</style>
</head>
<body>
<div id="centercontent">
<div class="borderbox">
<div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.langa.com/newsletter.htm" target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/FLANGA5.JPG" style="float: left;
width:125px; height: 35px" alt="Langa Icon">
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.scotsnewsletter.com/subcenter/subscribe.asp"target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/scot125.jpg" style="float: right;
width: 125px; height: 35px" alt="Scott Newsletter Icon">
</a>
<div style="clear: both;">I highly recommend you subscribe to these Newsletters.</div>
</div>
</div>
</div>
</body>
</html>Thanks again DaveSW,
With your help I have compleatly redesigned my family web pages <!-- w --><a class="postlink" href="http://www.carlbeck.com">www.carlbeck.com</a><!-- w --> with 100% CSS and it works in IE6, Firefox, Netscape 7, and partially in Opra. I wish I could check it out with a Mac but no can do.
Please check it out and tell me what you think.
Thanks Again
Carl
My current problem is that I cannot create a box that will contain anything but text. I want the <div class="borderbox"> to contain and legthen to include the two images. It works for IE6 but not other browsers I check with.
Can someone give me guidance?
Here is my code for this test:
<!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=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#centercontent {
background: #fed;
margin-top: 70px;
margin-left: 159px; margin-right:159px;
border: 1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 161px; margin-right:161px;
}
html>body #centercontent {
margin-left: 161px; margin-right:161px;
}
.borderbox {
margin-top:30px;
background: aqua;
color: navy;
border: inset 3px aqua;
text-align: center;
}
</style>
</head>
<body>
<div id="centercontent">
<div class="borderbox">
I highly recommend you subscribe to these Newsletters.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.langa.com/newsletter.htm" target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/FLANGA5.JPG" style="float: left;
width:125px; height: 35px" alt="Langa Icon">
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.scotsnewsletter.com/subcenter/subscribe.asp"target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/scot125.jpg" style="float: right;
width: 125px; height: 35px" alt="Scott Newsletter Icon">
</a>
</div>
</div>
</body>
</html>You can resolve it by putting a div (or other element) underneath your floated ones with clear: both; as the css property.
Basically when you float your images browsers other than ie decide that the background isn't supposed to carry on down as there's nothing in the box - it's floated away.
I've seen a full explanation somewhere of why itdoes it, but all you need to do to resolve it is put clear both on something underneath the images.<!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=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#centercontent {
background: #fed;
margin-top: 70px;
margin-left: 159px; margin-right:159px;
border: 1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 161px; margin-right:161px;
}
html>body #centercontent {
margin-left: 161px; margin-right:161px;
}
.borderbox {
margin-top:30px;
background: aqua;
color: navy;
border: inset 3px aqua;
text-align: center;
}
</style>
</head>
<body>
<div id="centercontent">
<div class="borderbox">
I highly recommend you subscribe to these Newsletters.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.langa.com/newsletter.htm" target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/FLANGA5.JPG" style="float: left;
width:125px; height: 35px" alt="Langa Icon">
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.scotsnewsletter.com/subcenter/subscribe.asp"target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/scot125.jpg" style="float: right;
width: 125px; height: 35px" alt="Scott Newsletter Icon">
</a>
<div style="clear: both;"> </div>
</div>
</div>
</body>
</html>Thanks DaveSW,
By putting my text below the images instead of above I was able to use your input.
Now I would like to limit the <div class="borderbox"> with a width and keep it centered. When I add "width: 300px;" to ".borderbox" and "text-align: center;" to "#centercontent", the box is centered in IE6 but not in other browsers.
Can you help here?
Carlapply margin: auto; to the div to center it in any browser other than ie.
.borderbox {
margin: auto;
margin-top:30px;
background: aqua;
color: navy;
border: inset 3px aqua;
text-align: center;
width: 300px;
}
If you look at this code, I've put the margin:auto at the top of the list, and overridden it for margin-top by putting it underneath.Thanks agian DaveSW,
That solved my centering problem and I see "text-align: center;" must be in "#centercontent" to make IE6 happy.
The "margin-top: 30px;" worked fine in Opera, Netscape 7, and firefox but not in IE6. I took the "margin-top: 30px;" out of ".borderbox" and made:
<div class="borderbox" style="position: relative; top: 30px;">
and it looked pretty good in all browsers.
Is this an acceptable way to solve this problem or will it cause other problems?
It's funny that I read that Firefox is sopposed to be the most standard but IE6 seems to work as you would expect.
Thanks again,
CarlPosition relative takes the box and moves it relative to it's normal position. Therefore I'm guessing that it might in some browsers cover up anything that was up to 30px further down the page.
My solution would be to nest two divs...
<!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=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#centercontent {
background: #fed;
margin-top: 70px;
margin-left: 159px; margin-right:159px;
border: 1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 161px; margin-right:161px;
}
html>body #centercontent {
margin-left: 161px; margin-right:161px;
}
.borderbox {
margin: auto;
text-align: center;
width: 300px;
}
.borderbox div {
margin-top:30px;
border: inset 3px aqua;
background: aqua;
color: navy;
}
</style>
</head>
<body>
<div id="centercontent">
<div class="borderbox">
<div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.langa.com/newsletter.htm" target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/FLANGA5.JPG" style="float: left;
width:125px; height: 35px" alt="Langa Icon">
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.scotsnewsletter.com/subcenter/subscribe.asp"target="_blank">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/scot125.jpg" style="float: right;
width: 125px; height: 35px" alt="Scott Newsletter Icon">
</a>
<div style="clear: both;">I highly recommend you subscribe to these Newsletters.</div>
</div>
</div>
</div>
</body>
</html>Thanks again DaveSW,
With your help I have compleatly redesigned my family web pages <!-- w --><a class="postlink" href="http://www.carlbeck.com">www.carlbeck.com</a><!-- w --> with 100% CSS and it works in IE6, Firefox, Netscape 7, and partially in Opra. I wish I could check it out with a Mac but no can do.
Please check it out and tell me what you think.
Thanks Again
Carl