PDA

View Full Version : Question about IE and Firefox

sdawkins
08-19-2006, 04:17 PM
Can anyone give me a suggestion on how to find out why something works correct in IE but not Firefox? I am sure I have an extra div or something somewhere....

Working on this http://www.momapproved.org

IE it is close but didn't know if there is anyplace to check the code. Sometimes things are right in front of you but you can't find it.


Thanks,

Sharon
djbaxter
08-19-2006, 05:40 PM
What is it specifically that you want to look different in IE?

There are differences in the way IE, Firefox, Netscape, Opera, etc., render web pages and that can't be avoided entirely.

Given that 80-85% plus of surfers still use IE, my general strategy is to design for IE and then make it look acceptable in Firefox and Opera (I don't bother with Netscape, Mozilla, or Safari, etc., because there aren't enough people using those to concern me).
WTM
08-19-2006, 06:14 PM
Tip #1 - try to define height, width and text-align for all div's and td's if possible
this may correct some of the problems...
djbaxter
08-19-2006, 06:28 PM
Also check that you have a DOCtype declaration - this will work for most purposes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Place this as the first line in the code, before the <head> tag.

Sometimes, I've found that DELETING height settings improves cross-browser compatibility, especially for tables.
sdawkins
08-19-2006, 07:06 PM
Hi and thanks for the suggestions.

In IE, the background color of the category table shows and the side panel, in Firefox, it just shows the page background. Also, breadcrumb is ok in IE but not in the right spot for Firefox.

I am writing down all the divs I need and going to go through try to set heights that look ok in both. Thing is, with Firefox, the categories are jumbled together by lines, but look great in IE, so if you adjust them, then there is too big a gap.

I do not think I have that line for doctype, will add it now!

Thanks,
Sharon
WTM
08-19-2006, 08:24 PM
Use this hack to fix categories:

http://www.esyndicat.com/forum/about5198.html

It will make them look the same in all browsers
sdawkins
08-19-2006, 09:38 PM
Use this hack to fix categories:

http://www.esyndicat.com/forum/about5198.html

It will make them look the same in all browsers


Whine....... this is what I get with that hack.....

