Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

position:absolute and IE6

Status
Not open for further replies.
JohnandSwifty

JohnandSwifty

Technical User
May 31, 2005
192
GB
HELP!- I need my app to fit the window in the same way outlook's online access does (but with divs not frames).

I built the whole thing using position absolute which works great in IE7, firefox etc, but not IE6 (and possibly others).

Can anyone tell me whats wrong with below?...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fit to page TEST</title>
<style type="text/css">
body {
background:#000000;
padding:0px;
margin:0px;
}

/* Level 01 Container **************/

#lev01Cont {
background:#99CCCC;
position:absolute;
top:5px;
bottom:5px;
left:5px;
right:5px;
}

/* Level 02 Container **************/

#lev02Cont {
background:#FFFFFF;
position:absolute;
top:10px;
bottom:10px;
left:10px;
right:10px;
}
</style>
</head>
<body>

<div id="lev01Cont">
<div id="lev02Cont">
</div>
</div>

</body>
</html>
 
Sort by date Sort by votes
Can anyone tell me whats wrong with below?...
Click to expand...

Sure... you're specifying both top & bottom, and both left & right positions... You should only specify one of each pair (i.e either top OR bottom, and left OR right).

You would then need to specify a width and/or height. Or not use absolute positioning...

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
OK, but i want to fit to page so i need to be using width and height 100% - this causes the content to go off the page as soon as you start adding margins or padding...

Is there a solid, always used way of getting content to fill the screen (allowing me to then specify overflow:auto to get scrolling divs inside the applications 'borders')?
 
Upvote 0 Downvote
Without using position:absolute, this is an example that will fill the screen in IE6 with padding and borders. In FF, a vertical scrollbar is added because of the padding, which technically is correct. Padding, by definition, should "pad" the container that the padding is on. It should NOT resize the container, like it does in IE. Here's some code though, it does what you want it to do in IE6.

Code: 
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<style type="text/css">
* {
   margin:0px;
   padding:0px;
}

div#lunchMeat {
   height:100%;
   background-color:#ff0000;
   border:2px solid #000000;
   padding:10px;
}

html, body {
   height:100%;
}

</style>
</head>
<body>
<div id="lunchMeat">
Content
</div>
</body>
</html>


[monkey][snake] <.
 
Upvote 0 Downvote
Hi Monksnake,

Thanks for your input - it doenst really get me anywhere though... that only works in IE6 as IE7 will also display scrolls.

As for the comments regarding the functionality of padding etc - this is why i went to absolute positioning in the first place.

Here is a link to a mash up of what i want to do (works in IE7 & FF). Any ideas?

 
Upvote 0 Downvote
I don't think it's possible to do what you want to do without IE hacks, (I'm thinking conditional comment for IE6 and below).

Since the code I showed you does work in IE6 and your code works in IE7 and FF, seems like you have enough info to create a working page in all 3 browsers.

[monkey][snake] <.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
420
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
115
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
320
PeDa
PeDa
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
63
jason.lex
jason.lex
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
85
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top