23 replies [Last post]
Adampski
Offline
Regular
Andover, UK
Last seen: 12 years 51 weeks ago
Andover, UK
Joined: 2008-11-25
Posts: 16
Points: 0

My first post, pretty cool forum!

Anyway, I'm actually making a website for my club but I'm having coding problems at the minute, I can't seem to get the Layout Shadow to carry on straight to the bottom of the browser in IE7. The weird thing is, it goes down TOO far in FF (latest version) and doesn't reach it far enough by about 20/30px's in IE7 (i'm using a 1280x1024 resolution by the way).

To show you exactly what I mean, please view this page in both browsers in FF and IE7 (i'm not bothered about other browsers at the moment, just these two particular browsers) :
http://www.peoplesfeet.info/show/SSA/%232/

This is the Layout Shadow image:
http://www.peoplesfeet.info/show/SSA/%232/images/Layout_Shadow.png

And I'm trying to make the Layout Shadow expand all the way to the bottom using this element:

	background-image: url(../images/Layout_Shadow.png);
	background-repeat: repeat-y;

If you wish to see my whole css file, it's at...
http://www.peoplesfeet.info/show/SSA/%232/Styles/Master.css

Just so you know, i have got the height of that element set to 100%, it's just in a different div tag, i just tried adding 'height: 100%' into that part of CSS just given above ^ and the result actually made the problem switch, the Layout Shadow expanded too far in IE7 and not far enough in FF, but also left a really weird large gap at the bottom of the template in FF

I really appreciate it to any suggestions to help me with this, i really would.
Thanks!

Updated:
Main URL: http://www.peoplesfeet.info/show/SSA/2/
CSS file: http://www.peoplesfeet.info/show/SSA/2/Styles/Master.css

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 12 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Live at the Roxies

Can you post a link to yout live testing site, not images. we need to see all the code.

Adampski
Offline
Regular
Andover, UK
Last seen: 12 years 51 weeks ago
Andover, UK
Joined: 2008-11-25
Posts: 16
Points: 0

Oop

Triumph (not verified)
Anonymous's picture
Guru

Doctype failure.

Please add a doctype and make sure your code is valid as a first step.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Content failure too.

Content failure too.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Triumph (not verified)
Anonymous's picture
Guru

Whoops, I didn't look past the lack of doctype.

Ed Seedhouse wrote:

Content failure too.

Yes, if you don't want to show the actual site text at least add some lipsum so that we can see how it handles text size changes.

Adampski
Offline
Regular
Andover, UK
Last seen: 12 years 51 weeks ago
Andover, UK
Joined: 2008-11-25
Posts: 16
Points: 0

Excuse me if I come across

Excuse me if I come across as rude, but 'dude'? I don't understand? Where did I label you as a 'dude'?

And I'm very sorry, I've now updated it with expandable text boxes with text flowing down showing you what its like with text!

May I ask what a DocTyaype is? Thank you for replying.

Updated:
Main URL: http://www.peoplesfeet.info/show/SSA/2/
CSS file: http://www.peoplesfeet.info/show/SSA/2/Styles/Master.css

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 12 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Thats his

That is just his signature. It appears on every post he makes.

Adampski
Offline
Regular
Andover, UK
Last seen: 12 years 51 weeks ago
Andover, UK
Joined: 2008-11-25
Posts: 16
Points: 0

CupidsToejam wrote:That is

CupidsToejam wrote:

That is just his signature. It appears on every post he makes.

Ah... Ok, sorry! And the CSS is valid, i just checked.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 50 weeks 16 hours ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Doctypes

Hello!

Still looking for information about DocTypes? Try my basic explanation. Smile

http://csscreator.com/node/29284

Have YOU said Hello yet?
The CSSCreator Hello Thread

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CSS doean't work without

CSS doean't work without proper html, including a standards triggering doctype declaration. The doctype declaration is not an option, it is a requirement. Valid html is also a requirement if you want any browser to follow the standard. CSS standards do not apply to invalid html.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Adampski
Offline
Regular
Andover, UK
Last seen: 12 years 51 weeks ago
Andover, UK
Joined: 2008-11-25
Posts: 16
Points: 0

I read the article that the

I read the article that the kind matey gave me above and it still isn't clear to what a DocType is to me, and I can't seem to understand it either when I ask google, as far as I know there are no problems with my HTML as I have used hardly any!

Thanks.

Triumph (not verified)
Anonymous's picture
Guru

What are your options

What are your options concerning hiring someone to complete the project? There's no shame in that.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Have a go through the html

Have a go through the html tutorials over at Html Dog, perhaps?

You do have to know what a doctype is and how to use it to have any success with CSS. CSS is not a stand alone language, it is a pure styling language designed for applying to html. It's rules assume valid html so you need to learn how to validate the html.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Adampski
Offline
Regular
Andover, UK
Last seen: 12 years 51 weeks ago
Andover, UK
Joined: 2008-11-25
Posts: 16
Points: 0

Right i just ran through

Right i just ran through HTML Dog, quality website might i add!
I now understand that Doc Types are required in HTML documents, for some weird reason to allow the browser to read the HTML that I've writ in the correct way that I've written it in? Am I right?

So why am I provided 3 or 4 Doc Type codes to enter into my HTML document? I don't understand, is there a specific one I need to use? Here are the Doc Type codes provided: http://www.htmldog.com/guides/htmladvanced/declarations/ and I'm currently using the first one.

It's made a big difference to my page now! It narrows the problem further down to the true point, it just leaves the expandable image not shown in Fire Fox but perfectly in IE! Any ideas?

Thanks for your help guys! Ive been doing pages without doctypes for years, hadn't realized the damage I was doing to myself!

Triumph (not verified)
Anonymous's picture
Guru

Adampski wrote:Right i just

Adampski wrote:

Right i just ran through HTML Dog, quality website might i add!
I now understand that Doc Types are required in HTML documents, for some weird reason to allow the browser to read the HTML that I've writ in the correct way that I've written it in? Am I right?

The doctype is nothing more than a switch for the browser. It allows the browser to render in "Standards Mode" as opposed to "Quirks Mode" which allows the browser to make a guess over markup errors and in IE's case it will get the box model wrong on purpose. (Something like that, I haven't had the problem in so long I forget. Wink )

