Look here (http://www.makeofficebetter.com/comments.htm) for a link to an example of my problem.
If you look at that link you'll see that I have a IMG floated left, and a DIV overlaying it. within that div I have 2 more divs. Both should overlay the IMG, but for some reason only the first DIV overlays correctly...and the 2nd does not. It refuses to overlay my IMG. Both are children of a DIV that is overlaying the IMG.
This seems to be only a problem in IE8 Compatibility Mode...so I guess that means it also looks bad in IE7. You can toggle Compatibilty mode off and on to see the problem and I've added color to my DIV backgrounds so you can see the issue better.
Safari and Firefox work fine.
Use DRY concepts with your CSS, this might help weed out the problem.
For example instead of having two classes .comment and .mod-comment (both with identical subclasses), only use .comment and when a moderator posts, add a second .mod class.
Example:
current
<div class="comment">...</div>
<div class="mod-comment">...</div>
DRY
<div class="comment">...</div>
<div class="comment mod">...</div>
This way, you can style comment, and stick the differences for mod comment in .mod
The problem is that the avatar is taking up space that the bubble wants. IE7 won't let them overlap. I tried adding this CSS - as far as I can tell that will solve it for IE7 without breaking in Firefox. I suggest more testing or making this CSS conditional for IE7 only.
.comment .avatar {
margin-right: -22px;
}
.mod-comment .avatar {
margin-left: -22px;
}
Hope this helps!
Related
I have a problem with CSS float handling in IE9.Look at partycypacjaobywatelska.pl. In Firefox, Chrome, Opera etc. main page is displayed correctly whereas IE9 shows a white space between the header and the rest of content.
This space is triggered by two elements of classes left and right (their place in DOM: body -> #wrapper -> #container -> .left, .right). They have float: left and float: right set, respectively but, nonetheless, in IE9 they push the .middle div down. Setting display: none on them helps but I don't fully control when those divs gain content so it's not a feasible solution to me.
I tried to create a minimal example but this jsFiddle works fine in IE9. Any idea what might trigger the bug?
Thanks for help in advance.
Using IE's dev tools, .middle actually isn't being pushed, it's the .jimgMenu inside of it. If you remove the overflow: hidden on that, then you can see IE9 and Firefox behave the same. It's definitely the floats shifting the content area. Have you tried a clearfix instead of using the overflow?
Honestly, those .left and .right should probably be positioned absolutely if they are stuck to the sides like that though. What do they even contain? Why are they suppose to be floating behind the content? It's probably not the best way to structure the HTML.
I have this code, which is behaving differently in firefox vs chrome.
<h2>Presenting
<span style="font-weight:bold">Analytics by </span>
<div class="fi_logo"><img src="IMAGEURL" /></div>
</h2>
the class fi_logo referenced above is :
.fi_logo {
min-width: 35px;
height: 35px;
margin-left: 40px;
position: absolute;
top:-5px;
left: 262px;
float:right;
}
In firefox, there is an offset caused by margin-left in fi_logo between the image and the text(in h2). If i dont add the margin-left, then the image overlaps the text in chrome.
So, in short, if i add the margin-left property, it works in chrome, whereas it causes a large offset in firefox. Any suggestions on how to solve this?
Here it is: http://jsfiddle.net/bikerabhinav/mpL79/2/
Use combination of position relative and absolute.
Also, do not use div inside h2 - bad markup
Maybe if you set .fi_logo display:block
I think, your problem is with specific browser version.
I checked it in FF 3.6.2, which return same result like Chrome
Well it sounds like you still haven't sorted this out so I will make a little more commentary.
I cannot say exactly what is causing the browser inconsistencies without doing a bunch of trial and error, but I think that the way to fix it is to rethink the way you are positioning the image.
It seems awful convoluted to be positioning the img absolutely, floating it, and adding a left margin. Given all of that it is unclear what precisely you are even trying to accomplish with this code.
If you edit your question to describe how you want the image positioned, I (or someone else) would be more than happy to recommend a good approach
Your html is invalid. You cannot have a div inside a heading. I also question the float and absolute positioning on the same element. I also wonder if you are using a doctype.
Your image tag inside the div is not closed properly, and in the css the class definition is wrong; the class is defined by a dot (.);
let's say I have a div with right-aligned text and a fixed with:
div{
width: 30px;
text-align: right;
}
is it ok if I increase the width of this div to 35px trough padding, to move the text away from the edge and avoid adding another element inside of it?
div{
padding-right: 5px;
}
I mean would any browsers behave weirdly about it?
The result would be exacly what you said: a div of total width 35px. It seems to me you understand what you are doing, but there is never a substitute for actually testing in all your target browsers.
While this small piece of CSS looks innocent, it can change the elements around them in a way you didn't expect.
No It'll be ok, in every major browser.
Internet Explorer in Quirks Mode would have a problem with it due to it's box model.
If this is a problem, I would use a nested div that uses margins instead.
Your other option could be including an IE specific CSS file.
This is an area that we are getting a lot more control over with css3. Have a look at
http://www.quirksmode.org/css/box.html.
I've been banging my ahead on this IE7 bug for the last few days and it's time to resort to the mind of the crowd.
I have the following HTML and CSS: http://beerpla.net/for_www/ie7_test/test.html
The goal is to have a <ul>, with each <li> containing a small icon and some text. Multiline text would be aligned to itself and not wrap under the image.
I've tried using float:left on the image and a bunch of other things, and finally I thought the position:absolute would work for sure but in IE7 I consistently see the text pop off to the next line and get misaligned with the image:
This is what I expect it to look like:
I even tried to make the div display:inline which kind of worked but then started wrapping under the image for long lines, so it was no good. zoom:1 also produced a similar effect.
I'm at a loss at the moment. This code works fine in all other browsers. IE7 is a special, very special child.
Any ideas?
Thank you.
Edit: If you have IE8, you can emulate IE7 by pressing F12 and then Alt-7.
instead of putting the image as an element, try using background property. like so
ul li { background url(path to image) 0 0 no-repeat; padding: 0 0 0 20px; }
note: you might have to adjust the padding to suit the distance you want to maintain between the image and text.
Try using padding on the li instead of margin on the div. If display:inline worked, it's probably IE choking on working out the div's box model in some arcane way: padding on the li and maybe display:inline on the div may iron it out.
Moving the <img> tag into the <div> fixes the issue. Still unknown to me why IE7 does what it does.
Go back to floating your image left, and then add overflow: hidden; to the div. The text will no longer wrap below the image, and there are no side-effects unless you are trying to position content from inside the div out (don't see that here). Completely compatible cross-browser. With IE6 you simply need to add hasLayout by any means to get the same effect.
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.