css trubble when loading macro

Michael Jensen 35 posts 85 karma points

Jul 07, 2013 @ 20:31

Templates and document types

Hey i hope i putt the problem the right place.

iam tryning to build a website for my wow guild so we dont have to pay for a site.

iam running version Umbraco v6.1.2 (Assembly version: 1.0.4927.23554) Hostede on a Surftown server IIS 7.0 whit fullthrust on a CE database.

the site is @ this local http://wiyd.mj-solutions.dk

as you can se the 3 bloks i have made dos no site right as the er below onenother and not side to side and the greay bar one only se a part of is my fotter.

wath iam planing whit thess macros is to make som statik elements to use all over the site an call them easy.

the lather when iam mor confedent whit macros i try makining the so i can put drifring content in tu them.

i realy hope som can help me

Best regards

Michael

Ps sorry for my bad english writning

my master page is like this

<!doctype html>
    <html>
    <head>
        <title>Velkommen til Mj Solutions</title>
        <meta charset="utf-8">
        <meta name="description" content="CMS system">
        <meta name="keywords" content="Umbraco CMS V 6.0">
        <meta name="author" content="Michael Jensen">
        <link href="/css/MasterPage.css" rel="stylesheet" type="text/css" media="all" />
        <link href="/Css/Bloks.css" rel="stylesheet" type="text/css" media="all" />
        <link href="/Css/Text.css" rel="stylesheet" type="text/css" media="all" />

    </head>
    <body>
        <div id="Header">
        </div>
        <div id="TopMenu">
        </div>
        <div id="Content">
            <div id="LeftBlok">
                <asp:ContentPlaceHolder ID="LeftBlokCPH" runat="server">
                    <!-- Insert default "LeftBlok" markup here -->
                </asp:ContentPlaceHolder>
            </div>
            <div id="CenterBlok">
                <asp:ContentPlaceHolder ID="CenterBlokCPH" runat="server">
                    <!-- Insert default "CenterBlok" markup here -->
                </asp:ContentPlaceHolder>
            </div>
            <div id="RightBlok">
                <asp:ContentPlaceHolder ID="RightBlokCPH" runat="server">
                    <!-- Insert default "RightBlok" markup here -->
                </asp:ContentPlaceHolder>
            </div>
        </div>
        <div id="Fotter">
        </div>
    </body>
    <script type="text/javascript" src="https://the-testcenter.dk/Scripts/live.js"></script>
    </html>

the CSS i use on the page

Body {
}

#Header {
    margin-left: auto;
    margin-right: auto;
    width: 1210px;
    height: 100px;
    background-color: #C0C0C0;
    margin-bottom:5px;
}

#TopMenu {
    margin-left: auto;
    margin-right: auto;
    width: 1210px;
    height: 30px;
    margin-bottom: 5px;
    background-color: #FF0000;
}


#Fotter {
    margin-left: auto;
    margin-right: auto;
    width: 1210px;
    height:50px;
    margin-top:5px;
    background-color: #C0C0C0;
}


#Content {
    margin-left: auto;
    margin-right: auto;
    width:1210px;
    min-height:600px;
}
#LeftBlok {
    float: left;
    width: 225px;
    min-height: 600px;
    margin-right:5px;
}

#CenterBlok {
    float:left;
    width:760px;
    min-height:600px;
}

#RightBlok {
    float:left;
    width:225px;
    min-height:600px;
    margin-left:5px;
}

this is the pagetamplate for the page i load the blok

<%@ Master Language="C#" MasterPageFile="~/masterpages/MasterPage.master" AutoEventWireup="true" %>

<asp:Content ID="Content1" ContentPlaceHolderID="LeftBlokCPH" runat="server">
 <umbraco:Item field="leftBlok" runat="server" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CenterBlokCPH" runat="server">
    <umbraco:Item field="centerBlok" runat="server" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="RightBlokCPH" runat="server">
   <umbraco:Item field="rightBlok" runat="server" />
</asp:Content>

