The following page is mucked up in IE8 -- the bulk of the content starts appearing half way down the screen and the tables/divs do not look as they should. It works in other browsers and in IE8 compatibility mode. I've inspected the HTML and can't work out what's wrong. Any help would be appreciated. Thanks.
http://www.moviemonitor.com/browse/itunes
After a quick glance in Firefox and IE8, I'd say there is some malformed HTML in there somewhere. Looks to me like a mismatched open/close tag that IE8 isn't forgiving. Run the whole thing through an HTML validator.
I suggest removing the min-height: 800px; CSS value from the first DIV element after <div id="mainContent">. Apparently IE8 renders the first child block level element with that height irrespective of any other contained elements.
Then again, those HTML validation results are pretty grim. Try to fix some of the invalid HTML and make sure that all of your tags are closed properly.
Related
So my website is located at but right now it is not displaying properly in IE8. I have added the following css where I used to have display:inline-block to try and compensate but it is not working:
display:inline-block;
*display:inline;
*zoom:1;
Is there a quick hack to get my items to comply, or am I going to have to completely redo the style with float?
Does IE8 not respond to css on HTML5 elements like section,article, and nav?
It seems that you are using html5 elements and in your css you are calling them as ex.
header div#header_left {float: left;
width: 350px;} and so on. IE8 does not recognize these tags for the most part.
When I inspected the elements, what I saw was this.
AS you can tell, IE8 is not even recognizing your css.
Suggestion: Use divs or get IE to recognize the tags (several answers here that show you how).
After looking it up, I found that a lot of your HTML5 tags don't work well in IE 8. There's a simple way to shim IE8 so it recognizes those tags. You basically have short script that runs document.createElement on all the html5 tags you want to use.
Here's a link for the script and the css that goes with it.
http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8
I have a simple but strange problem.
I can't resolve it after giving so many tries I have a table here is the screenshot for Mozilla:
It also looks good in Chrome:
But the problem occurs in IE.
here the fiddle with all the code
How to do it right in IE?
The table gaping
map hides after using div instead of iframe
you can put the iframe in a table to align with the above tables(Contact Details)
for example given in the http://jsfiddle.net/BEBdv/
I tested in IE8:
I hope it will help you.
Just set height:auto to your top most <div> tag that wraps everything.
Demo: http://jsfiddle.net/gQXPn/2/
The problem is because of the use of iframe tag which is not supported by IE
(Source: http://caniuse.com/#search=iframe)
You can easily use a div tag instead of iframe and all should be fine.
Ok so there's a site i've been asked to look at and I can't seem to figure out why it only looks bad in safari. It looks fine in every other browser so far and I can't figure it out. The problem takes place in the footer of the document. Here's the link... www.palettekids.com (I SWEAR IT'S NOT MY DESIGN :-))!!! Thanks!
It looks like you have an extra </div> somewhere if you look at the source in safari it is outside of the #container. But in Chrome it is inside. The container is what is holding everything else in. Double check all your closing div's and remove the extra one.
Fix your code errors, like the missing ending tags, like </div>, </body> and </html> among other errors; probably all missing from footer.php. See [Invalid] Markup Validation of palettekids.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.
I don't think coords are supported in Safari:
http://www.w3schools.com/tags/att_a_coords.asp
try using another method (margin perhaps)?
Check out http://campbellcustomcoatings.com/ in something other than IE7, then in IE7. You can see that in IE7, the facebook like button is more to the right and up. I'd like to push it down in IE7 as it is in any other browser. I've tried for over an hour and I can't get it to budge.
I changed the following for IE7 and it seemed to place the button in a similar position to how it looks in Chrome.
#fblike {
margin-left:57px;
margin-top:10px;
}
I think the problem is coming from the floated <li> items. If you highlight the elements using Chrome DOM browser (F12 then select the Elements tab) you can see that because floats exist, the "nav", "container" and "fblike" <div>s do not strictly contain all the child elements. You could create a horizontal navigation without using floats. A list apart has a nice article on lists which may help cross-browser rendering issues (which I am always getting with floats!)
Just add some left and top margin to the iframe. to do this for just IE7, do:
*margin-top:20px; /*20 looked good for me */
*margin-left:20px;
Keep in mind that this won't validate as legit CSS (at least, i don't think it does) but other browsers will ignore it and it works fine.
I know exactly what you're talking about as I have the same issue. The button looks different (size and position) in various versions of IE than in other browsers.
However, you cannot modify or apply CSS to a Facebook Like Box plugin because its content is contained within an <iframe> element coming from the Facebook server.
The only styling options you have are the ones given to you by Facebook.
https://developers.facebook.com/docs/reference/plugins/like-box/
More info:
Embedded Facebook Like-Box won't let me style it. Why?
Adding CSS to Facebook Like Box
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.