Technical issue - Items Disappearing??

mbridge87

Hey everyone,

If you check out my Home/Landing page:

http://www.maxbridge.co.uk/

You will see two lines at the top of the page with my menu underneath. There SHOULD also be two lines at the bottom of the page, either side of the social media icons. However, these lines keep disappearing??

The lines are still there and often I find scrolling down the page causes them to appear again. Scroll back up and they disappear??

Any ideas?

mbridge87

Forgot to mention something quite key...

It's happening on firefox but not on internet explorer or Chrome.

Hikin' Mike

I'm using an old XP using the latest FF and I see the lines on each side of your Social Icons. I do see a very large gap under your Social Icons though.

phaserbeam

mbridge87 wrote: »

You will see two lines at the top of the page with my menu underneath. There SHOULD also be two lines at the bottom of the page, either side of the social media icons. However, these lines keep disappearing??

In FF i can see those two lines, in some other browsers i do not. Have you tried using a different image format like JPEG? The png-image does not make use of transparency so JPG would be worth a try.

mbridge87

Thanks for taking a look guys. I'll try replacing them with JPEG's tomorrow evening and see if that helps but thanks for the suggestion "phaserbeam".

What do you mean a big gap under the icons Mike? I made the bottom margin much bigger so that the "log in" button would not be seen by most. Is this what you mean? It may have been a stupid idea to do that.

As always. Thanks for all your help!

Hikin' Mike

Yes, that's what I meant. You can hide that in CSS. To login, you just need to type '/login/' after your site...(http://www.maxbridge.co.uk/login/).

brandofamily

mbridge87 wrote: »

Forgot to mention something quite key...

It's happening on firefox but not on internet explorer or Chrome.

I don't see the lower lines in FF, but do in IE.

mbridge87

Hello all,

OK. Been working at my "usual" job so been unable to do anything on the site. Just tried the suggestion of changing the images to JPEGs but it had no effect; I still get the disappearing issue on FF??

Odd thing is that the lines do appear on some pages. Specifically the location section of my galleries. The only difference with the "location" page and general "galleries" page is that there is an extra link entitled "book your shoot" on the "Locations" gallery. Strange thing is that when I add this link to the "galleries" page low and behold the lines appear????

Aside from that I can't get the lines to appear.

Please help!

thenickdude

Just a thought, your image is only 1 pixel high. That makes it really easy for it to disappear if the image is scaled slightly (like with browser zoom, or because the image is too large horizontally) or if the image ends up positioned at a half-pixel offset (this depends on the page content above it).

You might want to use an HTML content block instead of a single image block, because it'll allow you to ensure that the image doesn't get scaled to fit the space its in. Something like this on the HTML tab for the left side:

<div class="fading-line-left"></div>

This on the HTML tab for the right side:

<div class="fading-line-right"></div>

And this on the CSS tab for both sides:

.fading-line-left, .fading-line-right {
  background-repeat: no-repeat;
  width:100%;
  height:1px;
}

.fading-line-left {
  background-image: url(/Website-Assets/Website-Images/Site-Files/Logos-etc/i-LkTCKhW/0/S/LeftLine-S.jpg);
  background-position: right top;
}

.fading-line-right {
  background-image: url(/Website-Assets/Website-Images/Site-Files/Logos-etc/i-NnRQTxX/0/S/RightLine-S.jpg);
  background-position: left top;
}

mbridge87

Hi Lamah,

Thanks for the advice! I didn't want to add any more code to the site as I'm not too comfortable with it, hence I've figured out another way which seems to work. I simply increased the size of those files to being 4 pixels wide and this seems to have solved the issue.

Thanks so much for your suggestion it led me to finding the solution.