SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Problem With Image Replacement Padding

    Hello. I have recently used some CSS to replace a paragraph with an image, it works fine, however, the issue is the padding around the text. Here is the problem, this is what it should look like:



    What it actually looks like is this:

    http://www.umac.ws/test/index.html

    How can I fix this?

    CSS
    Code:
    p.intro-text {
      width: 66%;
      overflow: hidden;
      background: #ffffff url("../images/welcome-text.png") no-repeat;
      height: 0px !important; /* for most browsers */
      height /**/:161px; /* for IE5.5's bad box model */
      padding: 161px 0 0 0;
      margin: -75px 0 10px 0;
        border-bottom: 3px solid #efefef;
      }

    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  2. #2
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am guessing I have to include it as an image and just have the text as alt text? That might be the simplest solution.

    Ideally however, I want to just adjust the spacing so that there is the correct spacing around the image and the text will be visible with no CSS on.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  3. #3
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can adds spans like this:

    HTML Code:
    <p class="intro-text"><span></span>...text...text...text...</p>
    Then you can use this different image replacement approach.

    Code CSS:
    p.intro-text {
    	width: 648px;
    	overflow: hidden;
    	background: #FFFFFF;
    	height: 161px;
    	padding: 10px;
    	margin: -75px 0 0;
    	border-bottom: 3px solid #efefef;
    	position: relative;
      }
    p.intro-text span {
    	background: url(../images/welcome-text.png) no-repeat 0 0;
    	position: absolute;
    	width: 648px;
    	height: 161px;
    }

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    However, why would you want to replace a whole paragraph with an image? Please consider the impact on accessibility by not allowing your users to be able to resize text not to mention the increase in download time...

    I can't see any advantage of doing this? Why not just use the text?

  5. #5
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The text will also not appear to search engines, thus hurting your SEO results.

    You'll find the general consensus is that using an image to display a paragraph of text is usually not beneficial.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Aken View Post
    The text will also not appear to search engines, thus hurting your SEO results.
    It will do if a CSS image replacement technique is used but it's still bad practice for the reasons I mentioned above

  7. #7
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    CaryD, adding a extra <span> tag would add unnecessary mark-up but, it may be the best way to execute this with the correct spacing.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  8. #8
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any body else have any good image replacement solutions? I could use sIRF but, I think it would be too much text for it to be 100&#37; flash.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us


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
  •