Simple CSS Height % Question

M

]|[ Mar']['in ]|[

Supreme [H]ardness
Joined
Sep 20, 2002
Messages
4,663
So I have this in my header file

Code: 
#MenuBG {
	width:193px;
	height:100%;
	background-image:url('images/left.gif');
	background-repeat: repeat-y;
	top:176;	
	}

What I want is for this image to repeat downwards as long as the page happens to be. What it does though is repeat as long as my original screen is. (in my case around 1200px I guess). After that it stops.

I was looking at w3 schools and it said "height % Defines the height in % of the containing block"

Apparently the containing block is whatever the size of the window is? or what? What am I missing :)

edit: here's a link: http://www.hardguild.net
 
I fixed this by changing the body declaration as follows:
Code: 
        background: url('images/left.gif') black repeat-y;
Then remove the whole #MenuBG thing. It works for me (Firefox 1.0.4 on Linux).
 
unhappy_mage said:
I fixed this by changing the body declaration as follows:
Code: 
        background: url('images/left.gif') black repeat-y;
Then remove the whole #MenuBG thing. It works for me (Firefox 1.0.4 on Linux).
Click to expand...

it still looks exactly the same to me.

here's the code for the header/menu

Code: 
<div id="Header">
  <img src="images/HordeGRAPHIC.jpg" align="left" width="368" height="184">
  <img src="images/GuildLOGO.jpg" width="495" height="184" align="right" valign="top">
</div>

<div id="Banner"></div>
<div id="MenuBG"></div>

<div id="Menu">
  <img src="images/SideLOGO.gif" width="185" height="217" border="0" usemap="#Map">
    <map name="Map">
      <area shape="rect" coords="29,100,154,82" href="about.php" alt="">
      <area shape="rect" coords="29,105,154,134" href="roster/" alt="">
      <area shape="rect" coords="29,169,154,203" href="phpbb/index.php" alt="">
    </map>
</div>

edit: and in case there's any confusion as to what I'm talking about here is a picture. It looks this way in Firefox and IE

example.jpg
 
I tried to fix it but I'm not really sure what's going on with your page. Although probably not what you want to hear, I'd suggest redoing your page using tables. I checked your code and _everything_ was formatted using <div> tags. I do web design as a profession and typically save the _excessive_ use of <div> tags for DHTML & Javascript menus. Tables tend to be more obedient and are really easy to format using css. Also, don't forget to validate your code. W3 offers a fairly comprehensive checker:

http://validator.w3.org/

-=Rob W
 
temp.png

Looks like it worked to me. Rescaled to 50% for convenience.

edit: also tried on a windows 2003 machine (IE 6.0.3790.0) and it works.
 
RoBsTaMaCk said:
I do web design as a profession and typically save the _excessive_ use of <div> tags for DHTML & Javascript menus. Tables tend to be more obedient and are really easy to format using css. Also, don't forget to validate your code.

-=Rob W
Click to expand...
I can't believe you suggested to use tables in this forum. Waits for XHTML/CSS fan boys to come in here. :)

BTW, unless you didn't change the live version, the menu background doesn't scale to 100% for me on Mac Firefox 1.0
 
Step zero: fix the validation errors. These should all be pretty easy to take care of. The missing DOCTYPE, in particular, might be important in terms of how the browser tries to handle your document (quirks mode and all that fun stuff).
 
HorsePunchKid said:
Step zero: fix the validation errors. These should all be pretty easy to take care of. The missing DOCTYPE, in particular, might be important in terms of how the browser tries to handle your document (quirks mode and all that fun stuff).
Click to expand...

Hopefully this isn't complicated. And I guess while I'm at this. Any other cratriques (Code or otherwise). I'm kinda new at this.

edit: fixed a few of the problems. Just reading about the doctypes and trying to figure that one out.

edit2: I'm a bit lost with the doctypes...If I add
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> then the scroll/content part disappears.

unhappy_mage said:
Looks like it worked to me. Rescaled to 50% for convenience.

edit: also tried on a windows 2003 machine (IE 6.0.3790.0) and it works.
Click to expand...

ah yeah it works for me now too. I missunderstood what you were doing with that. Thank you :)
 
You must log in or register to reply here.
Back
Top