If you look at this page in IE7:
[redacted]
If you hover over one of the lines in the chart, you can see the little yellow popup stretches across the page. It shouldn't and doesn't in other browsers. Can somebody tell me why this is happening in IE7?
For what it's worth, I can fix it by specifying a width for that div with CSS. I'm just curious why it's happening 'cause the client will ask!
Ok... firstly - that code is clearly very old. I can tell, because it's sniffing to see whether or not your browser is IE4 (yes, that's a four). Unfortunately, it considers that any IE browser is IE4...
If it detects IE4, it then goes on to set the width of the layer it creates to be the same width as the window - which is why it's so horribly wide for you.
As you've discovered, you should be able to add some CSS to override that width yourself.
Related
I recently tried to load a tool on my phone that I develop that is hosted internally where I work.
A few things looked off, which I expected. But one particular element seemed to be extra odd.
I eventually loaded the page in Chrome on a MacBook Pro and used the "Device Toolbar" feature to render it in my Desktop browser like it would on a phone. To keep a private application private I will demonstrate with Google.com. This is what I see:
That's the body element highlighted in blue. The html element is the same.
This is what I see in my application too and explains what I'm seeing when actually using my phone.
I can't, for the life of me, understand why these elements chose this size. There is no explicit "width" for these elements, nor is there "max-width" etc. Nothing that I can see that should cause this behavior.
Can anyone explain this behavior?
UPDATE
It appears that there is some odd behavior with Dev Tools. Proper mobile testing probably shouldn't be done this way (Feel free to change my mind, Google...) but the issue stands that sometimes, the body element doesn't stretch to accommodate its content.
By default, block-level elements, including <body>, do not expand to fit their content, but rather will expand to the width of its container. See the spec for detailed information.
See this fiddle demonstrating this. If you resize the panels/window you'll see the body width changing based on the viewport, but the content width has absolutely no effect.
This SO question has more information: Why isn't <body> expanding to fit its contents?
Another issue that's not helping is related to the Chrome dev tools device toolbar. Changing the zoom, disabling and re-enabling the device toolbar and its settings can be buggy and is not always reliable. I have spent hours chasing issues that didn't actually exist because the device toolbar functionality misled me.
I have a disturbing problem with tables in IE ...
I created a Joomla! Template combined with bootstrap.
The customer created the content of the joomla! website.
You can find my problem here:
(link removed)
When you look at it in Firefox or other browsers you can see that everything is fine.
But when you look at it in Internet Explorer (I hate that browser), you can see, that the tables with the grey background are not shown correctly. They have to much width. Texts are cut off.
I tried a lot things and tested different solutions from the Internet. But I can't find a solution for that.
Your problem is caused by your large image at the bottom (connectivity2_big-photo.jpg). While you've set the height and width on the image, the CSS has the height and width set to 'auto' which is pushing the dimensions to a maximum possible size in IE.
Either use an appropriately sized image or remove width:auto and height:auto from the img declaration and everything works again.
I suspect this has more to do with using XHTML 1.0 Transitional: IE's reverting to 1997, but that's what you're asking for!
Try zooming in (using the page zoom feature, e.g. cmd+) this piece of HTML/CSS in Firefox:
http://jsfiddle.net/W68eL/4/
Now, try the same thing in Chrome.
For some reason, Chrome does not scale up the width/height of the content box, but at the same time scales up the border. I would almost consider this a bug.
Does anyone know of any workarounds?
Edit:
I have filed an issue here, we'll see what the responses are.
Maybe it has to do something with the "em" property. It acts differently for both Firefox and Chrome.
I've taken 20px instead of 1em and then ran it on both the browsers. The effect was same.
Fiddle it: http://jsfiddle.net/W68eL/5/
So I'm stuck with this annoying and minor IE8 problem. When I'm scrolling it seems like IE cuts off some piece of my H1 titles. I made a video so it's clear what is happening.
The HTML & CSS are very large, so before I'm going to include all the HTML and CSS I would like to know if someone knows an possible cause. Or maybe it's an known IE problem?
The titles (BRACELETS, NECKLACES, ..) are H1´s with z-index set to 999.
The video can be found here http://imageshack.us/clip/my-videos/607/wcw.mp4/
A live code sample would be great to explore. My only guess based on the video (which is very helpful in this scenario nice!), is that IE8 is choking and lagging on rendering items as you are scrolling. Is there any markup changes tied to scroll events or perhaps some CSS "fixed" items on your page?
i know it's a very old question but i think it could help others
I found myself having the same problem with a free-for-commercial-use font
The solution i found was playing around with the line-height CSS property
In some sports setting it to the height of the div, in others to the font-size, in others to a little bit more than that
In my experience it changes from font to font and from font-size to font-size
I have a element on my form that looks like this:
<div style="overflow-y:auto;overflow-x:hidden;height:100%;width:100%">
In IE7 when the page first renders, there are no scrollbars. However, if I resize the page (even just 1 pixel) the scroll bars appear properly.
Is there something I can do so that the scrollbars show properly when the page first displays?
Set overflow-y to "scroll" if you always want a scrollbar.
That's the kind of problem which comes from the hasLayout bug in IE6 and IE7. It affects how IE renders the page. To get rid of the problem, you should consider reading this great page about the hasLayout behavior and its hacks. There's also the official Microsoft hasLayout dedicated page.
The hacks suggested are height: 0; and zoom: 1; depending on the version of IE you want to target and the type of your element.
I used overflow: scroll and it fixed my issue with the disappearing scrollbar on load. My tables are dynamically created and should scroll automatically when the page loads as I have enough data to start with.
I didn't have to make any other changes. Now it works in all three browsers IE7, IE8 and FF.
You should add margin-right: 20px to your style, so the scrollbar will have enoguh place to be displayed.
Try Internet Explorer 9 and see if your current script works there. Most probably it does work there, and if so, you might rethink your inner desire to make it all compatible with previous versions of Internet Explorers like 7 etc
With Chrome and FireFox stealing away audiences from IE to fast, I forecast that its only a matter of time that before such questions will be obsolete...
try absolute widths and heights, upon resize IE7 may be calculating the dimensions itself when you go to resize to page, whereas on page load it isnt...