Border Image is not recognizing section content

Question

This is in reference from my previous question: How to call a script inside a script

PROBLEM The border image is not covering the whole content:

This is currently the code I am working on. CODEPEN . NOTE: I combined 2 css file in code pen since i needed both. I needed the border to cover the section area. And it must adjust automatically depending on the content length. Supposedly, similar to this.

here is the summarized code:

.content2 {
  margin: auto 0;
  border: 10px solid transparent;
  padding: 15px;
  -webkit-border-image: url('https://image.ibb.co/f7kxxz/border.png') 30 stretch;
  /* Safari 3.1-5 */
  -o-border-image: url('https://image.ibb.co/f7kxxz/border.png') 30 stretch;
  /* Opera 11-12.1 */
  border-image: url('https://image.ibb.co/f7kxxz/border.png') 30 stretch;
}

<div id='pages'>
  <div class='mydivshow div1' style='display: block;'>
    <section class='content2'>
      <h1> A </h1>
      <p> A is for Atkinson, first name James, an enterprising gentleman from the wildest reaches of northern England, who, on a fine morning in the early spring of 1799, set forth, with a large brown bear.</p>
    </section>
  </div>

Can anyone help me figure out as to why the section .content is not covering the h1 and p?

the code you posted doesn't reproduce the issue, check I have made it a snippet ... and there is nothing in your codepen too ... try to put all the needed code in the question, not only a portion of it — Temani Afif, Sep 06 '18 at 09:54
For me it works just fine, Chrome. Did you clear your cache? — , Sep 06 '18 at 09:54
Seems like your content is `display: float` or `position: absolute`. But it's not from your provided code — Justinas, Sep 06 '18 at 09:56
@Justinas You are absolutely right. `.selectedArea .copyArea.fadeIn p { float: left; }` causes the border to jump up. Without this rule, the border works fine. — , Sep 06 '18 at 10:00
@D.Schaller I tried to clear the cache file but somehow, it still produces the same result. All the codes are written on the CODEPEN link I added above. — UmaruHime, Sep 07 '18 at 03:11
@TemaniAfif, if I try to put in all the code, stackoverflow will not allow me "Body is limited to 30000 characters; you entered 51998." That is why I linked it to a codepen instead. My codepen also shows a wrong output similar to my localhost — UmaruHime, Sep 07 '18 at 03:29
also, the .selectedArea is being used in the main code (the whole page itself, that is why I cannot make any changes to it else, it will affect the the output of the stylish menu — UmaruHime, Sep 07 '18 at 03:32
@UmaruHime You don't necessarily need to change something on `.selectedArea`. You could just give the paragraph a class and override the float for them there, without touching the existing rule. — , Sep 07 '18 at 06:09

score 0 · Answer 1 · answered Sep 26 '18 at 09:59

I was able to fix my own problem. And here is what I did:

I was able to locate which area i the code is affecting the logo and social. When I tried to put !important as per advise, nothing changed. So I did an internal style instead and added it on the header tag

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sabreen's Seafood Market &amp; Restaurant</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >

    <link href="css/jquery.bxslider.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>

  <style type="text/css">
    .fa {
      width: 30px !important;
      height: 30px !important;
    }
    .logo img {
    max-height: 200px !important;
  }
  </style>
</head>

Border Image is not recognizing section content

1 Answers1