I use MVC3 and Teleki Treeview with specific formatting of the leaves. The formatting does not work on Firefox, when you use float right. You can see the code and compare the result with Firefox and other browsers: http://jsfiddle.net/Vangi/zAvvR/.
I want to make changes in the CSS but not in HTML code. Any suggestions on how to fix this?
You can float: left the two siblings of the div with float: right.
See: http://jsfiddle.net/zAvvR/1/
I used inline styles only because some were already there.
Related
I am trying to create three column layout and it should look like this:
|sidebar| |column1| |column2| |column3| |sidebar2|
My layout works in :IE,Firefox and Safari...
But it breaks in Opera and Chrome.
It looks like this in these browsers:
|sidebar| |column1| |column2| |sidebar2|
|column3|
I think that the problem is in the middle column (I am giving it "display:inline-block", and "text-align:center" to the body in order to center it, but for some reason the right column is being pushed down)
I know that I am asking a lot but can you please check my Page to see the Problem in these browsers.
If somebody knows a solution for this it would be great. Thank you!!
You need to change your CSS for the middle column to float left.
#blogs_three_cols .middle_column {float:left;}
If you want columns to float next to each other, you need to actually float them :) You had none set. Doing that made the right column get all confused.
do this...
#blogs_three_cols > div {
float:none !important;
display:inline-block !important;
vertical-align:top;
}
Unless you can change the current css, you would need to override the styles with !important;
updated above.
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.
is there a way to align a fieldset legend in firefox to the right? I thought it was just my styles but apparently even with an example online the FF fieldset ignores the text-align: right:
http://www.quackit.com/html/tags/html_fieldset_tag.cfm (works in chrome)
There's no obvious way to do this in CSS (and in particular, CSS can't really describe legend/fieldset styling at all, so the fact that any of it works is a miracle), but <legend> has an attribute named align that you can set to right like so:
<fieldset>
<legend align="right">My stuff</legend>
</fieldset>
to get the behavior you want in Firefox. I'm surprised some people are seeing it aligned right on that testcase; there are no provisions for aligning a legend right in Gecko except for that align attribute and direction: rtl fieldsets.
The align attribute of legend has been deprecated since HTML 4.01. However aligning the legend element using float: left; and float: right; seems to work fairly well across browsers, though you might need to add some margin to the first element after the legend element.
I found out, that Firefox supports something like this
text-align:-moz-right;
Perhaps you could try this out - it might make text-align work in older version of FF.
i am late to answer, but i found this question via google and thought that this might help someone in future
in order to position the legend anyhow you like horizontally, all you have to do is set its width property to 100% and then treat its child elements as if they were inside a one-line block
so, for example, if you want to align the contents to the right, do
label{
width:100%;
text-align:right;
}
of course, don't forget to be careful about label's parent width to avoid any misbehavings
I'm trying to get a website to display properly in IE6 and IE7. Here is a screenshot of how it looks in IE6.
alt text http://img225.imageshack.us/img225/4779/screenshot20091006at239.png
IE8, Safari, Firefox, etc. all display this site correctly. Could someone give me a hint as to what is causing the distortion in IE6?
If you want to take a look at the page source, the site is: www.devaswami.com
Get the CSS from here.
You're using an auto-layout table for the navbar, and it has colspans. This confuses IE, which is not very good at working out how big tables need to be when there are colspans. It makes the table wider than you need, which makes your cells wider than expected, which makes the ugly yellow background show through and it doesn't line up.
To fix it, set the style table-layout: fixed; width: 970px; on the table element, and add one <col> element for each column, each with a width: ...px style that tells IE exactly how big to make each column. Then it can't make any mistakes (and also larger fixed table layouts render faster).
To fix it better, drop the layout table and use positioned divs for the nav links. You could then also lose the silly image slicing and have a single GIF for the whole header background with the photo and links positioned over the top of that.
(Also it is worth fixing the validation errors both in the HTML and in the CSS. You are using // as a single-line comment in your stylesheet, but there is no such thing in CSS; you will only confuse the parser into dropping rules.)
Ummm at a glance, you have something that is float left and you have a margin left on it?
#foo {
float: left;
margin-left: 20px; //20px in all browsers except IE6 where it will be 40px;
display: inline; //this will fix this issue
}
There's a lot of possibilities and it's hard to just guess based on the screensnap. However, one big step towards making IE 6 and 7 behave better is to declare the doctype at the top of the document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
That's for HTML 4.01, you'd have to update it to match what you're specifically using if it's not HTML (i.e. XHTML). That alone helps with some of the basic problems, but not all of them. If that doesn't do it, Google "IE6 css hacks" and you'll find lots of potential information that may apply to your context.
Edit: I suggest you fix the errors related to missing/improper end tags:
Error Line 199, Column 194: end tag
for element "a" which is not open
Error Line 200, Column 49: end tag
for element "p" which is not open
Source: http://validator.w3.org/check?uri=http%3A%2F%2Fdevaswami.com%2F&charset=(detect+automatically)&doctype=Inline&group=0
After that's done we can deduce that it's not a markup related issue.
Original answer:
Try applying haslayout to every element and using display:inline on any floated element:
#nav li { display:inline; } /* the selector *must* be floated and have horizontal margins in the direction of the float. */
* { zoom:1; }
For anything that was fixed by the zoom:1, apply a width/height and that will trigger hasLayout.
Though it might be useful if you actually posted some source code.
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!