Link
The problem is in the jQuery Mega menu. It somehow displays correctly on Google Chrome Linux and Internet Explorer (Windows 8), but incorrectly on Opera (Linux), Google Chrome (Windows), Firefox (windows), etc. If it is displayed incorrectly, last menu when hovered overlays with search input. What could be the issue here? I do not want to change the paddings.
The difference is most likely due to browsers interpreting decimal pixel numbers differently. Each menu item doesn't have explicit width set via CSS so it gets fraction of pixels that are respected in some and gets rounded in some. Now, that only makes 1px difference per element but that eventually add up to 10px, 20px, and more.
So the solution would be to give enough room between menu item and the search bar, maybe make it narrower.
This might help you understand the issue in detail:
Are the decimal places in a CSS width respected?
Dont Know is it right method or not
You have some code in your CSS file on line no 2025
#searchform {
position: absolute;
top: 79px;
left: 744px;
width: auto;
height: auto;
margin: 0px;
display: table-cell;
}
edit the left property value to 764px from 744px;
and on line no 3416
#searchform .text_input {
width:149px;
height: 9px;
padding: 10px;
position: relative;
top: -1px;
vertical-align: middle;
font: 11px Arial,sans-serif;
}
Remove the width property from this chunk of code
Related
I have a bit of a bug where some members in my team see focus styles differently on the same element. They are running Chrome 86 on Mac. I am running Chrome 79.
When this specific element is focused, I see the basic focus ring I am used to, the blue glow at a depth of 5px
My colleagues however see a very narrow 2px border around the focused element.
The code for the element is:
<button>
<img ... />
</button>
The image inside the button has overflow:hidden applied in order to give the appearance of a centre crop.
Here is a snippet
button {
display: inline-flex;
width: 100px;
height: 100px;
align-items: center;
overflow: hidden;
position: relative;
margin-right: 8px;
margin-top: 8px;
border: 0;
cursor: pointer;
}
img {
margin: 0 auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
<button>
<img src="https://picsum.photos/id/1062/100/50">
</button>
I'm trying to understand what the cause of the change in user agent stylesheet settings is and why it would cause this difference.
The focus style I see:
outline: -webkit-focus-ring-color auto 5px;
My colleagues see:
outline: -webkit-focus-ring-color auto 2px;
However, this isn't universal on their browsers. They see the 5px on other elements.
I don't really want to start adding new focus styles as I'd prefer to honour the browser's own settings in case the user has specified a focus style that works for them.
My main questions
What causes the browser to choose the thickness of the focus ring?
Could the overflow:hidden on the image inside be the cause of this bug?
Why don't I see the issue on Chrome 79?
What causes the browser to choose the thickness of the focus ring?
The browser's built-in stylesheet ("user-agent styles"). This is liable to change with every major browser update - it's also platform-specific (e.g. Chrome 86 on Mac will render things differently to Chrome 86 on Windows 10) - so you must not depend on any particular user-agent stylesheet rules for your webpage to render correctly.
Could the overflow:hidden on the image inside be the cause of this bug?
I doubt it.
Why don't I see the issue on Chrome 79?
Because Chrome changed their user-agent styles for :focus and :focus-visible in Chrome 86.
Chromium was updated earlier this year with a fresh look.
You can read about the design updates here. This is one (of many factors) that can account for different user agent stylesheets.
However be aware that just because you see one thing, your colleagues see another that those are the only options.
My focus ring is only 1px and black, so that gives you an idea of how varied styles are (Chrome 86.0.4240.111 on Windows).
Accessibility
The more important part of your question is the part where you don't want to "interfere" with the browser default styles.
I don't really want to start adding new focus styles as I'd prefer to honour the browser's own settings in case the user has specified a focus style that works for them.
This just doesn't work in the real world. What if your website has a blue background? (Yes I am aware browsers are becoming smarter at accounting for this but in accessibility we need to support all the way back to IE8!). Also what if you have a complex widget that changes colour?
Style focus so that it is appropriate for the website, you want a contrast ratio of at least 3:1 on surrounding items. For really complex sites you may need a different focus ring colour depending on the background location to maintain this contrast ratio.
Style your focus rings!
#Dai made a valid point that this section was not very clear initially.
When I say to "style your focus rings" I mean to make them more usable and prominent than browser defaults.
Consider where they are placed on the page (their surroundings) to ensure sufficient colour contrast (as mentioned earlier 3:1 minimum with surroundings) and make sure they are clearly visible (they are called visible focus indicators for a reason).
As #Dai said, don't use this as an opportunity to try and flex your creative muscles, 20px wide magenta focus rings are not needed (and possibly might not be accessible). Keep them simple and consistent across the site.
Above all remember that focus indicators are there for accessibility.
I tend to advocate for an outline of 2px and an outline offset of 2px to ensure it is visible as the slight bit of white space around the item makes it easier to see.
button {
display: inline-flex;
width: 100px;
height: 100px;
align-items: center;
overflow: hidden;
position: relative;
margin-right: 8px;
margin-top: 8px;
border: 0;
cursor: pointer;
}
img {
margin: 0 auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
.better:focus{
outline: 2px solid #333;
outline-offset: 2px;
}
<h2>no image standard button</h2>
<button>
button with text
</button>
<h2>standard</h2>
<button>
<img src="https://picsum.photos/id/1062/100/50">
</button>
<h2>better</h2>
<button class="better">
<img src="https://picsum.photos/id/1062/100/50">
</button>
Oh and :focus-visible will be great when it gets traction but at the moment it doesn't have very good support so make sure you polyfill it if you use it.
The outline on focus if it is not set in CSS is actualy decided by the browser settings.
Here you can see already differents behave from a browser to another on windows and Mac. So I would not be surprise that this settings are changing from a version to another.
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
I'm fixing a prestashop theme and I'm about ready to tear my hair out over a very small issue. I have a search positioned absolutely beside my navigation, but the top is 10px lower than firefox in chrome, so basically, if it is centered in firefox, it hangs low on chrome. below is my search box css:
#search_block_top {
background: none repeat scroll 0 0 transparent;
height: 30px;
position: absolute;
right: 20px;
top: 215px;/*this is correct in firefox*/
z-index: 1005;
}
you can see the site in here: http://goo.gl/sfFYT reset is given my stylesheet and I have tried manually setting search block's font-size and line-height to zero, but it hasn't worked. I have no idea what to do with this. Thanks a lot for helping.
Sorry, I didn't view the answer before mine, and gave a totally duplicated answer. withdraw that. and here is the new one:
#menu {
overflow: hidden;
}
#search_block_top {
top: 205px; /* you can modify the original rule */
}
the main idea: create a BFC for #menu with overflow: hidden;
PS: that code is unbelievable. :(
stay away from that, and have a nice day.
Rounded corners on my jQuery sliders only work in Firefox.
Renders correctly in Firefox 17.0.1 (see image below)
Not rendering correctly in Safari Version 6.0.2 (8536.26.17) (see image below)
Not rendering correctly in Chrome Version 23.0.1271.101 (see image below)
Here is the jsfiddle build: http://jsfiddle.net/plasticmonument/TCVH5/1/ (note, I only gave full path url's to the slider images, everything else will be missing)
My HTML:
enter code here
My CSS:
.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
-ms-border-radius: 10px;
-ms-border-top-left-radius: 0;
overflow: hidden
}
#feature-slider ul.slider {
position: absolute;
top: 0;
left: 0;
width: 900000px
}
My guess is that it's the old "foreground images aren't clipped" bug.
In some browsers, a border radius may be applied, but foreground images of the elements with border-radius aren't restrained by the radius.
I was under the impression that this was something that had been dealt with by the major browsers, but it's not something I've looked into for a while, so I may be mistaken in that. It certainly looks like it's what you're seeing. I remember it was quite a big issue back in the days of Firefox 3.x, but if I recall correctly, the FF team sorted it out somewhere between v4 and v8.
To prove it, add an actual border (eg border:solid black 2px;) to the element, and see what happens. If the border disappears under the image at the corners as it follows the radius, then this is the bug you're seeing.
If this is the problem, then the solutions are:
Use a background image instead; this won't be clipped.
Add an additional layer of markup -- eg a <div> with the existing <img> inside it, and put the border radius on the <div> instead of the <img>.
Ignore it, and wait for browser vendors to fix the issue.
I'm trying to AP a div in the header of my blog containing a bg image and a link. I looks correct in Chrome, but incorrect in Safari and Firefox. I suspect it's not the AP div itself but other elements causing the shift, though I can't figure out what, and I'm using a reset.
Here's a link to screenshots show you what I'm talking about:
http://imgur.com/a/hP8dM
Here's a link to the website:
http://www.artyst-tyrant.com/blog
Here's the css I'm using:
#trex-blog {
margin-left: 435px;
position: absolute;
top: 50px;
z-index: 50000;
}
#trex-blog a, #trex-blog a:visited, #trex-blog a:hover {
background: url(../img/blog-trex.png) no-repeat scroll 0 0 transparent;
display: block;
height: 121px;
width: 356px;
font-size: 0;
line-height: 0;
overflow: hidden;
text-indent: -9999px;
}
Here's the html
<div id="trex-blog">Artyst Tyrant - Victor Beazzo Designer for Hire</div>
Designer by trade who's trying his hand at learning to code, but I'm by no means a pro, so please, go easy.
Thank you in advance for your help, it's really appreciated.
Chrome v18 on Win7 renders the image in the same place as my other browsers - perhaps you were browsing a cached version on chrome only?
The only caveat to absolute positioning elements is if they are wrapped in a relatively positioned element - then the absolute position is relative to the parent - http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I looked at your source code and didn't notice any position relative attributes on the parent elements.
I adjusted the css top attribute value to 20px and it aligned for me in all current browsers.