CSS being an arse.

**martynball** · 11-26-2009 03:27 PM

Bascially, I want the "main_text" div go all the way to the bottom of the page, but for some reason width:100%; won't do it :S

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fenton Gallery - Home</title>
<?php include 'includes/inc_scripts.php'; ?>
</head>
<body>
<div class="header">
  <div class="links" align="center">
    <?php include 'includes/inc_menu.php'; ?>
  </div>
</div>
<div class="navbar" align="center">
  <?php include 'includes/inc_navbar_content.php'; ?>
</div>
<div class="main_text">
  <p class ="g1">Fenton Gallery is now taking Art from all ages. Anyone can easily submit their artwork to our website by simply uploading the picture. We will then check that the Art does not violate our <a class="plain" href="#">Terms and Conditions</a>, then add it to the gallery.</p>
</div>
<div class="bottom-bar" align="center">
  <?php include 'includes/inc_sponser.php'; ?>
</div>
</body>
</html>

CSS:

Code:

@import "text-styles.css";
@import "gallery-styles.css";
@import "contact-styles.css";
@import "download-styles.css";
@import "database-styles.css";
/* Start Main Styles */

body {                            /*Top header with background image*/
    background-image:url(../images/vista/header.jpg);
    background-repeat:no-repeat;
    background-position:top;
    background-color:#1b1b1b;
}
.header {                        /*Contains background with curved edges and navagation links inside*/
    background-image:url(../images/vista/header_links.png);
    background-repeat:no-repeat;
    height:3.3em;
    margin-top:9.3em;
    background-position:center;
}
.navbar {                        /*Bar going accross page under the navigation links*/
    background-image:url(../images/vista/narbar.gif);
    background-repeat:repeat-x;
    height:3em;
    width:100%;
    left:0px;
    position:absolute;
    margin-bottom:0px;
    z-index:1;
}
.main_text {                    /*Main content div*/
    padding-top:2em;
    background-color:#2a2a2a;
    width:785px;
    height:100%;
    border-left:1px;
    border-right:1px;
    border-left-color:#62c2ff;
    border-right-color:#333333;
    border-style:solid;
    border-bottom:none;
    margin:0 auto;
}
.bottom-bar {
    background-color:#282828;
    bottom:0px;
    width:100%;
    height:1.5em;
    left:0px;
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#333333;
    position:fixed;
}
.wrapper-1 {
    position: relative;
    clear: both;
    background-color:#333333;
    margin:0 auto;
    height:100%;
}
/* End Main Styles */

/*Special*/

.spon-img {
    opacity:0.3;
    filter:alpha(opacity=35);
    margin-left:5em;
}
.spon-img:hover {
    opacity:1.0;
    filter:alpha(opacity=100);
    margin-left:5em;
}
a.img {                /*Removes styles from images*/
    border:0px;
    padding:0px;
    background:none;
    margin:0px;
}
/*END Special*/

/*Menu Links */                    /*Menu link styles*/
a.menu:link {
    color:#CCCCCC;
    text-decoration: none;
    font-family:calibri;
    background-image:url(../images/vista/button_unactive.png);
    background-repeat:no-repeat;
    background-position:center;
    padding:14px;
    padding-left:36px;
    padding-right:36px;
    margin-left:25px;
}
a.menu:visited {
    color:#CCCCCC;
    font-family:calibri;
    text-decoration: none;
    background-image:url(../images/vista/button_unactive.png);
    background-repeat:no-repeat;
    background-position:center;
    padding:14px;
    padding-left:36px;
    padding-right:36px;
    margin-left:25px;
}
a.menu:hover {
    color:#CCCCCC;
    font-family:calibri;
    text-decoration: none;
    background-image:url(../images/vista/button.png);
    background-repeat:no-repeat;
    background-position:center;
    padding:14px;
    padding-left:36px;
    padding-right:36px;
    margin-left:25px;
}
/*END LinkStyle */

http://martynleeball.x10hosting.com/index.php

**Anna** · 11-26-2009 03:36 PM

You might wanna try putting height:100% in the body element, the main_text can never be higher then it's surrounding element, in this case the body

**martynball** · 11-26-2009 03:43 PM

I have done that, but it still doesn't work :/

**spadija** · 11-26-2009 11:03 PM

I'm pretty sure there is no way to extend a div vertically short of adding content to it to stretch it. If you want to extend the background so it looks like the div does go all the way down, you can make a div that contains the lowest item in the page and apply the background to that. I'm pretty sure it won't work with your absolutely positioned bottom bar though, since absolute positioning breaks the element out of the normal flow.

This picture might clarify what I mean:

Code:

+------------------------+
| div with background    |
| +--------------------+ |
| | text area          | |
| +--------------------+ |
|                        |
|                        |
|                        |
| +--------------------+ |
| | bottom bar         | |
| +--------------------+ |
+------------------------+

If you want the absolutely positioned bottom bar, you might want to create a footer div after the main_text div and give it a background the ends the page nicely. It won't go all the way to the bottom, but it will look much nicer than a sharp cut off.

