Deleting code stops photo being loaded

Hi,
Here is the page in question http://www.theremotedoctor.co.uk/vin...rollto=content

I am trying to remove the 2 images below the main photo of which are "Click To Order & Click For Price"
When i delete the code shown below i loose the functionality then of the image being imported/replacing the main image when clicking on either button under the heading "Item Selection"

Code:

---

<h1><a id="btnOrder1" href="http://form.jotformeu.com/form/62115565434352" target="_self"><img src="m-images/order-logo.png" alt="order from the remote doctor website"  class="buttonshadow"></a>
<a href="javascript:;" ><img src="m-images/price-logo.png" alt="remote doctor information button"  class="tooltip border buttonshadow" ></a></h1>

---

I would like to be able to click Key Code Location etc and its respected image then be shown BUT dont require the 2 images on this page.
Can you advise where im going wrong please.

Thanks

Merry Christmas people,hope you had a good one.

The above post has been sorted and whilst on that page i have noticed something else which after some hours of looking did not fin my answer.
If you look at the tabs Contact, Accessories etc etc you will see the font type.
I have checked my site and there are a few which shown just a plain old font,use the link below for an example.
http://www.theremotedoctor.co.uk/fli...rollto=content

Ive looked through the whole of the Basic css file but making edits then putting them back does not change the appearance on my site so all are the same.
Im also thinking, why are some like this & some like that ?

Hi there theremotedr,

on all your pages you will find this code...

Code:

---


<style media="screen">
body {
    background-image: url(http://theremotedoctor.co.uk/m-images/background.png);
    font: 1em/150% arial, helvetica, sans-serif;
 }

#marquee {
    height: 3em;
    border-radius: 0.5em;
    border: 2px solid #000000;
    overflow: hidden;
    background-color: #0099ff;
 }

#marquee p {
    width: 38em;
    line-height: 3.5em;
    margin: 0;
    font-size: 0.8em;
    font-weight: bold;
    white-space: nowrap;
    animation: marquee 12s linear infinite;
 }

@keyframes marquee {
    0%  {margin-left: 100%;}
    100% {margin-left: -38em;}
 }
</style>


---

You should remove the highlighted bit. ;)

Also note that you really should put all internal CSS, like this, into external file. ;)

It will greatly simplify your HTML files. :)

coothead

Thanks Coothead, I will alter this tomorrow.
In respect of the css as time rolled along and people advising things etc etc I've just gone along with it not knowing any different etc.
I'm willing to do this but I think I will dig a big hole for myself as I'm sure I will come unstuck in the process.
Thus I've rudely left it as is as things are working.
I understand what you and others have been saying but my brain power is limited.

Thanks for the reply

This has been mentioned a few times before! When there is a problem with the CSS on a page, it's often due to the incorrect nesting or termination of tags. On your page you have many nesting errors such as <div>...</div> inside <ul>...</ul> tags. Browsers in general cope very well with incorrectly nested or badly terminated tags but sometimes they can't detect the correct start or finish of a tag pair and therefore can't apply the correct CSS. You really need to learn how to use the W3.org validator to find all the errors in your pages and then the CSS will probably work.

Coothead,
Thanks all now are the same & as what i required.

This original post was to remove the 2 images below the main image because i was adding a video player.
I have removed them ok & the player works fine,im trying to get my pages to look the same hence removing the 2 images,click for price/click for info.

Looking on my ipad "and i know you dont own one" all my pages are fine just like my pc layout apart from this page where ive added the video.
This page in question is shown below,
http://www.theremotedoctor.co.uk/fli...rollto=content

What i have noticed on this page is that the space between the 4 images 2/3 button available,flip remote upgrade etc etc is wider than all my other pages.
Look here for example,
http://theremotedoctor.co.uk/honda_c...rollto=content

Look at Skype,Honda programming, you will see the gap between each is smaller.

So what i see on the ipad is 3 images in a row and 1 below but all my other pages show 4 in a row of which i now need to fix.
I know its something to do with where ive placed the video player but looking to see what is wrong.

Hi,
Today i have been trying to rectify the fault on the page.
I believe the insertion of the video player & its player buttons are my problem.

I am now currently stuck with the correct way to insert the video player along with its player buttons.


This page below has the correct layout but need advice for the adding the video player & its buttons.
http://theremotedoctor.co.uk/flip_re...rollto=content

This page below has the video & button code that i would like to use.
http://theremotedoctor.co.uk/flip_re...rollto=content

Please can you advise the correct way.

Thanks very much "again"

Hi there theremotedr,

you seem to have lost your menu styling on all pages. :eek:

How did you do that? :confused:

coothead

Strange as it was fine 5 minutes ago also its spot on looking at my phone.

Im looking into it now.
The css file is in place and ive also just put my back css file but still the same ??

Try here http://www.theremotedoctor.co.uk/