code problems

[jewels]

Hello,

I have developed the following site from a template, and there are a few things I cannot work out.

HOME PAGE - the two columns jump down to the second line??
RESOURCES, CONTACT etc - I cannot seem to reduce the height of the main content area. I have tried to change the height but there is no difference.

The website is:
http://www.frontrunnerfinance.com.au/new/index.html

I would appreciate any insight you can give.

Thanks,
Jewels

[Tyssen]

I'd like to be able to help you but if I was going to, I'd have to start again from scratch cos I wouldn't be able to work with what you've currently got. It's got way too many divs and it seems to have been created by somebody with a tabled layout mindset.

Setting elements to display: table/table-row/table-cell (which won't even be recognised by Internet Explorer) and then setting the widths/heights inline on the divs is the wrong way to be going about it.

Removing all the display: table stuff and height: 100% from your CSS will help the problem in Firefox but not in IE which doesn't recognise it anyway.

[Dan Schulz]

Everything appears to be fine on my end, although I am using Opera to view it (keep in mind I mean visually; the code is another matter entirely). What browser are you using, and what is the width of the browser window at when you try to view it?

[deathshadow]

          :           

makes me wanna bang my head and scream...

Lemme wake up first, I'll dig deeper as I'm seeing what you say in IE, but not Opera/FF.

[deathshadow]

Here, did you a favor; quick rewrite. As Tyssen mentioned, it was really better off with a total start over from scratch.

http://battletech.hopto.org/for_othe...ontrunner.html

the directory:
http://battletech.hopto.org/for_others/frontrunner

is unlocked as always... I redid most of the images as .png, left a few as .gif depending on which delivered a smaller size, and resliced a number of them into different sizes to better support 'my way' of coding a website.

As you can see, the HTML side of things is much reduced. The extra 'spans' inside various elements work in a way that makes the site 'image free' friendly for users who turn images off and screen-readers, while the semantic html layout makes the site usable if the user doesn't have CSS... Whenever I use an image instead of text, I'm using this technique to put the text in and hide it behind the image for accessability reasons. Likewise if an image is not content, but simply styling - like the banner .jpg you are using below the navigation, I put it in as a empty DIV since someone with images off probably doesn't care.

The mouseovers don't rely on javascript anymore, but use CSS which combined with the 'lighter' html reduces the overall size of the html/css by a quarter, and the cleaner layout is much easier to debug.

XHTML 1.0 Strict, validates, works cross-browser, tested in IE 6 & 7, FF, NS8, Opera 9 and Safari... and not one browser specific hack in sight.

Hope this template helps you along...

[jewels]

Oh gosh. I cant begin to thank you enough for the work you put in.
Your a CHAMP!!
Il try and save the files now and see how we go!
Thanks again!!!!!
jewels