black line - ahhhhhhhhhhhhhh

  • 1
  • Problem
  • Updated 9 years ago
  • In Progress
hello Yola staff,

I have swapped my site style over to wide round glass - great template very happy - EXCEPT...

If you remove all the pages from the menu there is a thin black line that remains on the page - Its annoyed me long enough now that i thought i would ask if there was any way i could get rid of it.

I presume the template css would need altering.

You can see it very clear here - http://hexham.info/test -- its the reason i decided i needed a banner with a colour background, with a white banner background it stands out like a sore thumb.

If theres anything you can do - please do

many thanks - Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes

Posted 9 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Lee,

Unfortunately this is a bug we are currently dealing with that is being looked into. Is that a .gif image; the bug seems to be more frequent with .gif images. Are you able to try converting the image to another format, possibly that might make a difference. We're sorry for the inconvenience. Let us know if you are able to try this and if it makes a difference.

I have to say, your site is looking awesome and I love the banner!

Emmy
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
The image (or the 1 px border) is a part of the template - nothing i have added myslef -- something needs deleting from or adding to the css of the site style to tell it to lose that line when the main built in navigation is not in use.

I dont know if an edit to the template css would be an option after its been released - has it ever been done in the past?

Lee.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Lee, I'll have to look into this.

Emmy
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
ok thanks Emmy, I'm signing out here, its late in the UK, if you get any news post it and i'll read it the morning - thanks - hope your well - Lee.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Using the rounded glass myself I looked into this as well and the line of which you speak is part of the style and is in fact a repeating PNG. This image is left behind when you remove all the pages out of the menu. I agree it looks funky and would love to see it disapear from my Honey Bear website;)

In your case it is:
http://hexham.info/templates/Gerrard_...

I wonder if a creative programmer can figure out a way to remove it...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Good morning,

@ Yola & Ed - i had already looked into the fact it might be the menu-shadow image but i presumed it must be something to do with the placing of that image, as the issue is a solid black line.

Its actually not that at all. look now http://hexham.info/test

<!--

It's actually 2 sections of the sites css...

The first is this,

div.ys_nav div.ys_clear{
clear:both;
font-size:0;
height:1px;
}

If you change the height value to 0 the line disappears.

The next issue that we are left with is the banner-shadow image, 2 little black corners have been added to it (bottom right and bottom left) probably so the menu fits in smoothly.

These little black corners need removing - or an alternative image needs to be created for the instance of no menu being used.

@ Ed - maybe you could take the image and edit it to remove the little black corners -- we could then upload it to our sites and link to that image instead.

The image in question is here /templates/Gerrard_Wide/resources/banner-shadow.png

In the mean time Ed, before Yola hopefully clean the style for people not using menus you can add this to your page

<style type="text/css">

div.ys_nav div.ys_clear{
clear:both;
font-size:0;
height:0px;
}

div.layout div#sys_banner div.shadow{
background:url(templates/Gerrard_Wide/resources/banner-shadow1.png) top left no-repeat;
behavior: url(templates/Gerrard_Wide/resources/iepngfix.htc);
width:960px;
height:170px;
padding:1px 0 0 0;
voice-family: "\"}\"";
voice-family:inherit;
height:169px;
}

</style>

Notice I have set the banners shadow image to a URL which does not exsist just to remove it, If you can edit the image we could point to that instead.
The banner shadow actuall looks good except for the little black corners. If you want to include it till its fixed (i.e. you dont mind the corners) just change the URL to point back to banner-shadow.png

-------------------------------------------------------------------------

@ Yola Staff,

I have tested not having this section in the css WITH a built in menu and it makes no visual difference even if your using a white banner.

div.ys_nav div.ys_clear{
clear:both;
font-size:0;
height:0px;
}

So i think it could be removed.

As for the banner-shadow image, granted it looks slightly cleaner if your using a white abnner and a built in menu BUT it looks horrible if you remove the menu. Perhaps a small css snippet could be added which points to the same image without the corners if a menu is not used.

I'll leave that up to you to sort out - ive done enough free work on this topic already - not that i mind - i just want my site looking as good as it can.

