Hi,
I want to place a div centered of another div in IE. I get this to work
in Mozilla, but not in IE.
The code i use for mozilla is the following :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
}
#banner {
position : absolute;
margin-left:auto;
margin-right:auto;
left: 0px;
right: 0px;
width : 150px;
height:60px;
bottom : 0px;
}
</style>
</head>
<body>
<div id="content">
<div id="banner">Con tent</div>
</div>
</body>
</html>
The code i use for IE is this :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
text-align:center;
}
#banner {
text-align:left;
position:absolu te;
width : 150px;
height:60px;
}
</style>
</head>
<body>
<div id="content">
<div id="banner">Con tent</div>
</div>
</body>
</html>
The problem is that banner div starts in the middle of the page. The
most left position is the center of the page. But i want it to be
centered in the div. If I leave out position:absolu te it gets centered
but it's placed on top of the content div
Anyone got an idea how to solve this ?
--
DaWoE 7  10107 
DaWoE wrote: Hi,
I want to place a div centered of another div in IE. I get
this to work in Mozilla, but not in IE.
The code i use for mozilla is the following :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
}
#banner {
position : absolute;
margin-left:auto;
margin-right:auto;
left: 0px;
right: 0px;
width : 150px;
height:60px;
bottom : 0px;
}
</style>
</head>
<body>
<div id="content">
<div id="banner">Con tent</div>
</div>
</body>
</html>
The code i use for IE is this :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
text-align:center;
}
#banner {
text-align:left;
position:absolu te;
width : 150px;
height:60px;
}
</style>
</head>
<body>
<div id="content">
<div id="banner">Con tent</div>
</div>
</body>
</html>
The problem is that banner div starts in the middle of the
page. The most left position is the center of the page. But
i want it to be centered in the div. If I leave out
position:absolu te it gets centered but it's placed on top
of the content div
Anyone got an idea how to solve this ?
Get rid of the position:absolu te on the #content too. It puts
elements out of their normal order in the document.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Els wrote: DaWoE wrote:
Hi,
I want to place a div centered of another div in IE. I get
this to work in Mozilla, but not in IE.
The code i use for mozilla is the following :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
}
#banner {
position : absolute;
margin-left:auto;
margin-right:auto;
left: 0px;
right: 0px;
width : 150px;
height:60px;
bottom : 0px;
}
</style>
</head>
<body>
<div id="content">
<div id="banner">Con tent</div>
</div>
</body>
</html>
The code i use for IE is this :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
text-align:center;
}
#banner {
text-align:left;
position:absolu te;
width : 150px;
height:60px;
}
</style>
</head>
<body>
<div id="content">
<div id="banner">Con tent</div>
</div>
</body>
</html>
The problem is that banner div starts in the middle of the
page. The most left position is the center of the page. But
i want it to be centered in the div. If I leave out
position:abso lute it gets centered but it's placed on top
of the content div
Anyone got an idea how to solve this ?
Get rid of the position:absolu te on the #content too. It puts
elements out of their normal order in the document.
It messes up my layout if I leave it out.
--
DaWoE
DaWoE wrote: Els wrote:
DaWoE wrote:
Hi,
I want to place a div centered of another div in IE. I get
this to work in Mozilla, but not in IE.
The code i use for mozilla is the following :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
}
#banner {
position : absolute;
margin-left:auto;
margin-right:auto;
left: 0px;
right: 0px;
width : 150px;
height:60px;
bottom : 0px;
}
</style>
</head>
<body>
<div id="content">
<div id="banner">Con tent</div>
</div>
</body>
</html>
The code i use for IE is this :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
text-align:center;
}
#banner {
text-align:left;
position:absolu te;
width : 150px;
height:60px;
}
</style>
</head>
<body>
<div id="content">
<div id="banner">Con tent</div>
</div>
</body>
</html>
The problem is that banner div starts in the middle of the
page. The most left position is the center of the page.
But i want it to be centered in the div. If I leave out
position:abs olute it gets centered but it's placed on top
of the content div
Anyone got an idea how to solve this ?
Get rid of the position:absolu te on the #content too. It
puts elements out of their normal order in the document.
It messes up my layout if I leave it out.
What layout?
I can only see
<body>
<div id="content">
<div id="banner">Con tent</div>
</div>
</body>
I am quite sure that in the end, it's really the
position:absolu te of your content that messes up the layout
the most.
Besides, it doesn't work in all browsers to use a
position:absolu te with both top, left, bottom and right
values.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
On 15 Jul 2004 10:12:46 GMT Els <el*********@ti scali.nl> broke off
from drinking a cup of tea at LocusMeus.com to write: I am quite sure that in the end, it's really the
position:absol ute of your content that messes up the layout
the most.
Ar ha! Found you! hiding in one of these two groups. You really don't
like absolute positioning do you, Els?
I cant say I'm a great fan, it does seem to go wrong a lot!
Which leads me to the question, can complex layouts be achieved
without tables (spit) but just with relative CSS elements?
Matt
--
If your encyclopaedia doesn't list "widget glass", you're reading the wrong encyclopaedia.
The Probert Encyclopaedia. Its not the same. http://www.probertencyclopaedia.com
Matt Probert wrote: On 15 Jul 2004 10:12:46 GMT Els <el*********@ti scali.nl>
broke off
from drinking a cup of tea at LocusMeus.com to write:
I am quite sure that in the end, it's really the
position:abso lute of your content that messes up the layout
the most.
Ar ha! Found you! hiding in one of these two groups.
Which two groups? I read eh.. let's see...11 groups about
webdesign and html and stuff.
You
really don't like absolute positioning do you, Els?
I have no problem with it. My menu uses it too. It's just a
bit difficult to use the right way if you're just beginning
;-)
And in the case of the OP, setting position:absolu te to the
container of the content, is not a good idea. The box won't
respond to its contents. Easy to see how that would be a
problem if one would get more contents or a larger font-size
or something.
I cant say I'm a great fan, it does seem to go wrong a lot!
Only if you use it for the wrong purpose.
Which leads me to the question, can complex layouts be
achieved without tables (spit) but just with relative CSS
elements?
Yes. And most of the time you don't even need
position:relati ve either. Just floats, but not too many. You
don't want to make IE hide your stuff when you're not looking
;-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Chumbawamba - Homophobia
On 15 Jul 2004 13:07:11 GMT Els <el*********@ti scali.nl> broke off
from drinking a cup of tea at LocusMeus.com to write: I have no problem with it. My menu uses it too. It's just a
bit difficult to use the right way if you're just beginning
;-)
Oh miaooow!
That was uncalled for, Els!
I think you're mistaking me for some one else.
Matt
--
If your encyclopaedia doesn't list "widget glass", you're reading the wrong encyclopaedia.
The Probert Encyclopaedia. Its not the same. http://www.probertencyclopaedia.com
Matt Probert wrote: On 15 Jul 2004 13:07:11 GMT Els <el*********@ti scali.nl>
broke off from drinking a cup of tea at LocusMeus.com to
write:
I have no problem with it. My menu uses it too. It's just a
bit difficult to use the right way if you're just beginning
;-)
Oh miaooow!
That was uncalled for, Els!
I think you're mistaking me for some one else.
Not at all Matt, I wasn't referring to you, I just explained why
I advised the OP not to use it :-)
Somehow you must have applied an old saying about a fitting shoe
or something ;-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: System of a Down - Aerials This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Nige |
last post by:
I've just given one of my sites (www.wealdbroadband.co.uk) an overhaul.
Anyone know if there is a way of fixing text at a certain relative
position down a page? I'd like the "(c) 2003 ..." notice to appear at
the same place as you go through the pages, but it varies if you alter
the window width and cause a line to wrap/unwrap.
--
Nige
|
by: Falc2199 |
last post by:
Hi all,
I am using the "Poistion" attribute to correctly align a column
of images that I have on a table. The code looks like so....
<TD valign="top" class="listinglight" align="left">
<A href="somewhere.html" style="position: absolute; left: 25px;">
<IMG src="CopyButton.gif" border="0" /></A>
<A href="anywhere.html" style="position:...
|
by: Haines Brown |
last post by:
I want a centered body, 680px wide, having a red bottom margin. The
following works well in galeon, but not in IE5, where the bottom
margin steals the full width of the viewpoint. That is, the red line
stretches from one side of the screen to the other and is not 680
pixels long. Why isn't the bottom margin 680 pixels?
body {
...
width:...
|
by: Terry |
last post by:
Trying my hand at table-less design. Looking for an XHTML 1.0 strict,
CSS2 compliant solution. Here's the result I'm looking for:
Div I: Some header text
DIV II: Some text and a form which should be vertically centered
Div III: Rest of content
DIV II is the one I cannot resolve. It should span the whole page
width, no matter the size of...
|
by: Markus Ernst |
last post by:
Hello
Reading the follwing document:
http://www.w3.org/TR/WD-positioning-970131#In-flow
it seems very clear that position:relative should be relative to the parent
element. So in the following test case element1 and element2 should be
placed side by side inside a centered white container element:
http://www.markusernst.ch/test.htm
| | |
by: Edward |
last post by:
I used to do this all the time in HTML-table layouting. How do I do
this in CSS?
--------------------------------------------------
<table width="400px">
<tr>
<td bgcolor="beige">one line of text</td>
</tr>
<tr>
<td bgcolor="#eeeeee" align="center">this is another line of
text</td>
|
by: john |
last post by:
Hi to All,
I am new to html authoring, so sorry if my terminology is not correct or
exact.
I would like to position a footer div to the bottom of the browser window.
As I research in the web shows this could be done a containing element with
"min-height: 100%;" and an absolute positioned element (div) inside, aligned
to bottom...
|
by: moondaddy |
last post by:
Below is some xaml that is a mockup of a control I'm building. It's a shape
that will be used in a diagramming tool. The red, blue and green rectangles
simulate connectors on the side of the shape and will have connection lines
attached to them. These connectors will be dynamically added and removed at
runtime, and at all times, the group...
|
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...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
|
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. ...
| | |
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...
|
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
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...
|
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...
|
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...
|
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...
| |
