Li out of aling & unclickable

[theremotedr]

Morning,
Ive noticed on my site a few items that have an issue.
This issue being as follows.

Here is an example https://www.theremotedoctor.co.uk/ho...rollto=content
Pc looks fine & work as it shoul but when viewing on a mobile the line of text Read My Facebook Feedback is centered as opposed to being aligned left.
Also the sequence of the rotating options should be,
1, HISS CABLE RED
2, HISS CABLE BUNDLE
3, Read My Facebook Feedback

But what you see is only 1 & 2 as 3 is missed completly thus not being able to click on it.

Looking through my site there are a few pages that have this issue but i cant track down why its happening or a fix for it.

Many thanks.

[coothead]

Hi there theremotedr,

This code-( starts at about line #229 )..

<div id="ul-holder">
<ul>
<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/HONDA-HISS-CABLE.jpg', 'HISS CABLE RED','<b>£24.99</b><br>To Programme Another Key<br>You Must Have a working<br>Key Before Starting</b><br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">HISS CABLE RED</a></li>

<li onclick="replaceMainImage('m-images/photos/HONDA-HISS-CABLE-SET.jpg', 'HISS BUNDLE SET','<b>£44.99</b><br>To Programme Another Key<br>You Must Have a working<br>Key Before Starting</b><br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">HISS BUNDLE SET</a></li>

<li class="licenter"><a href="https://www.facebook.com/www.theremotedoctor.co.uk/posts_to_page/" id="rmfb" target="_blank">Read My Facebook Feedback</a></li>
</ul>
<div id="cover-top"></div>
<div id="cover-bottom"></div>
</div>

...should be...

<div id="ul-holder">
<ul>
<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/HONDA-HISS-CABLE.jpg', 'HISS CABLE RED','<b>£24.99</b><br>To Programme Another Key<br>You Must Have a working<br>Key Before Starting</b><br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">HISS CABLE RED</li>

<li onclick="replaceMainImage('m-images/photos/HONDA-HISS-CABLE-SET.jpg', 'HISS BUNDLE SET','<b>£44.99</b><br>To Programme Another Key<br>You Must Have a working<br>Key Before Starting</b><br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">HISS BUNDLE SET</li>

<li><a href="https://www.facebook.com/www.theremotedoctor.co.uk/posts_to_page/"  target="_blank">Read My Facebook Feedback</a></li>

<!-- NOTE, The first two "li elements" must be repeated!!! -->

<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/HONDA-HISS-CABLE.jpg', 'HISS CABLE RED','<b>£24.99</b><br>To Programme Another Key<br>You Must Have a working<br>Key Before Starting</b><br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">HISS CABLE RED</li>
</ul>
<div id="cover-top"></div>
<div id="cover-bottom"></div>
</div>

coothead

[theremotedr]

Hi
Thanks door that.

Could you please highlite it in red.

Have a nice day.

[theremotedr]

I ask because the next page of which is https://www.theremotedoctor.co.uk/ac...llto=selection
The line Smart Remote Uncut Key is the issue.

I am trying to see the pattern so i can tackle each one

[coothead]

Hi there theremotedr,

on that page you've added 3 "li elements" instead of 2;

<div id="ul-holder">
<ul>
<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/AUDI002.png', 'Audi002','<b>£4.00</b><br>Fix That Damaged Remote<br>Easy To Swap Over<br><span class=noteColor>T5 & T6 Screwdriver Is Required</span><br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">Flip Remote Key Pad</li>

<li onclick="replaceMainImage('m-images/photos/AUDI006.png', 'Audi006','<b>£8.00</b><br>Key Will Require Cutting<br>Emergency Key<br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">Smart remote uncut key</li>

<li onclick="replaceMainImage('m-images/photos/AUDI005.png', 'Audi005','<b>£8.00</b><br>Chip Will Require Programming<br>With Diagnostic Tool<br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">Virgin Can Bus Chip ID48</li>

<li><a href="https://www.facebook.com/www.theremotedoctor.co.uk/posts_to_page/"  target="blank">Read My Facebook Feedback</a></li>

<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/AUDI002.png', 'Audi002','<b>£4.00</b><br>Fix That Damaged Remote<br>Easy To Swap Over<br><span class=noteColor>T5 & T6 Screwdriver Is Required</span><br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">Flip Remote Key Pad</li>
<!-- This li element must be removed
<li onclick="replaceMainImage('m-images/photos/AUDI006.png', 'Audi006','<b>£8.00</b><br>Key Will Require Cutting<br>Emergency Key<br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">Smart remote uncut key</li>
-->
</ul>
<div id="cover-top"></div>
<div id="cover-bottom"></div>
</div>

coothead

[theremotedr]

Im either getting confused or something else is happening.

Below is the partial code in use.
You say 2 li must be repeated.
So below the first 2 li are shown.
Any li after these and other pages must be deleted correct ?

Still i look at my page but a line is still out centered as opposed aling to the left.
See attached screenshot

1st li  <li><a href="https://www.facebook.com/www.theremotedoctor.co.uk/posts_to_page/"  target="blank">Read My Facebook Feedback</a></li>

2nd li <li><a href="#home">Return To Menu</a></li>

<li onclick="replaceMainImage('m-images/photos/AUDI002.png', 'Audi002','<b>£4.00</b><br>Fix That Damaged Remote<br>Easy To Swap Over<br><span class=noteColor>T5 & T6 Screwdriver Is Required</span><br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">Flip Remote Key Pad</li>

</ul>
<div id="cover-top"></div>
<div id="cover-bottom"></div>

[coothead]

Hi there theremotedr,

Does this make it clearer...

<div id="ul-holder">
<ul>
<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/AUDI002.png', 'Audi002','<b>£4.00</b><br>Fix That Damaged Remote<br>Easy To Swap Over<br><span class=noteColor>T5 & T6 Screwdriver Is Required</span><br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">Flip Remote Key Pad</li>

<li onclick="replaceMainImage('m-images/photos/AUDI006.png', 'Audi006','<b>£8.00</b><br>Key Will Require Cutting<br>Emergency Key<br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">Smart remote uncut key</li>

<li onclick="replaceMainImage('m-images/photos/AUDI005.png', 'Audi005','<b>£8.00</b><br>Chip Will Require Programming<br>With Diagnostic Tool<br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">Virgin Can Bus Chip ID48</li>

<li><a href="https://www.facebook.com/www.theremotedoctor.co.uk/posts_to_page/"  target="blank">Read My Facebook Feedback</a></li>

<!-- The first 2 li elements above must be repeated below-->

<li><a href="#home">Return To Menu</a></li>
<li id="lindent" onclick="replaceMainImage('m-images/photos/AUDI002.png', 'Audi002','<b>£4.00</b><br>Fix That Damaged Remote<br>Easy To Swap Over<br><span class=noteColor>T5 & T6 Screwdriver Is Required</span><br><b>UK Recorded £4.00</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">Flip Remote Key Pad</li>

<!-- id="lindent" must be added to the second -->

</ul>
<div id="cover-top"></div>
<div id="cover-bottom"></div>
</div>

Now add this...

#lindent {
    text-align: left!important;
 }

...to your latestChanges.css file.

coothead

[theremotedr]

Hi,
Yes so ive added the line to the css now.

So i need to go through my pages and in the mobile phone code section i should be looking for.& making sure that the .....

1st li will be Return To Menu
2nd will be id="lindent" etc etc

Followed by </ul>

This should be the same for pretty much all my site as the skeleton code was used over & over.

[coothead]

That should do the trick.

coothead