Hello -
I have designed a shop which has some custom html and css on the home page.
However, I have yet to get CSS styling of nested elements working correctly.
In particular, I want an image to be a link, and I want a border around the link.
Normally, by default, if you don't specify border="0", a border would show around an image being used as a link. But it works exactly opposite in SCCp whenever using an internal style sheet.
The alternative of using inline styling won't work because I actually need to set the a:hover value and this cannot be done with inline styling. But I cannot even get the most simple case of css styling working on nested elements in an internal style sheet so I am stuck.
I have the css working correctly on other pages outside of the SCCp code so I believe the problem is not my code.since the exact same code works elsewhere but doesn't work inside of SCCp.
For example the following works in SCCp (using the html button - I've left out the square brackets).
Here's the CSS:
<head>
<style>
img { border:5px green solid;}
</style>
</head>
Here's the HTML:
<img src="http://www.coffeecup.com/images/coffeecup-symbol-45x50.png" alt="my-alt-text">
BUT the following does not work inside SCCp, although it works outside of SCCp.
CSS:
<head>
<style>
a img { border:10px purple solid;}
</style>
</head>
HTML:
<a href="http://usps.com">
<img src="http://www.coffeecup.com/images/coffeecup-symbol-45x50.png" alt="my-alt-text" ></a>
I've attached a screen shot showing the two cases, the first one working (has a border) and the second not working (no border).
I suppose SCCp could also be over-riding the styling on the img link since without styling it does not have the customary default border. If that is the case, perhaps someone can tell me what file I need to edit to get around this.
Priscilla Walther
Registered User
13 posts
Eric Rohloff
Senior Advisor
20,271 posts
Try adding a class to your code.
a img .bord { border:10px purple solid;}
<a href="http://usps.com">
<img class="bord" src="http://www.coffeecup.com/images/coffeecup-symbol-45x50.png" alt="my-alt-text" ></a>
<img class="bord" src="http://www.coffeecup.com/images/coffeecup-symbol-45x50.png" alt="my-alt-text" ></a>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Priscilla Walther
Registered User
13 posts
Thanks for the suggestion, but it did not work. Do you have any other ideas?
Also, just to mention, I have tested this on four different browsers on two different machines, so I don't think it is something related to my local browser.
Here are three links to three different sites: Maybe someone can see what I am doing wrong.
http://www.beautyjunkiesite.com/t1 - This should show the green border around the coffeecup image. (No <a> tag, just <img> tag). This works.
http://www.beautyjunkiesite.com/t2 - This should turn the image into a link, and it should have a border. In this case I've used your code that includes the .bord class, but previous testing has shown the result would be the same whether I used a class or not.
http://beautyjunkiesite.com/t3/ - This is just about as plain as you can get. An <img> nested in an <a> tag. By default, this should have a simple blue border around the image since there is no styling. I have also added an unstyled link by itself to make sure that default link styling is correct compared to the expected default case and it seems right. But the image in link does not have the border.
Can anyone see what I am doing wrong?
Thanks in advance!
Also, just to mention, I have tested this on four different browsers on two different machines, so I don't think it is something related to my local browser.
Here are three links to three different sites: Maybe someone can see what I am doing wrong.
http://www.beautyjunkiesite.com/t1 - This should show the green border around the coffeecup image. (No <a> tag, just <img> tag). This works.
http://www.beautyjunkiesite.com/t2 - This should turn the image into a link, and it should have a border. In this case I've used your code that includes the .bord class, but previous testing has shown the result would be the same whether I used a class or not.
http://beautyjunkiesite.com/t3/ - This is just about as plain as you can get. An <img> nested in an <a> tag. By default, this should have a simple blue border around the image since there is no styling. I have also added an unstyled link by itself to make sure that default link styling is correct compared to the expected default case and it seems right. But the image in link does not have the border.
Can anyone see what I am doing wrong?
Thanks in advance!
Jo Rice
Senior Advisor
10,951 posts
Just add a class to your CSS and give it a border
myborderclass {
border: 5px solid purple;
}
or substitute a color number for the purple.
Now add that class to that exact image and that should work fine. My guess is you are probably adding a separate img id and it's clashing with the default one(s) or you editing one but didn't realize there were multiples maybe? Either way, just add it as a separate class and add that class to your image code and that sould fix you right up. :)
myborderclass {
border: 5px solid purple;
}
or substitute a color number for the purple.
Now add that class to that exact image and that should work fine. My guess is you are probably adding a separate img id and it's clashing with the default one(s) or you editing one but didn't realize there were multiples maybe? Either way, just add it as a separate class and add that class to your image code and that sould fix you right up. :)
Priscilla Walther
Registered User
13 posts
Thanks for that suggestion, but it didn't work either.
I'm guessing my styles are being clobbered after-the-fact. This would also explain why the default style is not working correctly either. (t3 in my example sites above).
Thanks for everyone's efforts, but it's probably time for a support ticket.
I'm guessing my styles are being clobbered after-the-fact. This would also explain why the default style is not working correctly either. (t3 in my example sites above).
Thanks for everyone's efforts, but it's probably time for a support ticket.
Jo Rice
Senior Advisor
10,951 posts
personally, before I would bug the CC team on this, I would just create the entire thing with the image instead of trying to put a border around it with code. My bad for not realizing this was for SCCP or I would have already suggested that. Just put the image into your favorite image editor and add that border that way. If you need help with it let me know and I can probably whip it up for you. If you're wanting something other than a purple border just hollar and I can try to work something else up for you too if you want.
Either way, if you can do it in an image editor that would be easier than trying to do it in the code with that program. Not losing any SEO for a border :)
Either way, if you can do it in an image editor that would be easier than trying to do it in the code with that program. Not losing any SEO for a border :)
Priscilla Walther
Registered User
13 posts
Hi Jo Ann -
Thanks for your comments and your offer, but the issue is not that simple. What I actually want to do is to do is much more complicated, but it does rely on being able to nest an <img> tag in an <a> tag.
This is a fundamental feature that has been available in html since the 90's. If it isn't working in SCCp then that is an issue that needs to be flagged and at the very least it should be mentioned somewhere as a bug so people don't count on it being available in the software.
Also I appreciate the comment about the colors and styling, but the idea was to make the examples as simple as possible in order to trouble-shoot the problem without the distraction of any other styling. The colors and graphics used on our site are entirely different than anything being shown in these very simple examples.
Thanks again and kind regards,
Priscilla.
Thanks for your comments and your offer, but the issue is not that simple. What I actually want to do is to do is much more complicated, but it does rely on being able to nest an <img> tag in an <a> tag.
This is a fundamental feature that has been available in html since the 90's. If it isn't working in SCCp then that is an issue that needs to be flagged and at the very least it should be mentioned somewhere as a bug so people don't count on it being available in the software.
Also I appreciate the comment about the colors and styling, but the idea was to make the examples as simple as possible in order to trouble-shoot the problem without the distraction of any other styling. The colors and graphics used on our site are entirely different than anything being shown in these very simple examples.
Thanks again and kind regards,
Priscilla.
Jo Rice
Senior Advisor
10,951 posts
Image linking is extremely easy to do, but... what you'll need to do is not in code it's in the actual editing tool in the program.
Click to add an image, place it where you want it etc. Now click that image and click on the tool above to create a link. You're trying to do it the hard way :P
Click to add an image, place it where you want it etc. Now click that image and click on the tool above to create a link. You're trying to do it the hard way :P
Priscilla Walther
Registered User
13 posts
Well, here's the result of my conversation with Support.
Support says that the html editor isn't really intended to do much in the way of html. Just some simple things. And that if you need to do some styling, well, that's never been tested. Which I guess is why the default html behavior doesn't work for nested elements. Lol.
Also, they said they do not recommend internal style sheets but instead inline styles. Which seems to run counter to some other recommendations in the forums, but that's what I was told...
So I have found a solution that I will share with you. If you need to do some styling on nested elements and the normal ways don't work, create an internal style sheet, and add a class that has the styling that you want. Then enclose your items with a <span> that has that class that you created.
Well that's all for now. Good luck to all of you and happy coding.
Support says that the html editor isn't really intended to do much in the way of html. Just some simple things. And that if you need to do some styling, well, that's never been tested. Which I guess is why the default html behavior doesn't work for nested elements. Lol.
Also, they said they do not recommend internal style sheets but instead inline styles. Which seems to run counter to some other recommendations in the forums, but that's what I was told...
So I have found a solution that I will share with you. If you need to do some styling on nested elements and the normal ways don't work, create an internal style sheet, and add a class that has the styling that you want. Then enclose your items with a <span> that has that class that you created.
Well that's all for now. Good luck to all of you and happy coding.
Priscilla Walther
Registered User
13 posts
Jo Ann -
"Click to add an image, place it where you want it etc. Now click that image and click on the tool above to create a link. You're trying to do it the hard way :P "
Maybe I'm just dumb, but I sure don't see how to add an image to the page other than html. I've tried dragging/dropping images, I've tried right-clicking on the page. I've tried cut-and-paste. But none of those features seem to work on the static page that I have created, nor on the shop home page and I don't see a menu option to browse for an image.
I see a link button sure enough, but nothing to manage adding images to the page.
Are you sure we are talking about the same product?
"Click to add an image, place it where you want it etc. Now click that image and click on the tool above to create a link. You're trying to do it the hard way :P "
Maybe I'm just dumb, but I sure don't see how to add an image to the page other than html. I've tried dragging/dropping images, I've tried right-clicking on the page. I've tried cut-and-paste. But none of those features seem to work on the static page that I have created, nor on the shop home page and I don't see a menu option to browse for an image.
I see a link button sure enough, but nothing to manage adding images to the page.
Are you sure we are talking about the same product?
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
