Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  ClosedNew TopicNew Poll

 DOHTML altering main header [SOLVED]
#
Hi there

I'm having an issue with my site where when using a DOHTML format, it's stretching a side box in the header and making it larger. I can't find why and it's only on pages using this DOHTML string. Can someone look it over and see why it's doing this?

This is a page example:
http://frisson.jcink.net/index.php?showtopic=16


and this is the DOHTML string that's messing it up

CODE

<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

<center><div class="b-facepad">
<section class="facetabl">
<div><input id="ac-22" name="accordion-1" type="radio" checked/>
<label for="ac-22"><div class="b-fctitle">  Active</div></label><article class="ac-face"><div class="b-fcpad"><table cellpadding="0" cellspacing="0"></center>

<div align=center><br><div class="b-smttl">Mindy</div>

<br><div align=Center><font=Oswald><b><a href="http://frisson.jcink.net/index.php?showtopic=29&st=0&#entry107"></b></font>[color=d3ab32]- Charlie Stanton -[/color]</a>
<br><div align=Center><font=Oswald><b><a href="LINK TO PROFILE"></b></font>[color=d3ab32]- Jasper Janson -[/color]</a>
<br></div>

<br><br><div align=Center><div class="b-smttl">Ophelia</div>
<br><div align=Center><font=Oswald><b><a href="LINK TO PROFILE"></b></font>[color=d3ab32]- Holland Caine -[/color]</a>
<br></div>




<br><br>
</div></td></TR></div></table></article></div><div>
<input id="ac-21" name="accordion-1" type="radio" />
<article class="ac-face"><div class="b-fcpad"><table cellpadding="0" cellspacing="0"></center>

<br><br><div align=Center><div class="b-smttl">Character</div>
<br><div align=Center><font=Oswald><b><a href="LINK TO PROFILE"></b></font>[color=d3ab32]- Inactive Character Here -[/color]</a>
<br></div>


<br><br></div></td></TR></table></div></article><label for="ac-21"><div class="b-fctitle">Inactive</div></label></div>
<br>
<div><input id="ac-23" name="accordion-1" type="checkbox" />
<label for="ac-23"><div class="b-fctitle" style="font-size: 18px; padding: 20px 30px 20px 30px;">Retired</div></label><article class="ac-code"><div class="b-fcpad" style="height: 200px; padding: 0px; border: 10px solid #e4e4e4; overflow: auto;">

<br><br><div align=Center><div class="b-smttl">Character</div>
<br><div align=Center><font=Oswald><b><a href="LINK TO PROFILE"></b></font>[color=d3ab32]- Retired Character -[/color]</a>
<br></div>

</div></article></div>
</section>

</div><div style="padding-left: 580px; font-family: trebuchet ms; font-size: 8px;">
<a href="http://shine.b1.jcink.com/index.php?showuser=3621">❥ bee</a></div></center>


