with
internet explore 9
screen resolution 1360*768
the images are displayed towards the left side
i have checked the same pages on IE 8 and FF & google chrome with 1024 x 768 resolution
it appears proper but with the above the images gets displayed to extreme left side
how do i rectify it
Your post doesn’t provide much to go on, but following a link you posted in another thread (it would help if you’d include a link in this and future threads too), here’s what I suggest.
Due to the current use of absolute positioning, the images will hug the left in all browsers.
Remove the inline styles from the imgs and give them the appropriate width and height dimensions.
Provide alt attribute values. i.e. a description of the image.
Remove the empty title attributes.
Arrange the img elements in the desired order, leftmost first. Here is the finished HTML.
The image files should be resized to the desired dimensions, rather than forced to a different size in the browser. Two files are larger than necessary and one smaller. Use a bitmap image editing program such as Photoshop or GIMP to make them 210 x 210 pixels. The bags pic looks rather squashed as the source image is far from square, so you may want to consider an alternative.
Then add the following CSS rule. You could apply different top and bottom margin values if required, but these side margins should allow all the images to fit in the 700px width of the #achievers parent element.
Adding captions to the images will require additional markup. As the images are related, a list may be appropriate. Perhaps you should start a new thread for this e.g. “Adding image captions” (and provide a link to your page).
Here’s a simple list for you to go on with. Others may have opinions on the semantics, whether the content should be within paragraphs for example. Replaces previous code. Tested back to IE6.
It’s a class, so can be applied multiple times on the same page if required.
<ul class="image-caption">
<li>
<img src="http://www.sitepoint.com/forums/images/bags.jpg" height="210" width="210" alt="Bags" />
Some text goes here
</li>
<li>
<img src="http://www.sitepoint.com/forums/images/clock.jpg" height="210" width="210" alt="Clock" />
This has a little more text
</li>
<li>
<img src="http://www.sitepoint.com/forums/images/perfumes.jpg" height="210" width="210" alt="Perfumes"/>
This one has enough text to wrap onto two lines
</li>
</ul>
.image-caption {
border: 1px red solid; /* demo only, to show element boundaries */
margin: 40px 0; /* side margins override IE6/7 defaults */
padding: 0; /* overrides defaults in other browsers */
overflow: hidden; /* to contain floats */
list-style-type:none;
zoom:1; /* hasLayout trigger for IE6/7 */
}
.image-caption li {
background:gray; /* demo only, to show element boundaries */
display:inline;
float: left;
margin: 0 10px 0 0;
width: 210px; /* matches img width */
}
.image-caption li img {
display: block;
}
some space shld be left after image & the matter start
left aligned imageAnother way to obtain the same effect would be to enter the image and text in an invisible table. Entering text in one column and the image in another would create a similar effect.
A primary purpose of the CSS float property is to enable elements to wrap around one another.
Here’s a basic example with the content in a paragraph, which is an appropriate element:
[HIGHLIGHT=“XHTML 1.0 Strict”]<p>
<img src=“images/bags.jpg” height=“200” width=“200” alt=“Bags” />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
```css
p {
width:400px;
border:1px green solid; /* showing p boundary */
padding:20px;
}
p img {
float:left;
margin: 0 20px 10px 0;
}
after the image the lines shld continue to appear in this way…