http://www.esyndicat.com/forum/attachment.php?attachmentid=91&d=1156023434
WTM
08-19-2006, 10:11 PM
Can you post this section of code:
* Returns HTML code for categories display...
from your Layout.php file
sdawkins
08-19-2006, 10:17 PM
Sure :) Thanks.
/**
* Returns HTML code for categories display
*
* @param arr $aCategories categories to be displayed
* @param int $aCols number of columns
* @param int $aSubcategories number of subcategories to display
*
* @return str
*/
function print_categories($aCategories = '', $aCols = NUM_CATEG_COLS, $aSubcategories = NUM_SUBCATS)
{
global $gDirConfig;

if ($aCategories)
{
$out = '<div class="categories">';

$cnt = 0;
$row = 1;
foreach($aCategories as $key=>$value)
{
$aCols = ($value['num_cols']) ? $value['num_cols'] : $aCols;
$cnt++;
$cause = '';
if ($gDirConfig['num_links_display'])
{
$cause = ' ('.(int)$value['num_links'].')';
}

$crossed = $value['crossed'] ? '@' : '';

$url = $gDirConfig['base'].$gDirConfig['dir'];
if ($aSubcategories)
{
$subcats = '';
if ($value['subcategories'])
{
$subcats = "<div class=\"subcategories\">";
$cnt2 = 1;
foreach ($value['subcategories'] as $key2=>$value2)
{
$min = (count($value['subcategories']) < $aSubcategories) ? count($value['subcategories']) : $aSubcategories;
$divid = ($cnt2 < $min) ? ', ' : '';
$url2 = $gDirConfig['mod_rewrite'] ? $url.$value2['path'].'/' : $url."index.php?category={$value2['id']}";
$subcats .= "<a href=\"{$url2}\">{$value2['title']}</a>{$divid}";
$cnt2++;
if ($gDirConfig['num_cols_suffix'])
{
if ($cnt2 > $aSubcategories)
{
break;
}
}
}
if ($gDirConfig['num_cols_suffix'])
{
$subcats .= (count($value['subcategories']) > $aSubcategories) ? '...' : '';
}
$subcats .= "</div>";
}
}

$url .= $gDirConfig['mod_rewrite'] ? $value['path'].'/' : "index.php?category={$value['id']}";
if (!($cnt%$aCols) || ($cnt == count($aCategories)))
{
$out .= '<div class="last">';
$out .= "<div class=\"categ\"><a href=\"{$url}\">".htmlspecialchars($value['title']).$crossed."</a>{$cause}</div>";
$out .= $subcats;
$out .= '</div>';
if ($row < (count($aCategories) / (int)$aCols))
{
$out .= '<div class="divider"></div>';

}
$row++;
}
else
{
$out .= '<div class="col">';
$out .= "<div class=\"categ\"><a href=\"{$url}\">".htmlspecialchars($value['title']).$crossed."</a>{$cause}</div>";
$out .= $subcats;
$out .= '</div>';
}
}
$out .= '<div class="divider"></div>';
$out .= '</div>';


return $out;
}
}
WTM
08-19-2006, 10:37 PM
Try to replace with this:
/**
* Returns HTML code for categories display
*
* @param arr $aCategories categories to be displayed
* @param int $aCols number of columns
* @param int $aSubcategories number of subcategories to display
*
* @return str
*/
function print_categories($aCategories = '', $aCols = NUM_CATEG_COLS, $aSubcategories = NUM_SUBCATS)
{
global $gDirConfig;

if ($aCategories)
{
$out = '<div class="categories">';

$cnt = 0;
$row = 1;
foreach($aCategories as $key=>$value)
{
$aCols = ($value['num_cols']) ? $value['num_cols'] : $aCols;
$cnt++;
$cause = '';
if ($gDirConfig['num_links_display'])
{
$cause = ' &nbsp;('.(int)$value['num_links'].')';
}

$crossed = $value['crossed'] ? '@' : '';

$url = $gDirConfig['base'].$gDirConfig['dir'];
if ($aSubcategories)
{
$subcats = '';
if ($value['subcategories'])
{
$subcats = "<div class=\"subcategories\" style=\"padding-left: 15px;\">";
$cnt2 = 1;
foreach ($value['subcategories'] as $key2=>$value2)
{
$min = (count($value['subcategories']) < $aSubcategories) ? count($value['subcategories']) : $aSubcategories;
$divid = ($cnt2 < $min) ? ', ' : '';
$url2 = $gDirConfig['mod_rewrite'] ? $url.$value2['path'].'/' : $url."index.php?category={$value2['id']}";
$subcats .= "<a href=\"{$url2}\">{$value2['title']}</a>{$divid}";
$cnt2++;
if ($gDirConfig['num_cols_suffix'])
{
if ($cnt2 > $aSubcategories)
{
break;
}
}
}
if ($gDirConfig['num_cols_suffix'])
{
$subcats .= (count($value['subcategories']) > $aSubcategories) ? '...' : '';
}
$subcats .= "</div>";
}
}

$url .= $gDirConfig['mod_rewrite'] ? $value['path'].'/' : "index.php?category={$value['id']}";
if (!($cnt%$aCols) || ($cnt == count($aCategories)))
{
$out .= '<div class="last">';
$out .= "<div class=\"categ\"><a href=\"{$url}\">".htmlspecialchars($value['title']).$crossed."</a>{$cause}</div>";
$out .= $subcats;
$out .= '</div>';
if ($row < (count($aCategories) / (int)$aCols))
{
$out .= '<div class="divider"><img src="'.$gDirConfig['base'].$gDirConfig['dir'].$gDirConfig['templates'].$gDirConfig['tmpl'].'/img/sp.gif" height="1px" /></div>';
}
$row++;
}
else
{
$out .= '<div class="col">';
$out .= "<div class=\"categ\"><a href=\"{$url}\">".htmlspecialchars($value['title']).$crossed."</a>{$cause}</div>";
$out .= $subcats;
$out .= '</div>';
}
}
$out .= '<div class="divider"></div>';
$out .= '</div>';


return $out;
}
}
and this is styles I am using:div.categories
{
list-style-type: none;
padding: 0;
margin:0;
}
div.categories div.col
{
float: left;
height: auto;
text-align: left;
width: 50%;
}
div.categories div.last
{
float: left;
height: auto;
text-align: left;
width: 50%;
}
div.categories div.divider
{
clear: both;
height: 1px;
}
div.categories div.categ
{
line-height: 22px;
padding-left: 10px;
background-image: url('../img/bull.gif');
background-position: left;
background-repeat: no-repeat;
margin-left: 5px;
font-weight: bold;
}

Works with no errors for two columns
and make sure you have transparrent 1pxX1px image "sp.gif" in your img folder
sdawkins
08-19-2006, 11:19 PM
Thanks WTM, works perfectly :)