Lee.

-->
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
@Lee: thanks for all your help with this. I will log the issue as a bug with the template and link to this thread. I agree that the style should function correctly for people who choose not to use the default menu. I am sure something can be done about this.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
its ok Monique, it needs fixing - it was the reason i didnt change over to round glass (the original size) - That also has the same issue, Its very hard to get a white background banner to look good, even if you are using the built in menu, without the menu its really ugly.

I'll be looking forward to an outcome.

Lee.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thanks Lee...

Here are the images for both the 860x170 and the 960x170 banner shadow. Just make sure that the code reflects the new image name. ;)

860x170



960x170



Here is a free and easy to use in your browser image editor... Give her a try ;)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Nice one Ed - Thats what i call team work :) -- You can see my site is much better now - as is yours. Do you have a pro account or just a new style? - If you have a pro you might as well get all that java and css into files, maybe its on your list :)

Again thanks for doing the image - alls well that ends well.

I hoep Yola fix it soon - or maybe we should start selling our work around? :)

Take care - Lee.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I went Pro on my TravelSA account last night and also switched to the Wide Rounded Glass template. Don't look at it now... I have loads of lining up to do, and the banner is temporary.

I have picked up two more issues (bugs) with the style.

1) There is a thick black line under the banner (about 1cm) when viewed in IE7.
It is not there when viewed in FF or IE8.

2) The template is not centered on the screen when viewed at 1024px 768px resolution on a 17" monitor. It is shifted off the RHS of the screen with a gap on the LHS. I've checked this on quite a few monitors with this screen resolution and it's quite annoying to look at. This is still a very popular "size and resolution" monitor if I look at my analytics. The template centers fine on all the wide screen monitors I have checked.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Like a little kid whos told 'dont touch' i just had to look - sorry :)

It looks great - i had seen that thick line in IE7 but ignored it as its an old browser.

Did you follow the steps to remove the bottom line and corner details of the original image on this thread?

I got sick of this style and decided to use a custom clean slate - see http://hexham.info - 1100 px wide with a smaller banner and now the standard links are my colour and not underlined, o yeah and the images now dont have a border by default - its the style ive always wanted (but dont tell Yola staff :)

Lee.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Just to make sure it wasn't on my side I checked your site and noticed you had changed the style. I then checked Ed's site and he also has the thick black line, so that confirmed it for me.

I've removed the underline from some of my links by using the "text-decoration:none" just to test before I swiched over. I also didn't want the underline.

Cleanslate is still one of the most versatile templates :-)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
just incase you didnt know

In round glass you can control the links with this

a { color:#FF0000; text-decoration:none; }
a:hover {text-decoration:none; color:#0062b5;}

Lee.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
That is exactly what I've done, and the CSS file is in my file manager, ready for site wide tweaks... thanks :-)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Just a friendly reminder about this bug. I see the name of "Gerrard" embedded in the css of the style. C'mon Gerrard !
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Mr. Boomer :)

How are you doing?! Still doing a fantastic job on your sites I see :)

Forgive me for sounding a bit dumb here, but what is the issue? I tried the code that Lee gave above and this seem to have addressed the black lines and the corners - no? Maybe I can come up with something that was overlooked?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
First of all, you can drop the "Mr." part... I have not been gone that long have I ? :)
Been trying to get my head around PHP and MySQL. I need to do this for a new interactive section on my site. Trying to set up a site with a new host, who supports these features, is a real nightmare. It's a steep learning curve for me!

I am really starting to appreciate how easy a Yola site is to get up and running.
It's like driving a sports car as opposed to riding a bicycle. I'll have to do a big green heart post soon ... maybe on Valentines day ;)

Anyway, down to business... This is what I am talking about:



See the thick border at the bottom of the banner? The top image is with FF and the bottom one is how it displays in IE7. I know what you are going to say ... but a lot of people still use IE7.

The next issue (and this is a really big one for me), is how the template is not centered on the screen when viewed at 1024px X 768px resolution. It is shifted off the RHS of the screen with a gap on the LHS.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Boomer! I'll see what I can do about the issues you're noting. Did you try Lee's suggestion above or are you also seeing that even using Lee's code?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
@ sanja, this is a different issue to what my fix fixes - its when you remove the nav you get a block line in IE7.

