Monday, July 04, 2005

Dump IE, Switch to Firefox





Now, for the first time, due to recent "broken layout rendering", I say:

Dump IE (Internet Explorer), and switch to Firefox brower.




Firefox is free. There is no reason I know of to not use Firefox.

Why would anyone persist in using primitive, broken, unreliable IE?





More on broken layouts when viewing
a blog with Internet Explorer (IE).




I googled "sidebar images" and came up with information that leads me to believe that everyone should dump IE and switch to Firefox.

If you want an enjoyable web usage experience, switch to Firefox.

It's free.

It's easy.

It's better, faster, more accurate.


Here is a comment to questions posed in "Sidebar Images in Kubrick" at the WordPress support site (comment #11, 2-19-2005):

http://wordpress.org/support/topic/23810



[QUOTE]



Definitely grab Firefox, but for a good reason, not the old "anything but IE" argument ;)

The real reason to develop websites using Firefox (or Mozilla, or any Gecko-based browser) is for the standards support. It ain't perfect, but since all the popular browsers (include IE) are headed towards standards-compliance, it's definitely the way to go.

In other words, it's far easier (and generally way faster) to develop your site to work in Firefox (or equivalent) and *then* hack your way around IE's rendering bugs, than to code for IE (very non-standard in parts) and un-hack your way into the other browsers.

Besides that, having used Firefox since version 0.7 (when it was still known as Phoenix), and having some mighty XHTML/CSS geekiness within me, I can honestly recommend Firefox to everyone - except people like my sister who's school email system refuses to work with anything except IE.

[END QUOTE]



Blogger Forum offers this advice re sidebar shoved to bottom of blog main page:

http://bloggerforum.com/modules/xoopsfaq/
index.php?cat_id=8


[QUOTE]


My sidebar or content drops to page bottom

A possible fix for Broken Column Positioning



I apologize in advance for the long post-but this issue seems to come up a lot.

This post discusses the most COMMON problem that causes broken column positioning, but certainly not the ONLY reason it happens.


A very common problem to Bloggers seems to be either:


"My sidebar has dropped to the bottom of the page"

or

"My content has dropped to the bottom of the page".


Almost always the issue is only apparent in Internet Explorer.

And this is because of the incorrect way IE handles "objects that are too large for their container". Usually this involves images, which is what this post discusses, but it can be other things (forms, non-wrapping lines, tables etc).

What that means is basically if you have a main section with a defined width of 410px, but in a post you include a picture that has a width of 640px, IE will stretch the entire main column to fit --

-- which then causes the column not to have enough room to display next to the sidebar (or vice-versa), and the column drops to the bottom of the page.


A standards-compliant browser (such as Firefox) will allow the image to overlap it's containers border without enlarging the container, so all columns stay where they should.

The only fix that I've known or seen in action for this problem is to either
a. Resize the images to their proper width.
b. Enlarge the "containers" so they have more space

Solution (b) will work-but it also runs the risk of changing the design of the template you are using.

Solution (a) is preferred...but what if you have a lot of images and don't want to resize them all??What if you're on a team blog and while you understand that images can't be too large your other contributors are clueless?You can add a width to every image manually but that is time consuming and others may not be able to handle that.

Is there a way to AUTOMATICALLY resize any images on your blog so these problems won't be run into?

Well, CSS provides a solution with the max-width property.

Assign that to your images and they will be resized to fit automatically. WooHoo you say...but not so fast.

While Firefox/Mozilla understand this great feature...

Internet Explorer does NOT!


But after a bit of searching I finally found a solution that will enable image resizeing for both Firefox and Internet Explorer and I thought it might be helpful.


Here's the buggers that do it.



max-width:410px;
width: expression(this.width > 410 ? 410: true);


The first line is the CSS property which is understood by Firefox or a CSS2 compliant browser.

The second line is the fix for Internet Explorer - It definitely works for IE6 for windows and I believe IE5.5 as well. IE for MAC I don't know . Opera or some of the others I'm not sure either. Someone will have to try it out.

Anyway the first line should be self explanatory-the maximum width is set to 410pixels, you can change that to suit obviously.

The second uses some IE only crud which basically tests to see if something is over 410 px and if so set it to 410; You can change those to suit also.

Any compliant browser will understand the first line and safely ignore the second so this will work for both of the big 2 browsers.

Here's how you might use it.
For post image resizing most templates already have a setting for post images in the css-just add these lines to it.

Or add the complete CSS.

Here is an example:


.post img {
padding:4px;
border:1px solid #222;
max-width:410px;
width: expression(this.width > 410 ? 410: true);
}

Now what about the sidebar?

Most templates don't (I believe) have sidebar image css already.

Just add it like this.


#sidebar img{
max-width:220px;
width: expression(this.width > 220 ? 220: true);
}


These settings will automatically resize post images to a width of 410px and sidebar images to 220px.

Also note-this does nothing to the FILE SIZE of the image..it's still best for page loading purposes to make the file size(I'm talking kilobytes here) as small as possible to speed up downloads. These only handle display size. But if you have a need to auto resize images then this may be the way to go.


[END QUOTE]



I'm still working on this problem.

If anyone has any advice,

I'm all ears, er, all eyes.

Thanks.




[signed] Steven Streight aka Vaspers the Grate



:^(

8 comments:

SatishTalim said...

I dumped IE a long time back. Firefox is cool.

carrie said...

thanks. this is great. i agree, but didn't know all the facts.

steven edward streight said...

Hey Satish, the name I love to speak, in my pretend exotic speech, good to see you and hear you and read you here again friend.

Yes, Seth Godin is right on this one: the New Digital Divide, on one side is IE (newbie), on other side is Firefox (smart or long time web user).

But I don't like divisions any more than J. Krishnamurti did.

Divisions separate people groups and governments and individuals, thus: wars.

Firefox is cool, and I, as everyone knows for sure, ain't no (am not a) "buzz agent" type of paid word of mouther.

:^)

Getting More Extreme Every Moment

steven edward streight said...

carrie: get firefox

carrie said...

i have it, steven, thank you. ;-)

steven edward streight said...

Okay.

That means you'll usually view my sites with no problem.

Firefox is the only browser to use, as far as I'm concerned.

And I'm no browser warrior like some are. But I'm getting to be more so.

Lisa said...

I'm having a sidebar problem...in IE it displays right but in firefox, the sidebar doesn't extend to the bottom of the page. Help? How do I fix this? http://cakefun.blogspot.com If anyone knows could you email me.

steven edward streight said...

I recently started having the same problem with my sidebar not appearing to run all the way down the right column, but jammed up against post field, and then, when middle post field ends, wrapping over to the center and running down in double columns.

A double column sidebar.

Strange.

I'm hoping to fix it soon and will explain solution in a post.

So much to do.

Blogging is a full time job, if you want to be prolific and constantly improving.

:^)