? Specifying TOP, BOTTOM, LEFT, and RIGHT to set size

#1 July 21st, 2005, 12:52 AM

Hi,

Is it possible to create a colored box like this? :

<html>
<head>
<style type="text/css">
#bbb {
background: #f00;
position: absolute;
top: 10px;
left: 50px;
bottom: 100px;
right: 300px
}
</style>
</head>

<body>
<div id="bbb"></div>
</body>
</html>

I tried it and it works in FireFox and Opera (although the box is wider
and slightly taller in FireFox than in Opera). However it does not work in
IE (I know, I know). In fact in IE it does not show up AT ALL unless I put
something in the DIV (for example a <p>a</p> - <p></p> does not work). Even
then, it is only as tall and wide as the element I put in it. I've seen
lots of complaints and work around for fixed positioning in IE but I'm using
absolute. Also, I'm specifying all 4 dimensions and the only examples I've
seen have used just two.

Is it just IE or am I doing something wrong? If it's IE, is there a
workaround? If not, how can I fix it?

Thanks.

--

--
Alec S.
alec <@> synetech <.> cjb <.> net

#2 July 21st, 2005, 12:52 AM

Alec S. wrote:

<snip>[color=blue]
> Is it just IE or am I doing something wrong?[/color]

Its just IE. It can't cope with setting the size of an element based on the
positioning of two opposite edges.
[color=blue]
> If it's IE, is there a workaround?[/color]

JavaScript perhaps.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

#3 July 21st, 2005, 12:52 AM

*Alec S.* skrev 2004-09-25 01:17:
[color=blue]
> Hi,
>
> Is it possible to create a colored box like this? :
>
> <html>
> <head>
> <style type="text/css">
> #bbb {
> background: #f00;
> position: absolute;
> top: 10px;
> left: 50px;
> bottom: 100px;
> right: 300px
> }
> </style>
> </head>
>
> <body>
> <div id="bbb"></div>
> </body>
> </html>
>
>
> I tried it and it works in FireFox and Opera (although the box is wider
> and slightly taller in FireFox than in Opera). However it does not work in
> IE (I know, I know). In fact in IE it does not show up AT ALL unless I put
> something in the DIV (for example a <p>a</p> - <p></p> does not work). Even
> then, it is only as tall and wide as the element I put in it. I've seen
> lots of complaints and work around for fixed positioning in IE but I'm using
> absolute. Also, I'm specifying all 4 dimensions and the only examples I've
> seen have used just two.
>
> Is it just IE or am I doing something wrong? If it's IE, is there a
> workaround? If not, how can I fix it?
>
>[/color]

You must set a width and hight value to the box before IE can show it.

--
/Arne

#4 July 21st, 2005, 12:52 AM

But setting the width and height explicitly overrides the width and
height caused by setting the left+right and top+bottom.

--
Alec S.
alec <@> synetech <.> cjb <.> net

"Arne" <arne@luras.nu> wrote in message
news:WJ95d.104157$dP1.379231@newsc.telia.net...[color=blue]
>
> You must set a width and hight value to the box before IE can show it.
>
> --
> /Arne[/color]

#5 July 21st, 2005, 12:52 AM

*Alec S.* skrev 2004-09-25 18:46:
[color=blue]
> But setting the width and height explicitly overrides the width and
> height caused by setting the left+right and top+bottom.
>[/color]

Please, don't top post.

Well, if you don't see any box at all without the width and height it
can't override anything :-)

The left, right, top and bottom is for setting the box in a certain
position on the screen (absolute in this case), not for the size of the
box. The browsers (IE excluded) just fill upp the screen with the box
color in the area that the left, right, top and bottom settings have
"left over".

Have you tried this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#bbb {
background: #f00;
position: absolute;
width:30%;
height:30%;
top: 300px;
left: 550px;
bottom: 100px;
right: 300px
}
</style>
<title>boxtest</title>
</head>
<body>
<div id="bbb"></div>
</body>
</html>

--
/Arne

Got a website? Get a StatCounter! http://www.statcounter.com/
Free, invisible, configurable and real-time detailed webstats.

#6 July 21st, 2005, 12:52 AM

AHA! http://www.fu2k.org/alex/css/frames/ I don't like doing it this
way but IE is prevalent so there's really no choice. Doesn't Microsoft know
that IE has some bugs? Did anyone bother telling them? MS puts out IE
patches every month, so why don't they fix these and put out a patch to deal
with these CSS bugs once and for all?!

--
Alec S.
alec <@> synetech <.> cjb <.> net

#7 July 21st, 2005, 12:52 AM

