I have drawn a hotspot link ontop of an image, but unfortunaltely I can see the actual outlines in the web browser SAFARI. Is there a way of getting rid of this? I use Dreamweaver CS3 on a Mac.
On this web page, I've drawn the hotspot links arond the image of the rabbits and the yellow circle. You can see that when you click on these links, you see the area I have drawn the hotspot.
Greatful for any help. Thank you,
Vanessa
I think you're looking for the outline:none; css style.
You'll want to apply that to your link styles for that image.
EDIT: Add this in your style tags at the top of the page:
map area{
outline:none;
}
So it should look like this:
<style type="text/css">
<!--
#import url(../css_snap01.css);
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
map area{
outline:none;
}
-->
</style>
Related
I might make a obvious mistake but somehow I am stuck with the following:
only for large screens i don't want the vertical scrollbar so i have this simple css:
#media (min-width : 2000px) {
// hacky
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
...more style definitions
but somehow this doesn't work
i am using chrome's toggle device bar tool to switch between different resolutions. All other css definitions for > 2000px are there, only body doesn't seem to be set??
#media (min-width : 2000px) {
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
}
Did you set 100% height for html and body, like this:
html, body {
height: 100%;
}
And also for possible other child elements inside body which span the whole height of body?
Otherwise one of them will get a scroll bar (not necessarily body, but it will look very similar)
Here is the site-to-be (work in progress still)
http://www.fairhavenstorage.com/DRAFT
On a desktop screen it's fine, but on a mobile device, the site title and description do not budge. I added some custom CSS to allow the logo to display beside the site title - here is what I entered:
#logo .site-title, #logo .site-description {
display: block !important;
}
.site-title {margin-top: 26px;}
#logo img {
float: left;
margin-right: 20px;
}
#logo {
float: left;
width: 800px;
}
And for the image on the right side of header, I entered this:
.header-widget {
float: right;
width: 200px;
margin-top: 10px;
}
It's not looking good on my iPhone and I'm unsure what to do. If anyone can suggest a fix, that would be greatly appreciated!
try and deactvate or override existing css . There are #media queries in your existing css
Is a theme modification necessary for blueprint themes in order to properly provide support for apple pay or is it provided through the %%GLOBAL_AdditionalCheckoutButtons%% variable?
To get the apple pay button with white bg/black text, you need to add the following css:
.apple-pay-checkout-button {
background-image: -webkit-named-image(apple-pay-logo-black);
background-color: white;
}
For black text/white bg:
.apple-pay-checkout-button {
background-image: -webkit-named-image(apple-pay-logo-black);
background-color: white;
border: .5px solid black
}
The necessary html and integrations bits are already there with the variable you mentioned
I'm creating an email template in MailChimp, and I have some responsive code that I want to work for the devices that support it (primarily iOS Mail and BlackBerry Mail apps).
While the template loads the responsive media queries correctly in the iOS Mail app, they don't appear to trigger within the BlackBerry Mail app. I am testing on both a BlackBerry Z10 and Q10 with the same up-to-date OS.
My media query looks like this:
#media only screen and (max-device-width: 600px) {
#templateContainer {
width: 100% !important;
}
.globalLogo {
width: 90% !important;
}
.logoBox {
display: block !important;
width: 100% !important;
}
.imageBox {
width: 100% !important;
display: block !important;
height: 40px !important;
border-left: none !important;
}
.emailTitle {
text-align: center !important;
}
#title {
border-top: 3px solid #FFF !important;
width: 100% !important;
display: table !important;
}
.topImageRow {
display: none !important;
}
.tableofcontents {
margin:0 0 30px 0 !important;
list-style: outside !important;
width: 90% !important;
}
}
I've also added the following viewport meta tag to the header:
<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1">
I've experimented with max-width instead of max-device-width, but it doesn't seem to make a difference. I've also tried 800px instead of 600px, and removing the "only screen and" from the media query.
Any help would be greatly appreciated.
Final Answer:
Send it to a different email account domain. It can sometimes be the security filters at your workplace, so if you're sending it to you#yourwork.com, try hooking up you#yourotheremail.com to your blackberry and checking it there.
Original:
Not really a definitive answer, but hopefully this will get you closer...
Create a really easy media query to trigger (something like max-width:99999px;) and change the color or something really noticeable. Does it work at all?
If it is triggering, step your way down until it stops. If you can't get it to trigger at 99999px, it doesn't support media queries, even though the support charts suggest it does.
Sometimes your server can strip the media queries, so try testing it on different domain also, particularly if you have any sort of corporate server or software.
Another thing you could do is try and view the output code to see if your CSS is still intact. Not sure how to view this on a Blackberry though.
Is that possible to do with CSS.
I tried this:
#gallery_ul {
display: inline-block;
list-style: none outside none;
margin: auto auto auto auto;
width: 986px;
}
#gallery_ul li {
float:left;
margin:10px;
padding:10px;
text-align:center;
border:1px solid grey;
width:274px;
}
#gallery_ul img {
padding-bottom:5px;
}
If yes then how? Thank you.
You can either do it with CSS-columns or with javascript. I would suggest javascript, unless you don't need to worry too much about browser support/quirks.
See the masonry plugin for the most popular way to do so: http://masonry.desandro.com/
You can. But i think you have to be more specific.
One approximation is to create each block and set "float: left" property, then the squares will organize automatically or you can create three vertical columns and then put the squares inside.