Site in question:
http://www.sedulity.tk/
Site using Chrome 19 dev:
Site using IE9:
as you can see on the homepage using IE it seems like it not recognizing the height of the DIV of each picture, whereas on chrome and firefox there is no issue.
I think this is probably my fault, won't blame IE for it...but I can't figure it out :|
In your css folder there is a css file ie7style.css and it's being used for ie (I've tested in ie8) and it has a class (.item-image) that is
.item-image{
height:142px;
}
Try to fix it or just remove it.
Css file: http://www.sedulity.tk/wp-content/themes/DeepFocus/css/ie7style.css
See in this developer Tool screenshot I've removed the css entry height:142px from class (.item-image) from file ie7style.css
After that (without .item-image{height:142px} in file ie7style.css) see the page in ie8
Try adding a height to the .item
CSS
#portfolio-items .item {
height:500px;
}
you might wanna check this article for a cross-browser inline-block that doesn't overlap. your case is most likely caused by the "baseline", where the next set of elements base their tops on the last elements' baseline (which would be somewhere in the middle of the element).
Related
The Problem
I have a div that has contenteditable set to true. In Chrome, when the edge of the div is reached while typing, it shifts the entire word to the next line as expected. I present Exhibit A:
IE, as usual, doesn't behave as expected. When the edge of the div is reached while typing it breaks the word. I present Exhibit B:
The HTML
A simple div, with the contenteditable set to true:
<div id='bioEntryContainer' contenteditable='true' class='form-control'></div>
The CSS
The form-control is from Twitter's Bootstrap CSS. The custom styles are:
#bioEntryContainer { min-height:74px; overflow:auto; }
Attempts to Fix
I've tried the following with CSS, with no luck:
overflow:hidden;
overflow-x:hidden;
white-space:nowrap;
white-space:pre;
display:inline-block;
I've tried the route suggested in this question, but it didn't work. Any other suggestions?
Update
I created a fiddle to demo the problem, but I can't recreate it there. I've included the Bootstrap CSS to get it as close to the actual environment as possible.
The div is added in the Bootstrap Modal with JS. I'm not sure how that could change things, but hopefully that provides more background information.
Which IE versions have you tried so far?
I've tried it in IE 9-11 and no such problem persists.
Try setting
word-wrap:break-word;
in your css style.
I am not sure if this is an issue with the Blogger template that I'm hacking up, or if I'm just forgetting a simple CSS property.
I'm working on a template for a friend, and am attempting to show the logo on the top right above the menubar div, and it works just fine in Firefox and Chrome, however it renders behind the div in IE9.
Here is the link to the demo:
Demo blog
Essentially, what I've done is created an absolutely positioned div, with an inside image:
<div id="logo2">
<a href="">
<img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png">
</a>
</div>
and the associated CSS:
#logo2 {
position:absolute;
top: -25px;
right: -50px;
z-index: 999;
}
I'd thought that the combination of an absolute position, plus the high Z-index would overcome any issues with IE's handling of the z-index, however I was wrong.
I've also tried adding in a position (relative) and z-index (1) for the menubar div, to no avail.
Per #Dubious' suggestion, I added the following without success (the image is still clipped):
.tabs-outer, .tabs-inner {
<!-- [if ie 9]>
z-index: -1;
<![endif]>
position: relative;
}
Old Answer "Try adding a z-index of -1 instead of 1 to your menubar div"
Edit:
Okay, after doing some fiddling around in IE9 Developer Tools I noticed that your source code was telling IE to render the page in Document Mode: IE7 Standards. As you can see, after opening dev tools (and making sure the dev tools frame is active) you can press alt + 9 to render the css as it should be rendered in IE9. After this occurs, the content displays just as it should in any current browser.
So why is the page loading with IE7 Document Standards? Well you need to use correct standards-compliant !DOCTYPE directives for each of your pages. To do this just read up on this page and make sure that your html files follow the very first example.
Conditional Comments
I should have given you a better example of IE conditional comments, so I will go a little more in depth here. An IE conditional comment can ONLY be defined in html as it uses <!--> which is html specific code. Therefore, in order to add ie7/ie9/ie specific css you would need to <link> a new stylesheet inside the comment field that would have ie specific code. Further reading here. Also note, that since this issue you are experiencing is because the page is rendering IE7 quirks mode css, you might need to use an ie7 comment as opposed to ie9.
I really hope this solves your problem, good luck!
my friend was helping me make a new design for my website but has since gotten a full time job. Web Design is not my strong suit and I can't get it to work across all browsers!
So right now, my website looks good in Chrome and Safari. But is broken in FireFox
http://dl.dropbox.com/u/22866203/sb%202/speedbump.html
http://dl.dropbox.com/u/22866203/sb%202/speedbump.css
I was researching/trying different CSS Resets to fix this problem (Meyers Reset) but this only seemed to break the page in Chrome and Safari as well.
Any suggestions would be much appreciated!
If you started without a reset then a reset is not going to help. You particular problem is that you're not clearing your floats. To solve it do this:
#social-media, hr { clear: both; }
Btw, you have a 404 error on an image and many other warnings. Check firebug or devtools.
As I was messing a bit with your site with firebug, I noticed that if you add to some divs the property float: left it arranges the site to look like it does in chrome.
Download FireBug for firefox (great tool) and arrange the floating divs exactly how you want them to be.
Hope it helps.
Give the #wrapper overflow:hidden and remove margin top from previous and after divs.
The problem is that you have floated elements in the body text (left) and the green box (right) but the parent isn't floated, meaning that the floated elements will not affects it's overall height. Also, don't use hr, instead, use borders.
http://dl.dropbox.com/u/33811812/stackoverflow/speedbump/Speedbump.html
The paths are now relative to my folder and you'll need to change them back.
IDs need to be unique(#wrapper) I see four ( 4 ) instances of it from the image above.
Use a class instead as it can be re-used.
.wrapper:after{
visibility: hidden;
height:0;
display: block;
clear:both;
*zoom:1;
content: '.';
}
Just finishing up a site and having an issue with position: fixed on IE7. I've Googled it and tried different Doctypes but the fixed area is still moving out of position on IE7.
I've not got IE7 but a client staffer has it and I can see the issue using an online IE renderer/tester.
I've removed the .htaccess from the test site so you can see the site/code.
http://drinkzing.com/test
Any advise or help would be appreciated.
There is a <div> and an <ul> element which both have id="logo-nav". They've both set position:fixed and some other properties. I think this is the main problem. Remove the duplicate ID, set position:fixed only for the <div> element and then we can investigate the issue (or the problem should disappear at best).
If you have newer version of Internet Explorer, you may emulate IE7 by clicking the Compatibility View button or choosing IE7 document mode in Developer Tools.
edit: I noticed that you haven't set any left property for #logo-nav. I don't know why IE7 computes the default position other way than all other browsers, but simply adding #logo-nav { left: 225px } works for me.
Try this in your css:
* html idorclasshere {
position: absolute;
}
Note: replace "idorclasshere" with your, well, ID or Class of the non-responding div (don't worry, due to the asterisk, other browsers aside from IE won't see it, add it in conjunction to your "position:fixed" style).
And in my html editor looks just fine:
alt text http://img441.imageshack.us/img441/7348/bien.png
But when i see it on the browser (Chrome & Firefox) looks like this:
alt text http://img59.imageshack.us/img59/642/malhh.png
Im very new to layout with tag, any idea of what im making worng?
put "margin: auto;" in the style of div contenido and usuario. Then add padding-top: 58px; in div usuario (as you are trying to put that div 58px lower.)
Oh! of course remove those margin-top styles from every where and use padding style instead.
What's wrong? You're relying on the rendering engine of your HTML editor and you shouldn't.
Only use a recent version of Firefox, Safari, Chrome or Opera for testing (edit: I forgot IE8 and I shouldn't have; it's support of CSS2.1 is good. It just lacks dozens of extensions but that's another story), then the other browsers including IE and forget your not-so-awesome rendering tool.
I believe your specific issue is being caused by the lack of trailing semicolons at the end of your style properties. That will often cause bad rendering.
margin-top: 1px" >
should be
margin-top: 1px;" >
Also, you should definitely take the advice of #Christian Mann and put the CSS in the of your document or, even better, in an external stylesheet. Inline CSS styles should be avoided.