Elkarte Light has a funky button

Topic: Elkarte Light has a funky button (Read 14427 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

Re: Elkarte Light has a funky button

Reply #30 – June 18, 2014, 09:30:32 pm

Interestingly odd, with firefox works fine now (last time I have a problem here).

BTW I meant here on this site now, not at spudsdesign with your fixes.

Re: Elkarte Light has a funky button

Reply #31 – June 19, 2014, 12:42:18 am

Well beat on the one with the px then, I tried to make the area large so that odd area is hidden by the clipping on the bar, it only may appear on big zooms.

Re: Elkarte Light has a funky button

Reply #32 – June 19, 2014, 12:45:43 am

emanuele waits the px commit.

Re: Elkarte Light has a funky button

Reply #33 – June 20, 2014, 01:15:40 am

Much better but still a visible vertical bar at %125 and %225 for IE 11.

ETA: Firefox seems to be doing OK as I did not notice any artifacts, etc. in it.

Re: Elkarte Light has a funky button

Reply #34 – June 20, 2014, 01:47:31 pm

Thanks, I'll take a look and see if there is anything that can be done for that. This is really one of those cute CSS "tricks" that would be better off as an image given how finicky this is being across browsers/OS .. that's an IMO of course.

Re: Elkarte Light has a funky button

Reply #35 – June 20, 2014, 03:55:59 pm

I've made another tweak for IE (1 px offset plus a z-index to be sure its behind the other triangle) ... See if that takes care of the IE issue on my test site http://elkarte.spudsdesign.com and does not cause an issue with the others

Re: Elkarte Light has a funky button

Reply #36 – June 21, 2014, 02:06:01 pm

Yeppers ... looks good now. I tried beyond belief zooms with and without hovers and I did not see any issues in IE 11 or FF 28.

Re: Elkarte Light has a funky button

Reply #37 – June 21, 2014, 02:22:38 pm

Cool

... thanks for doing some more testing! PR submitted

Re: Elkarte Light has a funky button

Reply #38 – June 22, 2014, 12:35:41 am

The linktree sections in the RC1 code were all changed to px values instead of them. This completely broke it on my forum when the linktree expanded to two lines. The arrowish sections on the end extended two lines tall clobbering both lines. Was that change done to fix this?

These cause the two line tall issue.

Code: [Select]

	margin-top: -35px;
	border: 35px solid transparent;

Changing it back to 1.077em for each makes them be one line tall again.

Re: Elkarte Light has a funky button

Reply #39 – June 22, 2014, 02:32:29 am

LOL ... frickin linktree ! I'll revert it back to em I guess, but the artifacts will probably return.

Re: Elkarte Light has a funky button

Reply #40 – June 22, 2014, 04:37:40 am

Yeah it's an annoying mess. The negative margins are also horrible when you get more than one line as the bottom line sits overlapping with the top line. And if you don't do negative margins you end up with odd double borders. And of course then there is the triangle issue.

I fixed it on my forum by setting all the borders to a uniform gray including the highlighted one. Then I could use careful z-indices to overlap things appropriately. I probably could have done it more elegantly though now that I think about it. But this area really does need work.

Re: Elkarte Light has a funky button

Reply #41 – June 22, 2014, 01:34:33 pm

Yup to all that

by the time you are done with all the css to make a bland arrow without images, it takes more space than just using the image to start with lol.

I've yet again updated the test site http://elkarte.spudsdesign.com/community/index.php with the height set back to em so when the linktree has to wrap it does not reveal the overflow . Of course the reason I made the triangles big and hid them with the overflow was to hide the edge artifacts, so you get the drill. It has some of the other tweaks still in place so its less artifacty, but its not as good, but may have to do as I'm out of ideas other than use an image.

Re: Elkarte Light has a funky button

Reply #42 – June 22, 2014, 06:33:29 pm

You can use the unicode right triangle image. You still have to get it to line up right of course. But it at least can be scaled and colored easily.

That would be \25b6

Re: Elkarte Light has a funky button

Reply #43 – June 22, 2014, 07:14:17 pm

Quote from: Spuds - June 22, 2014, 01:34:33 pm

Of course the reason I made the triangles big and hid them with the overflow was to hide the edge artifacts, so you get the drill.

Could you place each linktree element inside another div with overflow-y set to hidden? Would that then still work when it wraps to multiple lines?

Re: Elkarte Light has a funky button

Reply #44 – June 22, 2014, 08:42:20 pm

Quote from: scripple - June 22, 2014, 07:14:17 pm

Quote from: Spuds - June 22, 2014, 01:34:33 pm
Of course the reason I made the triangles big and hid them with the overflow was to hide the edge artifacts, so you get the drill.
Could you place each linktree element inside another div with overflow-y set to hidden? Would that then still work when it wraps to multiple lines?

I was thinking along the same lines and believe that would work, may give it a whirl