Position and troubleshooting

[hantaah]

I changed some of my content on the forst slider and now my tree has pushed down off the slider ( huff )
I have 2 questions

1. how do I get it back on again
2. and the most important one is I never seem to be able to troubleshoot issues to find out what is the problem is. I’m " inspecting the element and looking at the css and html. Haveing a little play around but I’m not figuring out whee the issue lies. This is always a probem for me. Either I don’t know how to use firebug properly or what. Can you help me a little with your process of trouble shooting this issue perhaps I will get an ncite from it.

Much much appreciation as always

http://www.organicwebdesigns.co.uk

[ralphm]

Yeah, something’s gone seriously wrong with the code. Some bits of HTML have been left out, something like an <li> tag or something. Validating your code might help spot where something got left out in the HTML:

Validation Results - W3C Markup Validator

[hantaah]

ok had a look at the validation. Strange because the tags which it’s saying are left out are there ( in the header php ) I’m looking for list or div tags in my scroller.php files but cannot find any that are not opened or closed properly. Here are my 5 php files, can you see where I’m going wrong?

scroller-1.php

<div style=“position: relative; z-index: 1;” id=“slider-nav”>
<a href=“#” class=“slider-link-1”>Full Service</a>
<a href=“#” class=“slider-link-2”>Step 1</a>
<a href=“#” class=“slider-link-3”>Step 2</a>
<a href=“#” class=“slider-link-4”>Step 3</a>
<a href=“#” class=“slider-link-5”>Warranty</a>
</div>

<div id=“sections”>
<ul>
<li>
<div class=“slider-left-2”>
<div class=“slider-left”>
<h1 id=“slider1_header”>Quality Web Design</h1>
<h2>Don’t Just Design It - Grow It!</h2>
<img src=“<?php bloginfo(‘template_directory’); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif” alt=“line” class=“slider-line” />

                <div style="clear: both;"></div>
                MORE BUSINESS! MORE LEADS! MORE PROFIT! MORE SUCCESS!<br/> Quality Web Design & clever content is just the beginning.<br/> I'll set you up, get you noticed, maintain & update it.<br/> Then test & optimise your performance.
	</div>
	</div>
	<div id="arrow-hd"><img src="http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/arrow-hd.png" alt="arrow" /></div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta">SOW YOUR SEED NOW!</a>
    </div>
        <div class="slider-right">

        <?php if (get_option('ebusiness_slider_1_type') == 'Video') : ?>
        <div style="background: #DCDBDB; padding: 8px;"><?php echo $ebusiness_slider_1_video; ?></div>
         <?php else : ?>
        <img src="http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/tree.png" alt="slider image" class="slider_image" />
        <?php endif; ?>

        </div>
    </li>
</ul>

</div>

scroller-2.php

<div style=“position: relative; z-index: 4;”>
<div class=“prev”></div>
<div class=“next”></div>
</div>

<div style=“position: relative; z-index: 1;” id=“slider-nav”>
<a href=“#” class=“slider-link-1”>Full Service</a>
<a href=“#” class=“slider-link-2”>Step 1</a>
</div>
<div id=“sections”>
<ul>
<li>
<div class=“slider-left-2”>
<div class=“slider-left”>
<h1 id=“slider1_header”>Quality Web Design</h1>
<h2>Don’t Just Design It - Grow It!</h2>
<img src=“<?php bloginfo(‘template_directory’); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif” alt=“line” class=“slider-line” />

                <div style="clear: both;"></div>
                MORE BUSINESS! MORE LEADS! MORE PROFIT! MORE SUCCESS!<br/> Quality Web Design & clever content is just the beginning.<br/> I'll set you up, get you noticed, maintain & update it.<br/> Then test & optimise your performance.
	</div>
	</div>							
            </div>
	<div id="arrow-hd"><img src="http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/arrow-hd.png" alt="arrow" /></div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta">SOW YOUR SEED NOW!</a>
        </div>
    <div class="slider-right">

        <?php if (get_option('ebusiness_slider_1_type') == 'Video') : ?>
        <?php echo $ebusiness_slider_1_video; ?>
         <?php else : ?>
        <img src="http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/tree.png" alt="slider image" class="slider_image" />
        <?php endif; ?>

        </div>
    </li>
    <li>
        <div class="slider-left-2">
            <div class="slider-left">
                <h2>The Design</h2>
                <img src="<?php bloginfo('template_directory'); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif" alt="line" class="slider-line" />
                <div style="clear: both;"></div>
                Clever content and engaging layout is what makes quality web design. Your site will grab your visitors attention from start to finish, getting them to do what you want them to do.	
	</div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta" style="margin-left: 168px; margin-top: 230px;">MAKE YOUR CONTENT KEY!</a>
        </div>
    <div class="slider-right-2">

        <?php if (get_option('ebusiness_slider_2_type') == 'Video') : ?>
        <div style="background: #DCDBDB; padding: 8px;"><?php echo $ebusiness_slider_2_video; ?></div>
         <?php else : ?>
        <img src="http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/webpic_s1.png" alt="slider image" class="slider_image2" />
        <?php endif; ?>

        </div>
    </li>