<style type="text/css">
.facetabl label{ position: relative; z-index: 20; display: block; cursor: pointer; color: black; }
.facetabl label:hover{ background: #e4e4e4; }
.facetabl input:checked + label,.facetabl input:checked + label:hover{ background: #e4e4e4;}
.facetabl label:hover:after,.facetabl input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; }
.facetabl input:checked + label:hover:after{}
.facetabl input{ display: none; }

.facetabl article{ background: e4e4e4; margin: -0px; overflow: hidden; height: 0px; position: relative; z-index: 10;
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; transition: height 0.5s ease-in-out, box-shadow 0.6s linear; }

.facetabl input:checked ~ article{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; transition: height 0.5s ease-in-out, box-shadow 0.1s linear; }
.facetabl article p{ font-family: courier new; color: black; font-size: 14px; padding: 0px; }

.facetabl input:checked ~ article.ac-face{ height: 290px; }
.facetabl input:checked ~ article.ac-code{ height: 220px; }



.b-facepad { background: #e4e4e4; width: 610px; padding: 10px; margin-top: 10px;}
.b-fctitle { background: #000; width: 550px; height: 10px; padding: 30px 30px 30px 30px; color: #663366; font-family: oswald; text-transform: uppercase; font-size: 20px; letter-spacing: 2px; }
.b-fctitle:hover { background: #323232; }

.b-face01 { width:160px; height:220px; padding-left: 30px; overflow:auto; text-align: left; line-height:120%; overflow: auto; trebuchet ms; font-size: 9px; border-top: 5px solid #e4e4e4; text-transform: uppercase; padding-top: -5px; }
.b-face02 { width:160px; height:220px; padding-left: 30px; overflow:auto; text-align: left; line-height:120%; overflow: auto; trebuchet ms; font-size: 9px; border-top: 5px solid #e4e4e4; text-transform: uppercase;   }
.b-face03 { width:190px; height:220px; overflow:auto; text-align: center; line-height:120%; overflow: auto; font-family: trebuchet ms; font-size: 9px; border-top: 5px solid #e4e4e4; text-transform: uppercase;   }

.b-fcpad { width: 580px; height: 280px; padding: 0px 10px; background-color: #e4e4e4; border-top: 15px solid #e4e4e4;  overflow:auto;  }
.b-fcpad ::-webkit-scrollbar { background:#eaeaea; width: 3px; }
.b-fcpad ::-webkit-scrollbar-thumb { background: #663366; width: 3px; }
.b-fcpad ::-webkit-scrollbar-track { background:#eaeaea}


.b-smttl { width: 170px; height: 30px; font-family: 'oswald'; text-transform: uppercase; font-size: 20px; color: #000; border-bottom: 5px solid #663366; line-height: 100%; text-align: center; padding-left: 10px; }

.b-smtitle2 { width: 580px;  font-family: oswald;  text-transform: uppercase; font-size: 15px; color: #000; text-align: center; letter-spacing: 2px; padding-top: 10px; }

.b-face01 a:link, .b-face01 a:active, .b-face01 a:visited {
text-transform: uppercase;
color: #000; }
.b-face02 a:link, .b-face02 a:active, .b-face02 a:visited {
text-transform: uppercase;
color: #000; }
.b-face03 a:link, .b-face03 a:active, .b-face03 a:visited {
text-transform: uppercase;
color: #a5670e; }

</style>




[/dohtml]



[dohtml]


<center><div style="width: 630px; font-size: 15px; line-height: 90%; font-family: 'Oswald'; text-align: center; letter-spacing: 3px ">[color=e2e2e2]PLEASE COPY AND PASTE CODE BELOW AS A REPLY ONCE YOUR <br><br>CHARACTER HAS BEEN ACCEPTED.  STARS (**  **) INDICATE WHERE YOUR <br><br>INFORMATION IS ENTERED.  PLEASE REMOVE FROM FINAL CODE.  [/color]</div>





CODE
<br><br><div align=Center><div class="b-smttl">**YOUR OOC NAME**</div>
<br><div align=Center><font=Oswald><b><a href="**LINK TO PROFILE**"></b></font>[color=d3ab32]- **Character Name** -[/color]</a>
<br></div>

PM
#
What's really happening here is that the font is being changed by the post.

Could you screenshot what you're talking about though because when you say "Side box" im assuming its the welcome box to the right?

signature
email: admin@jcink.com :: blog: John C.
#
This is the incorrect version
user posted image

This is how it should look

user posted image



Notice how the bottom left corner shows that it's not aligning with the main header when the dohtml is being used. It's changing the size of the box and the font.

This post has been edited by mstymndy: Dec 13 2016, 01:01 AM
PM
#
Ah ok, yes, that is happening for me too (I just barely noticed it).

Try this then: force the 'Georgia' font style for the "Writers of the Month" box. Use font-style: 'georgia'; in the div style attribute to do this. This might fix the issue since different font sizes can sometimes warp HTML elements, so see what happens. And it will at least stop the post font from overtaking the table.

signature
email: admin@jcink.com :: blog: John C.
#
ok that worked! I just have to adjust the size of the board. Thank you!!
PM
#
This topic has been solved. If you need anymore help please post a new thread. Thanks for choosing Jcink services.

signature
email: admin@jcink.com :: blog: John C.
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options ClosedNew TopicNew Poll