MSIE screen height vs. full height

I have an absolutely-positioned div with a y-repeating background inside
a container div of variable height (but taller than the browser screen).
I need the child div to expand to fill the entire height of the container.

This currently works in Firefox with the Transitional DTD, but IE6
didn't tile at all. By adding "height:100%" to the container and to the
BODY tag, IE will then expand to the screenheight, not to the actual
container height. How can I get it to expand completely?
See the example below. (Linked because I didn't know if posting the
whole xhtml would do wonky things..)

http://www.happymagpie.com/heighttest.html

This is extremely frustrating because the exact opposite happens when I
use just a generic <html> header is used instead of XHTML opening.
( FF expands to screen width, whereas IE expands completely.)

Philip
(Reposted since the first seem to have vanished...)

Feb 20 '06 #1

Subscribe Post Reply

5114

Spartanicus

"." <A@COX.NET> wrote:

http://www.happymagpie.com/heighttest.html

In this case to get good help we need to know what you are actually
trying to do. The normally helpful minimized test case that you've
uploaded doesn't allow us to see this.

--
Spartanicus

Feb 20 '06 #2

kchayka

.. wrote:

I have an absolutely-positioned div...

http://www.happymagpie.com/heighttest.html

You seem to be using positioning without understanding what relative and
absolute really do. This is a disaster waiting to happen.

You would probably be better off finding a nice template that already
(mostly) does what you want, then adapt it for your needs.
<URL:http://css-discuss.incutio.com/?page=CssLayouts>

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

Feb 20 '06 #3

Sheesh. Everytime I try to send this, I have newsgroup problems..
Spartanicus wrote:

"." <A@COX.NET> wrote:
In this case to get good help we need to know what you are actually
trying to do. The normally helpful minimized test case that you've
uploaded doesn't allow us to see this.

Alright, here is a slightly updated URL with a better example:

http://happymagpie.com/testing/heighttest.html

I want the shadows on the side of the container div to extend the whole
length. FireFox will do it.

IE doesn't want to expand the shadow boxes (.box, .box2) unless both the
container div AND the Body tag are set to height:100% and then it
expands it only the height of the browser window, NOT the height of the
container.

Philip

Feb 21 '06 #4

Spartanicus

"." <A@COX.NET> wrote:

Alright, here is a slightly updated URL with a better example:

http://happymagpie.com/testing/heighttest.html

http://homepage.ntlworld.ie/spartanicus/philip.htm

--
Spartanicus

Feb 21 '06 #5

Spartanicus wrote:

"." <A@COX.NET> wrote:

Alright, here is a slightly updated URL with a better example:

http://happymagpie.com/testing/heighttest.html

http://homepage.ntlworld.ie/spartanicus/philip.htm

I see, just nesting the divs so the content controls the size in all of
them. I actually have a top and bottom shadow as well and thought that
having too many nested would be messy, but my way didn't turn out so
well. I thought I was being clever, but I'll just KISS.

I almost didn't catch the "container one" class definitions. Reads so
normal, until I actually looked at it.

You coded everything so strikingly different, I could probably ask a
hundred questions. Is there a reason you used padding instead of
defining the width of the shadows?

Thanks,
Philip

Feb 22 '06 #6

Spartanicus

"." <A@COX.NET> wrote:

Is there a reason you used padding instead of
defining the width of the shadows?

IIRC your example tried to paint the "borders" by using styled elements
without content, that causes difficulties like the height issue you
struggled with. By using wrapper elements around the content the width
and height automatically scales with the content. But in that situation
you can't define a width or height for these elements, so padding is
used to keep the content off the backgrounds.

Parts of the code may not be easy to understand due to CSS collapsing
margin behaviour http://www.w3.org/TR/CSS21/box.html#collapsing-margins

This behaviour is only seen in standard compliant browsers (e.g. KHTML
browsers, Opera, Mozilla and iCab). Comment out the "padding:1px 0 1px
20px;margin:-1px 0" code in my demo and view it in a standard compliant
browser to see it in action. The 1px top and bottom padding is used to
prevent the margins from collapsing (they are no longer adjacent), the
negative -1px margin is then used to undo the unwanted 1px shift.

--
Spartanicus

Feb 22 '06 #7

Similar topics

Open Screen Full Window

by: Larry R Harrison Jr | last post by:

I have pull-down menus in javascript and I have the code for opening a link in a new window. But I want it to open a full-sized window. I can't figure out the syntax. What I have so far: ...

Javascript

new window full screen

by: pow67 | last post by:

Is there a javascript statement which can be incorporated in a hyperlink which will open a new page that fills the screen while leaving the page with the link open? Thanks in advance. CW

Javascript

Real Full Screen of the VS IDE

by: Tony Liu | last post by:

Hi, when switched to the full screen mode in VS.NET IDE, is there any way to hide the main menu bar? Thanks Tony

C# / C Sharp

full screen?

by: iwdu15 | last post by:

hi, is there anyway i can make my windows form to be full screen? thanks

Visual Basic .NET

MSIE screen height vs. full height

by: test | last post by:

I have an absolutely-positioned div with a y-repeating background inside a container div of variable height (but taller than the browser screen). I need the child div to expand to fill the entire...

HTML / CSS

Missing JS file errors with MSIE . Help !!

by: pamelafluente | last post by:

Hi Guys, I am trying to include my little script in my html report. I have done an external JS file which contains it. If you remember, you have helped me to detect if the asp page was present...

Javascript

Screen resolution

by: Steve Wright | last post by:

Hi I'm developing a webpage that needs to include a different stylesheet depending on the screen resolution. I know that I could read the resolution in javascript and then do some sort of...

PHP

window is not getting full screen

by: dmjpro | last post by:

I am using this JavaScript code to open a window in a full screen mode .... var styles =...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

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...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

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...

Computer Hardware

What is ONU?

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,...

General

Changing the language in Windows 10

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...

Windows Server

Problem With Comparison Operator <=> in G++

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,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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...

General