Hey guys, I've got that classic problem, it looks fine in one browser but does funky stuff in another.

So my page looks absolutely fine (don't tell me it's rubbish, it's just a basic demo of what the band can do with their stuff) in Firefox, but in IE the writing in the centre div sprawls across into the right one and goes on and on and on instead of neatly being in a column. What have I forgotten/fluffed up?

http://www.geocities.com/happytincbh/index.html

Thanks guys

Kat

I saw the same error you were seeing in IE, so I poked around in the source code a bit. After a good while of searching, I finally found this in your CSS:

#left {
position: absolute;
left: 0px;
top: 120px;
width: 180px;
}


#center {
position: absolute;
top: 120px;
margin-left: 200px;
margin-right: 300px;
}
#right {
position: absolute;
right: 0px;
top: 125px;
width: 200px;

In the "left" and "right" bars, you have a width specified, but in the "center" column, you do not have a width specified. Try specifying a width for the center div and see if that works.

On a sort-of related note: I didn't get to view your site in IE7 too long because a weird warning message came up saying "This is a reported phishing site." I'm definitely not accusing you of putting anything like that in your site--I think IE7 is paranoid about the server-generated Geocities code that appears in a few instances in the code. *pokes server code* Maybe removing those little bits of code will help IE users view your site much more easily as well.

Ah marvellous! It looks fine in both now, just...except...how can I keep the middle fluid so the size of window doesn't matter as much? Now the text is completely static.

I can't remove the server text! It doesn't exist in the editted form, it just seems to get knitted out by some big server monster! I can't even make my page look okay let alone begin any malicious activity! :-S

Thanks for your help

The problem with your original code is that IE (at least version 6.0), for some reason that I can't begin to fathom, will allow an absolutely positioned element of width "auto" (default value) to expand to the width of its containing box (usually the browser viewport), regardless of any margins. This means that if you have a left margin of 200 pixels, the width of your element box could reach viewport width + 200 pixels: absolutely ridiculous, and it's breaking your fluid layout in IE.

The sidebars, also being positioned absolutely, are on completely different planes of existence than your center element, so they will not be affected by it or its margins and will remain inside the viewport.

Your simplest fix would be to remove the absolute positioning from div#center and not assign a width. Reverting to a width of "auto", and being in the normal flow, its margins will restrain it from extending under your sidebars. You may need to add a sufficient top margin to push it down from your header image.

On the topic of your header image, there's no real need to position it absolutely since you want it on its own line. Also, if you are going to position it absolutely, you should position div#header and not solely the image within it. Also, you seem to have an extra, unclosed div inside div#header with its alignment set to left. This shouldn't be necessary and can be removed.

The acoustic on the right of the third photo down is an Ovation, yeah? What's the box on the left? It looks nice! Haha, well... shiny, anyway.

Oh that worked! Fab thanks! I've never used CSS before so I've been cobbling it together from various bits and pieces and prodding things until they look reasonable. How does the whole position thing work? I just put it as absolute because I didn't know what it meant or what I could use instead.

I've got to admit I don't know about the guitars. I'll find out however. I don't do the music-y bits, I just tell them to change their website, act as a guineapig for new sounds and provide bits of saxophone as needed.

Haha, yeah, the current site is a bit rough around the edges, I'll agree. Hopefully, you'll get to use that server eventually instead of relying on nasty ol' Geocities.

I have a strong respect (and envy!) for the lungs and diaphragm of any woodwind player. Congrats.

But, back on topic, CSS positioning basically has four forms:
Static, which is the normal flow of things, is good for top-down layouts. Ideally, you'll want to leave as much content in the normal flow as possible as it tends to flow better.
Absolute positioning allows you to remove an element and its children from the normal flow and position then relative to the inner edges of the browser viewport or its nearest, non-static positioned parent.
Fixed positioning functions, for the most part, exactly like absolute positioning except that it will remain in the same position relative to the browser viewport even when the page is scrolled - something like a fixed background image.
Relative positioning is used to offset an element from its position in the normal flow. The space that the element would normally take up in the normal flow will be left; elements around it will not be affected.

A good friend advised me of this tutorial (http://www.brainjar.com/css/positioning/). It's a pretty good run-down of CSS positioning. For a more generally comprehensive set of tutorials on CSS, you might try these (http://www.westciv.com/style_master/house/tutorials/index.html). For good information on floating elements (useful in lieu of absolute positioning for your type of design), try the Floatutorial (http://css.maxdesign.com.au/floatutorial/). Keep in mind, of course, that the best style sheet in the world will do you little good with a poorly constructed (X)HTML document, so mind your syntax (http://validator.w3.org/) and semantics. You should also choose a document type definition (http://www.w3schools.com/tags/tag_doctype.asp), stick to it, and place an appropriate doctype declaration at the beginning of your source: this will prevent IE from lapsing into its quirks mode and will avoid the resultant inconsistencies in rendering a lot of CSS, like the box model (http://www.w3.org/TR/2004/CR-CSS21-20040225/box.html).

Also, a quick note about your header image: it's rather wide and doesn't actually fit on screen at a resolution of 1024 x 768, which is one of the most common screen resolutions, resulting in a horizontal scroll bar. You may want to consider making it a bit less wide.

Cheers!

I'm glad y'all have found a fix to the problem! Happytin, I hope I didn't offend you in my post--I just wanted to alert you to any problems ASAP so the site would run smoothly.

And I just learned more about CSS in the last 60 seconds than I have in the last year. Awesomeness.

Ooohh....I get the idea it would have been a good thing to actually learn how CSS works before launching myself into it. Thanks for all those links.

Serves me right for stealing from various sites and bunging it all together I suppose.

Onward and backward to actually learn how to use this thing called the internet! Your help has been wonderful, above what I expected, and much appreciated.

I'll be back probably....with more questions...after I've read all of this!

Yeah, learning helps, I hear. Stealing is bad, mmkay?

Good luck with the reading; I imagine that we'll be around if you have any questions.