25.07.2018, 08:22
Adres forum:
https://bravo.net.pl
Wersja silnika:
1.8.11
Opis problemu:
Mam problem z szablonem index. Tak wygląda kod głównej części strony:
O ile na kompie w IE11 i Firefoxie wszystko wygląda OK, to już jak otwieram stronkę w Safari na telefoniku, po kliknięciu tego dynksu ukrywającego/przywracającego tabelkę w prawym górnym rogu tabelka sąsiadująca poszerza się odrobinkę w stronę "zwolnionej przestrzeni". Przed zmianami tego nie było, więc wnoszę, że coś jednak jest nie do końca tak jak powinno z tym kodem. Pytanie - co? Podejrzewam, że problemem może być albo ramka otaczająca główną część, albo umieszczenie poszczególnych tabelek w divach. Ramka zaczyna się pod koniec szablonu header i wygląda tak (konkretnie od drugiego diva się zaczyna, bo to wcześniej to już było, ale wklejam dla janości):
... a kończy się na początku footera. Tak wygląda CSS ramki:
https://bravo.net.pl
Wersja silnika:
1.8.11
Opis problemu:
Mam problem z szablonem index. Tak wygląda kod głównej części strony:
Kod:
<div style="display: table; width: 100%; border-collapse: separate; border-spacing: 0px">
<div style="display: table-row; margin: 0px: padding: 0px">
<div class="side" style="padding: 6px 8px 6px 6px;
width: 193px;
max-width: 193px;
display: table-cell
">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead_purple_short{$collapsedthead['whosonline']}">
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['whosonline']}.png" id="whosonline_img" class="expander" alt="[-]" title="[-]" /></div>
<div><strong>Online</strong></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['whosonline_e']}" id="whosonline_e" >
{$whosonline}
{$wwot}
{$birthdays}
</tbody>
</table>
</div>
{$ps_header_index}
<div class="forum" style="padding: 6px 0px 0px 0px; display: table-cell">
{$forums}
</div>
<div class="side" style="padding: 6px 6px 6px 8px;
height: 270px;
max-height: 270px;
width: 193px;
max-width: 193px;
display: table-cell
">
<table id="radio" style="table-layout: fixed; word-wrap: break-word;" border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead_green_short">
<div class="expcolimage">
<img src="{$theme['imgdir']}/collapse{$collapsedimg['whosonline']}.png" id="radio_img" class="expander" alt="[-]" title="[-]"/>
</div>
<strong>Radio</strong>
</td>
</tr>
</thead>
<tbody style="{$collapsed['radio_e']}" id="radio_e">
<tr>
<td class="trow1">
<div class="hidden">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (document.images) {
img1 = new Image();
img1.src = "https://bravo.net.pl/radio/loading.gif";
}
//--><!]]>
</script>
</div>
<!-- BEGINS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
<div style="width:180px; height:60px; margin: 0px 0px 0px 0px; background-color:red; background-image: url(radio/loading.gif); background-position: center center; background-repeat: no-repeat">
<script type="text/javascript" src="https://hosted.muses.org/mrp.js"></script>
<script type="text/javascript">
MRP.insert({
'url':'http://privat.is-by.us:8000/necta192.mp3',
'lang':'pl',
'codec':'mp3',
'volume':100,
'autoplay':false,
'forceHTML5':true,
'jsevents':true,
'buffering':3,
'title':'Nectarine Demoscene Radio',
'wmode':'transparent',
'skin':'mcclean',
'width':180,
'height':60
});
</script>
</div>
<!-- ENDS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
...dalej 3x to samo co wyżej i </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>O ile na kompie w IE11 i Firefoxie wszystko wygląda OK, to już jak otwieram stronkę w Safari na telefoniku, po kliknięciu tego dynksu ukrywającego/przywracającego tabelkę w prawym górnym rogu tabelka sąsiadująca poszerza się odrobinkę w stronę "zwolnionej przestrzeni". Przed zmianami tego nie było, więc wnoszę, że coś jednak jest nie do końca tak jak powinno z tym kodem. Pytanie - co? Podejrzewam, że problemem może być albo ramka otaczająca główną część, albo umieszczenie poszczególnych tabelek w divach. Ramka zaczyna się pod koniec szablonu header i wygląda tak (konkretnie od drugiego diva się zaczyna, bo to wcześniej to już było, ale wklejam dla janości):
Kod:
<div class="wrapper">
{$pm_notice}
{$remote_profile_picture_notice}{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}{$myprofile_alertbar}
{$pending_joinrequests}
{$awaitingusers}
<div style="display: table; width: 100%">
<div id="bg_content_topleft"></div><div id="bg_content_topcenter"></div><div id="bg_content_topright"></div>
</div>
<div style="display: table; width: 100%">
<div id="bg_content_middleleft"></div>
<div id="bg_content_middlecenter">
<br />
<navigation>
<br />... a kończy się na początku footera. Tak wygląda CSS ramki:
Kod:
#bg_content_topleft {
background-image: url(/images/topleft.png);
background-repeat: no-repeat;
background-color: #fff;
color: #000;
padding: 0px 0px 0px 0px;
margin: 0px;
height: 13px;
max-height: 13px;
width: 29px;
max-width: 29px;
display: table-cell;
}
#bg_content_topcenter {
background-image: url(/images/topcenter.png);
background-repeat: repeat-x;
background-color: #fff;
color: #000;
padding: 0px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 0px;
height: 13px;
max-height: 13px;
width: auto;
display: table-cell;
}
#bg_content_topright {
background-image: url(/images/topright.png);
background-repeat: no-repeat;
background-color: #fff;
color: #000;
padding: 0px 0px 0px 0px;
margin: 0px;
height: 13px;
max-height: 13px;
width: 29px;
max-width: 29px;
display: table-cell;
}
#bg_content_middleleft {
background-image: url(/images/middleleft.png);
background-repeat: repeat-y;
background-color: #fff;
color: #000;
padding: 0px 0px 0px 0px;
margin: 0px;
height: 100%;
max-height: 100%;
width: 29px;
max-width: 29px;
display: table-cell;
}
#bg_content_middlecenter {
background-color: #fff;
color: #000;
padding: 0px 0px 20px 0px;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
max-height: 100%;
width: auto;
display: table-cell;
}
#bg_content_middleright {
background-image: url(/images/middleright.png);
background-repeat: repeat-y;
background-color: #fff;
color: #000;
padding: 0px 0px 0px 0px;
margin: 0px;
height: 100%;
max-height: 100%;
width: 29px;
max-width: 29px;
display: table-cell;
}