?
Solved

DIV background image -- fill entire browser window?

Posted on 2005-04-09
30
Medium Priority
?
705 Views
Last Modified: 2012-05-05
Is there a way to set a DIV background image to automatically fill the browser window top to bottom?
The URL for the page I am working with is http://joel.mmjcdes.net/index.xhtml (do not open in IE...only works with Firefox, Safari, etc.).
The background image is in the div "container".  This div should be as "tall" as the browser window so it always gives the appearance of a golden sidebar.  Right now I am "faking" it by forcing the div to be 768px. However, this is undesirable as it still forces scrollbars on shorter pages.  I have tried numerous things already, including setting the div height to 100% and setting maximum and minimum heights.  I'm not sure what else to try.
0
Comment
Question by:joelwnelson
  • 16
  • 13
30 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13746685
Put this in the head of the page:

<script type="text/javascript">
var HGT;
function set100()
{
   if (self.innerHeight) HGT = self.innerWidth;
   else
      if (document.documentElement && document.documentElement.clientHeight)
         HGT = document.documentElement.clientHeight;
      else
         if (document.body) HGT = document.body.clientHeight;
   document.getElementById('targetdiv').style.height=HGT+'px';
}
onload=set100;
</script>


Then just give the div and id:

<div id="targetdiv">


Cd&
0
 

Author Comment

by:joelwnelson
ID: 13746999
Besides changing "targetdiv" to "container" (as that is the name of the div) do I need to set any other variables?  Adding the JavaScript to the head now causes the browser to show an XML parsing error instead of the page.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13747055
Post th ecode or a linik to the page please.

Cd&
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:joelwnelson
ID: 13747309
http://joel.mmjcdes.net/index.xhtml (the original page we're working with)
http://joel.mmjcdes.net/index-text.xhtml (page with the javascript added)

The CSS is still forcing the height of the div to 768px so the page partially works for visitors.

Point value increased to 185.
0
 

Author Comment

by:joelwnelson
ID: 13747316
The correct test case link is http://joel.mmjcdes.net/index-test.xhtml (not index-text.xhtml).
0
 

Author Comment

by:joelwnelson
ID: 13747398
Here is a related thread: http://www.webmasterworld.com/forum91/3429.htm

The JavaScripts they have there are also causing the parsing error.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13747528
if you are generating with xsl then the script should be in a CDATA node.  If you are not generating with xsl, why are you using an xml tag that screws up IE and puts in in quirks mode; and why would you even consider using sometheing as defective as XHTML1.1.  It has zero support from M$ and only token support from Mozilla.  In its current form it will never have wide support, and is basically deadended because it fails in backward compatibility bigtime.

If you must follow the misguided trend of using the "in" doctype then use XHTML 1.0 it at least is almost stable.  If you want the one that does the best job under all conditions then use HTML 4.01 strict.

Cd&
0
 

Author Comment

by:joelwnelson
ID: 13748521
I have a separate page for IE users -- this one is actually just designed for the Gecko/KHTML-based browsers and my main reason for doing it is just to learn the code.  The XML tag is recommended by the W3C and in other browsers the tag triggers the XHTML+XML mode (or so I have heard...).  
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13748642
W3c recommends the xml tag for xml docuemnts.  That is not an xml docuemtn.  It is an html page.  Whether of not you get html+xml mode or not depends on the browser build and the parsing is not consistent cross-broser for html, and if quite buggie.  

A correct xml page has to have styles and scripting in cdata sections as neither is valid xml.  However the generator is supposed to see the typing ad generate the correct node structure.  If you are not generating server side,  then you have to hard code the cdata sections in the page and pray that the page does not get dropped into a browsert that does not know how to handle the markup.

You better to revert to xhtml1.0 which will recognize the typeing client side and not throw the parsing error.  Your page gives a good example why 1.1 will never fly.  There are millions of pages using compound conditionals in javascript.  A browser that cannot parse simple and common scripting is worthless, so it is not likely the browser manufacturers are ever going to support the standard.  For M$ it would mean a complete re-programming of the .net framework and make all .net apps obsolete.

