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.
Related
I am very new to working with cross-browser HTML/CSS. I'm trying to create a page with DIVs that have embedded DIVs.
I want to create a page that looks something like this:
http://www.tennantco.com/am-en/equipment
Where I have a DIV with a background picture and also a "header" DIV within the DIV that contains a background-color and text. Something like this:
<div>
<div>
<a/>
<div>
<h3/>
</div>
</div>
</div>
which is how the above referenced website seems to do it.
But I can't get it to work in Chrome & Firefox. It does work on IE8 (which is the version of IE - the only version - I need to support). The above referenced website does work in Chrome & Firefox, so I know I'm doing something wrong.
The problem is that on Chrome and Firefox the header part does not show up. I've created a fiddle:
http://jsfiddle.net/03ddL05k/
This is probably very simple, but I can't figure out what I'm doing wrong. I apologize for asking such an inane question.
Thanks for your help.
You have opacity: 0; defined (inlined) for your anchor tags.
opacity specifies the transparency of an element. The value applies to the element as a whole, including its content, the element and its contained children as well. 0 is fully transparent, meaning invisible.
I updated your fiddle for your review http://jsfiddle.net/yongchuc/03ddL05k/4/.
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'm having difficulty trying to get IE7 to behave like a normal browser.
I have a HTML sample here: http://jsfiddle.net/6QSYM/4/ that looks fine in most browsers, but when viewed with IE7 you can see that the "Sector Used" text is merged with the line below it.
Can somebody suggest how I can correct this?
I run into this problem all the time! At the company I work at we still have to support IE7 (will it ever just DIE!). So the best solution I have found is to set the width for your none floating div. It's a hassle but that why IE knows how to calculate the layout.
Try adding:
clear:both;
to your .risk-statistic-container class.
Try this:
http://jsfiddle.net/6QSYM/9/
the semantics of your HTML elements are all over the place as well. Way too many spans and divs for me :)
Hope that helps.
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.