</ul>

</div>

scroller-3.php

<div style=“position: relative; z-index: 4;”>
<div class=“prev”></div>
<div class=“next”></div>
</div>

<div style=“position: relative; z-index: 1;” id=“slider-nav”>
<a href=“#” class=“slider-link-1”>Full Service</a>
<a href=“#” class=“slider-link-2”>Step 1</a>
<a href=“#” class=“slider-link-3”>Step 2</a>
</div>

<div id=“sections”>
<ul>
<li>
<div class=“slider-left-2”>
<div class=“slider-left”>
<h1 id=“slider1_header”>Quality Web Design</h1>
<h2>Don’t Just Design It - Grow It!</h2>
<img src=“<?php bloginfo(‘template_directory’); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif” alt=“line” class=“slider-line” />

                <div style="clear: both;"></div>
                MORE BUSINESS! MORE LEADS! MORE PROFIT! MORE SUCCESS!<br/> Quality Web Design & clever content is just the beginning.<br/> I'll set you up, get you noticed, maintain & update it.<br/> Then test & optimise your performance.
	</div>
	</div>
        </div>
	<div is="arrow-hd><img src="http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/arrow-hd.png" alt="arrow" /></div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta">SOW YOUR SEED NOW!</a>
    </div>
        <div class="slider-right">

        <?php if (get_option('ebusiness_slider_1_type') == 'Video') : ?>

<?php echo $ebusiness_slider_1_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/tree.png” alt=“slider image” class=“slider_image” />
<?php endif; ?>

        </div>
    </li>
    <li>
        <div class="slider-left-2">
            <div class="slider-left">
                <h2>The Design</h2>
                <img src="<?php bloginfo('template_directory'); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif" alt="line" class="slider-line" />
                <div style="clear: both;"></div>
                Clever content and engaging layout is what makes quality web design. Your site will grab your visitors attention from start to finish, getting them to do what you want them to do.	
            </div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta" style="margin-left: 168px; margin-top: 230px;">MAKE YOUR CONTENT KEY!</a>
     </div>
        <div class="slider-right-2">

        <?php if (get_option('ebusiness_slider_2_type') == 'Video') : ?>

<?php echo $ebusiness_slider_2_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/webpic_s1.png” alt=“slider image” class=“slider_image2” />
<?php endif; ?>

        </div>
    </li>
    <li>
        <div class="slider-left-2">
            <div class="slider-left">
                <h2>The Google Process</h2>
                <img src="<?php bloginfo('template_directory'); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif" alt="line" class="slider-line" />
                <div style="clear: both;"></div>
                Your seed is planted now lets grow it. Get better than your competitor. Beat them on google and keep them on your site. Here's where your quality website and organic promotion makes all the difference.	
            </div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta" style="margin-left: 168px; margin-top: 230px;">BETTER YOUR COMPETITOR!</a>
    </div>
        <div class="slider-right">

        <?php if (get_option('ebusiness_slider_3_type') == 'Video') : ?>

