I deal with stylesheets every day and frequently have to find ways around the oddities and quirks between both Firefox and Internet Explorer. One quirk that’s been bothering me for quite some time now has surfaced again, and I figured out a “fix” for the issue.

The problem: When I have a <DIV> tag initiating a content section and it is immediately followed by an <H1> tag, it does something funky. The <DIV> tag pushes itself down in the layout about 18 pixels or so depending upon the size of your H1 font.

Allow me to illustrate:

What you see here is Firefox 2.003 (left) and Internet Explorer 6.02 (right) with the arrows indicating where both browsers are interpreting where my div tag “begins.” As far as code structure is concerned, I’ve got a small nested div setup under the header (the blue bar)… like so:

CONTENT
–left column (floats)
–center column (static)
–right column (floats)
/CONTENT

That shadow is a background element of each of the nested div tags and is supposed to line up. However, throwing that H1 tag into the center column div throws everything off. The H1 tag (along with all other heading tags) have a margin-top value—I’m not sure what it is, and I don’t really care—all I know, though, is that it is forcing the center column div tag to start LOWER than it really ought to.

So I tried something out—I added a line-break tag after the start of the center column div tag, but that produced not-so-desirable results:

The arrows show that both IE and Firefox cannot seem to agree on just how much space to give a line break. While this did solve the problem of moving my div tag down, it posed another problem; therefore there’s got to be another solution out there.

So I gave this a try—instead of putting the “fix” in the HTML, I tried adding a padding-top value in my center column of 1 pixel. Which produced the near-desired result:

Both browsers are relatively matched up, but there is a three pixel difference between Firefox and IE. While that may be sweating the small stuff, that kind of variance is what can make creating more complicated layouts more difficult than they need to be.

Anyway, I hope that this little discovery is helpful to others that are experiencing div placement quirks with Internet Explorer and Firefox.

Filed under: CSS, HTML, XML / XHTML
No Comments

For You by Michael Miles

Filed under: Music, XML / XHTML
No Comments

As if there wasn’t enough out there for me to get caught up on—XML, XHTML, AJAX, SOAP, etc. Now there is a new way of handling and presenting forms coming down the pipe called XForms. According to Wikipedia,

“XForms was designed to be the next generation of HTML / XHTML forms, but is generic enough that it can also be used in a standalone manner to describe any user interface, and even perform simple and common data manipulation tasks.”

So that implies universal form support for any application that supports XML—the ability to create forms and use them universally.

W3 has an overview on some of the parameters and the basic usage of XForms, but by no means is a comprehensive tutorial. What this means, is that down the road us old-school HTML developers are going to have to learn a whole new way of doing HTML and form handling in general.

Supposedly Mozilla will be supporting XForms sometime in August with some sort of patch or new base installation. I’m curious as to how long it’ll take Microsoft to catch on and add support in Internet Explorer for XForms. Unlikely, I’m sure. Our luck we’ll have to create multiple variations to accommodate browser differences.

This certainly looks like a viable way to go with form handling—universal forms that can be formatted with stylesheets (of course, which can be easily varied depending upon the outputting application). Seems like it won’t be long before HTML becomes a veritable thing of the past and the dominant method of formatting becomes a combination of stylesheets and some XHTML tags here and there.

Filed under: HTML, XML / XHTML, \\\ ETC ///
3 Comments

Google seems to be expanding the usage of XMLHttpRequest technology to their search capability in the form of Google Suggest. Very interesting technology.

Filed under: XML / XHTML
No Comments

This is just for my own reference so I don’t lose track of it. You might find value in it if you develop with PHP/MySQL and Flash.

Access MySQL information with PHP & Flash:

http://actionscript-toolbox.com/samplemx_php.php

Filed under: PHP, XML / XHTML
No Comments

I’ve been looking for options for a stock ticker for an intranet page we’re developing here and the current feed that’s available to us right now is very limiting—we’re basically forced to accept a feed with certain dimensions, color scheme and a nasty “logo” to boot.

So my first reaction… “AGH, there’s gotta be someone out there doing an XML/RSS type of stock info feed out there”.

I found a posting on someone’s blog about how they’ve developed an XML result by simply querying Yahoo. While the gentleman didn’t share his code with the world, I thought I would at least share the URL string to use when querying Yahoo. Insert the ticker symbol where it’s noted in bold:

http://finance.yahoo.com/d/quotes.csv?s=UNH&f=sl1d1t1c1ohgv&e=.csv

With the above example, here is what is contained in the .csv file that it dynamically gives me:

“UNH”,51.87,”7/12/2005″,”2:40pm”,-0.56,52.53,52.90,51.75,4787200

a simple comma-delimited file with important stock information. It provides (in this order) symbol, last trade amount, day of last trade, time of last trade, change (plus or minus), opening value, day’s high, day’s low, and what I presume to be volume.

My next goal is to see how I can take that information and make my own xml file and/or parse it with flash to create a stock ticker that’s a bit more flexible to work with.

Anyway, thought I’d pass on that tidbit of information.

Filed under: Actionscript, JavaScript, PHP, XML / XHTML
No Comments

Okay… now I’m starting to tread into dangerous development waters… Isaac piqued my curiosity in what’s beed dubbed AJAX. AJAX stands for Asynchronous JavaScript and XML, a term describing a web development technique for creating interactive web applications, combining the power of XML, JavaScript, and HTML/XHTML/CSS, along with your run-of-the-mill server-side scripting like PHP or ASP.

I found an okay primer on using XMLHttpRequest, but it made quite a few assumptions and didn’t provide enough explanations as to what was what and why they did it or why it worked.

Anyone have any great intro/primer web resources out there on AJAX and related XMLHttpRequest resources? I’ve decided that this is a new frontier that I’d like to venture off into and become more in tune with.

Related Links:
A Simpler AJAX Path

Filed under: JavaScript, PHP, Uncategorized, XML / XHTML
No Comments

So I’ve been using Firefox/Mozilla pretty zealously and only use IE when I have to—simply because I hate using the browser now. But now I am totally sold on Firefox for one simple tool that I didn’t realize existed until now…

Live Bookmarks

When you browse to a blog (or even any website) that has an RSS feed of some sort, a little orange icon (in Firefox) appears in the bottom right corner of my browser and invites me to add that site as a live bookmark to my bookmarks. If I click it, it gives me various RSS options and then where to keep my bookmark stored at.

Here’s the cool part… if I click through my bookmarks and get to that live bookmark, it gives me the last few posts from that RSS feed and allows me to quickly see at a glance if there are any new posts. If there are, I can get to it in a SINGLE CLICK without having to type in anything or whatever.

PURE GENIOUS.

If you haven’t switched to Mozilla or Firefox, what are you waiting for?

Filed under: XML / XHTML, \\\ ETC ///
1 Comment