Displays in FF, messed up in IE 6&7

Joined: 11/28/2008

I'm at my wits end....

The upcoming events show up perfectly in FF but very messed up in IE
(upcoming events section)

http://www.panehpraise.com

Joined: 11/28/2008
Continued

...I hit send too soon....

In IE, the titles are moving to the next line. I've tried shorter titles but that was not the issue.

This the the HTML code from IE

Here is the section from the PHP file for that page:

Upcoming Events

<?php
ec3_get_events
(
                     
'5',
                     
'<span class="calcontainer">
<span class="calmonthdate"> <span class="calmonth">
%MONTH%</span> <span class="caldate">%DATE%</span>
</span> <span class="calevent" ><a
href="%LINK%">%TITLE%</a></span> <span
class="calsub"></span> </span><div
style="clear:both;"> </div>'
,
                     
'',
             
'j',
             
'',
             
'M'
             
);
?>

<?php
echo get_category_link(21);
?>

" rel="nofollow">Read about more events
G&G Podcast Host
Matt Farina's picture
Joined: 06/01/2006
IE specific CSS or a Reset

CSS is different in all browsers. They throw in their own defaults and IE just does some things wackie.

You might consider a CSS reset or IE specific stylesheet to reformat the IE stuff to work.

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com

Joined: 11/28/2008
I'm not that familiar with

I'm not that familiar with CSS ... wouild you mind being more specific? In the interim I will google CSS reset and IE specific code to see what I come up with.

Thanks

G&G Podcast Host
Matt Farina's picture
Joined: 06/01/2006
Reset and Conditional Includes

Every browser has it's own default settings. IE adds a margin of one size to something, by default, and FF adds a different value to the same place. There is no spec or standard everyone follows for this.

A CSS Reset sets all of these things to the same thing and overrides those default settings.

Yahoo has one at http://developer.yahoo.com/yui/reset/

Eric Meyer has a great one at http://meyerweb.com/eric/tools/css/reset/index.html

Conditional includes allow you to include something in IE and other browsers don't read them. For example, on G&G.com we have one that reads

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/geeksandgod09/fix-ie6.css" />
<![endif]-->

This is an if statement in commented code. IE reads it and acts while other browsers see it as a comment and ignore this. This is in the head right after our regular css file that works for compliant browsers and fixes IE 6 where needed.

More detail on this at http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com