My clients insist on using IE8, which means everything has to be IE8 compatible. We have iFrames on a couple pages, and they're getting cut off in IE8. This is how the page looks in IE9:
(the form extends even further down the page, this is just as much as I could get in a screen capture)
but in IE8 it gets cut off, seemingly at the height of the window:
Does anyone know why IE8 is cutting it off like this, and how to fix it?
Related
Here's a Design I've started. Fairly simple.
It's a Container Div with 3 main Div's Header, Content, Footer.
Header, Content, Footer have background-images sliced from image.
It shows correctly in FF (all), Chrome (all), Android, Safari, IE >6 and <= 9 and IE 11
Only in "IE10" the footer background-image seems to disappear or something?
The header and the footer are pretty much identical in styling etc. and no
probs with header.
Validates, w3c.
I've tried everything I can think of...... every element attribute I can think of. Even re-saved
footer slice image in various formats.
The only way I can get to show is by putting IE into quirks mode. I don't want
to do that. emulating other IE modes doesn't work either until I get to quirks mode.
I must be missing something?
Here's an image of the issue...
http://inkspotpens.net/ie-prob-1.jpg
Also a live link to the R&D server
http://www.inkspotpens.net
Any suggestions?
In the photography portfolio linked below, clicking on individual images renders the photo at a max-height of 90% of the browser window. In Safari, Firefox, and Chrome. But IE9 seems to ignore this command entirely and the user must scroll to see any portrait oriented photo in its entirety.
I've googled workarounds, but haven't found any that apply to IE9. Mostly I found Javacript expressions in the stylesheet suggested as workarounds for IE6. Is there a less "expensive" workaround for IE9? Or is it no longer a problem (which is why I can't find anything) and I just have a browser setting wrong?
Here's an example of an image that renders properly in Chrome, Firefox, & Safari - but you have to scroll in IE9: http://russmoorephotography.com/#/portfolio/state-capitol-aisle-capitol-dome/
Edit: this actually doesn't work in Firefox either. Just Chrome & Safari.
I am having alignment problems with a website I'm designing on IE6. It works great in all browsers (Firefox, Opera, Chrome, Safari, etc.) including IE7, IE8 and IE9. Basically, I troubleshooted and found that there is 25 extra pixels that are being added to either the main body of the page or the right body column of the page (these are divs #body_box or #right_box in the JS Fiddle below). They should be displayed inline but instead the #right_box overlaps and is displayed underneath #body_box and floating to the right.
The way I know this is that I expanded the div #Complete_Layout to 1025px (as opposed to the 1000px that it's set at now) and that's when it worked in IE6. I tried 1026px and 1024px and it didn't line up. I checked the dimensions of the background images which are accurate and I even attempted to change the width of the two divs (body_box and right_box) to percentages (75% and 25%) but it gave the same result. I'm out of ideas on what else to try.
http://jsfiddle.net/cRcXq/
It should be noted that I am doing this in PHP and the body_box and right_box sections are part of include files (don't know if that changes anything). I've added a comment on the HTML of the JSFiddle on where index.right.php begins. Thanks for the help.
This looks like the infamous "IE 6 box model bug," a well-known difference between IE 6 and other browsers from the time. Essentially, IE 6 counts the padding and the border as part of the width and height of an element, but any other browser from that time follows the same model as newer browsers.
Seriously, though, why are you designing a website for IE 6? It's ten years old and insecure, and it has less than 1% market share in the US. Microsoft has put up a website devoted to getting people off of IE 6. You wouldn't write code for Office 2000, or Mac OS 9, or PHP 3, so why are you developing code for a browser that was popular around the same time as those products?
So, I have written out a site in HTML and CSS, and all looked fine and dandy in Safari, Chrome, OmniWeb... even Opera. Then I tested in Firefox and Camino (which I believe uses the same rendering engine as Firefox) and was unpleasantly surprised: some of the positioning of my divs was off - noticeably off - by at least 5 pixels. While that might not seem like a whole lot, I use divs to put borders around things that I would otherwise have difficulty with putting borders around (jquery image gallery, for example), so 5 pixels matters quite a bit.
My question is this - what other quirks does Firefox's rendering engine put in, and how can I get around them? Are there special properties I need to add to my CSS in order to make it behave the same for Firefox/Camino?
Thanks in advance for the help!
You should look into using a css reset, this will give you a blank slate and will for the most part normalize how browsers render the box model.
I recommend http://developer.yahoo.com/yui/reset/
can someone look at this site for me I have a serious problem with the sub pages content div going over to the right bar this issue the site renders fine in all other browsers except safari firefox and iphone
www.firstavenuedesign.co.uk/demo
http://www.firstavenuedesign.co.uk/demo/offers.aspx
if u look at the above page in ie it will display fine and chrome any ideas anyone
It looks as though the problem you are having relates to your parent DIV 'collapsing' on your floated child elements.
The following article explains how to resolve this issue (in the Collapsing section) a long with other approaches for laying out floating elements:
http://www.alistapart.com/articles/css-floats-101/
Validate your html and css for those lists of significant errors. Then get this working in a modern browser before seeing how IE screws things up. The other browsers are showing what you wrote. IE makes things up as it goes along. Never, ever trust IE to do anything right.
Also, you have space before the doctype. Some versions of IE go into quirks mode in that situation.