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
Related
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.
I search for a long and I can't find an answer :/
In Chrome (Internet Explorer, Konqueror, and many others) the h1 margin at bottom is added to .blue. However, Firefox respect the css rules properly.
Any suggestion?
HTML
<div class="red"><div class="blue"><h1>Hello World!</h1></div></div>
CSS
.red{
background: red;
/* All this contain margins */
float:left;
/* padding-top:1px; */
/* display: inline-block */
/* overflow: hidden */
}
.blue{
background: blue;
min-height: 60px;
}
h1{
margin: 10px 0 20px;
background: green;
}
Gecko-based: [This one is the correct, I guess]
Webkit-based, KHTML-based and Trident shell:
CODEPEN
http://codepen.io/marquex/pen/fzsIk
The margin issue you are having is related with the min-height rule in the .blue div. Replace it for a height rule if it is possible to get the same result in Chrome and Firefox.
I have no idea why that is happening when using min-height though. Maybe is some kind of Chrome's bug.
Define your fonts, this is the problem, every browser have different settings for default fonts, headings (h1...h6) respectively. So the actual height of the text in h1 will be different and this is the cause for different margins at bottom/top.
As you can see, Gecko-based browser uses a sort of Garamond-styled font, all other use by default Times New Roman, of course if user was predefined the fonts for pages, sometimes everything may look the same across all browsers, example:
h1{
margin: 10px 0 20px;
background: green;
font-family: "Your-favorite-font", Times, sans-serif;
font-size: 2em;
}
RESOLVING
After a long search I reported the issue on chromium repo. And they accept it as a bug. So, if anyone wants to know the final of this history can follow the fix process here.
Thanks anyone who try to help us, but let me add that I did not believe that Stackoverflow can be able to not see an error of this magnitude. I am a little less stackoverflowita.
I'm having a issue with the navigation bar drop down positioning in IE.
As you can see, the Adhesive Tapes drop down is positioned fine on hover but when hovering over 'Adhesives' and Sealants it is slightly out of position.
I've checked it in Firefox and it's the same but only out by a few pixels.
I've spent some time this morning trying to solve it but only have limited knowledge.
Any help would be great.
www.stickyproducts.co.uk
HTML:http://pastebin.com/z7tu6wCX
CSS:http://pastebin.com/XjnXqEN8
Thanks in advance for any help
Personally I wouldn't set the position of the drop down menu to -999. I would position it in the exact spot it needs to be and then set the visibility: property to hidden;
something like this
.dropdown_4columns_sealants {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* I would set this to position where it should be all the time */
text-align:left;
padding:10px 5px 0px 5px;
border:1px solid #777777;
border-top:none;
z-index: 999;
visibility: hidden; /* I would set this to hide the menu right where it is at */
}
then in my JavaScript I would change the visibility property to visible when you hover over the links rather than reposition it from the original -999em.
I don't think you have a problem with the dropdown, unless there is something else I'm not seeing. But I did see you are forcing a margin -9px to left. I corrected that. Here is the code corrections and the before and after pictures
#menu, .nav-cush {
margin: 0px;
}
.overhang-right {
float: right;
position: relative;
right: 0px;
}
You can actually replace those margin corrections in the css that is already made for them instead of copying and pasting that exact code I gave you. That way you don't have to use !important to overrride anything.
Since you are displaying several behaviors in different browsers. I've edited the lines below with browser hacks. I tested in all browsers and they work. Please do some testing yourself and let me know if it needs work or mark it as an answer so that others can benefit from it.
Find and replace the following:
.dropdown_4columns_adhesives {
width: 988px;
float: left;
margin: 11px 0 0 -204px; /* Chrome & Safari */
margin: 11px 0 0 -198px \0/IE9; /* IE9+ & Opera*/
}
#-moz-document url-prefix(){
.dropdown_4columns_adhesives {margin: 11px 0 0 -203px;} /* Firefox */
}
.dropdown_4columns_sealants {
width: 988px;
margin: 11px 0 0 -349px; /* Chrome & Safari */
margin: 11px 0 0 -339px \0/IE9; /* IE9+ & Opera*/
}
#-moz-document url-prefix(){
.dropdown_4columns_sealants {margin: 11px 0 0 -348px;}/* Firefox */
}
This shows your menu bar pushed to the left
This shows your menu bar and ad image corrected
A better way to handle what you're doing would be to absolute position the dropdown within the main ul#menu (set to relative). Also, take position:relative OFF of the #menu li
this way you could set the dropdown div to position:absolute; top:100%; left:0; right:0; .
The way you have it right now (handling with negative margin) is dependent on the browsers' font rendering. As you can tell this is not consistent between browsers.
Doing it this way you wouldn't have to specify anything for the individual submenus. top:100%; left:0; right:0; would be able to be used for all 3.
An alternative option would be to set specific widths on all of your top level menu links.
Below is the CSS style this div is using. The div itself
is nested within a table. Basically IE displays this differently
from FireFox and Chrome. I like the IE rendering better
and it seems more inline with what I am seeing in dreamweaver,
where as firefox and chrome will display the div wider then
it's in IE and dreamweaver for some reason.
I haven't designed anything in a while but it's sad to see
that we still have these rendering differences between browsers,
is this still the case with HTML5/CSS3 ?
.Class420 {
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
color:#000;
line-height:30px;
background-color:#F5F5F5;
width:400px;
text-align:justify;
padding:15px;
float: left;
margin-left: 15px;
height: 300px;
}
is this still the case with HTML5/CSS3 ?
Yes. And it's still Internet Explorer which is holding everyone back.
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;
}