Thu, 2005-01-27 11:13
Ok, for starts, I need to cool off. Otherwise one of these LCDs infront of me is getting a fist all the way thought it, and I mean all the way!
So.......wheeeewww, alright, now I am cooled off.
My site that I am working on, http://ackoo.com. Now, I have created a template for the mambo CMS here. Please, no comments on how you hate CMS's. Now that the template is basically complete, I have hit a brick wall with the DIV for height of 100%. I have tried it all, I truly have. Here is my html code...
<body>
<div frame="void" class="outer-main" id="outer-main">
<div frame="void" class="inner-main" id="inner-main">
<div id="container2">
<?php mosLoadModules ( 'user3' ); ?>
</div>
<?php mosLoadModules ( 'banner' ); ?>
<div id="container1">
<div id="pathway"> <img src="images/M_images/arrow.png">
<?php mosPathWay(); ?>
</div>
<form action="index.php" method="post">
<div id="datesearch"> <?php echo mosCurrentDate(); ?>
<input class="inputbox" type="text" id="searchword" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>" onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
<input type="hidden" name="option" value="search" />
</div>
</form>
</div>
<div id="container3">
<?php mosLoadModules ( 'top' ); ?>
<br>
<?php mosMainBody(); ?>
</div>
<br>
<?php echo $mainmenu_content ?>
<?php mosLoadModules ( 'footer' ); ?>
</div>
</div>
</body>
Ok, and now for the CSS code...
div#inner-main {
position: relative;
height: 100%;
min-height: 100%;
width: 784px;
background-color: #FFFFFF;
left: 0px;
top: 0px;
}
div#outer-main {
position: relative;
left: 0px;
top: 0px;
height: 100%;
min-height: 100%;
width: 790px;
background-image: url(../images/right.gif);
background-repeat: repeat-y;
background-position: right;
}
div#container1 {
width: 100%;
height: auto;
top: 0px;
}
div#container2 {
position: relative;
height: 82px;
width: 780px;
background-image: url(../images/header_menu.gif);
background-repeat: no-repeat;
left: 0px;
top: 10px;
}
div#container3 {
position: relative;
width: 766px;
padding-left: 16px;
top: 10px;
padding-top: 10px;
}
body {
height: 100%;
max-height: 100%;
min-height: 100%;
padding: 0;
overflow: hidden;
margin: 0;
left: 0px;
top: 0px;
background-image: url(../images/bg.gif);
min-height: 100%;
}
Now, I will go ahead and lay the disclaimer. I know that this code may not be the best for what I got. I have been mucking around with it til I am sick in the face. I have tried the first two DIVs, the inner and outer as absolute and relative. I have tried with the...
html {
height: 100%;
min-height: 100%;
}
that doesn't work at all. As a matter of fact that makes things worse. The problem is that I can not get the site to size to 100%, regardless of what I try. I can get it to go to 100% of the page text. Then I can get it to go 100% of the page, but not both. In other words. I can get it to look right if you just resize the browser. It will be 100% and everything will appear perfect. However, as soon as you use the scroll bar, the 100% is not 100% anymore. Its gone! I know that this may appear a little confusing, so have a look at this link.
http://ackoo.com/content/view/11/43/
- Notice that everything looks fine on this link.
Now resize the browser height. Everything looks great.
Now scroll down with the scroller.
Notice how the inner and outter DIVs do not follow with even 100% of the text that resides inside of them.
Now, check out the homepage for *beep*s, it looks perfect.
The problem lies in text with the scroll bar! B/c the text is pulled from a database, could that possibly have anything to do with it? This is the most frustrating thing on the planet. I really don't want to have to go back to tables layouts, but, as it appears at the moment I am going to have to add at least one to the layout. Other than the tables that mambo already injects into my template, grrr...., can't wait til the next xhtml compliant and css release!
[/]
Thu, 2005-01-27 15:20
#1
The impossible <DIV> height: 100%, Want a Challenge?
have you seen this?
Thu, 2005-01-27 17:34
#2
The impossible <DIV> height: 100%, Want a Challenge?
Check http://www.quirksmode.org/css/100percheight.html
/* commented backslash hack v2 \*/
html, body{height:100%;}
/* end hack */
html {
height: 100%;
}Is what I use. It works in all browsers and includes a CSS filter to hide the 100% body height from IE5.2 Mac
Don't make the body overflow:hidden; remove the position:absolute and the height:100%/min-height:100% from the inner and outer main divs.
You have a large amount of redundant code in there, once you get the 100% issue fixed you need to do a serious weeding. Also, I recommend you start at the top of your CSS with your html and body positional css, work down through your divs in the order they appear starting with the ids (you've done this partly already) then work through your major classes. Another thing that regularizes your css is to always do your properties in the same order starting with box and other dimensional properties first and then going to the content appearance properties:
display (block|inline)
position (relative|absolute|fixed)
(top|left|bottom|right)
float (left|right|none)
height
width
margin
border
padding
background
color
font
... and so on.
Comment your CSS as well, especially if you are having problems in a certain area or are using hacks/css filters.
Hope this helps.
BTW - neat favicon.
And Karrine - how is your child div affecting your 100% width property?? :twisted:
DE
Mon, 2005-01-31 07:59
#3
Thanks
Ok, thanks for the help. I have accomplished what I wanted inside of Firefox. However, I can't get it to display on Safari at the moment. I don't have a PC to test it on. I am assuming that it doesn't work on IE.
here is the updated css...
http://ackoo.com/templates/ackoo_template/css/template_css.css
The code looks the same as above. Does anyone have any ideas. I am using the display:table attribute and I am assuming that safari just doesn't support this.
I tried all of these other suggestions that were made and had no luck at all. It just displays the same stuff. It is all well and good if there is something to put at the bottom of the page, (like enough text or maybe a footer), but when there isn't it doesn't complete the page background. In safari it continues the background for the outer-main div, but the inner doesn't work. I can't figure this out, other than the fact that the items inside of the inner div may not equal a full page length.
Should I just create another div and place all of the items that are currently in the inner-main div inside of it. Then place that div inside of the inner-main div.
So, it would look like this
HTML
outer-main
inner-main
content-main
** All of my content **
/content-main
/inner-main
/outer-main
/HTML
??
This is frustrating as all hell. I really appreciate the help!
Mon, 2005-01-31 19:30
#4
The impossible <DIV> height: 100%, Want a Challenge?
I understand that this comment will not, in any way, contribute to the safety of your LCD screen, but damn, that's the most disturbingly awesome picture of malnourished kangaroos I've ever seen.
Mon, 2005-01-31 23:00
#5
The impossible <DIV> height: 100%, Want a Challenge?
Works on Win IE 4, 5.01, 5.5, and 6. I'd say that is an accomplishment.
Ditto on the Atkin's diet 'roos.
DE