**misson** · 11-27-2009 12:32 AM

From CSS 2.1, § 10.5 "Content height: the 'height' property":

<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

The height of .main_text is 100% of its parent's (<body>'s) height, which is 100% of its parent (<html>), which is implicitly auto, hence the other heights become auto. If you keep reading the standard, you find:

A percentage height on the root element is relative to the initial containing block.

The "root element" of an HTML document is (unsurprisingly) <html>. The "initial containing block" is the viewport when a webpage is displayed on a screen (and other continuous media) and the area of paper you can print on when a webpage is printed (or displayed on other paged media). Thus you can set a height (though you should instead set min-height, or be sure to set overflow: auto) on <html> and stretch out .main_text. Of course, if you do that, you'll run afowl of how you're inserting the header image and positioning .navbar. Even so, I recommend trying out this option. Turn the header into an element rather than a background image, and don't absolutely position .navbar.

The page has a few more mistakes and problems.

You've got a <body> tag before the </head> close tag, which is followed by a second <body> tag.
Inline event handler attributes (such as "onload") don't need the "javascript:" scheme. That's just for attributes that require a URI. Instead, the "javascript:" is being interpreted as a label, which isn't causing a problem, it's just messy.
hidediv and commentsShow don't check whether #comments exists and yet are hidediv is called when there's no #comments. Either check that the element exists or (better yet) don't call the function on pages where it doesn't.
Any group of things that are related should reflect this somehow; in the case of functions, the relationship should be reflected in the name or namespace. Since JS doesn't have namespaces, the name it is. "hidediv" and "commentsShow" aren't obviously related. Name them either "hideComments" & "showComments", or replace them with more generic "hide" & "show" or "hideElement" and "showElement" functions.
These days, there's basically no point in checking for "document.getElementById". If a browser supports JS, it will support the DOM. This points to the real problem:
If JS is unsupported/disabled, comments won't be hidden. Furthermore, the "load" event isn't fired until everything loads, such as images and other external objects, which is why you occasionally see the comments briefly flashed on the screen. The default state of #comments should be hidden. If JS is disabled, the "Show comments" link should go to a separate comments page:
HTML Code:
```
<script>
function showElement(id) {
    document.getElementById(id).style.visibility = 'visible';
}
</script>
...
<a class="comment-links" onclick="return showElement('comments')" href="comments">Show Comments</a>
```

Check your error console and validate your pages. You'll catch some errors like these.

**xav0989** · 11-27-2009 09:12 AM

adding to the css

Code:

html {
        height: 100%;
}

does make the main_text fill all the space, but you'll need more to work a bit more on the design if you choose that option.

**martynball** · 11-27-2009 10:04 AM

Wow, mission. You are really helpful Lol. And thanks to you other three.

Edit: I'm going to re-code the layout.

Edit2: Is there a fix for the show and hide javascript for IE, as it does not work. Works fine in firefox because firefox is ownage.

I HATE Internet Explorer, but the majority of businesses and basic computer users use it... god knows why: slow; loks nasty; needs different code although almost all other browsers don't...

Microsoft just have to be different

**greatm** · 11-27-2009 01:22 PM

There is also the min-height tag, though ie6 doesn't like it and needs the standard height tag to do the same thing so you could do a condition and tell it touse the height tag if in ie6/older and then for every other browser use the min-height tag. I am pretty sure you need to set your body to a height of 100%, but don't remember if you need to set html to 100% as well or not. I use html in my css quite often, so I can't remember if you need to add the height: 100%; bit there or not.

As for why most people/businesses use internet explorer, it is easier. In a business where you have even 100 computers and one, maybe two tech people it is just easier to use the software already installed in the machine, especially if you have to reformat the machines a lot and they are older machines. Internet Explorer is also older so more people are used to the name if nothing else, and I can tell you from personal experience that sometimes it is just easier to get someone to use a browser because it is the same as what they use on thier home computers. So it is partially laziness, but with the less techsavvy employees also needing to use the software it is cheaper to stickwith what they know how to use and not have to take the time (which can be a whole lot longer than one would expect) to train them to use firefox or Opera.

As for looks, I think it is personal preference. I am on windows 7 and I like the look of ie8, though it is mostly windows aero letting me look through to my background which is a nice feature. As for speed, pages load fast enough that the time that could be potentially saved by switching browsers would only be effective after measuring the delays over a year. Internet connection and system matienence affect speed more than broswer alone.

Good luck with your CSS, I hope your redesign works out for you and if it doesn't hopefully the min-height tag will be of use.

**Mr. DOS** · 11-27-2009 01:58 PM

I've thrown a little something together describing a fairly easy way to do full-height div's. There's some really cool stuff you can do with this - I'll try to embellish it later.

--- Mr. DOS

Thread: CSS being an arse.

LinkBack

Thread Tools

Display

CSS being an arse.

Re: CSS being an arse.

Re: CSS being an arse.

Re: CSS being an arse.

Re: CSS being an arse.

Re: CSS being an arse.

Re: CSS being an arse.

Re: CSS being an arse.

Re: CSS being an arse.

Posting Permissions