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 Reply

5116

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

4372

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

12278

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

5594

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

11349

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

436

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

2180

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

3888

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

1851

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

7175

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

7553

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

7120

The easy way to turn off automatic updates for Windows 10/11

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

Windows Server

7542

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

5697

AI Job Threat for Devs

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

Career Advice

4754

Couldn’t get equations in html when convert word .docx file to html file in C#.

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

C# / C Sharp

3235

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

809

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

466

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

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

General