dicuss the two column layout tutorial found here:

Two Column CSS Layout Tutorial

__________________

[ reply ]

Hi I have tried implemnting this into my website but it doesn't work. Is it because I have an image of 5px by 5px but I am however making the background repeat it's self.

[ reply ]

look at the final page and just change the widths / background images and you should get the results you want. if that doesnt work, since your probably changing widths and what not. Head on over to www.alistapart.com and search for faux columns article.

__________________

[ reply ]

OK I copied your code, and created the two files, index.html & twocol.css -- which I linked correctly. I see two issues; (1) the left column does not come out right color-wise. (2) I notice you want to use 2.gif as a background-image. Your css code causes a generic 2.gif file to appear in the bottom two divs. (3) The background-color "transparent" does not seem to function properly. (This is the first time I have tried using THAT color, lol.)

I want to make designs which are cross-browser compatible, allowing ONLY tiny misalignment issues the common man's eye won't detect. Any other positional or style issues I find, I beat my head on the desk (figuratively) until I find the tweak that makes it so.

I will continue to tweak on your ideas, because I am replacing a frameset website with top/left/main areas due to other FireFox-don't-get-it issues.

Note: I find that css codes I learn at W3Schools work flawlessly in Internet Explorer, and that Mozilla FireFox has a tendency to misinterpret these codes, causing unsightly problems many times. Meanwhile, my Norwegian pal Erik makes designs that look great in FireFox but that IE sometimes garbles. I am seeking the Holy Grail, the KeyCode, the Magic Wand of webdesign, that makes cross-browser issues predictable and therefore invisible (after I wave the Wand, that is). I have yet to learn what the prefixes are for "IE Only" or "Mozilla Only" for example, which allows two similar property/value settings to reside in the same selector.

[ reply ]

IE's box model is a little fudged when using floats.


My new approach is to use a wrapper div, set it at position:relative; then position other sections of the site accordingly. I could do a small writeup if you like. We could use the newer content.


In the mean time...

__________________

[ reply ]

Pat,
Thanks for your interest, but sorry to point out your code does not pass the test.
Looks ok in FireFox but awful in Internet Explorer: (attachments below)
NOTE I add this code to view divs...
Do you know where the Holy Grail / Key Code / Magic Wand I sopke of previously --^ can be found?

Attached Images

	article-code-FF.gif (30.7 KB, 9 views)
	article-code-IE.gif (38.4 KB, 10 views)

__________________

Link: Temporary home of JIM_ELL Web Design

[ reply ]

Alright, I had this SAME problem with a layout that I'd been creating. It shows up perfectly in IE, but in Firefox it doesn't change anything, it doesn't expand at all to match the other side. Any ideas?

[ reply ]

Well, it would help if you linked us to your project for examination.
We do not know what your layout looks like from your description,
nor can we view your coding to assist you.

__________________

Link: Temporary home of JIM_ELL Web Design

[ reply ]

Well it was worth a shot, but


Sryinex.com - Who?


I haven't even gotten to the footer yet.

[ reply ]

Well, it looks to me like you've smacked it into shape!

The only comment worthy of note is that Mozilla's Firefox doesn't show
the grey background-color of the [sublinks] section.

I like IE7. IE7 behaves. IE7 understands what the W3Schools teach.

__________________

Link: Temporary home of JIM_ELL Web Design

[ reply ]

Well see that's the issue, I need it to show correctly in Firefox and it won't. Could you please direct me on how to make it compliant?

[ reply ]

Safari and Firefox show it fine here.

__________________

[ reply ]

Nevermind, I fixed it.

Seems as if my footer code was causing it not to work, adding a clear: left; to footer css code made it all work dandy.

Thanks :0


EDIT: Well that was one problem fixed, now it expands correctly in IE and in Firefox if the left content area is expanded, but if the right column is longer than the left, the left won't expand to fit the right...interesting.

EDIT2: Fixed...lol.... changed clear:left to clear: both;

Sorry I'm a bit new to CSS.

[ reply ]