Of course in real life, it is probably not IE7, but instead a coding error on my part that is buggering up my page...what confuses me is that Firefox is usually the unforgiving bastard that screws out when you have errors...

The site in question is still being developed, but I'm testing online...

PATH TO THE NAUGHTY CSS FILE : http://www.yourtour.co.za/styles.css
PATH TO THE NAUGHTY HTML FILE : http://www.yourtour.co.za/index.htm

Maybe some of you will recognise some errors in my css, that I don't know about (highly possible), just please don't shoot me.  When I went to college we learned good ol html, not css.  Im trying to figure it out myself, and I have to admit, I'm missing tables.

In IE6 & Firefox, it looks the way it is supposed to, but in IE7, it looks like a big phuc up...

Can anyone tell me how to stop the other divs from spilling out over the #container div?

I'm loading my shotgun now...

What I want to know is, why do you have multiple containers named like these, and why do you have "display table" in your code?  You really should be coding it as "Table-less CSS".

#containerHome
display: table;
display: table-cell;

#containerAboutSA
display: table;
display: table-cell;

#containerTourPack
display: table;
display: table-cell;

#container
display: table;
display: table-cell;

Within the container CSS, you have this and I don't know why, as you're telling it to "automatically" place the margins - margin:auto; /* centered in Firefox */

And I definitely don't understand this either:

#google{
margin:0 auto; /* centered in Firefox */

When I went to college we learned good ol html,

THey teach html in school!!! why didnt anyone tell me about this!!!

Looks Very nice by the by

The quickest fix is to just put it in tables on page.

Or check these out

ERRORS

I : http://www.yourtour.co.za/styles.css
10     body     Invalid number : text-align -moz-center is not a text-align value : -moz-center
248     .button     Invalid number : cursor hand is not a cursor value : hand

WARNINGS
Check here

8     body      font-family: You are encouraged to offer a generic family as a last alternative
9     body     This property applies to block-level elements.
11     body     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
20     #containerHome     Redefinition of display
22     #containerHome     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
27     #containerHome     This property applies to block-level elements.
32     #containerAboutSA     Redefinition of display
34     #containerAboutSA     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
39     #containerAboutSA     This property applies to block-level elements.
44     #containerTourPack     Redefinition of display
46     #containerTourPack     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
51     #containerTourPack     This property applies to block-level elements.
56     #container     Redefinition of display
58     #container     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
63     #container     This property applies to block-level elements.
81     #sideBar     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
87     #sideBar     This property applies to block-level elements.
94         Same colors for color and background-color in two contexts #containerAboutSA and #sideBar p
94         Same colors for color and background-color in two contexts #container and #sideBar p
94         Same colors for color and background-color in two contexts #containerHome and #sideBar p
94         Same colors for color and background-color in two contexts #containerTourPack and #sideBar p
94     #sideBar p     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
97         Same colors for color and background-color in two contexts #container and a.sideBarP:link
97         Same colors for color and background-color in two contexts #containerHome and a.sideBarP:link
97         Same colors for color and background-color in two contexts #containerTourPack and a.sideBarP:link
97         Same colors for color and background-color in two contexts #containerAboutSA and a.sideBarP:link
97     a.sideBarP:link     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
98         Same colors for color and background-color in two contexts #containerHome and a.sideBarP:visited
98         Same colors for color and background-color in two contexts #container and a.sideBarP:visited
98         Same colors for color and background-color in two contexts #containerAboutSA and a.sideBarP:visited
98         Same colors for color and background-color in two contexts #containerTourPack and a.sideBarP:visited
98     a.sideBarP:visited     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
99         Same colors for color and background-color in two contexts #container and a.sideBarP:active
99         Same colors for color and background-color in two contexts #containerAboutSA and a.sideBarP:active
99         Same colors for color and background-color in two contexts #containerTourPack and a.sideBarP:active
99         Same colors for color and background-color in two contexts #containerHome and a.sideBarP:active
99     a.sideBarP:active     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
100         Same colors for color and background-color in two contexts #containerTourPack and a.sideBarP:hover
100         Same colors for color and background-color in two contexts #containerAboutSA and a.sideBarP:hover
100         Same colors for color and background-color in two contexts #containerHome and a.sideBarP:hover
100         Same colors for color and background-color in two contexts #container and a.sideBarP:hover
100     a.sideBarP:hover     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
104     #google     Redefinition of margin-top
107         Same colors for color and background-color in two contexts .textfield and #google
107     #google     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
117     #grayStrip     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
129     .homeMain     This property applies to block-level elements.
134     .homeMain h2     font-family: You are encouraged to offer a generic family as a last alternative
139     .homeMain h3     font-family: You are encouraged to offer a generic family as a last alternative
140         Same colors for color and background-color in two contexts .homeRight and .homeMain h3
140         Same colors for color and background-color in two contexts .aboutSARight and .homeMain h3
140     .homeMain h3     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
145         Same colors for color and background-color in two contexts body and .homeMain p
145     .homeMain p     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
150         Same colors for color and background-color in two contexts body and .homeMain li
150     .homeMain li     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
159     .homeRight     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
161     .homeRight     This property applies to block-level elements.
167     .homeRight p     font-family: You are encouraged to offer a generic family as a last alternative
173     a.homeRightP:link     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
174     a.homeRightP:visited     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
175     a.homeRightP:active     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
176     a.homeRightP:hover     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
180     .homeRightTop     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
181     .homeRightTop     This property applies to block-level elements.
186     .homeRightTop h5     font-family: You are encouraged to offer a generic family as a last alternative
193     .homeRightMid     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
194     .homeRightMid     This property applies to block-level elements.
199     .homeRightMid p     font-family: You are encouraged to offer a generic family as a last alternative
211     .aboutSARight     You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
213     .aboutSARight     This property applies to block-level elements.
218     .aboutSARight p     font-family: You are encouraged to offer a generic family as a last alternative
229     .signature     This property applies to block-level elements.
231     .signature     font-family: You are encouraged to offer a generic family as a last alternative
233     .signature     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
237     a.sign:link     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
238     a.sign:visited     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
239     a.sign:active     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
240     a.sign:hover     You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
248     .button     font-family: You are encouraged to offer a generic family as a last alternative
250     .textfield     font-family: You are encouraged to offer a generic family as a last alternative