Adampski wrote:

So why am I provided 3 or 4 Doc Type codes to enter into my HTML document? I don't understand, is there a specific one I need to use? Here are the Doc Type codes provided: http://www.htmldog.com/guides/htmladvanced/declarations/ and I'm currently using the first one.

There are different rulesets that a browser can handle. Basically, it just sets the ruleset so the validator can tell you what's wrong. Wink

HTML 4.01 Strict is perfectly legitimate.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Adampski wrote:I now

Adampski wrote:

I now understand that Doc Types are required in HTML documents, for some weird reason to allow the browser to read the HTML that I've writ in the correct way that I've written it in? Am I right?

Browsers use the Doctype declaration ("DTD") as a "switch" to tell them what rendering mode to use. That isn't what they were originally meant for, but that is what they are actually used for. IE in particular sticks with it's decade old methods where it basically ingores standards unless you give it the right doctype. Firefox also uses it as a switch, though the various modes in FF are not as bad as IE's "quirks" mode.

But if you want browsers to render in a standard way, you have, alas, to give them the right doctype declaration, and it has to be right at the start of your page. IE will ignore the DTD if it isn't on the very first line of code. That means nothing, not even comments, can come before it or IE goes back to 1995.

The good news is that if you do give the right Doctype Declaration, IE will behave decently and all the other browsers will behave properly. You still have to give IE a bit of help, but the DTD solves 95% of the problems.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Adampski
Offline
Regular
Andover, UK
Last seen: 12 years 51 weeks ago
Andover, UK
Joined: 2008-11-25
Posts: 16
Points: 0

Nice one! If you could take

Nice one!
If you could take a look at the site now in FF and IE7, you'd notice that in FF the background-shadow image doesn't go to the bottom behind the content box and nagivation box. I've tried everything in mind, i've tried creating another div after the banner starts so i could make it start again below the banner and onwards, and that failed, tried renaming and recreate CSS elements (or whatever theyre called) and it still failed which are apparently common problems with FF and CSS? (from what i gathered on google anyway..)

So does anyone have a solution for me please? Be much appreciated, thank you.

Triumph (not verified)
Anonymous's picture
Guru

http://csscreator.com/node/22

Adampski
Offline
Regular
Andover, UK
Last seen: 12 years 51 weeks ago
Andover, UK
Joined: 2008-11-25
Posts: 16
Points: 0

Triumph

Nice cheat, but that wouldn't work either my friend, no matter weather I change the background image, the image will only expand vertically as far as the banner in FF and won't go the rest of the way.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

contain your floats (add

contain your floats (add overflow: hidden; to .Layout_Shadow)

Adampski
Offline
Regular
Andover, UK
Last seen: 12 years 51 weeks ago
Andover, UK
Joined: 2008-11-25
Posts: 16
Points: 0

I could kiss you. Thank you!

I could kiss you. Thank you!

Triumph (not verified)
Anonymous's picture
Guru

wolfcry911 wrote:contain

wolfcry911 wrote:

contain your floats (add overflow: hidden; to .Layout_Shadow)

As long as you're putting a footer on then this works perfectly, if not then the background cuts off at the end of the content. (Try taking out all but the first paragraph).

The faux columns works. You just have to put the background on the body, not on the banner.

Adampski
Offline
Regular
Andover, UK
Last seen: 12 years 51 weeks ago
Andover, UK
Joined: 2008-11-25
Posts: 16
Points: 0

The body background image is

The body background image is already taken up using the background gradient, and thanks for the tip also for having to include a footer, will definitely help in the future!