<?php echo $ebusiness_slider_3_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/watercan.png” alt=“slider image” class=“slider_image3” />
<?php endif; ?>

        </div>
    </li>
</ul>

</div>

scroller-4.php

<div style=“position: relative; z-index: 5;”>
<div class=“prev”></div>
<div class=“next”></div>
</div>

<div style=“position: relative; z-index: 1;” id=“slider-nav”>
<a href=“#” class=“slider-link-1”>Full Service</a>
<a href=“#” class=“slider-link-2”>Step 1</a>
<a href=“#” class=“slider-link-3”>Step 2</a>
<a href=“#” class=“slider-link-4”>Step 3</a>
</div>

<div id=“sections”>
<ul>
<li>
<div class=“slider-left-2”>
<div class=“slider-left”>
<h1 id=“slider1_header”>Quality Web Design</h1>
<h2>Don’t Just Design It - Grow It!</h2>
<img src=“<?php bloginfo(‘template_directory’); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif” alt=“line” class=“slider-line” />

                <div style="clear: both;"></div>
              MORE BUSINESS! MORE LEADS! MORE PROFIT! MORE SUCCESS!<br/> Quality Web Design & clever content is just the beginning.<br/> I'll set you up, get you noticed, maintain & update it.<br/> Then test & optimise your performance.
	</div>
	</div>
        </div>
	<div id="arrow-hd"><img src="http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/arrow-hd.png" alt="arrow" /></div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta">SOW YOUR SEED NOW!</a>
    </div>
        <div class="slider-right">

        <?php if (get_option('ebusiness_slider_1_type') == 'Video') : ?>

<?php echo $ebusiness_slider_1_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/tree.png” alt=“slider image” class=“slider_image” />
<?php endif; ?>

        </div>
    </li>
    <li>
        <div class="slider-left-2">
            <div class="slider-left">
                <h2>The Design</h2>
                <img src="<?php bloginfo('template_directory'); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif" alt="line" class="slider-line" />

                <div style="clear: both;"></div>
                Clever content and engaging layout is what makes quality web design. Your site will grab your visitors attention from start to finish, getting them to do what you want them to do.	
       </div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta" style="margin-left: 168px; margin-top: 230px;">MAKE YOUR CONTENT KEY!</a>
        </div>
    <div class="slider-right-2">

        <?php if (get_option('ebusiness_slider_2_type') == 'Video') : ?>

<?php echo $ebusiness_slider_2_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/webpic_s1.png” alt=“slider image” class=“slider_image” />
<?php endif; ?>

        </div>
    </li>
    <li>
        <div class="slider-left-2">
            <div class="slider-left">
                <h2>The Google Process</h2>
                <img src="<?php bloginfo('template_directory'); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif" alt="line" class="slider-line" />
                <div style="clear: both;"></div>
                Your seed it planted now lets grow it. Get better than your competitor. Beat them on google and keep them on your site. Here's where your quality website and organic promotion makes all the difference.
        </div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta" style="margin-left: 168px; margin-top: 230px;">BETTER YOUR COMPETITOR!</a>
    </div>
        <div class="slider-right">

        <?php if (get_option('ebusiness_slider_3_type') == 'Video') : ?>

<?php echo $ebusiness_slider_3_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/watercan.png” alt=“slider image” class=“slider_image3” />
<?php endif; ?>

        </div>
    </li>
<li>
        <div class="slider-left-2">
            <div class="slider-left">
                <h2>Optimise Your Potential</h2>
                <img src="<?php bloginfo('template_directory'); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif" alt="line" class="slider-line" />
                <div style="clear: both;"></div>
                Now you have lots of vistors we need to turn them into customers and leads. Making the most of every person that comes to your site will mean the world of difference to you and your business.
        </div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta" style="margin-left: 168px; margin-top: 230px;">OPTIMISE YOUR SITE NOW!</a>
    </div>
        <div class="slider-right">

        <?php if (get_option('ebusiness_slider_4_type') == 'Video') : ?>

