August 10, 2019 at 2:36 pm #294183
im 15 years old and from germany;
Sorry for my bad english and my bad code.
I have 2 problems on this website (lucasmucmc.com/contact):
I started learning about SVG today and already have a problem where i cant find any solution int the internet for:
The Red Stars on this page are working fine for (WIN10: Chrome, Firefox, IE, Edge); but on the Safari browser on my IPhone they are Invisible…
But after trying a long time i figured out if i remove from (line 84 of the html code) the ‘height=”5″ width=”5″‘ attributes, it is visible on my IPhone BUT it is now in the completely wrong place in Internet Explorer.
To show it to you i removed ‘height=”5″ width=”5″‘ by the first star (the name input) on my webpage that you see bouth ideas at once.
The second problem is again ONLY IN SAFARI MOBILE:
I dont know why but if i set the margin form (line 37 of the css code) to 0 there is still an margin left and right around the form. The same thing is with the padding (line 36 of the css code) in the form. To make matters worse the Input fields dont have the same size like the send button.
LucasAugust 10, 2019 at 10:15 pm #294184
For the first problem, have you tried setting a class on the svg icon and then setting the width and height in the css file? as for the second problem I suggest using something like Normalize.css it might help with your margin and padding problemAugust 11, 2019 at 4:25 am #294189
helloAugust 12, 2019 at 11:43 am #294245
I already have included the normalize.css and I have set a class on the svg (.star) to control the Color, the position and height :(August 12, 2019 at 2:48 pm #294252
I fixed your star icon problem by extracting your svg path data to a symbol tag at the bottom of the page, and then xlink:href them to where you had used the svg in all the spans. Heres a pen solving your problem so that you can follow what im saying. I also added padding:0; and width:5px; to the star class. Hope this helps you some :)August 13, 2019 at 2:46 am #294263
Thank you @waydeshepard for your help.
But three more question: Is there an need for the “>title>star_icon>/title>” tag? And why have you removed “xmlns=”http://www.w3.org/2000/svg”” from the svg tag? And by searching in the internet (to understand your solution) i found on the mozilla developer page this snipped “xmlns:xlink=”http://www.w3.org/1999/xlink”” for adding in the svg tag. Is any of this required or usefull?
I added “fill=”currentColor”” to the path element to make it red again.
LucasAugust 13, 2019 at 3:29 am #294266
I fixed the 2nd problem by removing the @supports rule.
It should adapt the website to the Iphone X, but it looks like it is not working properly.
Maybe it’s because I have the “IOS 13 developer beta 6” on my phone, which is still a beta, and thus apple has not fixed all the bugs.
Maybe it works on every other iphone.
But for now I will remove it.
However, I have bad news. I found a new bug; There is too much space under the form, it should be the same distance above the form as under the form (5vh; line 37 css). Why is it not working? :(
This problem is in every Browser…
I think the solution is easy, but im just to stupid…August 13, 2019 at 5:53 pm #294331
On the svg at the bottom of the page, add
display="none". As for your other questions I myself hardly ever use
xmlns=”http://www.w3.org/2000/svgit is totally up to you to use that.
And to my understanding in the symbol tag the title isn’t really required. I just use it so that i know which icon is which.August 14, 2019 at 7:21 am #294357
all problems are now fixed. :)
I’m really glad someone took the time to help me. I wish you a nice day and good luck with future projects.
LucasAugust 17, 2019 at 12:02 am #294544
You must be logged in to reply to this topic.