CSS img align in IE

  • aloof
  • Newbie
  • Newbie
  • aloof
  • Posts: 14
  • Loc: Oregon

Post 3+ Months Ago

Can anybody tell me how to workaround the problem where if i align images right they don't show up in IE?

Thanks.
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

Well without displaying any of the code that you are using and are having problems with, or even better yet, showing us a sample page so that we can examine your source code to find out what you are doing wrong, I can only speculate here. Are you aligning in relation to text? Are you using the text-align property in a surrounding block element? Are you using the float property or vertical-align property with the image itself?

This is code for an image to be floated to the right in relation to the surrounding text...
Code: [ Select ]
<div><img style="float: right;" src="images/image.gif" alt="image" width="50" height="50">text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here - text here</div>


You can also align images by including them in a block that has its contents aligned to the left or right margin. This is useful if you don't want other elements to flow around the image. You do this by applying the alignment style to the containing element. To align the contents of block elements you can use text-align, with a value of left, right, or center.

This code will right-align the image (and the text)...

Code: [ Select ]
<p style="text-align:right;">
<img src="images/image.gif" alt="image" width="50" height="50">
<br>
text here - text here - text here
</p>
  1. <p style="text-align:right;">
  2. <img src="images/image.gif" alt="image" width="50" height="50">
  3. <br>
  4. text here - text here - text here
  5. </p>


Everything I posted above should display properly in all browsers, including IE, so again, without seeing a sample page or the source code you are using and are having problems with, I can offer no more help than I already have in this post for you.
  • aloof
  • Newbie
  • Newbie
  • aloof
  • Posts: 14
  • Loc: Oregon

Post 3+ Months Ago

Your two code samples still resulted in the same problem :-\

Using any form of align="right" or style="float: right;" or any other forms of picture alignment result in the picture showing up as a big white space in IE. The picture is there (hovering produces ALT text), right clicking and you can save it, and the space is taken up with blank space equivalent to the picture, but you can't see the picture.

Pictures not aligned in any way show up just fine. An example of a picture not showing up would be to view http://engr.georgefox.edu/new in internet explorer.

edit: I got the picture to show up by adding:

img{position:relative;}

to my CSS layout file. Is this a proper workaround?
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

Good morning. Off to work in a bit but will respond first.

Quote:
Your two code samples still resulted in the same problem

Shouldn't have. Not at all.

Quote:
Using any form of align="right" or style="float: right;" or any other forms of picture alignment result in the picture showing up as a big white space in IE.

Works fine for me in IE 6. What version of IE are you using?

Here's what I did to just test the page located at http://engr.georgefox.edu/new/index.php ...

I saved the page locally. I saved your layout.css file locally.

I removed this css code from layout.css ...
img
{
position:relative;
}

I tested the page in IE, Opera, Netscape and Mozilla Firefox browsers and your oscope.jpg image displayed just fine in every one. Therefore relative positioning didn't need to be added at all.

I don't know what to tell you other than to have someone else test it in IE to see if they experience the problem you are having. I most certainly am not experiencing any problems at all.

Also, this may be solely due to a cache problem. Completely empty your internet cache in IE and also make certain that you delete all offline content as well...

IE > Tools > Internet Options > Temporary Internet files > Delete Files >
Check mark "Delete all offline content" > press OK
  • aloof
  • Newbie
  • Newbie
  • aloof
  • Posts: 14
  • Loc: Oregon

Post 3+ Months Ago

That's odd. I've tested it on over 10 different machines in different locations. It works in every browser EXCEPT internet explorer.

Oh well.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

There must be something else in your page causing the image to not be visible. This is not an IE thing(not a bug thing, anyway). I would imagine it's a CSS interpretation problem. Can you post the page itself somewhere for us to look at?
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

aloof wrote:
Pictures not aligned in any way show up just fine. An example of a picture not showing up would be to view http://engr.georgefox.edu/new in internet explorer.

edit: I got the picture to show up by adding:

img{position:relative;}

to my CSS layout file. Is this a proper workaround?


dM...Not sure if he got it working or not, but there is the link and his possible solution.
  • mephi
  • Born
  • Born
  • mephi
  • Posts: 2

Post 3+ Months Ago

hi guys,

did u found any fix for this problem?

I'm strugling with this problem to. img without any align property is working well. With, in IE6 I got only the blank white space where the image should have been displayed.

please provide a link for the fix.

thanks
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

mephi wrote:
did u found any fix for this problem?

I'm strugling with this problem to. img without any align property is working well. With, in IE6 I got only the blank white space where the image should have been displayed.

please provide a link for the fix.

thanks


With regard to IE6, try this:

http://206.251.36.107/IE6.htm

For everything else, just post the code you are using and someone can figure something out.
  • mephi
  • Born
  • Born
  • mephi
  • Posts: 2

Post 3+ Months Ago

hehe, absolutely true!

I found solution for my problem tho, gave position:relative to both container div and elements floating from inside div.


IE6 is a pain in the a**!

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 16 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.