@boomer - our web building lives seem to be some what parallel - i am also learning php and sql - or maybe asp.net - i'm undecided on which to follow with more passion. At the minute its php. I also have set up a new host which allow these server scripts - let me know about your progress, i'll do the same. Lee.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Sure will Lee. I've been doing a lot of reading on the net this last month.
I actually wasted a whole week by signing up with a local host because I thought I would need the telephonic support. Anyway to cut a long story short, I am now holding thumbs, and hosting with GoDaddy (my registrar). I'm getting there slowly and will give you a shout as soon as I get something up and running. Good luck!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
What i'm trying to achieve is log ins and the ability for a business to edit a page. Its taking alot of new scary knowledge to achieve it.

I will continue to host ahexham info at yola but it will become static and be under another TLD - i now have .eu, .tel, .mobi, .me, .tv and of course .info. Ive got a super cool feature coming soon, a webcam of the town - you should maybe think about something similar for helderberg. I'm using mine as a live weather stream because luckily my house looks over the town.
With that and the introduction of php its going to be a busy interesting year.

Keep in touch - Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks guys.. I'll take a look and let you know if I'm able to scrounge up anything. I'm sure though you guys probably covered all the bases.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
@Boomer,

Its not the perfect option (that would be Yola fixing it) - but it will work in the mean time.

<!--

<style type="text/css">
div.ys_nav{ background:#ffffff url(templates/Gerrard_Wide/resources/menu-background1.png) bottom left no-repeat; margin:0 10px;
}

div.ys_nav ul{ background:#ffffff url(templates/Gerrard_Wide/resources/menu-background1.png) bottom left no-repeat; list-style:none; margin:0; padding:0 10px; list-style:none; margin:0; width:960px; padding:0 10px; voice-family: "\"}\""; voice-family:inherit; width:940px;
}
</style>

-->

If the forum breaks it put it back into separate lines.

Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
@Boomer

I had a rethink, i guess this would do the same job, the rest is implied.

<!--

<style type="text/css">
div.ys_nav
{
background:#ffffff url(templates/Gerrard_Wide/resources/menu-background1.png) bottom left no-repeat;
}
div.ys_nav ul
{
background:#ffffff url(templates/Gerrard_Wide/resources/menu-background1.png) bottom left no-repeat;
}
</style>

-->

I'm actually using the menu on a site that i'm making so this isnt an issue for me, i understand tho, it's true a lot of people do still use IE7, lets hope it dies soon :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey guys

I think I got the fix!

<style type="text/css">

div.ys_nav div.ys_clear{
clear:both;
font-size:0;
height:0px;
}

div.layout div#sys_banner div.shadow{
background:url(templates/Gerrard_Wide/resources/banner-shadow1.png) top left no-repeat;
behavior: url(templates/Gerrard_Wide/resources/iepngfix.htc);
width:960px;
height:150px;
padding:1px 0 0 0;
voice-family: "\"}\"";
voice-family:inherit;
height:169px;
}

div.ys_nav ul{
background:#ffffff url(templates/Gerrard_Wide/resources/menu-background1.png) bottom left no-repeat;
list-style:none;
margin:0;
padding:0 10px;
list-style:none;
margin:0;
width:960px;
padding:0 10px;
voice-family: "\"}\"";
voice-family:inherit;
width:940px;
}

</style>
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Sanja, The code i left a comment above works. We had the same idea - white background with a image that can not be reached.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ah.. sorry Lee.. just posted without realizing that you had put in a fix. :)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Thanks Lee and Sanja,

I appreciate you guys going to all the trouble of trying to find a fix for me.
This could be a temporary fix for somebody with a 3 page site, but not 200 plus pages.

It also does not fix how the template is not centered on the screen when viewed at 1024px X 768px resolution. Nobody seems to be addressing this point. Like I said above, It is shifted off the RHS of the screen with a gap on the LHS. People don't like to scroll sideways.

Yola needs to fix the template, after all this is a paid for premium style.