hey all!

I'm aware that Internet Explorer and Cascading Style Sheets don't like to play nice together, and I actually know a decent amount about html and CSS writing, but still, I am stumped on this one.

I've received word from quite a few IE users that my site just "doesn't look right." I opened my site with IE for the first time, and needless to say, I was very unpleasantly surprised. The problem really is only my front (home) page. It's like the word wrap is "turned off" or something, but on my homepage only. The text pays no attention to borders, and proceeds to go off into infinity, instead of assuming paragraph form. Strangely enough, all the other pages look decent in IE though. I've spent hours tweaking things trying to fix it, but nothing has worked.

This error only occurs with IE. Firefox and Safari both display the site perfectly. I know IE is far behind as far as how it reads CSS, but this is just crazy. Any suggestions would be greatly appreciated!

The site is RidiculousWeb.com, and once again, it's only the homepage that is really messed up.

NOTE: I'm using Joomla, if that makes a difference.

thanks in advance,
Johnny

__________________
Ridiculous!Web

Yellow Aeroplane Web Solutions

Someone better at the tech stuff will show up soon, I expect.

IE may not be the only culprit—maybe. But it is a part of it no doubt since you are having the problem only in IE.

It could be Frontpage's work--I can't find it right now but I thought I saw a reference to it somewhere. If you are using it, when you get some contorted formatting (as Frontpage can produce) and the like in the works, IE has a lot of trouble it wouldn't have otherwise.

Also, I notice that you are using xhtml strict. At the same time a lot of the style is tables. That makes it hard for ie, also. There may be a coding issue somewhere (xhtml gets easily thrown off by a capital letter somewhere or almost anything else), but it could be that if you want to keep styling with tables you may need to stipulate transitional instead of strict to allow IE to adjust for some quirks and avoid such problems.

I probably know less than you but thought I would share my thoughts for what they are worth.

__________________
Good Success!
James
Douglas County Master Gardeners
"We don't always get what we want, but we always get what we expect."

thanks for the input James!

What you said is pretty much dead-accurate... but still doesn't fix my poor, sick, and scared little home page


Anywho... from the research I've done, the problem is due to the arrogant, conglomerated, utterly evil empire that calls themselves Microsoft. Billy [Gates, that is] and his pals have essentially given the W3C (World Wide Web Consortium), the organization that maintains coding standards, a big cyber middle-finger when it comes to how their browser interprets CSS. While essentially all the other browsers (Firefox, Safari, etc..) follow the strictly mandated guidelines for interpreting CSS, IE does not, more or less just because Microsoft doesn't really agree with the W3C standards, nor do they want to reprogram their crappy (my opinion anyway) browser.

Although their newer versions work better, certain triggers (how you mentioned a misplaced capital letter) will ruin the look of an entire page... especially if you aren't an expert code-writer dude, which I certainly am not.

Once again, thanks for the input! If any brilliant Babblers out there can shed some more light on this I'd be extremely thankful!


cheers,
Johnny

__________________
Ridiculous!Web

Yellow Aeroplane Web Solutions

Hi Johnny, I've seen this problem before on websites with a CSS property called 'line-height'. I noticed in this CSS file on your website, templates/system/css/system.css, that it was specified in some places.

Unfortunately, using this property is very unstable in IE, especially if you place it in the body of your website. It can cause sections of text to look cutoff and messed up. What I would recommend is to find all instances of line-height and remove them and see how the site looks after that.

If that doesn't work, I shall dig s'more.

__________________
Jeremy Johnson
Discover Your Destiny
Create Your Legacy
Drjerm

thanks a lot! Eliminating line-height helped a lot, aesthetically at least. It still didn't fix the non-existent word wrap, but instead of wasting more hours looking over CSS, I just decided to take the easy way out and insert all my text into 1x1 tables of predefined width (638 px, to be exact). I know it's kind of primitive, but it works!

once again, thanks for the advice!

__________________
Ridiculous!Web

Yellow Aeroplane Web Solutions

Not unreasonable. We all do what we know how to do often, even though we know we would rather do otherwise if we just knew how. I sometimes even go back and use MS Paint to do something when I can't get my graphics program to do what I want, even though I know I could do it better if I could just get the better tool to work.

If I understand what you are saying in this case, the solution is simple with CSS— in fact it is almost the same as what you did with the table. You didn't turn on a wrap there either, just set a width. That is what you do with CSS. Just identify the tag you want to "wrap," either with the tag (even "body"), or most often with a class or id name, and set its width (ex., "width: 200px"). The text will then "wrap" within that width.

__________________
Good Success!
James
Douglas County Master Gardeners
"We don't always get what we want, but we always get what we expect."