I fall into an IE bug that I don't find a way to solve
Here's the template http://codecanyon.net/item/tquery-dynamic-tables/full_screen_preview/89478
If you open with Firefox or Chrome, the table header shows correctly, no BLACK, if you use IE7 or IE8, it shows some black space. Why? I tried to change padding, margin... but that didn't work, the black space is still glued. How can I fix such bugs?
Please also, explain what tools, or methods can help fix this bug
Update: Bug Fixed!
The reason is that IE gives an arbitrary size/padding/margin to the img element when the src is undefined.
When the src attribute is defined dynamically through JavaScript, this doesn't correct it. It still undefined, so it doesn't solve the problem.
Solution: Fix a height/width for the image.
The sort image you have in the cells still takes up space - in this case, the space used by IE's default "invalid image" placeholder, because you left the src attribute empty. You can verify this using Developer Tools, and setting the height to 1 pixel.
The problem is that visibility: hidden doesn't mean "don't use any space" - it means "claim the space, but don't show anything there". Use display: none instead if you don't want it to take up any space.
You may still wonder "But why didn't I see this anywhere else?" Well, that's due to the other browsers handling the missing image differently.
One tool that can help is the IE Developer Toolbar, which wil let you look at individual elements and the CSS applied to them. Looking quickly at the real page, not the link you sent (because the IE toolbar can't go through IFRAMEs for some reason), the one thing that pops out is the TD and TH elements in your table head show hasLayout: -1. It's a custom IE property that causes all sorts of bugs. You can read about it here. A couple of quick fixes you can try: apply 'zoom: 1;' or 'position: relative;' to those elements to see if it goes way. That's not a fix, it's a hack, but it often works.
Related
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
http://jsfiddle.net/CtaBe/
I've tested this in FF, Chrome and IE. Only FF shows the intended behavior (or at least what I think is the intended behavior). Chrome and IE show the same behavior: when you first focus on the input, the cursor doesn't indent. After you type somehing, delete it, and re-focus, it indents properly.
How can I fix this? Because I want to display an image at that indented space.
Quick disclaimer: this message outlines a solid example of why a person would choose to use text-indent on an input field rather than padding. It does not answer "how to fix IE handle text-indent on input fields"
The thing about padding-left is that it alters the width of your input field, which can be undesirable.
Imagine a scenario where you wish to show a background-image icon for the following states of your inputs' data:
required field
invalid input
missed required field
password strength
In such a scenario, we'd need to nudge the text away from the left border to display the icon (which is a much simpler feat than going for the right side, but that's a whole other discussion. If we use padding, the width of the input field changes. That's not ideal, since the various "states" can change.
For instance, maybe a field is only required based on the value of another field. When that field "becomes" required the field "grows" according whatever padding we apply to move the text away from the icon, via relevant class. That's far from elegant, especially when other fields are floated next to it.
Furthermore, in the case of textareas, we wouldn't want to pad the entire side - the first line would suffice.
That's exactly where using text-indent comes into play. And it works great - except in Internet explorer. Which is what has led me here, as I search for other ideas or solutions. I have a few ideas in mind but hopefully there's something simpler that I haven't thought of.
In Chrome, this is a known issue. Please star it :)
'text-indent' applies to block-level elements, table cells and inline blocks. I hope you are using it on a not block-level element.
I'm now building a website for my sister. It looks normal on Chrome, firefox and IE9 but for some reasons, some of my div lost all background color in IE 7 --.
http://xx3004.kodingen.com/JDProperties
Open the website and you can see the pop up message has problem with title and button set (background color) - I'm using IE 7 right now. Then the content of the left body lost background color too, and the right column lost background too. I've been doing many searches on Google plus I notice that jQueryUI could not be wrong, so I guess it's because of my DOCTYPE in the begining of the source code. I've tried to change to some other DOCTYPE I saw on the Internet, or even omit it, but the website becomes either messing up or remains the same.
This is the first time I see this situation, it's weird and I hope I don't know how to fix it.
I'm expecting to solve the problems soon :-). Thanks everyone in advanced.
[x]
I started to look, and then saw this
</head>
<body>
</body>
</html>
</head>
<body>..
Try building the structure properly and see what happens yo.
You have mismatched HTML tags. Chrome, firefox and IE9 are cleaning up for you, but IE7 isn't that nice.
Agree with #albert, you do need to recode that page, although it's seeming to mostly working, the nesting of multiple head, body, style elements going to lead to trouble, and I suggest you change to an HTML4 Doctype as the coding is not XHTML, the more conflicts (tag soup) a browser has to deal with the more likely you will get them interpreting your intentions differently.
As for the IE backgrounds in numerous (inline styles) places you have background: inherit IE does not understand the "inherit" value of properties - or more specifically for IE7 and earlier it only applied "inherit to the direction and visibility properties
I have a Blogger template which is wider than the screen-width and causes the horizontal scrollbar to be displayed. I want to change it so that it fits and no scrollbar is shown. But the problem is I don't know what is causing this. I have downloaded the template file and in my code editor looked for all width properties and changed all 100%s to 90% and pix width values to value-100, but still the page is as before.
In finding the effective rule/rules in a such cases, what else should I look for/do? What is a comprehensive procedure to check things to find the rules?
Instead of changing the width, try adding the CSS property overflow: hidden to everything you think might be causing the issue and then remove them one-by-one until the scroll bar reappears and you'll have the culprit. You might need to add it to html and body as well. If the scrollbars aren't revealing any actual content, you can leave the overflow: hidden on the culprit to resolve the issue.
It might not be a width property that's causing the problem - there might be a block element inside your template that doesn't wrap or float that might be stretching out your container if the widths of the containers are defined using percentages.
Define the root container using a fixed width and this should eliminate many of those sorts of issues. Try that first and let us know if it works.
Procedure:
1). Understand the box model and how this varies on IE. It is just as likely that a problem "width" may actually be caused by padding, margin, or even border as width.
2). Check the rendering in other browsers. If you can reproduce the problem in FF get Firebug and use that to find out the calculated dimensions of the element in question, and tunnel down through it's children which may well be causing the issue. Chrome has a similar debugger to Firebug iirc, but I'm not familiar with it.
3). If that doesn't tell you what the problem is, start removing rules or whole patterns from your CSS until the problem goes away (or remove everything and add it back in piecemeal until the problem returns) - at that point you know what is causing the issue, if not why, and you can always update the question to ask us why when you've identified it.
hth
(Apols if any of this was already obvious)
Well, % always begins with "100". See the percentage of width of body tag is set to 100%. then according to it, just set other component % as per the requirement in your display.
Personally I do believe that, use of % is better then 'px'. If you know CSS, then try to change 'px' to % as per the requirement.
It seems that the component has min-width style and overflow property set to auto. You may want to set it to visible and do it in FireBug Firefox Page Inspector first, to see the effect alive before making post edit. If you just want to adjust the whole post width, blogger has standard interface. You can also edit the template manually
This is going to be a vague and obscure question, which is probably due to the fact that even using IE Web Developer, I have no idea what is going on.
I have a utility which I am working on. It's mostly JavaScript, and it has a small floating DIV user interface that shows up on a page. So far, standard stuff. The problem is the background color of some DIVs in the UI. The colors are assigned by CSS, and (tired refrain:) it looks fine in Firefox, Chrome, and Opera, but of course IE is being difficult.
The background does not show up in IE in quirks mode or IE7 mode, but it does in IE8 mode. For the life of me, I can't seem to figure out why IE7 isn't showing the background.
The page you can see the offending code is here: Log Hound Demo. Floating DIV is in the upper-right-hand corner - click the "V" to open it up.
Looking at that page in IE and then in [any other browser on the planet] will show you the missing background colors easily enough. I swear, even Lynx renders it better... ahem. The offending DIV IDs are lhPlateHead, lhPlateCtrlPanel,lhPlateTagPanel - easy to find with Firebug at least. They should be heeding the .lhPlateColor class with a background color of #DFEAF8, but that color is never applied.
With IE web developer up, I tried removing the CSS classes and re-adding them. I tried every combination of browser and document mode - again, only IE8 browser mode in IE8 document mode had the background colors working.
If anyone is bored enough to take a look and figure something out, I'd be much obliged.
Well - I finally figured it out, and as far as I'm concerned, this is another reason IE will always suck.
The circumstances of the problem are:
You are creating an element programatically:
myelmt = document.createElement('DIV')
You are setting the styles of that element programatically:
myelmt.setAttribute('class', 'myclass');
You are then adding that element programatically to the DOM:
body.appendChild(myelmt);
You are using IE.
IE hates you.
In cases such as this, IE8 will honour the "myclass" css and style the element properly when it is added to the DOM. IE7 and I'm guessing below will blow off the CSS styling and leave you thinking that employment at McDonald's is probably a whole lot less stressful.
To recap for the impatient:
Works in IE8 and EVERY OTHER BROWSER ON THE PLANET
var myelmt= document.createElement('DIV');
myelmt.setAttribute('class', 'myclass');
body.appendChild(myelmt);
Works in IE7 and below:
var myelmt= document.createElement('DIV');
var attr = document.createAttribute('class');
attr.value = 'myclass';
myelmt.setAttributeNode(attr);
body.appendChild(myelmt);
If someone can expound on exactly why this is a problem for IE7, feel free as I revel in the minutiae. Otherwise, just remember that it's all fun and games until someone loses an object reference.
Try adding zoom:1 to whatever element the background color doesn't work on.
I believe the issue has to do with how IE paints table cells. Try putting in a IE only CSS rule that applies the background color explicitly to TD's. Like this:
.lhWarnMsg .logMsg td
{
* background-color: #fbffbf;
}
Hopefully that will work for you.