Li out of aling & unclickable [Archive]

View Full Version : Li out of aling & unclickable

theremotedr

06-08-2020, 08:31 AM

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/honda_hiss_cable.html?scrollto=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

06-08-2020, 03:01 PM

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','£24.99 To Programme Another Key You Must Have a working Key Before Starting UK Recorded £4.00 International Signed For £10.00 Posted From The UK The Remote Doctor')">HISS CABLE RED</a></li>

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

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



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

coothead

theremotedr

06-08-2020, 04:12 PM

Hi
Thanks door that.

Could you please highlite it in red.

Have a nice day.

theremotedr

06-08-2020, 05:07 PM

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

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

coothead

06-08-2020, 07:33 PM

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','£4.00 Fix That Damaged Remote Easy To Swap Over T5 & T6 Screwdriver Is Required UK Recorded £4.00 International Signed For £10.00 Posted From The UK The Remote Doctor')">Flip Remote Key Pad</li>

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

<li onclick="replaceMainImage('m-images/photos/AUDI005.png', 'Audi005','£8.00 Chip Will Require Programming With Diagnostic Tool UK Recorded £4.00 International Signed For £10.00 Posted From The UK The Remote Doctor')">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','£4.00 Fix That Damaged Remote Easy To Swap Over T5 & T6 Screwdriver Is Required UK Recorded £4.00 International Signed For £10.00 Posted From The UK The Remote Doctor')">Flip Remote Key Pad</li>

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

coothead

theremotedr

06-09-2020, 08:48 AM

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','£4.00 Fix That Damaged Remote Easy To Swap Over T5 & T6 Screwdriver Is Required UK Recorded £4.00 International Signed For £10.00 Posted From The UK The Remote Doctor')">Flip Remote Key Pad</li>

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

coothead

06-09-2020, 09:37 AM

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','£4.00 Fix That Damaged Remote Easy To Swap Over T5 & T6 Screwdriver Is Required UK Recorded £4.00 International Signed For £10.00 Posted From The UK The Remote Doctor')">Flip Remote Key Pad</li>

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

<li onclick="replaceMainImage('m-images/photos/AUDI005.png', 'Audi005','£8.00 Chip Will Require Programming With Diagnostic Tool UK Recorded £4.00 International Signed For £10.00 Posted From The UK The Remote Doctor')">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 id="lindent" onclick="replaceMainImage('m-images/photos/AUDI002.png', 'Audi002','£4.00 Fix That Damaged Remote Easy To Swap Over T5 & T6 Screwdriver Is Required UK Recorded £4.00 International Signed For £10.00 Posted From The UK The Remote Doctor')">Flip Remote Key Pad</li>



</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

06-09-2020, 10:03 AM

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

06-09-2020, 10:13 AM

That should do the trick. ;)

coothead