XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme stylesheets (CSS) help 
  4.  / Comment display in IE
Register
1
jbeard7
Comment display in IE

  • 2005/8/31 16:35

  • jbeard7

  • Just popping in

  • Posts: 6

  • Since: 2005/8/9 1


I'm trying to get my comments to display properly in IE. They look fine in Firefox. No matter what theme I use, the comments are always jumbled in IE.

Here is what they look like in IE - link

And here is Firefox - link

Here is my style.css. I'm using the simple_line theme right now.
le="color: #000000"><?php /* Á´ÈÌÀßÄê */ body {color: black; background: white; margin: 0; padding: 0;} table {width: 100%; margin: 5; padding: 5; font-size: 10px} table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;} /* Á´ÈÌŪ¤Ê¥ê¥ó¥¯¤ÎÀßÄê */ a {color: #111111; text-decoration: none; background-color: transparent;} a:hover {color: #000000;text-decoration: underline; background-color: transparent;} /* °ìÈÌ¥¿¥°¤ÎÀßÄê */ h1 {} h2 {} h3 {} h4 {} h5 {} /* ¥ê¥¹¥Èɽ¼¨¤ÎÀßÄê Ãæ±ûº¸±¦¤Î¥Ö¥í¥Ã¥¯¤Ê¤É¤Ç»ÈÍÑ */ ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} li { margin-left: 2px; list-style: square inside; color: #999999} input.formButton {} /* ºÇ¿·¥Ë¥å¡¼¥¹¤ÎÏÈ */ .item {border: 1px solid #BBBBBB;} /* ºÇ¿·¥Ë¥å¡¼¥¹¤Î¥¿¥¤¥È¥ë¥Ð¡¼ */ .itemHead {padding: 3px; background-color: #BBBBBB; color: #FFFFFF;} /* ºÇ¿·¥Ë¥å¡¼¥¹¤ÎÅê¹Æ¾ðÊóÍó */ .itemInfo {text-align: right; padding: 3px; background-color: #EFF4F8} /* ºÇ¿·¥Ë¥å¡¼¥¹¤Î¥¿¥¤¥È¥ë¤ÎÀßÄê */ .itemTitle a {font-size: 110%; font-weight: bold; font-variant: small-caps; color: #ffffff; background-color: transparent;} /* ºÇ¿·¥Ë¥å¡¼¥¹¤ÎÅê¹Æ¼Ô */ .itemPoster {font-size: 90%;} /* ºÇ¿·¥Ë¥å¡¼¥¹¤ÎÅê¹ÆÆü */ .itemPostDate {font-size: 90%;} /* ºÇ¿·¥Ë¥å¡¼¥¹¤Î¥¹¥Æ¡¼¥¿¥¹ */ .itemStats {font-size: 90%; font-style:italic;} /* ºÇ¿·¥Ë¥å¡¼¥¹¤Î¥³¥ó¥Æ¥ó¥ÄÉôʬ */ /*.itemBody {padding-left: 15px;} */ .itemBody {/*background-color: #ffffff;*/position: relative;margin-bottom: 10px;z-index: 0; padding: 5px;} .itemText {margin-top: 5px; margin-bottom: 5px; line-height: 120%; color: #222222;font-size:10px} /* ºÇ¿·¥Ë¥å¡¼¥¹¤Î1ʸ»úÌÜ */ .itemText:first-letter {font-size: 133%; font-weight: bold;} /* ºÇ¿·¥Ë¥å¡¼¥¹¤Î¥Õ¥Ã¥¿¡¼ */ .itemFoot {text-align: right; padding: 3px; background-color: #F3F3F3} .itemAdminLink {font-size: 90%;} .itemPermaLink {font-size: 90%;} th {background-color: #999999; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;} /*¥Ø¥Ã¥À¡¼¥Ö¥í¥Ã¥¯¤ÎÄêµÁ*/ td#headerleft {width: 65px; background-color: #FFFFFF;} td#headerlogo {width: 170px; height: 45px; background-color: #FFFFFF; vertical-align: top; text-align:left;} td#headerbanner {height: 45px; background-color: #FFFFFF;} td#headerbar1 {background-color: #FFFFFF; color: #111111;font-size: 8px; padding: 3px; text-align: left; vertical-align: top;} td#headerbar2 {height: 30px;color: #111111;font-size: 8px; padding: 0px; text-align: center; vertical-align: middle;border-top: 1px solid #CCCCCC;border-bottom: 1px solid #CCCCCC;border-left: 1px solid #CCCCCC;} td#headerbar3 {color: #111111;font-size: 8px; padding-left: 1px; text-align: left; vertical-align: middle;border-top: 1px solid #CCCCCC;border-bottom: 1px solid #CCCCCC;border-left: 1px solid #CCCCCC;} td#headerbar4 {width: 170px;border-top: 1px solid #CCCCCC;border-bottom: 1px solid #CCCCCC;border-left: 1px solid #CCCCCC;} /*º¸Â¦¥Ö¥í¥Ã¥¯°ìÈÖ³°Â¦¥»¥ë¤ÎÄêµÁ*/ td#leftcolumn {width: 170px; border-right: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; font-size:10px;background-color: #F2F2F2;} td#leftcolumn th {background-color: #DDDDDD; color: #000000; vertical-align: middle;} /*º¸Â¦¥Ö¥í¥Ã¥¯¥¿¥¤¥È¥ë*/ td#leftcolumn div.blockTitle {padding: 3px; background-color: #DDDDDD; color: #000000; border-bottom: 1px solid #B1B0BC; vertical-align:middle;} /*º¸Â¦¥Ö¥í¥Ã¥¯¥³¥ó¥Æ¥ó¥Ä*/ td#leftcolumn div.blockContent {padding: 2px 0px 2px 3px; line-height: 110%; padding-left: 15px;font-size:10px;} /* º¸Â¦¥Ö¥í¥Ã¥¯¡¡¥á¥¤¥ó¥á¥Ë¥å¡¼¤ÎÄêµÁ*/ td#mainmenu a {background-color: transparent; display: block; margin: 0; padding: 4px; border-bottom: 1px solid #cdcdcd;} td#mainmenu a:hover {background-color: #FFFFFF;} td#mainmenu a.menuTop {} td#mainmenu a.menuMain {border-bottom: 1px solid #cdcdcd;} td#mainmenu a.menuSub {padding-left: 15px; border-bottom: 1px solid #cdcdcd;} /*º¸Â¦¥Ö¥í¥Ã¥¯¡¡¥æ¡¼¥¶¡¼¥á¥Ë¥å¡¼¤ÎÄêµÁ*/ td#usermenu a {background-color: transparent; display: block; margin: 0; padding: 4px; border-bottom: 1px solid #cdcdcd;} td#usermenu a:hover {background-color: #FFFFFF;} td#usermenu a.menuTop {} td#usermenu a.highlight {background-color: #fcc;} /*±¦Â¦¥Ö¥í¥Ã¥¯¤ÎÄêµÁ*/ td#rightcolumn {width: 170px; border-right: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; font-size:10px;background-color: #F2F2F2;} td#rightcolumn th {background-color: #DDDDDD; color: #000000; vertical-align: middle;} td#rightcolumn div.blockTitle {padding: 3px; background-color: #DDDDDD; color: #000000; border-bottom: 1px solid #B1B0BC; vertical-align:middle;} td#rightcolumn div.blockContent {padding: 3px; line-height: 120%; padding-left: 15px;font-size:10px;} /*Ãæ±û¥Ö¥í¥Ã¥¯¤ÎÄêµÁ*/ td#centercolumn {font-size: 10px;} /* ¥Õ¥©¡¼¥é¥à¤Î¥¿¥¤¥È¥ë¥Ð¡¼Éôʬ */ td#centercolumn th {background-color: #BBBBBB; color: #FFFFFF; vertical-align: middle;} /*Ãæ±û¥»¥ó¥¿¡¼¥Ö¥í¥Ã¥¯¤ÎÄêµÁ*/ td#centerCcolumn {padding: 0px 3px 1px 3px;} td#centerCcolumn legend.blockTitle {padding: 3px; color: #111111; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;} td#centerCcolumn div.blockContent {padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom: 2px; line-height: 120%;} /*Ãæ±û¥Ö¥í¥Ã¥¯º¸¤ÎÄêµÁ*/ td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;} td#centerLcolumn legend.blockTitle {padding: 3px; color: #111111; font-weight: bold; margin-top: 0px;} td#centerLcolumn div.blockContent {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: #111111; font-weight: bold; margin-top: 0px;} td#centerRcolumn div.blockContent {padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;} div#content {text-align: left; padding: 8px; font-size:10px;} /*¥Õ¥Ã¥¿¡¼¥Ö¥í¥Ã¥¯¤ÎÄêµÁ*/ tr#footerbar {text-align:center; background-image: url(hbar.gif);} /* ¥Õ¥©¡¼¥é¥à¤Ê¤É¤Î³°ÏÈ*/ .outer {background-color: #DDDDDD} /* ¥Õ¥©¡¼¥é¥à¤Ê¤É¤ÎÅê¹Æ¾ðÊóÍó */ .head {background-color: #DEE3E7; padding: 5px; font-weight: bold;} /* ¥Õ¥©¡¼¥é¥à¤Ê¤É¤Î¸ò¸ß¤Ë¿§¤¬ÊѤï¤ëÉôʬ */ .even {background-color: #eff4f8; padding: 5px;} .odd {background-color: #F9F9F9; padding: 5px;} /* ¥Õ¥©¡¼¥é¥à¤Ê¤É¤Î¥Õ¥Ã¥¿¡¼ */ .foot {background-color: #d3dee7; padding: 5px; font-weight: bold;} tr.even td {background-color: #eff4f8; padding: 5px;} tr.odd td {background-color: #F9F9F9; 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 a { text-decoration: none; } .comTitle {font-size: 110%;font-weight: normal;text-decoration: none;margin: 0px 0px .2em 0px;padding: 0px 0px 2px 0px;border-bottom: 1px solid #d0d0e0;} .comText {/*position: relative;margin: 5px 5px 5px 15px;left: 120px;float: left;*/line-height: 1.5em;padding: 0px;} .comUserStat {font-size: 10px; color: #436792; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;} .comUserStatCaption {font-weight: bold;} .comUserStatus {color: #436792; font-weight:bold;} .comUserRank {margin: 2px;} .comUserRankText {font-size: 10px;font-weight:bold;} .comUserRankImg {border: 0;} .comUserName {} .comUserImg {margin: 2px;} .comDate {font-weight: normal; font-style: italic; font-size: smaller} .comDateCaption {font-weight: bold; font-style: normal;} .comUserdetails {float: left;/*position: relative;top: 50px;left: 10px;*/font-size: 0.85em;border: 1px solid #d0d0e0;background-color: #fff9ef;padding: 3px;/*margin: 5px 5px 5px 5px;*/text-align: center;margin: 5px 10px 5px 0px;z-index: 0; } .comUserName {font-weight: bold;font-size: 110%;} .comIcons {float: right;position: relative;font-size: 0.85em;top: -25px;right: 5px;} .com_tl {background-image: url(../images/news_tl.gif);background-position: 0% 0%;background-repeat: no-repeat;position: relative;top: -1px;left: -1px;} .com_tr {background-image: url(../images/news_tr.gif);background-position: 100% 0%;background-repeat: no-repeat;position: relative;left: 2px;} .com_br {background-image: url(../images/news_br.gif);background-position: 100% 100%;background-repeat: no-repeat;position: relative;top: 2px;} .com_bl {background-image: url(../images/news_bl.gif);background-position: 0% 100%;background-repeat: no-repeat;position: relative;left: -2px;padding: .8em;overflow: hidden;} .comContainer {/*background-color: #ffffff;*/border: 1px solid #D0D0E0;position: relative;margin-bottom: 10px;z-index: 0;}


Anyone have any ideas?
2
Grizzlydk
Re: Comment display in IE

  • 2005/8/31 17:17

  • Grizzlydk

  • Just popping in

  • Posts: 68

  • Since: 2005/2/24


Hi Jbeard7

I think it's a problem with the "transparent" tag. I have had the same problem on a site i build for a friend.

CSS in IE and Firefox don't allways look the same. I know of the "transparent" tag witch gives different results, and scollbars in iframes are also a bit wierd.

Grizzly
Danish is viery iasy to spoke
3
jbeard7
Re: Comment display in IE

  • 2005/8/31 17:56

  • jbeard7

  • Just popping in

  • Posts: 6

  • Since: 2005/8/9 1


but the transparent tag is only used to define background colors. if i assigned a color, wouldn't it still not effect the spacing and layout?
4
angaran
Re: Comment display in IE

  • 2005/11/4 16:03

  • angaran

  • Not too shy to talk

  • Posts: 103

  • Since: 2003/8/17


I have this same problem with the default theme of XOOPS 2.2. Has been someone able to solve this?

P.S.: looks good on Opera 8.5 too.
5
angaran
Re: Comment display in IE

  • 2005/11/4 17:32

  • angaran

  • Not too shy to talk

  • Posts: 103

  • Since: 2003/8/17


I solved it! Adding

<div style="clear:both;"></div>


At the end of the system_comment template so it look lke this now:

le="color: #000000"><?php <div class="comContainer"> <div class="com_tl"><div class="com_tr"><div class="com_br"><div class="com_bl"> <h2 class="comTitle"><a id="comment<{$comment.id}>"></a><{$comment.image}><{$comment.title}></h2> <div class="comIcons"> <{if $xoops_iscommentadmin == true}> <a href="<{$editcomment_link}>&amp;com_id=<{$comment.id}>"><img src="<{$xoops_url}>/themes/default/images/edit_small.gif" width="16" height="16" alt="<{$lang_edit}>" title="<{$lang_edit}>" /></a>&nbsp;<a href="<{$deletecomment_link}>&amp;com_id=<{$comment.id}>"><img src="<{$xoops_url}>/themes/default/images/delete_small.gif" width="16" height="16" alt="<{$lang_delete}>" title="<{$lang_delete}>" /></a>&nbsp;<a href="<{$replycomment_link}>&amp;com_id=<{$comment.id}>"><img src="<{$xoops_url}>/themes/default/images/reply_small.gif" width="16" height="16" alt="<{$lang_reply}>" title="<{$lang_reply}>" /></a> <{elseif $xoops_isuser == true && $xoops_userid == $comment.poster.id}> <a href="<{$editcomment_link}>&amp;com_id=<{$comment.id}>"><img src="<{$xoops_url}>/themes/default/images/edit_small.gif" width="16" height="16" alt="<{$lang_edit}>" /></a>&nbsp; <a href="<{$replycomment_link}>&amp;com_id=<{$comment.id}>"><img src="<{$xoops_url}>/themes/default/images/reply_small.gif" width="16" height="16" alt="<{$lang_reply}>" /></a> <{elseif $xoops_isuser == true || $anon_canpost == true}> <a href="<{$replycomment_link}>&amp;com_id=<{$comment.id}>"><img src="<{$xoops_url}>/themes/default/images/reply_small.gif" width="16" height="16" alt="<{$lang_reply}>" /></a> <{/if}> </div> <div> <span class="comDateCaption"><{$lang_posted}>:</span> <{$comment.date_posted}>&nbsp;&nbsp;<span class="comDateCaption"><{$lang_updated}>:</span> <{$comment.date_modified}> </div> <{if $comment.poster.id != 0}> <div class="comUserdetails"> <img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" /><br /> <span class="comUserName"><{$comment.poster.uname}></span><br /> <img class="comUserRankImg" src="<{$xoops_upload_url}>/<{$comment.poster.rank_image}>" alt="" /><br /> <span class="comUserName"><{$comment.poster.rank_title}></span><br /> <span class="comUserStatCaption"><{$lang_joined}>:</span> <{$comment.poster.regdate}><br /> <span class="comUserStatCaption"><{$lang_from}>:</span> <{$comment.poster.from}><br /> <span class="comUserStatCaption"><{$lang_posts}>:</span> <{$comment.poster.postnum}><br /> <span class="comUserStatus"><{$comment.poster.status}></span> </div> <{/if}> <div class="comText"> <{$comment.text}> </div> <div style="clear:both;"></div> </div></div></div></div></div>


Hope to help!
6
josespi
Re: Comment display in IE

  • 2005/12/21 22:48

  • josespi

  • Just popping in

  • Posts: 31

  • Since: 2004/11/29


Also it is necessary to modify the Style.css so that it appears the information of poster on the message. Without the modification this appears detras.

Sorry I can´t write English very well

También es necesario modificar el Style.css para que aparezca la información de quien envio el mensaje sobre el mensaje. Sin la modificación esta aparece detras.

.comUserdetails {
float: left;
position: relative; // First change
top: 5px; // Second Change
left: 1px;
*/font-size: 0.85em;
border: 1px solid #d0d0e0;
background-color: #fff9ef;
padding: 3px;
/*margin: 5px 5px 5px 5px;*/
text-align: center;
margin: 5px 10px 5px 0px;
z-index: 2; //Third change
}

.comContainer {
background-color: #ffffff;
border: 1px solid #D0D0E0;
position: relative;
margin-bottom: 10px;
z-index: 1; // other change
}

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Donat-O-Meter

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