Aaaahh... CSS is a quirky beast between the two browsers.

I read all the articles on how to make things work, and here is what I did to fix my issues -

I re-wrote my entire css file based on what sounds logical, instead of by the rules..... for some reason it worked out on the first try.

I hated IE for the longest time for messing things up, but in reality, the further you delve into the CSS nightmare, you'll realize that Microsoft was actually correct when they said they've put little emphasis on a half-baked code structure. (er.. something like that)

Heck, you can't even center something with CSS. What kind of retard organization screws that up?!?!?!

Heck, you can't even center something with CSS. What kind of retard organization screws that up?!?!?!

ROTFLMAO

And now my day is complete, thanks for that stitch

TA wrote:

I'm loading my shotgun now...

What I want to know is, why do you have multiple containers named like these, and why do you have "display table" in your code?  You really should be coding it as "Table-less CSS".

#containerHome
display: table;
display: table-cell;

#containerAboutSA
display: table;
display: table-cell;

#containerTourPack
display: table;
display: table-cell;

#container
display: table;
display: table-cell;

Within the container CSS, you have this and I don't know why, as you're telling it to "automatically" place the margins - margin:auto; /* centered in Firefox */

And I definitely don't understand this either:

#google{
margin:0 auto; /* centered in Firefox */

I could answer you if I wasn't  winging it, but everytime I have a problem, I google it, see what they're saying on the forums, and try suggestions...so when something works, I add it in, and move to the next problem.

Ryan_steyn wrote:

THey teach html in school!!! why didnt anyone tell me about this!!!

tertiary education college, but I bet those little bastards in high school get to learn it now days

Ryan_steyn wrote:

ERRORS
WARNINGS

Your validator has successfully confirmed that  I am winging it, but it would be nice if validators gave solutions...or at least verbose errors!

Dang them heck!

MrStitch wrote:

What kind of retard organization screws that up?!?!?!

I hear you there, brother!

Yeah... am I right or am I right?

These elitist organizations, I would think, are suppose to hold some kind of quality standard. When they speak, us web masters should listen.

But to not support the most widely used html function is just ludachris. For god sakes... without even knowing the numbers, I'm willing to bet todays paycheck that at least 99.9% of websites in all existence have SOMETHING centered on page.

Yet the all great and powerful W3C fails to understand this. $%^$%#$%#$%%^

Roxane wrote:

I could answer you if I wasn't  winging it, but everytime I have a problem, I google it, see what they're saying on the forums, and try suggestions...so when something works, I add it in, and move to the next problem.

Ahhh; that's your problem -- instead of studying CSS and making it specific for your site, you're copying / pasting whatever code you "think" is gonna work ... reminds me of a monkey chasing a football -- never does catch it, because he's going all over the place...

Sorry, have to disagree with you Stitch.  The biggest problem with CSS is Microsoft's shoddy support of the standard.  This is made even more pronounced by the fact that Internet Exploder is still the most commonly used browser in the world.  When I write to the standards, I have no problem with either Firefox or Opera, but I do end up having to go back and hack my code for IE.  As for centering, that's what the auto margins are for.  They are normally only used on the left and right for horizontal centering, I've never tried to use them vertically though.

As for stopping other containers from spilling out of the wrapper, that will depend.  If the inner containers are floated, then you may need to use something like this just before the end </div> of the wrapper:
<br class="clear">

with this in the CSS

.clear { clear:both; }

This will force the bottom of the wrapper down below the floated containers.

HA! I figured it out!  Sometimes the monkey gets the football TA!

As it turns out...IE7 was the one that was displaying correctly.  I had specified the #container to be 600px high, and after taking screenshots & measuring in photoshop, IE7 was the only one displaying it at 600px (too short for the content, therefore it spilled over), IE6 & Firefox were displaying it at 789px high.  Somehow they were only counting px from under the header (189px high)

Well, imagine that!  IE7 being right.  What do you think of that Firefox worshipers?

