We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

displays strange

    • 28518
    • 6 Posts
    Steve3013 Reply #1, 20 years, 7 months ago
    hi folks

    i’d like to insert a weblogin in my sidebar so i added the following lines in my template:
    [tt]
    <div id="sidebar">
    <ul>
    <li id="dropmenu"><a name="dropmenu"></a><h2>Pages:</h2>
    [!DropMenu!]
    </li>
    <li><h2>Login:</h2>
    [[WebLogin? &loginhomeid=`2` &tpl=`WebLoginSideBar`]]
    </li>[/tt]

    technically, this works but it displays just a bit awkward.:



    the text boxes are far too right and the whole WebLogin should just come after the title "Login" without that huge space it shows now. does anybody have an idea how to fix this?

    thanx

    steve
      • 28373
      • 204 Posts
      Starbuck Reply #2, 20 years, 7 months ago
      hold that thought


        • 28518
        • 6 Posts
        Steve3013 Reply #3, 20 years, 7 months ago
        starbuck: thanx for your reply!

        i now managed to display it within the sidebar:

        i just didn’t figure out how to reduce the space between the title and the login form! could someone please help me again?

        thanx a lot!

        steve
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          sottwell Reply #4, 20 years, 7 months ago
          Can you supply a link? I can do a lot more by View Source, and also by saving the page as full web page, which also saves the css file.
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 28518
            • 6 Posts
            Steve3013 Reply #5, 20 years, 7 months ago
            thanx for your offer!

            link is http://www.zwa.ch
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              sottwell Reply #6, 20 years, 7 months ago
              I wasn’t able to figure out why the gap appears there. I ran the page through the W3C validator and fixed a lot of validation errors, mostly elements like <link...>,
              and <input...> that weren’t properly closed, and the javascript in the weblogin.inc.php file has to have CDATA blocks put around it:
              <script type="text/javascript">
//<![CDATA[ 
...
//]]>
</script>


              Giving the #WebLoginLayer0 form (or the table) a negative top margin pulled it up in FF but not Safari. For some reason there is a gap from the top of the <div> element to the top of the form and its enclosing table. The top of the <div> element is where it should be.

              Personally, I don’t like the sidebar layout using an unordered list for the entire sidebar. I prefer to have individual <div> elements for each block, and keep the unordered list for... well, lists. I suspect that may be playing a part in this, but I really don’t know.
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org
                • 28518
                • 6 Posts
                Steve3013 Reply #7, 20 years, 7 months ago
                okay, thanx anyway for your help!!!!
                  • 8461
                  • 205 Posts
                  edge Reply #8, 20 years, 7 months ago
                  Hi Steve,

                  Did you check your HTML, it does not validate and I am not sure that you don’t have some errors in your tags
                  <div id="sidebar">
		<ul>
			<li id="dropmenu"><a name="dropmenu"></a><h2>Pages:</h2>

			<ul class="topnav">
    <li class="here">Base Install</li>
<li class="last"><a href="index.php?id=2" title="">BFH</a></li>
</ul>

			[b]</li>[/b]
                        <li><h2>Login:</h2>
                        	<script type="text/JavaScript">


                  You seem to have a extra closing li tag (marked in bold) or the opening li that follows should come first. I think the javascript should be put into an external file, and then you should get in validating with W3C so you have no warnings. Overall it may be a rendering issue and it best to get the site to validate, check the tags are correct and go from there

                  hope that helps you
                    • 28042 ☆ A M B ☆
                    • 24,524 Posts
                    sottwell Reply #9, 20 years, 7 months ago
                    The tags are correct, the entire left sidebar is laid out with nested unordered lists. I copied the HTML and CSS and validated them, and the space is still there. I gave everything a different colored background to see who was where, and the main div container of the login form is twice the height of the actual form and its table. The top of the div is in the correct place. When I tried specifying a height for the div conainer, all it did was pull the following links section up under the form. For some reason the top of the form and/or its table is forced its own height below the top of the containing div.
                      Studying MODX in the desert - http://sottwell.com
                      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                      Join the Slack Community - http://modx.org
                      • 12332
                      • 8 Posts
                      Honor Reply #10, 20 years, 7 months ago
                      Hi Steeve,

                      the problem comes from the CSS form properties
                      the incorrect property is clear :both,
                      that pushes your form below any content on the left or right
                      try to remove it or comment it in the site.css file

                      form {
	width: 360px;
	text-align: left;
/*	clear: both;*/
	padding-bottom: 20px;
	border: none;
}