PDA

Click to See Complete Forum and Search --> : Negative margins: footer is NOT visible in Dreamweaver

andkhl
07-19-2007, 12:51 PM
The problem is that my footer for some reason is not visible in Dreamweaver 8 at 100% magnification. It is simply not possible to scroll down to get to it!!! If I change magnification to 50%, I can see it just as well as when I preview the webpage in ANY browser!!! What is wrong??? I need to edit the footer but I simply can't!

I figure an error in my CSS stylesheet can cause it. Would you please help me find it?

Here is my code (I've deleted the unnecessary lines and kept the container and the footer).


html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
}
/* ----------------- DIVs ---------------------*/
div#container {
min-height:100%;
width:910px;
margin:0 auto;
background: white;
}
* html #container {
height:100%;
}
/* --------------------- Main Content --------------- */
div#mainContent {
width:100%;
float:left;
margin-top:1em;
margin-bottom:3.5em;
}
/* -------------------Left Column ---------------- */
div#leftColumn {
width:275px;
text-align:left;
padding:1em 0em 1em 0em;
float:left;
}

/* ------------------------ Right Column -------------------- */
div#rightColumn {
width:570px;
padding:1em 1em 1em 1.5em;
margin-bottom:30px;
text-align:left;
float:right;
}

/* ------------------------- Footer ---------------------- */

div#footer {
width:910px;
height:60px;
border: solid 1px black;
margin:-62px auto;
clear:both;
}




<body>
<div id="container">
<div id="mainContent">
<div id="leftColumn">This is Left Column</div>
<div id="rightColumn">This is Right Colum</div>
</div><!-- End of MainContent -->
</div> <!-- End of Container DIV -->
<div id="footer"> This is Footer </div>
</body>




Thank you for your help!
KDLA
07-19-2007, 12:58 PM
Why do you have the negative margins? They aren't needed -- and are really buggy in certain browsers.

Keep in mind: Dreamweaver's design view is not CSS-friendly. It will NOT render your page as you've coded it. You'll need to preview it in your browser to see an accurate rendition.

KDLA
andkhl
07-19-2007, 02:40 PM
I used negative margin on the footer in order to drag it on top of the container. Because the container's height is always 100% (that is, from top to bottom on any monitor and at any screen resolution), the footer otherwise would not have been visible when the page first loaded (one would have to scroll down to see the footer).

As I've mentioned before, there are no problems with previewing the page in any browser, but how do I edit it if, roughly speaking, 1/8 of it is not visible in Dreamweaver 8??? Does anyone have a solution to this?
KDLA
07-19-2007, 02:46 PM
Edit it in Code View.
Centauri
07-19-2007, 04:40 PM
Edit it in Code View. Which is where you should be most of the time. Dreamweaver's design view is quite useful as a guide whilst writing, but does render things differently to any browsers, and should not be used for anything more involved than text content entry.
andkhl
07-20-2007, 12:11 PM
From your replies, it does seem like the problem I am having is caused by Dreamweaver, not an error in my CSS. Well, I guess I'll have to live with that and find other ways to finish the job.

Thanks for your replies.