473,396 Members | 1,995 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,396 software developers and data experts.

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

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
Jul 20 '05 #1
11 2909
Alec S. wrote:

<snip>
Is it just IE or am I doing something wrong?
Its just IE. It can't cope with setting the size of an element based on the
positioning of two opposite edges.
If it's IE, is there a workaround?


JavaScript perhaps.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 20 '05 #2
*Alec S.* skrev 2004-09-25 01:17:
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?


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

--
/Arne
Jul 20 '05 #3
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" <ar**@luras.nu> wrote in message
news:WJ*********************@newsc.telia.net...

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

--
/Arne

Jul 20 '05 #4
*Alec S.* skrev 2004-09-25 18:46:
But setting the width and height explicitly overrides the width and
height caused by setting the left+right and top+bottom.


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.
Jul 20 '05 #5
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

Jul 20 '05 #6
Alec S. wrote:
Doesn't Microsoft know that IE has some bugs?
They know
Did anyone bother telling them?
People do
MS puts out IE patches every month, ^ security
so why don't they fix these and put
out a patch to deal with these CSS bugs once and for all?!


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
Jul 20 '05 #7
David Dorward <do*****@yahoo.com>:

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.


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
Jul 20 '05 #8
"Christoph Paeper" <ch**************@nurfuerspam.de> wrote in message
news:opsewr5lk7b8p244@crissov...> David Dorward > >
Well, they could have ported Tasman (Mac/IE5 rendering engine).
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" <do*****@yahoo.com> wrote in message
news:cj*******************@news.demon.co.uk... In the meantime Firefox has achieved one million downloads over the course
of about five days ... for a _preview_ release.


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

Jul 20 '05 #9
In article <KV*****************@news04.bloor.is.net.cable.rog ers.com>,
a@a.com says...
"Christoph Paeper" <ch**************@nurfuerspam.de> wrote in message
news:opsewr5lk7b8p244@crissov...> David Dorward > >
Well, they could have ported Tasman (Mac/IE5 rendering engine).


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.


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>
Jul 20 '05 #10
Alec S. wrote:
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.


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

Jul 20 '05 #11
Toby Inkster wrote:
Alec S. wrote:
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.


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


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.
Jul 20 '05 #12

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

Similar topics

1
by: Trent L | last post by:
Hello, I'm having a problem where a style for a <a> tag isn't working in IE: border : 1px solid red; If you use my code below, you'll see what I mean. In IE6 on WinXP, I'm not seeing a red...
0
by: | last post by:
New to HTML here. I am trying to put a border after the headings. I got it to work but was wondering if there was an easier more intuitive way of doing this. Code is below. <html> <body> ...
5
by: Richard Shewmaker | last post by:
Hi. I've been using CSS for basic stuff, mostly concerning fonts. I want to get going with using CSS fully. Two days ago I purchased O'Reilly's "Cascading Style Sheets" and "CSS Cookbook." I've...
1
by: Edward | last post by:
I created a simple CSS layout (code and example below) for bloggin/writing but ran into five issues that I need help with: 1. How do I get rid of the right-margin red line on the last three...
3
by: Paul | last post by:
I want the <div id="navigation"column to be the same color all the way to the bottom. The "background-image: url(bg_menu_tile.gif);" was a try to force it with a long 1-pixel graphic - didn't...
16
by: FuzzyLogik | last post by:
By width, I don't mean weight. I have a row of <li>'s, with a bottom-border. I want the bottom-border to only go 90% of the <li> (centered) Is there any way to do this? I have it in this...
2
by: vinit_mahajan99 | last post by:
Hello all, I want to align the images and controls at the bottom of a master page or at the right side. I tried to do it with the table but I was not successful. The image should be seen at...
0
by: sannymak | last post by:
Hello All, I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution: HTML CODE: <!DOCTYPE html PUBLIC...
7
by: GTalbot | last post by:
Hello fellow authoring.stylesheets colleagues, Can someone please explain why the bottom margin of the last inflow block-level child in an overflowed parent should not have its margin reachable....
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

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.