An XHTML standard at this point makes a smuch sense a have television broadcast standards in 1901.  There is no wdly accepted xml standard so how can you have web standards based on an xml standard that is still a work in progress.

Cd&

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13748732
Like many developers who think you have to abandon HTML.  That is not he case unless you are moving to page generated as xml.  Perhaps thei from W#C might clarify it for you:

"The Extensible HyperText Markup Language (XHTML™) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents. XHTML is the successor of HTML, and a series of specifications has been developed for XHTML." (Quoted from W3C's "HyperText Markup Language (HTML) Home Page", http://www.w3.org/MarkUp/)

Cd&
0
 

Author Comment

by:joelwnelson
ID: 13748764
I added the CDATA comments but the javascript does not seem to be working as the container div background still doesn't to the height of the window.
0
 

Author Comment

by:joelwnelson
ID: 13748802
What about using an external javascript?  
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13748845
You can try it, but I siuspect the parser is still going to want to look at it.  t's worth a shot.

Cd&
0
 

Author Comment

by:joelwnelson
ID: 13748877
The parser does not examine the external javascript so that works and successfully parses.  However, the javascript doesn't seem to make a difference on the container div -- it does not expand to fill the window top to bottom.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13748933
OOps.  I just notice a mistake.  If you cut and pasted my code you probably have the same error:

if (self.innerHeight) HGT = self.innerWidth;

Should be:
if (self.innerHeight) HGT = self.innerheight;

And that is the dom reference that an XHTML document would use. :^(

Cd&
0
 
LVL 2

Expert Comment

by:craigofcapetown
ID: 13751363
*self.innerHeight
0
 

Author Comment

by:joelwnelson
ID: 13752566
I'll try the change this morning; will post back. I put in a temporary fix setting the body and container div height to 100% but it is not a good fix because the div is only as high as the browser window; it does not scroll with the page.
0
 

Author Comment

by:joelwnelson
ID: 13753930
It's still not working (at least with the Safari browser).  It doesn't seem to be the XHTML this time as other linked external javascripts work fine with the site.  I am wondering if my CSS code (http://joel.mmjcdes.net/blue.css) may be interfering.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13754434
I get an error on that link, just post the CSS.

Cd&
0
 

Author Comment

by:joelwnelson
ID: 13754878
html,body       { background-image: url(img_blue/background.jpg); margin: 0; padding: 0; height: 100% }

a  { color: #002449; font-size: 13px; font-family: Arial; font-weight: bold; text-decoration: none }
#setdisplay { text-indent: 3px }
#setdisplay1 { text-indent: 3px }
a.navlink   { color: #002449; font-size: 13px; font-family: Arial; font-weight: bold; text-decoration: none; text-indent: 3px }
a.display  { color: #002449; font-size: 9px; font-family: Arial; font-weight: bold; text-decoration: none }
.linkindent { text-indent: 12px }
A:Hover  {
      color : #002449;
      text-decoration : underline;
}
#valid_xhtml11 { width: 88px; height: 31px; border-width: 0 }
#header {  margin: 0 auto; background-image: url(img_blue/jhpbanner.jpg); position: absolute; top: 0; left: 0; width: 764px; height: 97px }
#goldrow {  margin: 0 auto; background-image: url(img_blue/GoldBanner.jpg); position: absolute; top: 97px; left: 0; width: 764px; height: 42px }
#navmenu   { font-size: 1pt; position: absolute; top: 139px; left: 0; width: 150px }
#main       { padding: 0 12px 12px 8px; position: absolute; top: 113px; left: 150px; width: 615px }
#container       { background-image: url(img_blue/mainbackground.jpg); margin: 0 auto; position: relative; top: 0; bottom: 0; width: 765px; height: 100%; min-height: 100%; max-height: 100% }
.divider { width: 150px; height: 6px }
.xlargeimpactheader  { color: #012349; font-size: x-large; font-family: Impact; vertical-align: top }
.largeimpactheader { color: #012349; font-size: large; font-family: Impact }
.medimpactheader { color: #012349; font-size: medium; font-family: Impact }
.table475 { width: 475px }
.table320 { width: 320px }
.table235 { width: 235px }
.smtabnoborder { width: 235px }
.goldtext { color: #806c59; font-size: 12px; font-family: Tahoma }
.goldtextsm { color: #806c59; font-size: 9px; font-family: Tahoma }
#pagefooter  { color: #806c59; font-size: 12px; font-family: Tahoma; text-align: center }
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13757303
An XHTML page will definitely not like this: A:Hover   selectors are case sensitive;  you need to look at your ID seeltors as well t make sure the selector and the actual id are the same case.  This I suspect will also get rejected.  The underscore is not a legal character in CSS selectors.  Most browsers will accept it any way but in XHTML mode the rules get followed pretty strictly.  I also notice that you are using mixed case on font names.  Those migth need to be lower case.

The rest looks like it should be okay, but i'm never sure about the intreraction of the CSS in an XHTML page for a given browser because of the number of bugs that pop up.

Cd&
0
 

Author Comment

by:joelwnelson
ID: 13757428
I'll look at the code and try removing the underscore (and correcting it on all pages referring to that element).  How would that affect the ability of the Javascript to set the div to fill the screen?  The main issue with the CSS is that I was wondering if the preexisting 100% height entries in the CSS were conflicting with the JavaScript (since it does not seem to work with this, even after fixing the if (self.innerHeight) HGT = self.innerheight;
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13757576
I can't believe I did that:

if (self.innerHeight) HGT = self.innerheight

Javascript is also case sensitive ane the lower case h has to be upper case:

if (self.innerHeight) HGT = self.innerHeight

>>>How would that affect the ability of the Javascript to set the div to fill the screen?

When a page is xml, the parser, the HTML interpreter,  the scriping engine, the CSS parser and the rendering engine all work off the DOM  nodeList the scripting engine is the only one still interpreting direct code, and if there are any errors in the DOM, the scripting engine will simple quit executing the instructions when it hit a reference it cannot resolve.  Sometimes you get an error and sometime the scripting just stops at the point wher there in an unresolveable reference.

I am not familar enough with Safari to know what all the bugs or cross-browser issues their are.  That is the whole point of broadly supported standards; you can look at code make comply to the standards and chance are very goos that you will not have a lot of cross-platform issues.  However that requires a consistent implementation of the standard. We have not had that with XHTML1 just as it was spotty early on for CSS1, I am hoping that XHTML2 which is stil i the draft stage, will resolve the technical issues so that XHTML will final get broad supoort.

Cd&
 
0
 

Author Comment

by:joelwnelson
ID: 13757816
Something still isn't quite right with the JavaScript as it makes no change on the "container" div.  I tried it on pages with doctype XHTML 1.1, XHTML 1.0 Transitional, and HTML 4.01 Transitional, and on the Safari and Firefox browsers.

The script as I am using it looks like this:
var HGT;
function set100()
{
   if (self.innerHeight) HGT = self.innerHeight;
   else
      if (document.documentElement && document.documentElement.clientHeight)
        HGT = document.documentElement.clientHeight;
      else
         if (document.body) HGT = document.body.clientHeight;
   document.getElementById('container').style.height=HGT+'px';
}
onload=set100;



(note that I removed the <script> and </script> as this is saved as external file resize.js and is not in the .xhtml or .html file. The script is referenced by the code "<script type="text/javascript" src="resize.js"></script>" in the head.)

As far as I know the XHTML 1.1 code is valid; it validates at W3C and opens in Safari, and Safari's XML parser is very strict in that it will not open the page at all unless the code is just so.

It appears the problem does still lie in either the CSS or JavaScript approach rather than the use of XHTML because the results are the same regardless of the doctype of the page.  (When I tried it in HTML 4.01 I did do a total conversion to HTML 4.01 so it wasn't just a HTML 4.01 doctype with XHTML code.)
0
 

Author Comment

by:joelwnelson
ID: 13757865
Increased point value to 225...
Some links to illustrate exactly where the problem currently lies:
Page 1: XHTML 1.1 page, renders fine in Firefox and Safari, content is less than screen height at 1024x768 -- http://joel.mmjcdes.net/index.xhtml

Page 2: XHTML 1.1 page, background div fills initially visible area but because there is more content than fits on a 1024x768 screen the area that requires scrolling to view does not have the background DIV -- http://joel.mmjcdes.net/contact.xhtml

Page 3: HTML 4.01 Transitional page, designed for MSIE visitors, uses some CSS but mainly relies on markup styles, no problems viewing, not validated code -- http://joel.mmjcdes.net/ie/contact.html

The problem seems to be caused by the DIVs and/or the CSS, as page #3 (which uses a table-based layout and minimal CSS) does not have the problem.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13758339
After looking at those I see the problem.   Communication.  You asked for the height of the window, what you really want is the height of the page:

var HGT;
function set100()
{
   HGT = Math.max(document.body.scrollHeight,document.body.offsetHeight);
   document.getElementById('targetdiv').style.height=HGT+'px';
}
onload=set100;

But as I  think about it what you actually need is the page with a minimum of the window height.

There is the page height code.  Be back in a few minutes with a consolidated script.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13758362
Okay, this should take care of both cases:


var HGT;
var MIN;
function set100()
{
   if (self.innerHeight)
   {
      MIN = self.innerHeight;
   }
   else
   {
      if (document.documentElement && document.documentElement.clientHeight)
      {
        MIN = document.documentElement.clientHeight;
      }
      else
      {
         if (document.body) MIN = document.body.clientHeight;
      }
    }
   HGT = Math.max(document.body.scrollHeight,document.body.offsetHeight);
   if (HGT<MIN)
   {  
      HGT=MIN;
   }
   document.getElementById('container').style.height=HGT+'px';
}
onload=set100;


Cd&
0
 

Author Comment

by:joelwnelson
ID: 13758415
Sorry about the communication. When I first posted I didn't fully know what I wanted either -- I understand the terms and how things work better now than when I started working with this site.  :-)
I'm still having some trouble with it -- please check these two pages and let me know what I am doing wrong:
(XHTML 1.1) http://joel.mmjcdes.net/contact.xhtml
(HTML 4.01) http://joel.mmjcdes.net/contact1.html
Looks like we're pretty close to the solution now.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 675 total points
ID: 13758665
That is simple you are trying to draw a paper page instead of layou a web page.  That table you have for IE 4 woks becaue tables are design for the 20th paper layout approach, that was the best we could do bak then.

All you've done with it is try to duplicate a table layout using CSS notation.

You are using postion for layout that is not what is is for. Position is for manageing dynamic layers and doing special effects.  As soon as you you it for layout you create holes because you have taken the positioned elements out of the norma flow and the browser has to leave holes, gaps, or you end up with overlays.

You also have hard coded absolute value for dimensions and font sizes.  The page is a glass bunker.  Even if you get it so it looks right with your setup on your computer it is going to break with preference changes resolution changes screen size changes.  you have all readd abandoned cross-browser support, because it won't work in IE.

A web page is 4 dimensional, not two.  position for layout management is don with margins, padding, and floats.  To  less extend text-indent, line-height and and the alignment porperties come into play.

it looks like you have put a lot of work into this, and I don't mean to offend you , but you have not mastered enough of the basic yet. i don't know what books you ahve been reading or where you have ben getting your education in CSS from, but yu missed a bunch of the basic.

On the positive side you have a good design, and all you need is to master a few additional tricks.  So start here:  http://www.w3schools.com/css/default.asp

Then look at a couple of my articles, that will soon be part of the EE site if they ever deliver the nex release: http://cd-articles.fateback.com/index.html

Then sit back and think about your design multi-dimensionally, and you will find that a single layout is all you need and then you will be eady to do magic with it.

As it stands now it is not going to work because it nees fluidity and you have built it on a rigid foundation and all you can do is experiment to find the right values to hard code everything for a single platform.

Cd&


Cd&
0
 

Author Comment

by:joelwnelson
ID: 13758689
OK, thanks for the help. I'll look at the links and work with the design and layout of the site over the next week or two.  Will award points for the tips and for your time.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses
Course of the Month15 days, 15 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question