Problem with Divs not stretching.

[Beerboy]

Hi guys, i am desgining a new webpage, but im having a little trouble with Firefox

As you can see my page is set out how i want it to be using IE.

See here:

http://homepages.nildram.co.uk/~slong/TT/new/

But for some strange reason im getting a few weird problems with my design in Firefox.

There is a large gap between the "navbar" div and the "containerouterindex" div, and i have double checked everything and other than adding a top attribute to the "containerouterindex" div i am unable to get my desired effect as this also changes the look in IE.

The other problem im having is, being able to get the "continerouterindex" div to stretch to be 10px more than the "containerinnerindex". I have achived this in IE by using a margin-bottom atribute of 20px, but this doesnt seem to work in Firefox.

If anyone can shed any light on any of these strange problems, id be most greatful.

Regards

BB

[jscheuer1]

There is no "containerouterindex" on either your page or its stylesheet. That could be the problem. Anyways, have you tried padding or height properties?

[Beerboy]

Sorry my apollogies, "contentouterindex".

I have used the height attribute, and yes it does work fine, but on my news page i will be adding news reguarly and this would mean having to keep altering the height everytime i add these, i want to make the page strech itself so i dont have to worry about it.

Regards

BB

[jscheuer1]

OK, I found this worked well in FF, IE and Opera:

.navbar a {
	padding-bottom:1px!important;
	padding-bottom:0;
}

.contentouterindex {
	position: relative;
	width: 754px; 
	background-color: #FFFFFF;
	text-align: left;
	margin: -16px auto 0 auto!important;
	margin: 0 auto;
	padding-bottom:1px!important;
	padding-bottom:0;
}

as a replacement for your current contentouterindex declarations. The first part is a new style block that is only needed for Opera but, due to Opera's reputation as standards compliant, and because it doesn't harm the other two browsers, I'd use it because other minor browsers may need it and Opera is currently gaining market share.

[mwinter]

There is a large gap between the "navbar" div and the "containerouterindex" div,

As you've changed the style sheet, I can't tell you why this occurred. However, there is probably a good reason as rendering in Firefox is rarely wrong, even if it's not what you intended.

The other problem im having is, being able to get the "continerouterindex" div to stretch to be 10px more than the "containerinnerindex".

You (both) have taken an approach that is far more complicated than it needs to be; you're rendering what is essentially a border, so use the border properties.

A simpler take on your home page is shown in a quick mockup. I don't have the font you used in the menu, so I didn't produce GIF versions of the menu titles that could be content negotiated to IE, so it currently gets alpha transparency PNGs (and the ugly grey background).

The point of the change is to show how the menu effect can be achieved with less CSS and bandwidth. It could easily work with IE, too, by using the links to effect the hover changes (or a script). I just couldn't be bothered as it should use the list items.

This demonstration also degrades properly when CSS or images are disabled, and I've done it with simpler markup and a simpler style sheet.

You overuse classes and the position CSS property. Look at the rules with similar names; they either are, or are nearly, identical. It would also seem that you'd use as many separate classes as there were items in, say, the News section. This is totally unnecessary. CSS selectors are based on the idea of document structure and they are meant to take advantage of this.

For example, if you have a 'type' of section within a document, and you need to style paragraphs (p elements) within that section a certain way, then make paragraphs the second part of that selector, not a class that then needs to be set on each element.

Mike