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.
/* Á´ÈÌÀßÄê */
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




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

<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}>&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}>&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}>&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}>&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}>&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}>&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

Who's Online

195 user(s) are online (110 user(s) are browsing Support Forums)

Members: 0

Guests: 195

more...

Donat-O-Meter

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

Latest GitHub Commits