473,324 Members | 2,313 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Margin showing top, left, and right, but not bottom--why?

I'm sure I'm missing something obvious, but I'd appreciate it if someone could
point out why the following puts a wide margin on the top, left, and right, but
not on the bottom (even when scrolled fully down):
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Test</title>

<style type="text/css">
body { background: gray; }
div#sheet { position: absolute; margin: 10%; z-index: 1; width: 80%; background:
white; }
div#shadow { position: absolute; z-index: -1; height: 100%; width: 100%; bottom:
-5px; right: -5px; color: white; background:

black; }
p { padding: 5%; }
</style>

</head>

<body>

<div id="sheet"><p>Sheet Sheet Sheet Sheet Sheet Sheet Sheet Sheet Sheet Sheet
Sheet Sheet Sheet Sheet Sheet Sheet Sheet

Sheet Sheet Sheet Sheet Sheet Sheet Sheet Sheet Sheet

</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><

p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p>
<div id="shadow"><p>Shadow</p></div>
</div>

</body>

</html>
Sep 6 '06 #1
6 1413
Els
Paul Wake wrote:
I'm sure I'm missing something obvious, but I'd appreciate it if someone could
point out why the following puts a wide margin on the top, left, and right, but
not on the bottom (even when scrolled fully down):
[snip code]

Assuming you are talking about the margin on the first element in
<body>, I'm guessing the margin is there, but it just collapses with
the margin of <body>, and falls outside the screen.
It's just a guess though, as I couldn't be bothered copy-pasting your
code into a file, save it, and let my server display it.

If the guess is correct though, I'm curious to know whether giving
<bodya border-bottom or a padding-bottom would solve your problem.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Sep 6 '06 #2
In article <1n******************************@40tude.net>, Els says...
>It's just a guess though, as I couldn't be bothered copy-pasting your
code into a file, save it, and let my server display it.
Sorry. Here's an online version of the test page:
http://www.xmission.com/~wake/test.html
My own home page and some other linked pages have a margin all around, but this
one doesn't work.
Sep 6 '06 #3
Paul Wake wrote:
In article <1n******************************@40tude.net>, Els says...
>It's just a guess though, as I couldn't be bothered copy-pasting your
code into a file, save it, and let my server display it.

Sorry. Here's an online version of the test page:
http://www.xmission.com/~wake/test.html
My own home page and some other linked pages have a margin all around, but this
one doesn't work.

Is there some reason for not taking advantage of flow? How about
removing the position and z-index rules?

Louise
Sep 7 '06 #4
In article <5P******************@news-server.bigpond.net.au>, boclair says...
>Is there some reason for not taking advantage of flow? How about
removing the position and z-index rules?
That changes it from:
http://www.xmission.com/~wake/test.html
to:
http://www.xmission.com/~wake/test2.html
which does get the bottom margin in, but messes up the shadow div. I'm not
familiar enough with CSS get both of what I want on the page.
Sep 7 '06 #5
Els
Paul Wake wrote:
In article <5P******************@news-server.bigpond.net.au>, boclair says...
>>Is there some reason for not taking advantage of flow? How about
removing the position and z-index rules?

That changes it from:
http://www.xmission.com/~wake/test.html
to:
http://www.xmission.com/~wake/test2.html
which does get the bottom margin in, but messes up the shadow div. I'm not
familiar enough with CSS get both of what I want on the page.
If this position:absolute is only to get that shadow in, try it this
way:

body{
padding:10%;
}
#shadow{
position:relative;
top:5px;
left:5px;
}
#sheet{
position:relative;
top:-5px;
left:-5px;
}

<div id="shadow">
<div id="sheet">
[page content]
</div>
</div>

(background colours to be added obviously :-) )

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Sep 7 '06 #6
Paul Wake wrote:
In article <5P******************@news-server.bigpond.net.au>, boclair says...
>Is there some reason for not taking advantage of flow? How about
removing the position and z-index rules?

That changes it from:
http://www.xmission.com/~wake/test.html
to:
http://www.xmission.com/~wake/test2.html
which does get the bottom margin in, but messes up the shadow div. I'm not
familiar enough with CSS get both of what I want on the page.

If the aim is to have the shadow box offset horizontally and vertically
another approach would be something like.

Louise

div#shadowloc {
left: 0.5em;
position: relative;
top: 0.5em;
}
div#shadowloc div {
background: #000000;
color: #ffffff;
width: 100%; /* IE fix*/
}

and markup

<div id="sheet">
[sheet content]

<div id="shadowloc"><!-- contained in sheet -->
<div>Shadow</div>
</div><!-- end contained shadowloc -->

</div><!-- end sheet -->
Sep 7 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: mitsura | last post by:
Hi, I have included a small listing. The test program opens a panel and show a bitmap. What I want is to when the mouse is over the bitmap panel, I want to trap the left mouse click. The...
8
by: A.M | last post by:
Hi, Using C#, what is the equivalent of functions Left, Right and Mid that we had in vb6? Thanks, Alan
11
by: Bruce A. Julseth | last post by:
I have: If (Microsoft.VisualBasic.Left(TextBox1.Text, 1) = "$") Then TextBox1.Text = Microsoft.VisualBasic.Right(TextBox1.Text, TextBox1.Text.Length - 1) End If Adding: Imports...
6
by: James Brown [MVP] | last post by:
Hi, I am having trouble understanding how the 'const' modifier affects the 'left-right' rule when deciphering c-declarations: const int *x; // x is a pointer to a 'const int' int const *x; ...
8
by: Chaitanya | last post by:
Hello, In my Application i want to know when user clicks both the "Left" and "Right" buttons of the Mouse. I am getting a number like this "3145728". But the MouseButtons Enum contains only Left,...
5
by: | last post by:
What are the equivalant to left, right, etc. in C#. How can I extract strings from a string without them? For instance, I have a string like so: ...
14
TheServant
by: TheServant | last post by:
Hi guys, I have done this before, but I can't figure out why it won't work. If any of you can see my problem, please let me know. Here are the relavent pieces of code. <!-- Main Content --> <div...
9
by: shapper | last post by:
Hello, I am used to SQL but I am starting to use LINQ. How can I create Left, Right and Inner joins in LINQ? How to distinguish the different joins? Here is a great SQL example:...
16
by: ImpactMan | last post by:
Need help to create an windows mobile application with a few buttons that when they are pressed/clicked they assign keys, like up, down, left, right. It is just like to create a "virtual d-pad",...
1
by: samz | last post by:
Hello, A. CONTEXT My album is generated by a batch script, but DOS cannot get the size of an image file. So, the a unique picture size is defined in the script....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.