I want two side by side boxes in my page for placing the comment.One will show previous comments and should be disabled.other is for current users giving comments.I have done this using two divs and placing them side by side.
one contains a textarea for placing the new comments.I am having trouble with the size of textbox and the scrollbar
on the textarea,its appearing differently in ie6 and mozilla.Any solutions??
The best solution to this problem would be having slightly alternate versions of your style sheet for IE. IE displays scroll bars on TEXTAREAs differently than that of Firefox, which is probably throwing your DIVs out. (The IE TEXTAREAs are slightly wider)
You could also add some extra spacing around the TEXTAREAs to prevent your DIVs from going out of alignment.
Also, do you have a container DIV?
Regards
Luke
Related
I'm developing a simple opacity slider for my site and I've encountered a weird rendering bug (?) that happens only in Firefox (Chrome and Opera handle it perfectly).
The problem is while slides change each other, there's horizontal line appearing over them:
Obviously it has something to do with arrows which switch images. If I set display: none to them, there's no line appearing.
Arrows are simple > < in spans, and they have text-shadow. If I remove text-shadow from them, the line gets thinner:
Spans with arrows are positioned absolutely inside divs which taking half of slide container each. These divs are inside other div, which is sibling to slides and has z-index:1 to be over them. If I set right/left position for spans so they will just a little superpose image, or if I make divs thinner (for example, 40% instead of 50%) for the same purpose, the line disappears:
It may seem like it's related to spans' width, but setting max-width and display: block doesn't help too.
How can I get rid of this weird line? Maybe there's CSS hacks for it? You can check slider yourself here. Thanks!
So I've removed spans and instead put arrows just inside divs. I've vertically centered them using :before CSS hack from this answer. No weird lines and works like charm, though I've had to add some nbsp's before and after arrows so they would not be just on the edges of slide container. Well, a bit dirty but it's fine for now. Works even in IE10 and I don't need more.
This page has a content area where all the posts are held and a side bar. The content and side bar menu are sized properly and fit where they're supposed to in Chrome with the actual posts area taking up the left and the sidebar sitting on the right.
In IE, the images are full-width and I'm not sure of a better way to fix this.
The same issue was occurring where the images were full-width and adding the width:100% attribute to the .htheme_post_image img element seemed to fix the issue. If you view in IE, the two areas are side-by-side. However, if you click on a post.
The side menu is underneath the post and the images/text are full width.
If it helps, I'm in IE 11.0.9600
It seems to be fixed if you remove display: table; from both the .htheme_container class and the .htheme_content class.
This seems to fix your IE issue and has no effect on Chrome, so maybe it's simply not needed. But I did not create this theme, so I have no idea of any side-effects this may cause.
I'm having an issue with Chrome on macOS where adding span tags to text in a div affects the spacing between words and sometimes where the line breaks.
It is my assumption that unstyled span tags shouldn't change text rendering and that two identical divs with the same content and styling except for adding spans should render identically. This doesn't appear to be the case and can be seen in the image below. Two divs are overlaid to show the rendering discrepancy, where the div with the red text in front has spans in blue and the div with the black text behind does not.
This may seem very minor but in some cases this difference is affecting where the line is breaking (although very rare and hard to reproduce). This can be seen in the next image.
I've setup a JSBin to demonstrate the difference when adding span tags. Adjust the width of the HTML output panel slowly and you should see discrepancies in the rendering of the two divs. Move the width to 658px to see the line breaking issue.
https://jsbin.com/qajekub/edit?html,css,output
So my question is, why is there an alignment discrepancy between two identical divs but one has spans? Is there something I'm missing? A CSS property or default styling that would be causing this?
This happens in Chrome 55 on macOS. It's not occurring in Firefox or Safari as far as I can tell and I'm unable to test on other operating systems.
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).
Does anyone know if IE6 ever misrenders pages with hidden divs? We currently have several divs which we display in the same space on the page, only showing one at a time and hiding all others.
The problem is that the hidden divs components (specifically option menus) sometimes show through. If the page is scrolled, removing the components from view, and then scrolled back down, the should-be-hidden components then disappear.
How do we fix this?
One hack you could use is to move your div outside the screen:
MyDiv.style.left = "-1000px";
And then put it back on its original position when you want to show it.
How are they hidden? using display:none; or visibility:hidden; ? are they absolutely positioned by any chance? IE6 has a z-Index problem and there are several hacks to deal with it.