1
zimmi88
Templates Showing Differently In IE/FF
  • 2005/11/27 4:39

  • zimmi88

  • Just popping in

  • Posts: 57

  • Since: 2005/3/9 1


Here's the information as requested by the XOOPS Moderators...
XOOPS Version:
XOOPS 2.2.3 Final

Module Name/Version:
Profile/Private Messaging

PHP Version:
5.0.4

MySQL Version:
4.1.14

Web Server Software (Apache/IIS/Other):
Apache/2.0.54 (Fedora)

Operating System:
Linux

Theme you are using:
Personal Theme

Custom template: (Yes/No)
Yes

PHP Debug Messages:
N/A

MySQL Debug Messages:
N/A

Smarty Debug Messages:
N/A

A full description of the issue:
I recently changed the templates (and a couple of the profile php files) of the Profile and Private Messaging system to make a new GUI for the modules. The idea is that the tabs are supposed to be right next to the rest of the page's content on the right side. I tried using the tag [div align="right"] (brackets supplemented for arrows) to do this. It works fine in Firefox, but in Internet Explorer, there is a huge gap between the tabs and the rest of the content. I've tried using tables to try and change this, but that's failed too. What should I do to achieve the look I have in Firefox in Internet Explorer as well?

The following screenshots are examples from the Private Messaging module's Inbox.

Firefox Screenshot
Resized Image

Internet Explorer Screenshot:
Resized Image

The basic structure for the Template is below:
[div align="right"]
[{if $op == "out"}]
DRAW OUT ALL FOUR TABS W/ EFFECTS FOR onmouseover() AND onmouseout()
[{elseif $op == "save"}]
SAME AS PREVIOUS
[{elseif $op == "in"}]
SAME AS PREVIOUS
[/div]
REST OF PRIVATE MESSAGING TEMPLATE CONTENT HAS NOT BEEN EDITED


Thank you very much in advance for any help you can give to this situation. I look forward to, with your help, completing these changes and releasing them for the benefit of the XOOPS community.

-zimmi88 =)
"Need coffee, keep away..."

2
LazyBadger
Re: Templates Showing Differently In IE/FF

(Crying)
You'll never get identical view in FF and in w3c-ignorant IE... you can reach some level with IE6, but IE5 and IE5.5 is nightmare of web-designders

Offer:
Can you send me this part of code and CSS (?)(from top to tables) for playing? Can to guarantee nothing, but I'll try
Quis custodiet ipsos custodes?

Webmaster of
XOOPS2.RU
XOOPS Modules Proving Ground
XOOPS Themes Exhibition

3
zimmi88
Re: Templates Showing Differently In IE/FF
  • 2005/11/27 5:56

  • zimmi88

  • Just popping in

  • Posts: 57

  • Since: 2005/3/9 1


Thanks very much for your offer. I put together a zip file with all the editations I've made. I'm sending you via PM the URL to download it at. Thanks again!
-zimmi88 =)

EDIT:
Here, also, is the little snippet for the tabs and my CSS info...

<div align="right">
    <{if 
$op == "out"}>
<
a href="viewpmsg.php?op=in" onmouseover="document.inbox_img.src='images/inbox_on.png'" onmouseout="document.inbox_img.src='images/inbox_off.png'"><img name="inbox_img" src="images/inbox_off.png"></a><img name="outbox_img" src="images/outbox_on.png"><a href="viewpmsg.php?op=save" onmouseover="document.saved_img.src='images/saved_on.png'" onmouseout="document.saved_img.src='images/saved_off.png'"><img name="saved_img" src="images/saved_off.png"></a><a href="#" onmouseover="document.sendnew_img.src='images/sendnew_on.png'" onmouseout="document.sendnew_img.src='images/sendnew_off.png'" onclick="javascript:openWithSelfMain('****/modules/pm/pmlite.php?send=1','pmlite',550,450)"><img name="sendnew_img" src="images/sendnew_off.png"></a>
    <{elseif 
$op == "save"}>
<
a href="viewpmsg.php?op=in" onmouseover="document.inbox_img.src='images/inbox_on.png'" onmouseout="document.inbox_img.src='images/inbox_off.png'"><img name="inbox_img" src="images/inbox_off.png"></a><a href="viewpmsg.php?op=out" onmouseover="document.outbox_img.src='images/outbox_on.png'" onmouseout="document.outbox_img.src='images/outbox_off.png'"><img name="outbox_img" src="images/outbox_off.png"></a><img name="saved_img" src="images/saved_on.png"><a href="#" onmouseover="document.sendnew_img.src='images/sendnew_on.png'" onmouseout="document.sendnew_img.src='images/sendnew_off.png'" onclick="javascript:openWithSelfMain('****/modules/pm/pmlite.php?send=1','pmlite',550,450)"><img name="sendnew_img" src="images/sendnew_off.png"></a>
    <{elseif 
$op == "in"}>
<
img name="inbox_img" src="images/inbox_on.png"><a href="viewpmsg.php?op=out" onmouseover="document.outbox_img.src='images/outbox_on.png'" onmouseout="document.outbox_img.src='images/outbox_off.png'"><img name="outbox_img" src="images/outbox_off.png"></a><a href="viewpmsg.php?op=save" onmouseover="document.saved_img.src='images/saved_on.png'" onmouseout="document.saved_img.src='images/saved_off.png'"><img name="saved_img" src="images/saved_off.png"></a><a href="#" onmouseover="document.sendnew_img.src='images/sendnew_on.png'" onmouseout="document.sendnew_img.src='images/sendnew_off.png'" onclick="javascript:openWithSelfMain('****/modules/pm/pmlite.php?send=1','pmlite',550,450)"><img name="sendnew_img" src="images/sendnew_off.png"></a>
    <{/if}>
