Ask a Question related to Macromedia Dynamic HTML, Design and Development.
-
Ziggi #1
Annoying Margin around layers
Hi. I've used CSS-P to create a three column layout with a head box, but
there is an annoying roughly 1em margin/padding surrounding the area when
viewed with IE. Here's the code...
<html>
<head>
<title>My Eyes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
p { font: 500 12pt/14pt verdana; color: white; }
#body {
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 0;
margin: 0;
}
#main {
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 0;
padding-top: 100px;
margin: 0;
background-color: grey;
}
#top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 1em;
background-color: red;
}
#bottom {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 300px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 0;
background-color: black;
}
#leftCol {
position: absolute;
top: 0;
left: 0;
width: 100px;
padding: 1em;
background-color: yellow;
}
#centerCol {
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 1em;
background-color: green;
}
#rightCol {
position: absolute;
top: 0;
right: 0;
width: 100px;
padding: 1em;
background-color: blue;
}
/* Scrolling Layes */
#wnthumbs {
position: relative;
width: 100px;
height: 200px;
clip:rect(0px, 100px, 200px, 0px);
overflow: hidden;
z-index: 100;
}
#thumbs {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
#wninfo {
position: relative;
width: 100px;
height: 100px;
clip:rect(0px, 100px, 100px, 0px);
overflow: hidden;
z-index: 100;
}
#info {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
#wncomments {
position: relative;
width: 100px;
height: 100px;
clip:rect(0px, 100px, 100px, 0px);
overflow: hidden;
z-index: 100;
}
#comments {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="top">
<p>Top</p>
</div>
<div id="bottom">
<div id="leftCol">
<p>Left Column</p>
</div>
<div id="centerCol">
<p>Center Column</p>
</div>
<div id="rightCol">
<p>Right Column</p>
</div>
</div>
</div>
</body>
</html>
I've tried setting the position attribute of the #main ID to absolute, but
that instead leaves a horrible right-margin/padding. Does anyone know how
to eliminate this unwanted margin/padding? ie, so the #main area fills the
entire window with no spaces between it and the edges of the window? Thanks
in advance.
Ziggi
Ziggi Guest
-
Unwanted margin-top and margin-bottom styles
Editing a template-based page in Contribute CS3, there is no List Properties option (Help file says "Note: This option is not available for... -
Negative margin
Hello, I just tested a new layout (css and html validated of course), that use negative margin. No editing possible in Contribute. Has the... -
pdf margin limit?
I have been able to produce pdf versions(Acrobat 4.0) of documents that I have created in FrameMaker 6(OS9-G4) and am pleased with the results. And I... -
How to eliminate margin
On a page I have a table with a single <tr> & <td> containing a flash movie and some graphics. With the flash file, there is a 3-4 pixel white space... -
Add an Margin Between Photos
Andy, If your paper is 8 1/2 x 11 you can set the print size to 8 1/2 x 5 1/2. You can then print one picture on one half of the paper, print the... -
Ziggi #2 Re: Annoying Margin around layers
ah... I just noticed the # by the attributes I set for Body in the style
section of the header... removing it fixed the problem.
"Ziggi" <one_ziggi@hotmail.com> wrote in message
news:bkqlpm$c8$1@pegasus.csx.cam.ac.uk...the> Hi. I've used CSS-P to create a three column layout with a head box, but
> there is an annoying roughly 1em margin/padding surrounding the area when
> viewed with IE. Here's the code...
>
> <html>
> <head>
> <title>My Eyes</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <style type="text/css">
> <!--
>
> p { font: 500 12pt/14pt verdana; color: white; }
>
> #body {
> position: relative;
> top: 0;
> left: 0;
> width: 100%;
> padding: 0;
> margin: 0;
> }
>
> #main {
> position: relative;
> top: 0;
> left: 0;
> width: 100%;
> padding: 0;
> padding-top: 100px;
> margin: 0;
> background-color: grey;
> }
>
> #top {
> position: absolute;
> top: 0;
> left: 0;
> width: 100%;
> height: 100px;
> padding: 1em;
> background-color: red;
> }
>
> #bottom {
> position: relative;
> top: 0;
> left: 0;
> width: 100%;
> height: 300px;
> padding-left: 100px;
> padding-right: 100px;
> padding-bottom: 0;
> background-color: black;
> }
>
> #leftCol {
> position: absolute;
> top: 0;
> left: 0;
> width: 100px;
> padding: 1em;
> background-color: yellow;
> }
>
> #centerCol {
> position: relative;
> top: 0;
> left: 0;
> width: 100%;
> padding: 1em;
> background-color: green;
> }
>
> #rightCol {
> position: absolute;
> top: 0;
> right: 0;
> width: 100px;
> padding: 1em;
> background-color: blue;
> }
>
>
> /* Scrolling Layes */
>
> #wnthumbs {
> position: relative;
> width: 100px;
> height: 200px;
> clip:rect(0px, 100px, 200px, 0px);
> overflow: hidden;
> z-index: 100;
> }
>
>
> #thumbs {
> position: absolute;
> top: 0;
> left: 0;
> visibility: hidden;
> }
>
> #wninfo {
> position: relative;
> width: 100px;
> height: 100px;
> clip:rect(0px, 100px, 100px, 0px);
> overflow: hidden;
> z-index: 100;
> }
>
> #info {
> position: absolute;
> top: 0;
> left: 0;
> visibility: hidden;
> }
>
> #wncomments {
> position: relative;
> width: 100px;
> height: 100px;
> clip:rect(0px, 100px, 100px, 0px);
> overflow: hidden;
> z-index: 100;
> }
>
> #comments {
> position: absolute;
> top: 0;
> left: 0;
> visibility: hidden;
> }
> -->
> </style>
> </head>
>
> <body>
>
> <div id="main">
> <div id="top">
> <p>Top</p>
> </div>
> <div id="bottom">
> <div id="leftCol">
> <p>Left Column</p>
> </div>
> <div id="centerCol">
> <p>Center Column</p>
> </div>
> <div id="rightCol">
> <p>Right Column</p>
> </div>
> </div>
> </div>
>
> </body>
> </html>
>
> I've tried setting the position attribute of the #main ID to absolute, but
> that instead leaves a horrible right-margin/padding. Does anyone know how
> to eliminate this unwanted margin/padding? ie, so the #main area fillsThanks> entire window with no spaces between it and the edges of the window?> in advance.
>
> Ziggi
>
>
Ziggi Guest
Reply With QuoteSimilar Questions and Discussions
Posting Permissions
- You may not post new threads
- You may post replies
- You may not post attachments
- You may not edit your posts
