Prev: Last CFP - International Conference WWW/Internet 2010: 3 September 2010
From: King Albert II on 13 Aug 2010 10:58
Hi,

the simple page below displays just fine in FF/GC, but not in IE8.
The objective is for 1. #content to resize automagically depending on
screenestate/manual resizing and 2. all div.shadow should have a border.

thanks for any suggestions !

Ward

<html>

<head>

<title></title>
<style type="text/css">
* {
font-size:10px;
}
div.shadow {
border-style:solid;
border-width:1px;
}

#menus {
position:relative;
float:left;
height:95%;
}

#topmenu {
margin:0 15 0 0;
width:140px;

}

#bottommenu {
position:absolute;
margin:0 15 0 0;
width:140px;
bottom:0;
}

#content {
background:lime;
margin:0 15 15 200;
height:95%;
}

</style>
</head>

<body>

<div id="alles">
<div id="menus">
<div id="topmenu" class="shadow">TTTTT</div>
<div id="bottommenu" class="shadow">
<li class="hoofdmenuitem" ><a
href="/ward/menus/algemeen.txt">GROEPSNIVEAU</a></li>
<li class="hoofdmenuitem" ><a
href="/ward/menus/persoonlijk.txt" id="persoonlijk">INFO over Mij</a>
</li>
<li class="hoofdmenuitem" ><a href="/ward/menus/handel.txt">
BUSINESS1</a></li>
<li class="hoofdmenuitem" ><a href="/ward/menus/vloeren.txt">
BUSINESS2</a></li>
<li class="hoofdmenuitem" ><a href="/ward/menus/vrij.txt">
PERSONEELSDIENST</a></li>
<li class="hoofdmenuitem" ><a href="/ward/menus/logout.txt">
AF of AANLOGGEN</a></li>
</div>
</div>
<div id="content" class="shadow">
Content
</div>

</div>




</body>

</html>
From: Chris Beall on 13 Aug 2010 16:10
On Fri, 13 Aug 2010 10:58:27 -0400, King Albert II
<kingalbert2(a)forpresident.com> wrote:

> Hi,
>
> the simple page below
(snip)
> thanks for any suggestions !
>
> Ward
>
> <html>
(snip)

Ward,

Suggestions:

1. Provide a URL. Each of us will have a different environment than your
server.
2. Add a DOCTYPE to your page.

Chris Beall
From: Jeff Thies on 13 Aug 2010 17:19
On 8/13/2010 10:58 AM, King Albert II wrote:
> Hi,
>
> the simple page below displays just fine in FF/GC, but not in IE8.
> The objective is for 1. #content to resize automagically depending on
> screenestate/manual resizing and 2. all div.shadow should have a border.
>
> thanks for any suggestions !
>
> Ward
>
> <html>
>
> <head>
>
> <title></title>
> <style type="text/css">
> * {
> font-size:10px;
> }
> div.shadow {
> border-style:solid;
> border-width:1px;
> }
>
> #menus {
> position:relative;
> float:left;
> height:95%;
> }


^^^^^^^^^^^^^^^^^

Aside from what Chris said, which is very important, what is with the
float: left, you already have that as position: relative.

>
> #topmenu {
> margin:0 15 0 0;
> width:140px;
>
> }
>
> #bottommenu {
> position:absolute;
> margin:0 15 0 0;

Why the margin? You have it set for absolute.

> width:140px;
> bottom:0;
> }
>
> #content {
> background:lime;
> margin:0 15 15 200;
> height:95%;
> }

What is with the % height?

Regards,
Jeff
>
> </style>
> </head>
>
> <body>
>
> <div id="alles">
> <div id="menus">
> <div id="topmenu" class="shadow">TTTTT</div>
> <div id="bottommenu" class="shadow">
> <li class="hoofdmenuitem"><a
> href="/ward/menus/algemeen.txt">GROEPSNIVEAU</a></li>
> <li class="hoofdmenuitem"><a
> href="/ward/menus/persoonlijk.txt" id="persoonlijk">INFO over Mij</a>
> </li>
> <li class="hoofdmenuitem"><a href="/ward/menus/handel.txt">
> BUSINESS1</a></li>
> <li class="hoofdmenuitem"><a href="/ward/menus/vloeren.txt">
> BUSINESS2</a></li>
> <li class="hoofdmenuitem"><a href="/ward/menus/vrij.txt">
> PERSONEELSDIENST</a></li>
> <li class="hoofdmenuitem"><a href="/ward/menus/logout.txt">
> AF of AANLOGGEN</a></li>
> </div>
> </div>
> <div id="content" class="shadow">
> Content
> </div>
>
> </div>
>
>
>
>
> </body>
>
> </html>

From: dorayme on 13 Aug 2010 20:17
In article <i44cta$b5s$1(a)news.albasani.net>,
Jeff Thies <jeff_thies(a)att.net> wrote:

> On 8/13/2010 10:58 AM, King Albert II wrote:
> > Hi,
> >
> > the simple page below displays just fine in FF/GC, but not in IE8.

> > #menus {
> > position:relative;
> > float:left;
> > height:95%;
> > }
>
>
> ^^^^^^^^^^^^^^^^^
>
> Aside from what Chris said, which is very important, what is with the
> float: left, you already have that as position: relative.
>

The OP's idea might be to use the power of position: relative to
cause an absolutely positioned descendent to use the relatively
positioned element as reference axes instead of the default
viewport. He has a few things mixed up in his mark up (even
leaving out UL to house his LIs and other things... but let's not
get into that for now). Perhaps the OP only half understands the
following, and attention to the issue might help him.

See

<http://dorayme.netweaver.com.au/abs_rel_float1.html>

<http://dorayme.netweaver.com.au/abs_rel_float2.html>

Of course, the bottom margin in first URL is not very wise in the
context but *apart from this* (for example if the design called
for the list to be so positioned and the rest of the text outside
the list was margined out of the way, it *might* be something
useful for an author to do.

--
dorayme
 | 
Pages: 1
Prev: Last CFP - International Conference WWW/Internet 2010: 3 September 2010