Because my foray into the web programming world has been quite recent, everything that I have done has been tested on Firefox and Safari. Unfortunately, this means that my front page layout is all warped when viewed with IE or MSN explorer and I have no earthly idea what CSS rules I have to add to fix this.
My website Far West China, has a top float with three different sections (headline, featured, and links). The middle section, my “Featured” section, is supposed to show three articles tiled vertically, which looks nice in Firefox but ends up severely overlapping in IE/MSN.
To top it all off, the three sections don’t match in height for some reason when viewed on IE and therefore some of my text in the “Links” section (on the top far right) actually extends beyond its div border.
Can somebody please help me fix my CSS or at the least direct me to some reading which would help teach me the idiosyncrasies of IE? Thanks!
Ok, I just went through and validated the site so that there should be no more error messages (there were 250). That was quite the learning experience.
When I look at it through IE7, the “Features” section of the front page shows all three of the items and their thumbnails jumbled together. In my mind it has to be something with the CSS, but I have no clue how IE reads it differently than Firefox (which renders it perfectly).
Ok, I finally fixed it (I think). For anybody who is interested, the trouble I had on my site, FarWestChina, came when I tried to add a “height” CSS property to my “Featured” div. For some reason it caused all of the articles which were tiled vertically to bunch together. Maybe the height property is demarcated and I didn’t know.