</
div>


body {colorblackbackgroundwhitemargin0padding0;}

table {width100%; margin5padding5font-sizesmall}
table td {padding0border-width0vertical-aligntopfont-familyVerdanaArialHelveticasans-serif;}

{color#666666; text-decoration: none; font-weight: bold; background-color: transparent;}
a:hover {color#ff0000;}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul margin2pxpadding2px; list-styledecimal insidetext-alignleft;}
li margin-left2px; list-stylesquare insidecolor#2F5376}

input.formButton {}

.
item {border1px solid #cccccc;}
.itemHead {padding3pxbackground-color#2F5376; color: #FFFFFF;}
.itemInfo {text-alignrightpadding3pxbackground-color#efefef}
.itemTitle a {font-size130%; font-weightboldfont-variantsmall-capscolor#ffffff; background-color: transparent;}
.itemPoster {font-size90%; font-style:italic;}
.
itemPostDate {font-size90%; font-style:italic;}
.
itemStats {font-size90%; font-style:italic;}
.
itemBody {padding-left5px;}
.
itemText {margin-top5pxmargin-bottom5pxline-height1.5em;}
.
itemText:first-letter {font-size133%; font-weightbold;}
.
itemFoot {text-alignrightpadding3pxbackground-color#efefef}
.itemAdminLink {font-size90%;}
.
itemPermaLink {font-size90%;}


td#PM_folder_tab {text-align:right;}
td#PM_tabshell_left_on {text-align:right;}
td#PM_tabshell_fill_on {background-image: url(http://****/modules/pm/images/shellfill_on.png); font-size:12px; padding:0px; text-align:center; margin-left:0px;}

div#PROFILE_edit_tab {width:96%; text-align:right; font-size:2px;}

td#TAB_emptycell {font-size:2px; padding: 0px 0px 0px 0px;}
td#TAB_filledcell {font-size:2px; padding: 0px 0px 0px 0px; text-align:right;}

td#STORYBLOCK_left {text-align:left; text-color:#FFFFFF; width:330px; height:300px; background-image: url(http://****/storyblock_files/story_template.png);}
td#STORYBLOCK_right {text-align:right; text-color:#FFFFFF; width:150px; height:300px; background-image: url(http://****/storyblock_files/sidebar.png);}


th {background-color#2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;}

td#headerlogo {background-image: url(star_tile.gif); width: 270px; font-size:2px; padding: 0px 0px 0px 0px;}
td#headerbanner {background-image: url(star_tile.gif); vertical-align: middle; text-align: center;}
td#headerbar {background-image: url(hbar_top.gif);}
td#headermodlogo {background-image: url(star_tile.gif); vertical-align: bottom; text-align: right; font-size:2px; padding: 0px 0px 0px 0px;}

td#leftcol_header {background-color: #E60000; font-size: 2px; vertical-align: bottom; width: 15%;}
td#mynav_topcorners {background-color: #E60000; font-size: 2px; padding: 0px 0px 0px 0px; width: 30px;}
td#mynav_top {background-image: url(mynav_top.png); font-size:2px; padding: 0px 0px 0px 0px;}
td#mynav_left {background-image: url(mynav_tileleft.png); font-size:2px; padding: 0px 0px 0px 0px; width: 30px;}
td#mynav {background-image: url(mynav_bg.png); padding: 0px 0px 0px 0px; color:#FFFFFF;}
td#mynav_right {background-image: url(mynav_tileright.png); font-size:2px; padding: 0px 0px 0px 0px; width: 30px;}
td#quikhelp {background-image: url(mynav_bg.png); text-align: right; padding: 0px 0px 0px 0px; font-size: 2px;}
td#rightcol_header {background-color: #E60000; font-size: 2px; text-align: right; vertical-align: bottom; width: 15%;}

td#blockheaderlogo {font-size:2px;}

td#leftcolumn {width: 15%; font-size:12px;}
td#leftcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}
td#leftcolumn div.blockContent {line-height: 120%; line-height: 120%;}


td#centercolumn {font-size: 12px; border-left: 3px solid #E60000; border-right: 3px solid #E60000;}

td#centercolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#centerCcolumn {padding: 0px 3px 1px 3px;}
td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px;  margin-left: 0px;}
td#centerCcolumn div.blockContent {margin-right: 0px;  margin-left: 0px; margin-bottom: 0px; line-height: 120%;}

td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerLcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}
td#centerLcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 3px; margin-right: 2px; margin-bottom: 2px; line-height: 120%;}

td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerRcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}
td#centerRcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;}

div#content {text-align: left; padding: 8px;}

td#rightcolumn {width: 15%; font-size:12px;}
td#rightcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#rightcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}
td#rightcolumn div.blockContent {line-height: 120%;}

td#homepage_topbox_gradient {width: 60px; background-image: url(homepage_topbox_gradient.png);}
td#homepage_topbox_headers {background-image: url(bigbg.png);}

tr#footerbar {background-image: url(hbar_bottom.gif); height: 23px;}

td#logohrbar {text-align: left; background-image: url(hbar_logo.gif);}
td#logohrlogo {text-align: right; background-image: url(hbar_logo.gif);}

td#mainmenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px;}
td#mainmenu a:hover {background-color: #ffffff;}
td#mainmenu a.menuTop {padding-left: 3px; border-top: 1px solid silver; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#mainmenu a.menuMain {padding-left: 3px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#mainmenu a.menuSub {padding-left: 9px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}

td#usermenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#usermenu a:hover {background-color: #ffffff;}
td#usermenu a.menuTop {border-top: 1px solid silver;}
td#usermenu a.highlight {background-color: #fcc;}


/* color -- dropdown menu for Forum */
div.dropdown adiv.dropdown .menubar a{
    
color:#FFF;
}

div.dropdown .menudiv.dropdown .menubardiv.dropdown .itemdiv.dropdown .separator{
    
background-color#436792; /* same color set as in your theme/style.ss .th{} is recommended */
    
color:#FFF;
}

div.dropdown .separator{
    
border1px inset #e0e0e0;
}

div.dropdown .menu a:hoverdiv.dropdown .userbar a:hover{
    
color#333;
}
/* color - end */


.outer {border1px solid silver;}
.
head {background-color#c2cdd6; padding: 5px; font-weight: bold;}
.even {background-color#dee3e7; padding: 5px;}
.odd {background-color#E9E9E9; padding: 5px;}
.foot {background-color#c2cdd6; padding: 5px; font-weight: bold;}
tr.even td {background-color#dee3e7; padding: 5px;}
tr.odd td {background-color#E9E9E9; padding: 5px;}

div.errorMsg background-color#FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.confirmMsg background-color#DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg background-color #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;}

div.xoopsCode background#FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
div.xoopsQuote background#FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}


.comTitle {font-weightboldmargin-bottom2px;}
.
comText {padding2px;}
.
comUserStat {font-size10pxcolor#2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weightnormal;}
.
comUserStatus {margin-left2pxmargin-top10pxcolor#2F5376; font-weight:bold; font-size: 10px;}
.comUserRank {margin2px;}
.
comUserRankText {font-size10px;font-weight:bold;}
.
comUserRankImg {border0;}
.
comUserName {}
.
comUserImg {margin2px;}
.
comDate {font-weightnormalfont-styleitalicfont-sizesmaller}
.
comDateCaption {font-weightboldfont-stylenormal;}
"Need coffee, keep away..."

4
shank
Re: Templates Showing Differently In IE/FF
  • 2005/12/4 21:04

  • shank

  • Not too shy to talk

  • Posts: 144

  • Since: 2004/8/17


The problem is that IE and FF handle DIV taggs differently.

If you haven't fixed this yet send me a copy of your theme folder and I'll take a look at it.
s l s h a n k l e @ b e l l s o u t h . n e t

5
zimmi88
Re: Templates Showing Differently In IE/FF
  • 2005/12/6 4:59

  • zimmi88

  • Just popping in

  • Posts: 57

  • Since: 2005/3/9 1


Thanks very much for the offer. I definetly could use the help.

I recently discovered too that the two browsers handle the div tag differently. I guess the deal is that IE automatically for some reason adds a break after the div content.

So... I've tried putting together some javascript that detects the browser and gives out slightly different content depending on what browser is being used. It works okay, but there are some bugs with it. The order of the tabs switch around between Firefox and IE, the avatar page is a little bugged in IE, and I have no clue how to fix the bug in the pm_readpmsg template, seeing there are no div tags, but, rather, it's a table.

Images:

pm_readpmsg Page in Firefox and IE, respectivly:
<a href="http://img202.imageshack.us/my.php?image=ffreadpmsgscnsht4xp.gif" target="_blank"><img src="http://img202.imageshack.us/img202/3029/ffreadpmsgscnsht4xp.th.gif" border="0" /></a>
<a href="http://img202.imageshack.us/my.php?image=iereadpmsgscnsht7fx.gif" target="_blank"><img src="http://img202.imageshack.us/img202/539/iereadpmsgscnsht7fx.th.gif" border="0" /></a>

Avatar Page in Firefox and IE, respectivly:
<a href="http://img202.imageshack.us/my.php?image=ffprofileavatarscnsht1zt.gif" target="_blank"><img src="http://img202.imageshack.us/img202/9841/ffprofileavatarscnsht1zt.th.gif" border="0" /></a>
<a href="http://img202.imageshack.us/my.php?image=ieprofileavatarscnsht4gq.gif" target="_blank"><img src="http://img202.imageshack.us/img202/2290/ieprofileavatarscnsht4gq.th.gif" border="0" /></a>


Thanks very much again for offering to help. I'll send you a PM with the URL for the files.
-zimmi88 =)
"Need coffee, keep away..."

6
incama
Re: Templates Showing Differently In IE/FF
  • 2005/12/6 5:57

  • incama

  • Friend of XOOPS

  • Posts: 513

  • Since: 2003/10/24


Quote:

shank wrote:
The problem is that IE and FF handle DIV taggs differently.

If you haven't fixed this yet send me a copy of your theme folder and I'll take a look at it.


No they don't, the mayor problem I know of is that they both render the boxmodel differently, (and a few other small things which are not that major)
Webdesign
Sitting Ducks?!
I hate politics, give me a stylie instead...

7
Jharis
Re: Templates Showing Differently In IE/FF
  • 2005/12/8 23:07

  • Jharis

  • Just can't stay away

  • Posts: 488

  • Since: 2005/2/13


Guys,
I have a problem with IE too, and need to resolve since 99% of my users will use IE. To clarify... for work and only IE is allowed!

I am using the defualt 2.2.3 finale theme.

SBE Chapter 38

In FF the main menu doesn't have boxes around each menu item, but in IE it does. What can I do to get the boxes to go away viewing in IE?


don (el paso)
motto - green chili for everything!

8
Jharis
Re: Templates Showing Differently In IE/FF
  • 2005/12/9 0:00

  • Jharis

  • Just can't stay away

  • Posts: 488

  • Since: 2005/2/13


bump?

don (el paso)
motto - green chili for everything!

9
coopersita
Re: Templates Showing Differently In IE/FF

jharis,

In your css you have
td#mainmenu a {color: #676767;background-color: transparent; display: block; margin: 0; padding: 2px;border: 1px solid transparent;text-decoration: none;}


Something tells me that IE is adding color to that border you have as transparent.

Try taking away that border.

10
Jharis
Re: Templates Showing Differently In IE/FF
  • 2005/12/9 6:16

  • Jharis

  • Just can't stay away

  • Posts: 488

  • Since: 2005/2/13


I'll give it a whirl just a bit later and let you know how it worked.

thanks.


don (el paso)
motto - green chili for everything!

Login

Who's Online

229 user(s) are online (127 user(s) are browsing Support Forums)


Members: 0


Guests: 229


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: May 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits