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!
Related
I've developed a responsive website, and just when I thought it was perfect and ready to launch, I found out that the images on the homepage are not displaying properly on iPhones (I developed the site while testing on an Android, so I was none the wiser about iPhone oddities until now). The images should be fitting into the width of the screen (I've set max-width: 100%; on them), but instead they are stretched and pixelated way beyond their actual resolution.
Curiously, images on any other page of the site display just fine. I thought the issue was rooted in the fact that the images on the homepage are actually set via a CSS background property, while images everywhere else are set in <img> tags in the HTML. So I commented out the "background" declarations in the CSS file and instead used <img> tags on the homepage, just like everywhere else. When I did that to the very first image, it displayed great. However, as soon as I switched the rest of the images to HTML, they all reverted back to the ugly that was present before.
My boss (who has access to an iPhone) sent me this video (apologies for it being out of focus, but you get the idea): https://www.youtube.com/watch?v=_vFJVZiBc3Q
The first four images he scrolls past ought to all fit above the fold, and you're only seeing the left ~1/10th of the actual image, that's how far it's stretched out.
I'm out of ideas here. Is there anything special I need to do for iPhones? With the <img> tag, these photos should be in the same format that the rest of the working images are in.
Thanks so much in advance!
As it turns out, it was a me-specific issue. Apologies for being vague above, I really had no idea what I should have been looking for when it came to iPhones. The images in question were contained in <div>s in which I specified a height in vh units. As a future reference for anyone reading this, you apparently shouldn't do that. Changing height to a percent unit fixed the issue, and it displays great on both Android and iPhone!
I am having trouble with image resizing in tables in my current website project.
While basically all images in the page content are getting resized to the containers width (caused by the Twitter Bootstrap framework I am using for layout) I found out that for images in tables it does only work in Chrome. With other browser engines, resizing is ignored (only) for tables. I thought using max-width: 100% for resizing is working in all cases.
Before you ask me, for certain pages use of html tables is intended, because people without knowledge of html should also be able to easily edit the page (so I need them, sorry).
The url of the page is: http://kunden.tommy-computer.at/fsv_noetsch/?page_id=35
A stripped-down version of the problem can be seen in this fiddle.
This is what the page should look like for small browser resolutions (correct behaviour, but works in Chrome only):
This is what it looks like in other browsers (image is not resized, table columns do not have 50% width, wrong at all):
I can`t figure out how to fix this and also do not have a better approach for it. Maybe you can help me out. Thank you !
Add the table-layout: fixed; attribute to your table (tested OK with Firefox).
Apologies to inflict an IE6 post on everyone - posting in the hope that someone will have had experience of these issues. I don't have a link for now unfortunately, but the first issue is that occasionally images are stretched without keeping aspect ratio - the images have their height and width defined in the tag, then in the css file their width is set to be a little smaller than that. Sometimes the images load fine, sometimes really badly stretched. Any ideas what is happening here? Fine in all other browsers.
The other issue, which I've not come across before, is that some pages on my site need a refresh of the page for floated elements to align properly. Is there a reason why this could happen in IE6?
Thanks, and apologies again :)
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
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.