It appears that a ul element is rendering differently in Firefox than in Chrome and Safari. My site is Double Enders, and the ul element I am referring to constitutes the top menu (in devices above 1000px wide). As you can see, in Firefox, there is extra space above the menu, causing the entire middle section of the page to drop down. There is no such problem in the other browsers.
If I put overflow:auto on the parent div of the ul and then use position:relative and top:-20px, everything is aligned properly in FF, but not in the other browsers.
How can I get the menu to render consistently across browsers? And what is happening to cause this issue?
Certain browsers have different styling; Chrome, Safari, Firefox, Internet Explorer, Opera, and other browsers can all render things differently. Check out this answer, which explores using CSS resets (Normalize.css in this case). It takes away those subtle differences so that you can develop on one browser and feel confident that your site will look the same on other browsers.
You don't clear your floats in your middle column's menu. Clear them like so:
ul.menu::before, ul.menu::after {
content: "\0020";
display: table;
clear: both
}
and then add no margin to the ul
ul.menu {
margin-top: 0
}
It lines up your columns nicely.
I had included the webkit browser prefixes where applicable in my CSS, but I had not actually used the CSS. So, while I had
ul {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-padding-start: 0;
}
which eliminated the top and bottom margin on the ul on Safari and Chrome, I did not adjust the margin on FF. Adding
margin: 0;
padding: 0;
solved the immediate problem.
hhoburg's answer would be a useful way to proceed if I was just starting the project.
Related
Google Chrome, somewhere between version 80 and 84 seems to have made breaking changes to its layout engine, causing the HTML below to be rendered differently than before. It is also different than Firefox (v78) or Edge (v18).
<head>
<style>
body { font-family: sans-serif; }
.inner { border: 1px solid black; }
.outer { display: flex; }
span { position: relative; top: 50%; }
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<span>Text</span>
</div>
</div>
</body>
Google Chrome v84 renders this as:
Firefox, Edge, and Google Chrome <= v80 render it like this:
Although the latter rendering appears "uglier", it is actually what I expect the result to be (based on Firefox, Edge, and Chrome's previous behavior). That is, I expect the text to be shifted down by 50%, relative to its containing div, due to the top: 50% css property. But Chrome's rendering doesn't seem to change whether top is specified or not.
However, I want to point out that when viewing Chrome's and Firefox's DevTools, the values for all layout attributes appear to be the same, including top (which is shown as 9px in both). So although Chrome seems to be interpreting the layout the same way nominally, the rendering is different.
This change in rendering (and difference between browsers) has caused a number of problems in the layout of a website that uses top: 50% in combination with transform: translateY(-50%) in order to center a block vertically within another block-positioned element -- a "classic" recipe, as described by W3schools, LogRocket and others, e.g. here. One difference between the classic recipe and what I have above is that the span is positioned relative instead of absolute. This allows the height and width of the div.inner to be based on the preferred size of the span. This was all working very nicely before the recent Chrome update.
If anyone can explain the difference in rendering or discuss the recent layout changes in Chrome and/or a workaround to achieve a consistent layout in Firefox, Chrome, and Edge, I would really appreciate it.
This is a bug on Chrome 84 that is being fixed at the moment.
/*CSS for line*/
#line{
position: absolute;
top: 181px;
height: 1px;
width: 100%;
background-color: #E2E2E2;
}
HTML:
<div id="line"> </div>
I made a 100% width 1px line element using   to run through the bottom of my horizontal navigation menu - it was all fine until I tried it out in Safari and saw that it was off by 5 pixels, when I adjusted accordingly, it became off in Chrome and IE by 5 pixels - is there a way to mediate the problem to satisfy all three browsers?
You could determine your browser, and depending on your browser you can add a class to your <body>. Then you can define separate css rules for the different browsers. For instance, if your browser is safari and safari is the class, then:
body.safari #line {
/*...*/
}
and so on with the other browsers as well.
EDIT:
In php you can use get_browser() in a function to determine the browser.
In Javascript the value you are looking after is navigator.appName.
I have select element, i want to remove the arrow, then i can add other icon..
i can do that for Firefox Safari and Chrome,
but this didn't work on IE9.
.styled-select select
{
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url('select_icon.png') no-repeat;
background-position: 179px 7px;
text-indent: 0.01px;
text-overflow: "";
color: #FCAF17;
width:200px;
}
SEE Fiddle on IE9.
all what i need is remove the arrow in ie9
Please JSFIDDLE answer.
In IE9, it is possible with purely a hack as advised by #Spudley. Since you've customized height and width of the div and select, you need to change div:before css to match yours.
In case if it is IE10 then using below css3 it is possible
select::-ms-expand {
display: none;
}
However if you're interested in jQuery plugin, try Chosen.js or you can create your own in js.
I would suggest mine solution that you can find in this GitHub repo.
This works also for IE8 and IE9 with a custom arrow that comes from an icon font.
Examples of Custom Cross Browser Drop-down in action: check them with all your browsers to see the cross-browser feature.
Anyway, let's start with the modern browsers and then we will see the solution for the older ones.
Drop-down Arrow for Chrome, Firefox, Opera, Internet Explorer 10+
For these browser, it is easy to set the same background image for the drop-down in order to have the same arrow.
To do so, you have to reset the browser's default style for the select tag and set new background rules (like suggested before).
select {
/* you should keep these firsts rules in place to maintain cross-browser behaviour */
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background-image: url('<custom_arrow_image_url_here>');
background-position: 98% center;
background-repeat: no-repeat;
outline: none;
...
}
The appearance rules are set to none to reset browsers default ones, if you want to have the same aspect for each arrow, you should keep them in place.
The background rules in the examples are set with SVG inline images that represent different arrows. They are positioned 98% from left to keep some margin to the right border (you can easily modify the position as you wish).
In order to maintain the correct cross-browser behavior, the only other rule that have to be left in place is the outline. This rule resets the default border that appears (in some browsers) when the element is clicked. All the others rules can be easily modified if needed.
Drop-down Arrow for Internet Explorer 8 (IE8) and Internet Explorer 9 (IE9) using Icon Font
This is the harder part... Or maybe not.
There is no standard rule to hide the default arrows for these browsers (like the select::-ms-expand for IE10+). The solution is to hide the part of the drop-down that contains the default arrow and insert an arrow icon font (or a SVG, if you prefer) similar to the SVG that is used in the other browsers (see the select CSS rule for more details about the inline SVG used).
The very first step is to set a class that can recognize the browser: this is the reason why I have used the conditional IE IFs at the beginning of the code. These IFs are used to attach specific classes to the html tag to recognize the older IE browser.
After that, every select in the HTML have to be wrapped by a div (or whatever tag that can wraps an element). At this wrapper just add the class that contains the icon font.
<div class="selectTagWrapper prefix-icon-arrow-down-fill">
...
</div>
In easy words, this wrapper is used to simulate the select tag.
To act like a drop-down, the wrapper must have a border, because we hide the one that comes from the select.
Notice that we cannot use the select border because we have to hide the default arrow lengthening it 25% more than the wrapper. Consequently its right border should not be visible because we hide this 25% more by the overflow: hidden rule applied to the select itself.
The custom arrow icon-font is placed in the pseudo class :before where the rule content contains the reference for the arrow (in this case it is a right parenthesis).
We also place this arrow in an absolute position to center it as much as possible (if you use different icon fonts, remember to adjust them opportunely by changing top and left values and the font size).
.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
content: ")";
position: absolute;
top: 43%;
left: 93%;
font-size: 6px;
...
}
You can easily create and substitute the background arrow or the icon font arrow, with every one that you want simply changing it in the background-image rule or making a new icon font file by yourself.
In case you want to use the class and pseudo-class:
.simple-control is your css class
:disabled is pseudo class
select.simple-control:disabled {
/*For FireFox*/
-webkit-appearance: none;
/*For Chrome*/
-moz-appearance: none;
}
/*For IE10+*/
select:disabled.simple-control::-ms-expand {
display: none;
}
Having a bit of an issue with formatting on internet explorer
Site here
In the header, all that stuff is supposed to appear in 1 row. In chrome and FF, it does, but when I open up ie9, it appears as a new line. I've tried changing the float, changing the display type and modifying the width and margin attributes but I can't get a fix on the issue.
For the headRight class, even when I change the width, it doesn't change in IE and I'm not sure why.
Code here:
.headRight { width:650px !important; _width:600px!important; float:right;}
.faderdiv
{
display:inline;
float:right;
margin-top: 35px !important;
}
.donate
{
display:inline;
float:left;
margin: 55px 90px 0 !important;
}
this is actually for ie7 but I think this will work for your problems too. IE7 float right problems
For some reason I cannot display the dropdown menu on IE when I add a z-index in the header of any number. When I remove it, it works. However the dropdown then appears behind the container and content in Firefox and Chrome. So either I take it out or leave it in, I cant seem to satisfy all browsers. So i tried making a separate IE stylesheet without the z-index but that doesnt work either. I know the separate IE CSS is working because I changed the backgrounds but it uses the dropdown menu in the master stylesheet.
Website is www.stingrayimages.ca
Thank you for your help
Edit: So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div. Anyway to fix the dropdown menu without adding z-index to the head div?
Edit: I got the dropdown to work on IE9 firefox and chrome. Not IE 6, it just blew up.
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
z-index:1;
}
OK so I had a look and there's good news and bad ;)
the opacity filter in the #head div means that overflow: hidden is being triggered, which is why no menus (it's the unfortunate side effect of filters and overflow I'm afraid).. remove that and you can have your z-index which you need anyway
next to get the transparency (opacity) for your dropdowns you can just use rgba(255,255,255,0.9) on the #nav ul li ul rule instead of #fff; (though leave #fff before that rule for fallback for browsers that can't do rgba() yet.. read more!)
That's nearly everyone happy - now you can also do rgba() transparency for IE using the gradient filter..
so the rule I landed up with looked like this (in an IE conditional comment):
#nav ul li ul {
zoom: 1;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
/* behavior: url(PIE.htc);*/ /* yuk filter */
}
and I thought it would be good to go..
BUT the Bad News
the behavior is commented out because you can only have one or the other, transparency or rounded corners, :( apparently
I didn't do too much research though so YMMV
I also noticed a problem or three in IE7, not sure if you want to support that but in case you do.. or want to check my final code which got it to this stage I pasted it in PasteBin
that code replaces your main CSS - the #head rule and whole /*navigation*/ section
Update: more good news and a little bad!
you can have the transparency and the rounded corners thanks to CSS3 PIE's own -pie-background property, but not the box shadow as well, the way PIE deals with box shadow means it fills the div instead of just drawing on the outside so the -pie-background reading of the rgba background is transparent but shows the grey color used for the shadow!
My solution:
I added a border to make up for loss of box-shadow, it's not looking too bad, and it's working across IE's ;)
here's an update to the I conditional comment above:
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul {
box-shadow: none;
-pie-background: rgba(255,255,255,0.9);
border: 3px double #eee;
border-width: 0 3px 3px 3px;
behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->
I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless!
If you add a z-index and position to the #container as well, it should solve your problem. z-index only applies to positioned elements.
#container {
position:relative;
z-index:0;
}
It is also worth reading Overlapping and z-index, which summarises the properties and also describes the problems when using z-index and IE.
Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it. I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version.
So IE will have multiple copies of the same style being applied. Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property.
You have filter:alpha(opacity=93); in both style.css and ie-style.css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently. If you remove the filter from both stylesheets then the menu correctly displays in IE8.
If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.
Have a look at this solution : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Another solution that I used already is quite easy, but a pain in the *. You must all the parent container a specific lower z-index value than the one you want to show on top of the others.
Like so :
<parent>//z-index 1
<child>//zindex 2
<yourdropdown>//z-index3
Update 1
The menu didn't show correctly in my chrome so I fixed the #head z-index to 80 and it did way better. Do the following to get the layout the same in IE and Chrome and Firefox. Watch out though, I only tested those change on the homepage.
Add this to the .conbox class :
.conbox {
position:relative;
}
Place the logo correctly
#logo {
position:absolute;
left:0px;
top:0px;
}
Remove the #nav positioning
#nav {
margin-top:80px;
z-index:3;
}
The problem is, I can't even see any effect on the menu mouseover in IE!!
Setting z-index: -1 for elements that menu overlays and z index of men div resolved this problem for me.
#bodyWrapper
{
background: none repeat scroll 0 0 #E4F7FE;
overflow: hidden;
position: relative;
width: 100%;
padding: 0 0 60px;
z-index: -1;
}