this is my macro thear is 3 macros bu all made whit samm struktur like this one only CSS is drifrint

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
  <!ENTITY nbsp "&#x00A0;">
]>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:Examine="urn:Examine"
    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets Examine ">


  <xsl:output method="xml" omit-xml-declaration="yes"/>

  <xsl:template match="/">
      <div class="SideBlok">
        <div class="SideTop">
          <div class="SideBlokHeadline">
            Teamspeak Webpost
          </div>
        </div>
        <div class="SideMiddle">
            her kommer indholdet
        </div>
        <div class="SideBottom">
        </div>
      </div>
  </xsl:template>

</xsl:stylesheet>

CSS uset in macro

/* Side Blok Start*/

.SideBlok {
    margin-left:0px;
    margin-right: 0px;
    margin-top:0 px;
    float:left;
    width: 225px;
    background-image: url('/Media/Grafik/Bloks/parchment.jpg');
    margin-bottom:5px;
}

.SideTop {
    float:left;
    width: 225px;
    height: 37px;
    background-image: url('/Media/Grafik/Bloks/SideTop.png');
    background-repeat: no-repeat;
}

.SideMiddle {
    float:left;
    width: 209px;
    min-height: 100px;
    background-image: url('../Media/Grafik/Bloks/SideMiddle.png');
    background-repeat: repeat-y;
    padding-left:16px;
}

.SideBottom {
    float:left;
    width: 225px;
    height: 37px;
    background-image: url('../Media/Grafik/Bloks/SideBottom.png');
    background-repeat: no-repeat;
}

/* Side Blok Stop*/


/* Center Blok Start*/

.CenterBlok {
    float:left;
    width: 720px;
    background-image: url('/Media/Grafik/Bloks/parchment.jpg');
    margin-bottom:5px;
}

.CenterTop {
    float:left;
    width: 720px;
    height: 50px;
    background-image: url('/Media/Grafik/Bloks/CenterTop.png');
    background-repeat: no-repeat;
}

.CenterMiddle {
    float:left;
    width: 720px;
    min-height: 100px;
    background-image: url('../Media/Grafik/Bloks/CenterMiddle.png');
    background-repeat: repeat-y;
    padding-left:16px;
}

.CenterBottom {
    float:left;
    width: 720px;
    height: 50px;
    background-image: url('../Media/Grafik/Bloks/CenterBottom.png');
    background-repeat: no-repeat;
}

/* Center Blok Stop*/

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib

Jul 08, 2013 @ 00:12

Hi Michael

The problem is that you're having a bad practice making empty div containers like <div id="Header></div>. But in the master template you can get away with it since it's outputted in the html source as <div id="Header"></div>. Just the way you have written it.

But since you have a macro based on XSLT where you do the same with for instance <div class="SideBottom"></div> it ends up being written to the final HTML output like <div class="SideBottom" /> - So the container acts as a self-closing tag.

You can easily pick this error up by using the W3 validator, which I did here http://validator.w3.org/check?uri=http%3A%2F%2Fwiyd.mj-solutions.dk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

So if the container is empty make sure it's not being written to the source by using a control structure where you make a check to see if a certain value is set and then write out the code. Or simply just write some dummy content like lorem ipsum text. That will fix it.

So this is not a CSS issue you just need to write some dummy content untill you begin fetching the actual content from your content section.

When you do remember to add the logic so no empty tags occur in your output.

I hope this makes sense and helps.

Cheers,
Jan

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib

Jul 08, 2013 @ 09:47

Hi Michael

In the above I totally forgot to mention the most important thing actually.

The reason why the empty divs from the XSLT macro collapse is because the output mode is set to XML, which turns empty containers into selfclosing elements using the shortcut.

You can change the output mode to HTML and then it will also work.

/Jan

Copy Link

Michael Jensen 35 posts 85 karma points

Jul 08, 2013 @ 12:34

Hey Jan,

i vil not say that i had a bad practice making empty div, i was not aware that it can cours problems. and as you se the site i under cunstrukt so not all data was avalibele.

But one lean all life and i dit som to day.

i whent whit the HTML solutions becors i need the SideBottom to be emty så it is posibel to put data if it is neede not all bloks need data in the SideBottom

Thanks wary mouts for the help.

Copy Link

is working on a reply...

Flag this post as spam?

CSS trubble when loading macro