Yesterday I discovered a layout issue with Chrome and Edge that doesn't show up in the Samsung Internet Browser and didn't exist before. The problem only occurs when using columns. Here's my CSS:
.div_columns {
width:500px;
column-count: 2;
column-gap: 20px;
}
.card {
height: 32px;
padding: 5px;
background-color: #f0f0f0;
margin-bottom: 8px;
}
.div_buttons {
position: relative;
height: 34px;
min-width: 50px;
float: right;
text-align: right;
background-color: #808080;
padding-top: 18px;
box-sizing: border-box;
}
.button {
position: absolute;
right: 1px;
top: 1px;
width: 16px;
height: 16px;
background-color: #f3f3f3;
}
And here is my HTML:
<div class="div_columns">
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
</div>
The output looks like this, and as you can see there appears to be only one button instead of four. But they all appear to be in the same position. Like I said at the start, this problem seems to be browser and use of columns related. So what is wrong here?
Another annoying thing I want to mention is that when I use Microsoft Edge's developer tools (F12) and want to copy a CSS rule by right-clicking, the developer tools close after that. This has not happened with Edge before and is not happening with Chrome.
I successfully restored these buttons to regular position by adding display:inline-block to the div_columns class.
As to the copy rule issue, I found it in my devtools, too. The only conclusion I've got is that if you right-click inside the braces {}, the context menu looks like below. The "Copy rule" option here works as expected:
But if you right-click outside the braces, the context menu changes like below. The "Copy rule" option here will lead to a crash of devtools (actually any option here will lead to a crash). But what's more interesting is that the style rule will still be on your clipboard. So I suggest sending a feedback to Edge team by pressing Shift+Alt+I in Edge:
In a situation like this i would just try to disable position relative position absolute and float right, and ill write something inside the buttons
i'd disable evrything till i find whats the problem
Related
The code is very straight-forward, see part of it below. Full example here:
Plain HTML:
<div class="test1">
<div class="silver1">
<span>test1</span>
</div>
<span>box 1</span>
</div>
CSS
.test1 {
border: 1px solid red;
width: 80px;
background-color: red;
}
.silver1 {
width: 30px;
height: 30px;
position: relative;
}
.test1:hover .silver1 {
top: 30px;
left: 80px;
border: 3px dotted blue;
background-color: yellow;
}
Tests:
Hovering with a mouse in any popular browser in either Windows or
Mac works fine.
By tapping the boxes on an Android Mobile it works
as well.
Tapping on Safari (iPhone/iPad) nothing happens.
Holding down on Safari sometimes work.
Question
How do I activate :hover for Safari iOS?
Ideally pure CSS solutions.
Try if with placing an :active after the :hover.
https://codepen.io/mausinc/pen/LgvmXv
.test1:hover:active .silver1 {
top: 30px;
left: 80px;
border: 3px dotted blue;
background-color: yellow;
}
Good luck
Well "hover" isn't a thing on touch interfaces.
Chrome mobile tends to call the first tap, hover if it's specified and a subsequent tap the same as a click. This functionality can get strange for users too. Safari, as you discovered, ignores it completely.
I would suggest that you try really hard to remove any content from hovers that users MUST do to complete a process or navigate and replace them with interaction specific paradigms.
You may even want to test if the device is touch based and provide a completely different experience for those users instead of trying to match hover.
Here's a media query for touch devices. #media (any-hover: none) { ... }
More info from CSS-Tricks and a good overview of what's possible in 2018.
I found a snippet of SCSS that I'm trying to use.
It contains CSS vendor prefixes that I'm unfamiliar with:
::-webkit-slider-runnable-track
::-webkit-slider-thumb
::-moz-range-track
::-ms-fill-lower
etc
I'd love to use Chrome or some other browser's "developer tools" / Inspect to be able to play around with colors and dimensions, but I can't find where these particular CSS rules are.
All I can find is my input element: <input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">
Currently, I'm editing SCSS in Netbeans, and it compiles to CSS on each save, and then I refresh my browser.
It's time-consuming, and I'd also really like to see where those rules take affect when I highlight an element in the inspector.
I appreciate any suggestions.
P.S. I figured there would be a way to show them, like there is for active, focus, hover, and visited rules.
The vendor prefixes are actually considered pseudo-selectors, and as such, create their own CSS selectors. You won't see them in the CSS states such as :hover and :active, but rather as independent CSS rules:
input[type='range']::-webkit-slider-runnable-track
input[type='range']::-webkit-slider-runnable-thumb
input[type='range']::-moz-range-track
input[type='range']::-ms-fill-lower
This is illustrated in the example below, which has different displays on the different browsers:
input[type='range'] {
width: 210px;
height: 30px;
overflow: hidden;
cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 200px;
height: 10px;
background: #AAA;
}
input[type='range']::-webkit-slider-thumb {
position: relative;
height: 30px;
width: 30px;
margin-top: -10px;
background: steelblue;
border-radius: 50%;
border: 2px solid white;
}
<div class="container">
<input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">
</div>
Hope this helps! :)
I finally could find an option on Chrome Dev Tools to show the user-agend pseudo-elements.
Basically you have to go to "Preferences" and scroll to the "Elements" section, where there is a option for that.
Webkit Pseudo Elements Documentation
I'm trying to put a dropcap in a paragraph by using a . I think I found the correct workflow and tested it already in another area of my website, it worked great. When I want to apply the same technique to the desired paragraph, the content, the first letter of the paragraph, changes when viewed in browser to "03/". I've tried several different options but always same outcome.. When I inspect element in chrome, it shows "03/" as content, which is not correct. Does anyone know what might cause this?
css:
#services .firstcharacter { /*displays /03 instead of character*/
float: left;
color: #000;
font-size: 75px;
line-height: 80px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia; }
html:
<p><span class="firstcharacter">N</span>ulla...</p>
paragraph screenshot
Thanks!
EXTRA INFO
At first I removed #services, but no changes.. Afterwards I wrote code differently like this:
CSS
.service p.char a{
float: left;
color: #000;
font-size: 75px;
line-height: 80px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: serif;
}
HTML
<p class="char"><a><span>D</span></a>ulla...</p>
But nothing changed.
When I inspect the element in browser (chrome), the span's content has changed to 03/. But when I change it there, the character "D" or whatever is displayed correctly.
Can't really see where this error might be.. I checked my entire code for the "03/" combination as well and changed font settings, but no luck there either.
As I don't know full code, I can only suggest you removing #services from css. Or add <meta charset="UTF-8"> to <head>. Or both.
By dropping the in html, I solved the problem..
Now I have my solution, but would still like to know why this happened.
Thanks for the replies and for helping me find the cause.
I'm working with webcams and have experienced a weird issue.
I have a flash object with my webcam video, and I have put a div over it (with absolute positioning), as a button to toggle the video. The HTML is something like this:
<div id="container">
<object></object>
<div class="camicon"></div>
</div>
And the CSS:
div.camicon {
height: 32px;
width: 32px;
background-image: url('../../images/broadcast/webcam-icon.png');
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
The problem now is that, in Firefox, cursor is not restored to its default value (i.e. the arrow) while cursor has left the icon AND stays on the flash object. However, cursor is restored properly when it moves outside the flash object.
This doesn't happen on Chrome, so I guess this may be some annoying bug.
Does anyone know something about this? I have tried lots of possible fixes for it, but no success so far.
More info:
Ubuntu 11.10 32bits
Firefox 13.0.1
Flash 11.2.202.236
I don't have any code to test it, but I would think something like this should work to help force the point (maybe this is one of the solutions you already tried):
#container {
cursor: auto; /* or "default" */
}
#container div.camicon {
height: 32px;
width: 32px;
background-image: url('../../images/broadcast/webcam-icon.png');
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
I have a drop down menu that I have styled using CSS and a Jquery plugin named: Selectbox. http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
Everything is working great and looks perfect in Firefox, Chrome, and Safari. But for some reason when I click the drop down box in Internet Explorer the drop down floats all the way to the right and not directly beneath the drop down. I have only been coding 3 months so it could be a really stupid mistake but I can't seem to figure it out. Any help would be appreciated.
Here is the HTML:
<div class="foldersoption">
<select name="Items" id="Items">
<option value="option1">My Items</option>
<option value="option2">Shoes</option>
<option value="option3">Birthday Ideas</option>
</select>
</div>
Here is the CSS:
.foldersoption{
float: left;
margin-left: 25px;
}
div.selectbox-wrapper ul li {
border: 1px solid #FFFFFF;
cursor: pointer;
display: block;
font-size: 12px;
list-style-type: none;
padding: 5px;
text-align: left;
width: 243px;
}
.selectbox {
cursor: pointer;
display: block;
float: left;
font-size: 15px;
height: 25px;
padding-left: 5px;
text-align: left;
width: 250px;
}
Can you help please?
Apply zoom and position relative to the foldersoption element, and other elements as needed. For example:
.foldersoption {
zoom: 1;
position: relative;
}
This will force IE to treat it like the other browsers do. IE doesn't handle floating very well - you have to give it some additional configuration & constraints in order for it to work properly.
Edit: Based on the screenshots, IE is complaining about security issues - is there a chance it is blocking certain scripts from loading as well? Try disabling or reducing the security in IE and see if the menu drops.
Edit #2: Actually that plugin you used is old and does not appear to be well tested or maintained. Can I suggest an alternative?
http://plugins.jquery.com/project/jQuerySelectBox
You can see an example here: http://labs.abeautifulsite.net/projects/js/jquery/selectBox/
I tested it in IE7 and it seems to work ok. Seems extremely simple to set up, and to change the appearance you only need to change or override the default CSS styles.