Something no longer right

Keryth987
Keryth987

OK, so, last time I checked this site I was tinkering wiht everything was fine, but now, and It is probably due to an update to OP as I've not touched the site at all, its messed up.

This is how the site looked before, and looks in the preview pane

image

But this is how it looks live, online

image

Any ideas? Same CSS as before. Same HTML as before.

Thanks

Keelah Se'lai

Keryth

Comments

  • thaen
    thaen
    Posts: 656

    @Keryth987, there haven't been any OP updates lately that should have affected that. 

    I took a look at the HTML for that page, and there is a stack of "</br>" tags.  I think those are either supposed to be "<br>" or "<br/>".  (You'll probably want to add more when you make that change.  Or I think you could use a style height attribute on a div instead of the "br" tags.)

    When the browser sees "</br>", I think it thinks that's a "closing" tag with no opening tag, so it's trying to help by assuming and inserting an opening tag further up.  Which means that it's treated differently by the browser when it's in the "Preview" HTML, than when it's in the "Saved" HTML.

    Let me know if that change doesn't fix it for you.

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 939

    Well, I've not looked at the site in a while, but everything used to be fine...and currently looks fine if I preview it (as shown above), so have no idea whats up with the buttons or the header

    and no, changing the </br> doesnt work at all.

  • thaen
    thaen
    Posts: 656

    Try replacing all 7 of the "</br>" tags with these 2 lines:

    <div style="height:400px;">

    </div>

     

    I think that will give you the look you're wanting consistently between the Preview and the Live.

    It's possible that the browser has been updated since the last time you looked at the Campaign, and the browser is now treating the "</br>" tags differently than it was before.

    "</br>" is not a valid HTML tag (the browser is expecting the slash on the other side of the br, like <br/>), so the browser is guessing how to handle it based on the HTML around it.  In the preview mode, it's turning each "</br>" into 2 "<br>" tags (except for one of them), so the preview mode has 13 "<br>" tags instead of the 7 tags in the actual code.  You can see this in the Inspect panel here:

    image

     

    In the Live mode, it's just reading them as a single "<br>" for each "</br>" tag, which is why it's shifted up in the Live mode.

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 939

    I'll give that a try, but its also the label at the top. The words CODEX went from being centered to up high...could be same issue maybe...

  • thaen
    thaen
    Posts: 656

    I don't see anything that would be doing that in the HTML.  When I try the Preview myself, the word CODEX is up at the top, not vertically centered like in the image you pasted of the Preview.  So, I'm not sure what happened there.

    But the way I would fix it is to add a "padding-top: 30px;" to the style on the div that the word CODEX is in.

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 939

    Looks like it works.

     

    Something over the past few months has changed how br is working it looks like

Sign In or Register to comment.

Campaign of the Month
September 2021

D&D 3.0: Tales from Mystara


Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions