Im having a bizarre problem. On one of the sites im coding, I use css hover commands to attach pull down menus to buttons. As many of you know, on mobile devices, hover commands translate to taps. The problem is that whatever I do, I cannot get iOS safari to register a click, making the entire drop down menu inaccessible on iOS safari ONLY. It works in chrome on iphone, and it works on every desktop browser. Any ideas?
This is my CSS:
/* Reserve Pull Down */
.reserve {
font-size: 30px;
color: white;
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.reservetitle{
color: white;
}
.reservedropdown {
display: none;
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: black;
padding: 12px 16px;
text-decoration: none;
}
.reserve:hover .reservedropdown {
display: block;
}
.reserve.active .reservedropdown {
display: block;
}
/* Reserve Pull Down End */
And this is my html....
<div class="reserve">
<a class="reservetitle">Reserve</a>
<div class="reservedropdown">
<a class="dropdowntext" href="reserve/index.html">By Location</a>
<div class="dropdowngap"></div>
<a class="dropdowntext" href="tel:+13014333005">Call Now</a>
</div>
</div>
Any ideas? Im having a very hard time figuring it out. Ive tried ":active", ":focus". and of course, ":hover". Cant get anything to work on iOS safari. Any help would be appreciated.
Cheers!
-Julian
I was able to get it to work by tweaking your HMTL slightly
http://codepen.io/bjornmeansbear/pen/wGdzMg
I simply made sure that the <a class="reservetitle">Reserve</a> had an href="" … Reserve
The browser for sure sees it as a link that you would click/hover on, and everything then works fine.
Related
I have a problem. I suspect that the problem is a browser-side rendering problem. Maybe even an expectable behaviour, but I have no idea, and that is why I am going to ask you:
I have an <a>-element and I place two other elements (a <span> and a <div>, the <div> has even more children) inside that element.
I upload my HTML-file to my server and can access and download it (e.g. via curl or wget). There is no problem and the file is exactly the same. When I open it in web browsers (I tested Firefox and Chrome) it is still the same, but only when I open it using the "debugging" tab where I can see the original files. The displayed HTML-file (which I can access using the "inspection" tab) is different. The <div>-element got moved out of the <a>-element. Here is the code-snippet:
<div class="navbar">
A link
<a class="dropdown">
<span>A dropdown</span>
<div class="dropdown-content">
Another link
And a third link
</div>
</a>
</div>
As you can guess, it is a snipped from a navbar ;) Maybe you need the CSS (I use SCSS-files) too:
.navbar {
background-color: $navbar-color;
overflow: hidden;
padding-left: 10vw;
padding-right: 10vw;
a {
position: relative;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color: $navbar-text-color;
}
a.dropdown {
position: static;
display: inline-block;
span::after {
content: '\f0d7';
font-family: FontAwesome;
padding-left: 6px;
}
.dropdown-content {
display: block;
position: absolute;
background-color: $navbar-color;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
a {
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: $navbar-text-color;
}
}
}
}
I know, the design is not perfect and not finished, but I expect I am facing an HTML problem and so I wanted to ask you first.
Do you have any hints, ideas, references, explanations or corrections for me? I would really appreciate it.
all. I've spent a few hours on what should be very simple before figuring out that chrome was my problem. Essentially, I'm trying to format a link of type "submit" such that it no longer looks like a button. My CSS is:
a[type="submit"]:link,
a[type="submit"]:focus,
a[type="submit"]:visited,
a[type="submit"]:active {
background: #fff;
border: 0 !important;
cursor: pointer;
outline: none!important;
display: block;
padding: 0;
margin: 0 auto;
text-decoration: none;
width: 100%;
height: 100%;
}
Text
Weirdly, it looks fine in this code snippet. However, when I run this in my project, chrome does not remove the border around the link that appears when I set the type to "submit". It does successfully change the background color to white. Things look fine when opened in firefox. Is there any way to get around this in chrome?
You seem to be getting confused between an anchor and a button
:visited and :link are CSS pseudo-classes usually used for styling an anchor element.
type="submit" is for a button element. And while type can be set on an anchor element, it will only...
specify the media type in the form of a MIME type for the linked URL. It is purely advisory, with no built-in functionality.
button[type="submit"],
button[type="submit"]:focus,
button[type="submit"]:active {
background: #fff;
border: 0 !important;
cursor: pointer;
outline: none!important;
display: block;
padding: 0;
margin: 0 auto;
text-decoration: none;
width: 100%;
height: 100%;
}
<button name="set" type="submit" value="set">Text</button>
I am having this issue for chrome (Mozilla works fine) when I float:right a specific span the text within shrinks. This is only happening on the responsive design mode in chrome, but it also occurs in live mobile version.
There may be an overarching issue. In the first photo, the icon and text is squished together, and this doesn't happen in firefox or in regular chrome.
Here is a picture without the float right.
Here is a picture with float right
Here is the abridged HTML
<div class="post-footer">
<span class="tag"><i class="fas fa-tags"></i>music</span>
<span id="date" class="tag"><i class="fas fa-calendar-plus"></i>June 7th, 2018</span>
</div>
Here is the CSS
.post-footer {
padding: 15px;
}
.post-footer .tag {
border-radius: 200px;
background-color: #c0392b;
color: white;
padding: 5px 15px;
font-weight: 500;
}
.post-footer .tag i {
padding-right: 10px;
}
#date {
background-color: #27ae60;
float: right;
padding: 2px 12px;
}
Any ideas to why chrome is acting this way? Is there a wiki or guide to common browser bugs?
EDIT: The site seems to work fine on an iPhone in safari and chrome. It does not work a S9 with Chrome.
The complete code can be found here
I have a webpage of vocabulary words, and hovering over the words triggers a popup with the definition. I accomplish this with the "dropdown" and "dropdown" content Divs. However for some reason the content inside the Divs (in this case the vocab words themselves) completely disappear in mobile, although the unordered list bullets do not. This is a pure html/css settup so I'm not sure what the issue is. I've already tested it on multiple browsers and phones and the problem is clearly displaying on mobile, whether it's iOS or Android.
Here is how the HTML looks like for one of the vocab words:
<ul><li style="color:white; float:left; width:50%;" rel="color:white;float:left; width:50%;"><div class="dropdown"><strong><span style="font-size: 16px; color:white;">Character</span></strong><div class="dropdown-content"><span style="color: rgb(0, 0, 0);">The nature of an individual's moral personality, derived from his rooted, chosen moral values which are
consistently applied and expressed by his behavior and actions.</span></div>
Here's the dropdown code from the stylesheet:
.dropdown {
position: absolute;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 300%;
min-width:350px;
max-width:850px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
Note I am working off a third party online courses platform for what it's worth. There may be some styling rules hidden that could cause issues, but hopefully whatever is causing this is obvious enough to much more seasoned developers.
.dropdown {
position: absolute;
display:block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 300%;
min-width:350px;
max-width:850px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<ul>
<li style="color:white; float:left; width:50%;" rel="color:white;float:left; width:50%;">
</li>
</ul>
<div class="dropdown">
<strong>
<span style="font-size: 16px; color:black;">Character
</span>
</strong>
<div class="dropdown-content">
<span style="color: rgb(0, 0, 0);">The nature of an individual's moral personality, derived from his rooted, chosen moral values which are
consistently applied and expressed by his behavior and actions.
</span>
</div>
</div>
hi i tried your html and its working hope this helps thanks
On occasion it is required that a DIV is a specific size so to ensure that the layout lines up but often it seems impossible to fine the CSS to ensure that it sits correctly in all of the major browsers.
For example this simple JSFiddle shows a few tabs that select the div that is shown below the tabs. To make it look more like you are pulling the section to the surface using the tab it overlaps the section slightly with no lower border so it appears the tab and section are one and the same.
The issue is that the height of the tab must be exact or the illusion is destroyed. With this example the tabs are the correct size in the latest Firefox, Safari (last PC version) & Chrome but a pixel to short in Opera so it doesn't overwrite the top border of the text section (details div) and two pixels to small in IE 10 so there is actually a gap between the tabs and main section.
I know I could create a separate style sheet that only loads for IE and Opera etc but I would rather avoid it if possible as it will increase the work for maintaining the site.
HTML from JSFiddle:
<div class="product-details-page">
<div class="details-tabs">
<div class="tabs">
<div class="description selected">Description</div>
<div class="deliveryOptions">Delivery Options</div>
</div>
<div class="details">
<div class="description show">A big description of a product. Might go over several lines and will be very "descriptive".</div>
<div class="deliveryOptions">We just chuck it in Santa's bag when he isn't looking.. <br>Delivery is only once a year but it's FREE! ;)</div>
</div>
</div>
</div>
CSS from JSFiddle
.product-details-page .details-tabs {
margin-top: 15px;
}
.product-details-page .details {
border: 1px solid #808080;
padding: 5px;
}
.product-details-page .details-tabs .tabs > div {
border: 1px solid grey;
border-bottom: none;
cursor: pointer;
display: inline-block;
padding: 5px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.product-details-page .details-tabs .tabs > div:hover {
background-color: #FF0000;
color: #FFFFFF;
}
.product-details-page .details > div {
display: none;
}
.product-details-page .details > div.show {
display: block;
}
.product-details-page .details-tabs .tabs {
height: 26px;
}
.product-details-page .details-tabs .tabs .selected {
background-color: #FFFFFF;
color: #000000;
-webkit-text-shadow: 0 0 7px #FF0000;
text-shadow: 0 0 7px #FF0000;
}
body {
font-family:"arial,?helvetica,?sans-serif";
font-size: 12px;
}
Try setting a fixed line-height on your tabs. The default value for line-height is browser-specific, and it may cause a slight offset. A typical value would be 1.2.
In fact, you realised this yourself in your comment ;) It's the text that's to blame, and the above line-height should fix it.