SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    images appear 2wards leftside in IE9

    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

    <img src="images/perfumes.jpg" title="" alt="" style="left: 478px; position: absolute;
    top: 346px; width: 209px; height: 210px; border-style: ridge;" />
    <img src="images/clock.jpg" title="" alt="" style="left: 254px; position: absolute;
    top: 346px; width: 209px; height: 210px; border-style: ridge;" />
    <img src="images/bags.jpg" title="" alt="" style="left: 25px; position: absolute;
    top: 346px; width: 209px; height: 210px; border-style: ridge;" />

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code HTML4Strict:
    <img src="http://www.sitepoint.com/forums/images/bags.jpg" height="210" width="210" alt="Bags" />
    <img src="http://www.sitepoint.com/forums/images/clock.jpg" height="210" width="210" alt="Clock" />
    <img src="http://www.sitepoint.com/forums/images/perfumes.jpg" height="210" width="210" alt="Perfumes"/>

    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.
    Code CSS:
    #achievers img {
    	margin:40px 10px;
    }

  3. #3
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks

    i will checkit out
    with respect to the same i tried VSPACE & HSPACE but it seems it s no longer used

    i have a image and few lines of text . wht i need is
    after the image the lines shld continue to appear in this way.........

    the next lines shld follow from the left line of image below the image

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Victorinox View Post
    Arrange the img elements in the desired order, leftmost first. Here is the finished HTML.
    Sorry, somehow, I got the srcs wrong for the imgs. The HTML should actually be

    Code HTML4Strict:
    <img src="images/bags.jpg" height="210" width="210" alt="Bags" />
    <img src="images/clock.jpg" height="210" width="210" alt="Clock" />
    <img src="images/perfumes.jpg" height="210" width="210" alt="Perfumes"/>

    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).

  5. #5
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code HTML4Strict:
    <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>
    Code CSS:
    .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;
    	}

  6. #6
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i dont want image caption, there is matter which shld wrap around the image
    i want it something like this

    Images : Wrap Text Around - HTML Tutorial

    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.

  7. #7
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code 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>
    Code CSS:
    p {
    	width:400px;
    	border:1px green solid; /* showing p boundary */
    	padding:20px;
    }
     
    p img {
    	float:left;
    	margin: 0 20px 10px 0;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •