I have a page which displays just fine, in Firefox and Chrome. However, it has the content pushed past the bottom of the sidebar (as if I had a clear) in Internet Explorer 8 (I haven't tested any other IE versions). Does anyone know how to fix this?
The page is located here
Thanks,
Lemiant
You're missing the doctype for you page. Without it, IE will revert to quirks mode, which is essentially IE 5.5's rendering engine.
What you're observing is IE incorrectly computing widths for your elements, see here for a description on how IE 6 and older versions implement width.
For some reason that remains a mystery to me, IE thinks the #content element is wider than it should be.
This code did the trick for me:
#content {
line-height: 18px;
margin-right: 250px;
width: 550px;
width: 497px\9;
}
This makes all browsers use the width of 550px, and IE (all versions), 497px, which seems to be tha maximum it accepts. Hacky, but it works :D
EDIT: You're missing a !doctype. This might be the cause.
Related
My website appears different in firefox compared to chrome or safari, the logo image at the top of the page is placed higher towards the top of the page.
I have tried using vertical-align but had no luck. Any suggestions? (page is institute101.com)
header .logo img.standard {
display: none;
vertical-align: middle;
}
The page is even more messed up in IE, is there a general rule I should keep in mind when making a page compatible for all browsers?
The difference in layout is because Firefox is not honouring the 30px padding on your body element. Firefox seems to be ignoring that.
The problem is highly likely to be the dreaded Quirks Mode.
Many browsers will put the page into quirks mode if the site does not begin with a valid Doctype. The problem with quirks mode is that it works differently in different browsers.
Your page does have a doctype, but importantly, it is not the first thing in the page, and that is why it is going into quirks mode -- you have some rogue CSS and javascript tags before it; these need to be moved into the <head> section of your page.
Fixing this will definitely solve the problem as far as IE is concerned. It will probably solve the problem for Firefox.
Hope that helps.
The problem comes from this css file:
Last row of this file is:
body { margin:0; padding:30px 0 0; }
if you delete the padding you'll have the same appearance with Firefox.
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
Just trying to give the main content div on a site a border on the left and right side of the div. Rather than have separate divs for each border, I thought to use the border-left-image capability in CSS3 to make it happen. My code is as follows:
#content {
background-color: #7FC3F4;
height: 100%;
width: 900px;
border-left-width: 30px;
border-left-image: url(../images/border_left_gradient.png);
border-right-width: 30px;
border-right-image: url(../images/border_right_gradient.png);
margin-right: 10%;
margin-left: 10%;
}
Of all the Google searches I've done, I have to yet to come up with an explanation as to why this code isn't valid. Some results return numeric values to be placed after the url, however regardless of what combination of numbers I try, no dice.
Thoughts?
border-image is now supported in all the major browsers (2014-05-22)
Demo with a single border-left-image
Demo with different left and right images.
The demos now need a minimum of Chrome 15, Safari 6, Firefox 15, IE 11 or Opera 15.
It is not actually possible to do this with separate image files, but you can slice a single image on the left and right. See the border-image page on MDN which shows some good examples or CSS Tricks for a comprehensive summary of how the other slicing options work.
Note: if you need earlier browser support please ask as a previous version of my answer did work with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10 but I have updated it now that new browsers support prefix-free CSS3.
Edit: Firefox now requires an additional property setting - border-style: solid (see CSS - New Firefox-release doesn't show Border-Image anymore)
Good solution : Chrome AND Firefox compatibility :
http://jsfiddle.net/Yas34/954/
missing border-style: solid to current "good answer"
For one your url is bogus (..images?). for a second have you checked your browser supports the property? last I checked, which wasn't that long ago, nobody supported it (well maybe webkit nightlies).
The following web page is not showing properly in IE 9.
It seems to be only a problem in IE 9.
http://froyo.tv/test/
the list-style-image are over the image!
IE9
Firefox, Chrome, IE8, ...
EDIT: I know how to fix it! But I want to know what is really going on with IE9
Fixed: http://froyo.tv/test/index_fix.php
I'm not sure why IE9 is behaving differently, but you can fix it to work consistently by:
Removing margin-right: 30px on .image.
Removing width: 500px on .detail (you may wish to add back a smaller width)
Adding float: left to .detail.
Here's a simple reproduction of the problem.
Broken: http://jsfiddle.net/Nh3kf/
Fixed: http://jsfiddle.net/Nh3kf/1/
This is a fix for the problem in IE9:
li{list-style-position: inside;}
I guess that IE9 doesn't have the list bullets "inside".
Se the fix here:
http://jsfiddle.net/Nh3kf/40/
Okay, using Chrome I can see the custom list images, IE9 doesn't handle list-style-image.
Instead of using it, try this:
li {background:url(your_image.jpg) center left;}
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