...never mind that Im a nerd for working on code on a Friday night, but that was bugging the crap out of me.

Bye the way, Steven, thanks for being the only one to actually offer a solution ...now to start working on those errors pointed out by Ryans validator...sigh

Disagree with me?

Well I'll disagree with you then! HA!

Actually, I had a couple of really good examples of why I'm right (and of course I am), but I lost 'em. Too busy to track EVERYTHING.

But, for what it's worth..... Ignore the 'standards' thingy, and look at this as the way the code should be driven. 'Logic'.

IE handles the code in a more logical fashion, when you spill it all out on paper. When I write the code in my head, thinking about what this function is going to do here, and that function will 'probably' do to this thing over here... it all works just fine. But it's not by-the-book so to speak. I believe this is why Microsoft did what they did. They felt that the overall structure was shoddy and illogical (come on star trek fans!).

And if you write like I do, the code is even more light weight, plainly logical, and works..... it's just not sanctioned by the people sitting at the throne.

Roxane wrote:

HA! I figured it out!  Sometimes the monkey gets the football TA!

As it turns out...IE7 was the one that was displaying correctly.  I had specified the #container to be 600px high, and after taking screenshots & measuring in photoshop, IE7 was the only one displaying it at 600px (too short for the content, therefore it spilled over), IE6 & Firefox were displaying it at 789px high.  Somehow they were only counting px from under the header (189px high)

Well, imagine that!  IE7 being right.  What do you think of that Firefox worshipers?

When I looked at it the first time, it displayed correctly in FF and IE6, which was why I questioned about your containers ... as for IE; now you know why many of us call it Internet EXPLODER -- it never really has shown sites properly.

I maintain being an FF worshipper -- guess now that you managed to "monkey-down" and snatch the football, we'll teach you underwater snorkeling next...

Well done Roxanne, i am however keeping my firefox beenie on and keep up dancing around my FF-Totem pole for the time being Sorry about those errors and warnings, if i knew you were gonna fix it without em i woulda swept em under the carpet, now you have to go fix tons of random warnings thats never nice. My bad

First and most important by far is, why does Ryan get two posts every time, when I think half as hard, three or four times as often at least, and only get one...

I think Ryan is trying to get some sort of free prize in a childish effort to subvert the natural flow and complexity of the posts typically submitted. I cry "fowl" (see duck butt attachment) .

Seriously, I drank a boatload of wine (under duress, she kept saying would you like another carafe?), but there were duplicate posts, weren't there?

MrStitch wrote:

Disagree with me? Well I'll disagree with you then! HA!

Well then, I disagree with being disagreeable! Double Ha!

Roxane wrote:

HA! I figured it out!  Sometimes the monkey gets the football TA!

If I remember the monkey-football relationship correctly, there was candle light, lipstick and little footballs

Roxane, don't cry over spilled divs...

Ryan_steyn wrote:

Heck, you can't even center something with CSS. What kind of retard organization screws that up?!?!?!

ROTFLMAO

And now my day is complete, thanks for that stitch

<div style='text-align:center;'>

 <div style='text-align:-moz-center;'>



 </div>

</div>

Two posts? two posts of what? where? when? im confused again

I think Ryan is trying to get some sort of free prize in a childish effort to subvert the natural flow and complexity of the posts typically submitted. I cry "fowl" (see duck butt attachment) lol.

Fair enough but i do however enjoy the entertainment value of conversation as well as the learning value we cant be to serious to often... its unhealthy, nomatter whose but you attach to the screen.

Still dont understand the two posts story?

Ryan_steyn wrote:

Two posts? two posts of what? where? when? im confused again

I think Ryan is trying to get some sort of free prize in a childish effort to subvert the natural flow and complexity of the posts typically submitted. I cry "fowl" (see duck butt attachment) lol.

Fair enough but i do however enjoy the entertainment value of conversation as well as the learning value we cant be to serious to often... its unhealthy, nomatter whose but you attach to the screen.

Still dont understand the two posts story?

Well, I can always tell when you wake up - as it seems the first thing you do is comment on every post in the active discussions list. Is it a case of links or "must have the last word" syndrome? Either way - I'm glad you have the time for it, i used to do it but just don't have the time now Have fun!

NA, links are unfortunately useless "Game Reserve + Website Stuff" ? nope. Its more of a like to be involved syndrome im afraid... and yeah, i do reply to all the posts i find interesting. If it really does bug you guys im sure it wouldnt be to much of system shock to not jump in quite so much.

every post in the active discussions list

not every post... there are a couple where i honestly have nothing to say - i do hate it when that happens

Ryan_steyn wrote:

Two posts? two posts of what? where? when? im confused again

There was some sort of glitch late last night that was showing two of each of your posts. I didn't "sceen shot" it though..

Disappeared even before I posted. I think was only your posts? True story.

lol, thats crazy. Im glad its gone though, why my posts though? maybe i do have to much to say i will however be cutting down though, some things just arent worth being said i guess.

Back on topic.... Northie, can that same code be used on images and menus? some more use of "center" would be nice   EG  img-align:center