<?php echo $ebusiness_slider_4_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/words.png” alt=“slider image” class=“slider_image4” />
<?php endif; ?>

        </div>
    </li>
</ul>

</div>

scroller-5.php

<div style=“position: relative; z-index: 5;”>
<div class=“prev”></div>
<div class=“next”></div>
</div>

<div style=“position: relative; z-index: 1;” id=“slider-nav”>
<a href=“#” class=“slider-link-1”>Full Service</a>
<a href=“#” class=“slider-link-2”>Step 1</a>
<a href=“#” class=“slider-link-3”>Step 2</a>
<a href=“#” class=“slider-link-4”>Step 3</a>
<a href=“#” class=“slider-link-5”>Warranty</a>
</div>

<div id=“sections”>
<ul>
<li>
<div class=“slider-left-2”>
<div class=“slider-left”>
<h1 id=“slider1_header”>Quality Web Design</h1>
<h2>Don’t Just Design It - Grow It!</h2>
<img src=“<?php bloginfo(‘template_directory’); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif” alt=“line” class=“slider-line” />

                <div style="clear: both;"></div>
               MORE BUSINESS! MORE LEADS! MORE PROFIT! MORE SUCCESS!<br/> Quality Web Design & clever content is just the beginning.<br/> I'll set you up, get you noticed, maintain & update it.<br/> Then test & optimise your performance.
	</div>
       </div>
	<div id="arrow-hd"><img src="http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/arrow-hd.png" alt="arrow"/></div>	
	<a href="http://organicwebdesigns.co.uk/quote" class="cta">SOW YOUR SEED NOW!</a>
    </div>
        <div class="slider-right">

        <?php if (get_option('ebusiness_slider_1_type') == 'Video') : ?>

<?php echo $ebusiness_slider_1_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/tree.png” alt=“slider image” class=“slider_image” />
<?php endif; ?>

        </div>
    </li>
    <li>
        <div class="slider-left-2">
            <div class="slider-left">
                <h2>The Design</h2>
                <img src="<?php bloginfo('template_directory'); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif" alt="line" class="slider-line" />
                <div style="clear: both;"></div>
                Clever content and engaging layout is what makes quality web design. Your site will grab your visitors attention from start to finish, getting them to do what you want them to do.	
         </div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta" style="margin-left: 168px; margin-top: 230px;">MAKE YOUR CONTENT KEY!</a>
          </div>
	<div class="slider-right-2">

        <?php if (get_option('ebusiness_slider_2_type') == 'Video') : ?>

<?php echo $ebusiness_slider_2_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/webpic_s1.png” alt=“slider image” class=“slider_image” />
<?php endif; ?>

        </div>
    </li>
    <li>
        <div class="slider-left-2">
            <div class="slider-left">
                <h2>The Google Process</h2>
                <img src="<?php bloginfo('template_directory'); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif" alt="line" class="slider-line" />
                <div style="clear: both;"></div>
                Your seed it planted now lets grow it. Get better than your competitor. Beat them on google and keep them on your site. Here's where your quality website and organic promotion makes all the difference.
        </div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta" style="margin-left: 168px; margin-top: 230px;">BETTER YOUR COMPETITOR!</a>
    </div>
        <div class="slider-right">

        <?php if (get_option('ebusiness_slider_3_type') == 'Video') : ?>

<?php echo $ebusiness_slider_3_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/watercan.png” alt=“slider image” class=“slider_image3” />
<?php endif; ?>

        </div>
    </li>
<li>
        <div class="slider-left-2">
            <div class="slider-left">
                <h2>Optimise Your Potential</h2>
                <img src="<?php bloginfo('template_directory'); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif" alt="line" class="slider-line" />
                <div style="clear: both;"></div>
                Now you have lots of vistors we need to turn them into customers and leads. Making the most of every person that comes to your site will mean the world of difference to you and your business.
        </div>
	<a href="http://organicwebdesigns.co.uk/quote" class="cta" style="margin-left: 168px; margin-top: 230px;">OPTIMISE YOUR SITE NOW!</a>
    </div>
        <div class="slider-right">

        <?php if (get_option('ebusiness_slider_4_type') == 'Video') : ?>

