473,769 Members | 2,099 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

? 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 2931
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.n u> wrote in message
news:WJ******** *************@n ewsc.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>boxtes t</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:opsewr5lk7 b8p244@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******** ***********@new s.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.bl oor.is.net.cabl e.rogers.com>,
a@a.com says...
"Christoph Paeper" <ch************ **@nurfuerspam. de> wrote in message
news:opsewr5lk7 b8p244@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

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

Similar topics

1
7539
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 top and bottom border. My HTML validates. It looks
0
2953
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> <STYLE type="text/css">
5
1929
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 been reading them and have tried some really basic stuff and am not having a very good time (lol). I'm feeling really stupid, to be honest. I was able to center an image on a page by mucking about with code primarily from the Cookbook. I only...
1
2675
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 right-boxes in Internet Explorer? 2. How can I put a 4px margin BETWEEN the right-boxes, "border-top: 4px" didn't do it and if I put in a "margin-top: 4px;" it shows the red underneath instead of the brown background graphic.
3
2515
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 work. Any ideas? Here's the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
16
3285
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 format: CSS: li {
2
2489
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 the bottom of the page. Please reply....
0
1914
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 "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/templatetest.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta...
7
3441
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. I read and re-read carefully the CSS 2.1 spec and I just can not see why. Related webpages: http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/MarginBottomChildNotRendered.html
0
9589
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10215
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10049
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8872
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7410
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6674
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
3964
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3564
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2815
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.