Alec S. wrote:
[color=blue]
> Doesn't Microsoft know that IE has some bugs?[/color]

They know
[color=blue]
> Did anyone bother telling them?[/color]

People do
[color=blue]
> MS puts out IE patches every month,[/color]
^ security
[color=blue]
> so why don't they fix these and put
> out a patch to deal with these CSS bugs once and for all?![/color]

They aren't saying, but the three main theories are:

1: Trident (the Win32/IE rendering engine) is an old codebase that is hard
to maintain and that getting proper support for CSS 2 would require a
fairly large rewrite of large portions of it.

2: Microsoft are waiting for Longhorn so they can use it as a selling point.

3: IE is so prevalent that they just don't care.

In the meantime Firefox has achieved one million downloads over the course
of about five days ... for a _preview_ release.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

#8 July 21st, 2005, 12:52 AM

David Dorward <dorward@yahoo.com>:[color=blue]
>
> 1: Trident (the Win32/IE rendering engine) is an old codebase that is
> hard to maintain and that getting proper support for CSS 2 would require
> a
> fairly large rewrite of large portions of it.[/color]

Well, they could have ported Tasman (Mac/IE5 rendering engine).

--
"Some people say I am a terrible person,
I'm not, I have the heart of a young boy,
in a jar, on my desk."
Stephen King

#9 July 21st, 2005, 12:52 AM

"Christoph Paeper" <christoph.paeper@nurfuerspam.de> wrote in message
news:opsewr5lk7b8p244@crissov...> David Dorward > >[color=blue]
> Well, they could have ported Tasman (Mac/IE5 rendering engine).[/color]

But isn't the Mac version of IE worse? I've seen a lot more nags and
warnings about stuff not being supported on MacIE than WinIE.

"David Dorward" <dorward@yahoo.com> wrote in message
news:cj4rdt$1mq$1$8300dec7@news.demon.co.uk...[color=blue]
> In the meantime Firefox has achieved one million downloads over the course
> of about five days ... for a _preview_ release.[/color]

FireFox does seem to render pages pretty well. It's not perfect, it has
it's little bugs (that can be maddening) but for an early app it works quite
well.

--
Alec S.
alec <@> synetech <.> cjb <.> net

#10 July 21st, 2005, 12:52 AM

In article <KVs5d.4923$Lgn.2370@news04.bloor.is.net.cable.rog ers.com>,
a@a.com says...[color=blue]
> "Christoph Paeper" <christoph.paeper@nurfuerspam.de> wrote in message
> news:opsewr5lk7b8p244@crissov...> David Dorward > >[color=green]
> > Well, they could have ported Tasman (Mac/IE5 rendering engine).[/color]
>
> But isn't the Mac version of IE worse? I've seen a lot more nags and
> warnings about stuff not being supported on MacIE than WinIE.[/color]

There is some things in CSS2 that only MacIE ever took seriously. Like
that float needs to have width. The reason you see more warnings about
MacIE, is because people assume you don't know limitations of MacIE. It
is better engine that IE6, despite it is even older than that.

Of course MacIe has bugs too, but not nearly as meny as WinIE.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

#11 July 21st, 2005, 12:52 AM

Alec S. wrote:[color=blue]
> But isn't the Mac version of IE worse? I've seen a lot more nags and
> warnings about stuff not being supported on MacIE than WinIE.[/color]

IE 5.x for Mac is slightly better than IE 6.x for Windows and
significantly better than IE 5.x for Windows.

Warnings about stuff not working in Mac IE are probably more due to the
reason that people can't be bothered to test in it. It's a bit of a
dinosaur now, used by very few people, and requires expensive proprietary
hardware to run it.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Now Playing ~ ./crash_test_dummies_-_mmm_mmm_mmm_mmm.ogg

#12 July 21st, 2005, 12:53 AM

Toby Inkster wrote:[color=blue]
> Alec S. wrote:[color=green]
>> But isn't the Mac version of IE worse? I've seen a lot more nags and
>> warnings about stuff not being supported on MacIE than WinIE.[/color]
>
> IE 5.x for Mac is slightly better than IE 6.x for Windows and
> significantly better than IE 5.x for Windows.[/color]

I'm not sure I agree with this. My experience with MacIE 5 is that it
has excellent CSS1 support (which does make it better than WinIE5), but
is only OK beyond that. A number of CSS2 properties are only partially
supported or quirky, to put it politely.

overflow:hidden, for example, can cause whole sections of a page to
disappear altogether. :( Positioning and floats have issues, too.

I found that working around MacIE 5 weirdness can be just as frustrating
as working around WinIE 6 weirdness.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

What is Bytes?

Popular Articles