I am having a hard time figuring out why things look so different in IE and Firefox.
Here is a CSS class
.logo { width: 224px; height: 120px; position: relative;
display:block; left: -1px; background-image: url(logo.png);}
In IE this works as expected, but in Firefox it behaves like a drunk! I see 3 logo.png at different places on a page. If I remove display:block then I cannot see the image in either browser.
Any comments appreciated.
You might need to add
background-repeat: none;
to your css class. And for future reference, it's always IE that screws up ;)
EDIT: If that doesn't solve your problem, please put up a sample site live somewhere we can look at it and experiment a little. Also, Firebug might be helpful.
EDIT2: Removed this, since I noted the difference between firebug and the src I got from right-clicking and selecting "View Source..."
EDIT3: Steve found your problem: You can't self-close anchors. Change
<a href="/" id="logo" />
to
Your problem is in the HTML. You can't can't self close A tags
Correct, the problem is always IE. If firefox has an issue it's usually an issue with the w3c specs. Not being a fanboy, it's just the way things are.
I guessing your problem is that the default value for background-repeat is different between the browsers. You should try setting background-repeat:no-repeat EDIT: Maybe not, all browsers default to repeat.
It would be useful to know what element you are applying logo to. Whatever it is is probably collapsing to a height of 0px when not a block. Put a border on it to see what's going on there.
Related
I just finished my portfolio site, which is my first attempt with html5 and it looks great in Chrome. But when I tested it in IE and FF, exept IE9, there are some major differences that all occur in the header. I think this is because the header has a fixed position. I did this because of the menu. I created a one pager and if I didn't set the position on fixed, the menu disappeared when you clicked on a menu item.
A second error is that with IE all the images get a blue border, which doesn't appear on Chrome.
And a third error is the font in the header is also different with IE. I used an #font-face font for it.
My HTML and CSs code validates on W3C.
You can find the website at www.nathaliedehertogh.be
Can someone please help me out with this one.
All you need to do is add clear:both to #menu, and border:0 to img.
The blue outline is default in some browsers to show that the images are links.
You need a clear in your header to allow the content to flow as wanted after.
The blue border for IE simply needs a CSS setting:
img {
border: 0;
}
As for the font, some fonts don't read correctly in IE. The error I get is:
#font-face failed OpenType embedding permission check. Permission must be Installable.
You don't have a height defined in your div 'kopregel'.. this is causing an issue since you have elements with heights defined inside it.
NOTE: I see it all broken in FF, stuff is being smooshed to the right.
The problem with your header is you need the clear function in your css.
Here is the new and edited code.
#content, hr {
clear: left;
margin-left: auto;
margin-right: auto;
width: 80%;
}
No issue with fixed positions this is just a common issue, hope this helps let me know!
Another major Difference Chrome vs IE check this out
http://technofizzle.blogspot.in/2013/04/chrome-and-ie-display-image-completely.html
Demo
http://people.mywot.com/dean/tour/ie6test.html
I have narrowed down this problem into the test case above. You'll spot it right away if you load it up in IE6.
The problem
When hovering over the anchor in IE6, all descendent elements which are meant to become visible become visible, but as soon as you hover out, all styling remains but the text disappears. This results in a "ghost box" and quite an interesting (but undesired effect).
I've searched for a few hours this morning to try and find out which IE6 bug this is, but I'm out of ideas.
P.S. Ignore the transparency of the PNG's. I just haven't included the pngfix on this demo.
Hover states in IE6 have some silly bugs unfortunately.
http://reference.sitepoint.com/css/pseudoclass-hover covers most of them which should allow you to experiment with what might be wrong.
EDIT: You may have to resort to javascript to overcome this one unfortunately.
Some commenters are forgetting that there are a number of clients (eg: UK local government) that still almost exclusively use IE6. Pity those of us who have to still ensure it is taken into consideration!
Yes, 100% of webmaster hate the devil IE6, but we're here to answer the question, not to discuss how bad IE6 is, right?
And for the question, this is my answer : (Edited line 42 & 43 in your demo code)
...
.screenshot a.bubble .description { position: absolute; min-width: 200px; bottom: -8px; background: none; display: none;
}
.screenshot a.bubble:hover .description { display: inline; background: #efefef; }
...
I don't know how, but IE6 cannot hide the div with css property "background" not set to "none". That's all what cause the problem. Anyway, I hate IE6.
I have a JQ slideshow in a div on this page:
http://www.lucky-seed.com/web.html
and have a css sheet for IE with the following style:
.slideshow { height: 599px; width: 700px;
max-width: 700px
margin-top: 00px;
margin-left: 295px;
float:left;
position: relative;
display: inline;}
Where am I going wrong? It looks great in everything but IE, but once in IE, I can't seem to move the position around no matter what I do.
Thanks in advance for your insights.
Hello fellow Pittsburgher :P
You've got so many different, conflicting styles going on there. While it's not a specific answer, might I suggest using a CSS framework like Blueprint ( http://www.blueprintcss.org/ ) to better manage your columns with greater simplicity and let it worry about IE compatibility. Rolling columns yourself is usually unnecessary these days.
In ieweb.css, try changing the margin-top on .slidenav to 50px, instead of -20px.
That moves the arrows to approximately the same place that they are in Firefox.
It might be an idea to scrap the IE specific stylesheets and do them again if need be. If you remember your question from yesterday, you had a weird issue with comments. Those comments were causing parsing errors on your pages for IE, so I imagine a lot of the "fixes" in your IE stylesheets are no longer required now you've sorted those comments.
I've looked all over this site and the rest of the internet, but can't figure out why this is happening. My page displays fine in all browsers but IE8 (though, technically, I haven't checked earlier versions of IE). Even in IE8, it sometimes displays correctly (which makes no sense to me).
Here's the page: http://www.thedudehatescancer.com/testsite/past-results.shtml
Sometimes the social network and footer information moves up the screen and overlays the bottom portion of the main page content, and sometimes it stays at the bottom of the page, where it belongs.
style sheets are under the same root.
main: stylesheet.css
IE hacks: stylesheet-iehacks.css
I can't figure it out. My guess is I'm doing something stupid, but I wish I knew what it was. Any help would be very much appreciated!!
The main problem is that you are using display:inline-block.
The easy fix for this problems is to add zoom:1 to anything that is using inline-block.
This adds the hasLayout property in ie
For Example;
#networkswrap {
background: url("images/bg-gray2.jpg") repeat scroll 0 0 transparent;
border-bottom: 3px solid #989896;
display: inline-block;
height: 60px;
overflow: visible;
width: 100%;
zoom:1
}
It looks like your site is using several CSS properties that have the potential to cause problems in IE.
It certainly has issues in IE7 and your use of <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> should cause IE8 to use the IE7 rendering engine.
Initially, I thought it might be the hasLayout problem due to your use of display: inline-block. I tried implementing a fix for that but it made no difference.
I think the problem you are experiencing is due to your use of min-height. I tried applying a min-height hack and it seemed to work.
#mainwrap{
min-height:600px;
height:auto !important;
height:600px;
}
Worthy site by the way; my mum had AML.
I hope this helps,
Mark
For IE 6 we have plenty of bugs to bug us as a designer.
incorrect box model etc etc.
i have searched for fixes via JavaScript and found
[link text][1]
IE7.js
IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
but do we have real life saver other than javascript via css.
Ways to deal with IE6 bugs with CSS? Sure.
See: http://www.quirksmode.org/css/condcom.html
for conditional comments
There are other ways, such as adding some specific characters in some CSS properties that get ignored in some browsers but not in others.
However, in some cases, web designers should be very cautious when using these.
The alternative is to live within the IE 6 world of bugs and design your pages to look right despite them. You can serve up different css for your IE6 clients, or even different html if necessary, depending on your design. In some cases, you can use one CSS file that will mean different things to IE6 clients, but that technique is problematic with respect to IE7 and 8.
this link is also handy one
How do you deal with Internet Explorer?
I never knew this - thanks svinto
"IE6 doesn't have the incorrect box model unless you have the wrong doctype. – svinto"
There are some simple stylesheet hacks that can modify the presentation in various internet explorer versions to solve your CSS problems. For example these three:
Simplified box model hack for IE4, IE5, IE5.5:
div.values { margin: 10px; m\argin: 20px; }
star html hack for IE4, IE5, IE5.5 and IE6:
* html div.values { margin: 5px; }
star first-child+html hack for IE7:
*:first-child+html div.values { margin: 5px; }
PNG transparancy issues could be solved with solutions like this:
<div style="width:50px;height:50px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/logo/logo.png');">
<img src="/images/logo/logo.png" height="50" width="50" alt="" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" />
</div>
Great info so far but one thing to note is that IE7.js doesn't fix pngs in all cases (at least last I looked). For instance, you won't be able to tile a background image with transparency.
In the case of DXImageTransform you may find that when this is applied to elements that contain links, those links are no longer 'clickable'. You can sometimes fix this by giving the parent element that has the transform applied to it static positioning and to position the child anchor element e.g.,
h2{
position:static;
zoom:1;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/mypng.png", sizingMethod="scale");
}
h2 a{
position:relative;
}
<h2><a href="" >a link!</a></h2>
If you have to do this sort of garbage put it in a separate stylesheet and control loading with conditional comments. If the design is of any complexity try you best not to support ie6 or <. If you can't avoid doing it, charge more ;). Sometimes that is enough to persuade someone that supporting ie6 isn't "worth their while".
why don't you try FireBug Light for IE? It's not as powerful as FireFox FireBug but can be helpful
Many bugs can be worked around in CSS using conditional comments or CSS selector hacks. But there are some bugs that CSS hacks alone cannot handle such as IE6's .multiple.class.selector.bug
There's another quick and dirty hack for IE6 styles
for e.g.
You can define the CSS as;
.divTitle
{
padding: 5px;
width: 600px;
_width: 590px;
}
All the other browsers picks up 600px as the width value & IE6 overwrites it & take 590px;
I've tested this in IE7 & FF as well.
Also you may want to check this link;
link text