Forum Moderators: not2easy
I just created a page that I was pretty proud of, until a few minutes ago. It's got a background image set to scroll, and the content area is inside a 740px-wide div that's centered on the page using the old-fashioned <center> tag. Doctype is transitional, and the code and CSS validate.
The problem comes when viewing the page in Mozilla. It's fine at 800x600 resolution and anything larger. But, when I resized the Mozilla browser to be narrower, the main div mentioned above remains centered, clipping the content on both the left and the right. Content to the right can be seen by scrolling, but it's not an option to scroll to the left to see what's there.
I tried applying overflow:visible to the body tag and my main div tag, but to no avail.
I don't mind the idea of a few of my visitors having to scroll sideways to see all of my content. But, I'd like them to be able to see all of the content. How can I fix it so that Mozilla doesn't chop off the left-hand portion of the page?
I know it's not allowed to post URL's here, so I won't do it. But if anyone wants to see the page in question, sticky me and I'll send the link.
Thanks,
Matthew
Thanks again,
Matthew
As to the div question: no it doesn't matter at all.
(Turned out to be a bigger portion of code than I expected; hope you don't mind, but I wasn't sure what all was "relavant!")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>My Page Title</title>
<meta name="robots" content="noarchive">
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><style type="text/css">
.center {
text-align: center;
}.tiny {
font-family: arial, verdana, sans-serif;
font-size: 7pt;
color: #334DAC;
}.small {
font-family: verdana, arial, sans-serif;
font-size: 8pt;
color: #334DAC;
}.normal {
font-family: arial, verdana, sans-serif;
font-size: 10pt;
color: #334DAC;
text-align: left;
}.inline {
display: inline;
}p {
text-align: left;
}a.brightblue, a.brightblue:visited {
display: block;
width: 100%;
text-decoration: none;
border: 1px solid #334DAC;
background-color: #93bcdd;
font-weight: normal;
}a.brightblue:hover, a.brightblue:active {
background-color: #0000dd;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}td.headnav {
width: 20%;
border-right: 3px solid #cee1f0;
border-bottom: 2px solid #cee1f0;
text-align: center;
font-family: verdana;
font-size: 6.5pt;
color: #334DAC;
}</STYLE>
</head>
<body style="margin: 0px; background-image: url(/images/background.gif); background-attachment: scroll; border-right: 1px solid #334DAC; overflow: visible">
<!--Begin Header-->
<p class="small inline center"> </p>
<center style="overflow: visible">
<div style="border: 1px solid #334DAC; padding: 0px; width: 740px; background-color: #ffffff; overflow: visible">
<table width="740" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 35px; width: 378px; vertical-align: top"><img src="/images/logotop.gif" alt=""></td>
<td style="border-bottom: 1px solid #334DAC; vertical-align: top">
<table cellpadding="0" cellspacing="0" style="border-collapse: separate; border: 2px solid #cee1f0; border-bottom: 0px; border-right: 0px; width: 100%;">
<tr>
<td class="headnav"><a href="url" class="brightblue">Link</a></td>
<td class="headnav"><a href="url" class="brightblue"">Link</a></td>
<td class="headnav"><a href="url" class="brightblue">Link</a></td>
<td class="headnav"><a href="url" class="brightblue">Link</a></td>
<td class="headnav"><a href="url" class="brightblue">Link</a></td>
</tr>
<tr>
<td class="headnav"><a href="url" class="brightblue">Link</a></td>
<td class="headnav"><a href="url" class="brightblue">Link</a></td>
<td class="headnav"><a href="url" class="brightblue">Link</a></td>
<td class="headnav"><a href="url" class="brightblue">Link</a></td>
<td class="headnav"><a href="url" class="brightblue">Link</a></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="740" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 740px; height: 92px;"><img src="/images/logomiddle2.jpg"></td>
</tr>
</table>
<!--End Header--><!--Begin Content-->
<div style="width: 530px; float: left; padding: 10px;">
<p class="normal">Main content area goes here</p>
</div>
<!--End Content--><!--Begin Sidebar-->
<div style="width: 190px; float: right; padding-top: 20px; padding-bottom: 20px;">
<p class="normal">Sidebar content goes here</p>
</div>
<!--End Sidebar--><!--Begin Footer-->
<div style="width: 740px; clear: both; background-color: #ffffff; padding: 0px; margin: 0px;"><p class="normal">Footer goes here</p>
</div>
<!--End Footer--></div>
<p class="small inline center"> </p>
</center></body>
</html>
yah I was just going to say get rid of that center and do a margin:0px auto on your wrapper div.
hate u :)
Using text-align: center on the body element (or the <center> tag) is the workaround for centering a div in IE5.x
So I use both this and margin: auto; (the correct way to center) but then if you specify the min-width on the body (which IE doesn't understand) it eliminates the "cropping" problem you just described.
Suzy
As I program pages in small dev environments, I have always had the luxury of being snobbish about older browsers ;) i love it...