<?php echo $ebusiness_slider_4_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/words.png” alt=“slider image” class=“slider_image4” />
<?php endif; ?>

        </div>
    </li>
   <li>
        <div class="slider-left-5">
            <div class="slider-left">
                <h2>Satisfaction Guaranteed</h2>
                <img src="<?php bloginfo('template_directory'); ?>/images/slider-line-<?php echo $ebusiness_color_scheme; ?>.gif" alt="line" class="slider-line" />

                <div style="clear: both;"></div>
                 We guarantee your success and offer on going support. As a comfort for you we also offer monthly payments for your plan.<br />
            </div>

<a href=“http://organicwebdesigns.co.uk/quote” class=“cta” style=“margin-left: 168px; margin-top: 230px;”>GET YOUR NO WORRIES QUOTE!</a>
</div>
<div class=“slider-right”>
<?php if (get_option(‘ebusiness_slider_5_type’) == ‘Video’) : ?>
<?php echo $ebusiness_slider_5_video; ?>
<?php else : ?>
<img src=“http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/warrantybadge.png” alt=“slider image” class=“slider_image5” />
<?php endif; ?>
</div>
</div>
</li>
</ul>
</div>
<div style=“clear: both”></div>

[ralphm]

The validator makes it clear what the issue is:

<div id="sections">
    <ul>
        <li>
            <div class="slider-left-2">
                <div class="slider-left">
		    <h1 id="slider1_header">Quality Web Design</h1>	
                    <h2>Don't Just Design It - Grow It!</h2>
                    <img src="http://www.organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/slider-line-Smooth-Blue.gif" alt="line" class="slider-line" />

                    <div style="clear: both;"></div>
                   MORE BUSINESS! MORE LEADS! MORE PROFIT! MORE SUCCESS!<br/> Quality Web Design &amp; clever content is just the beginning.<br/> I'll set you up, get you noticed, maintain &amp; update it.<br/> Then test &amp; optimise your performance.
		</div>
	       </div>
		<div id="arrow-hd"><img src="http://organicwebdesigns.co.uk/wp-content/themes/eBusiness/images/arrow-hd.png" alt="arrow"/></div>	
		<a href="http://organicwebdesigns.co.uk/quote" class="cta">SOW YOUR SEED NOW!</a>
	    [COLOR="#FF0000"]</div>[/COLOR]

That </div> on line 132 is out of place, and is closing off the sections div prematurely.

[hantaah]

how was it obvious to you? There’s so many divs it’s hard to tell what div ends where, and as my php files are all seperate I can’t tell the line, what I mean is my header php file ends line 98, then i’m guessing my scroller files come next, I tried to count to what I thought was line 132 but ended up further on down…

and now the tree is only peeping out, and I can’t work that one out either - will I ever get to learn how to trouble shoot with time?
There’s no extra margins or padding as I can see

ahh I got it… It’s the arrow, see if I can sort that

[ralphm]

When using the validator line numbers, you have to look at the generated HTML source code. If you do that in Chrome, it shows the line numbers down the left, which makes it easy. Anyhow, I posted the code where the problem is above—the red </div>.

[hantaah]

ahhh yes, I never knew chrome had a oage source, I will be using that from now on… Sorted the div I just removed it I hope that was the right thing to do, but how did you know it was out of place, I mean how could you tell what div’s are what and where they should be closing?

[ralphm]

@hantaah

how did you know it was out of place, I mean how could you tell what div’s are what and where they should be closing?

Well, firstly it was clear from a quick glance at Firebug (actually, I use Chrome now, but same thing) that the HTML was messed up, as the LIs were outside the container.

In this case, the best option seemed to be to check the validator, which helpfully indicated that thee was a </div> tag where there shouldn’t have been on line 132 of the source code. That made it very easy to find the offending code.

[hantaah]

I hope I get to your level of understanding, at the moment it’s not that clear when I look
Many thanks

[ralphm]

No worries. I just poke around and learn as I go.