SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Odd layout problem

    Hello.

    I seem to have a rather odd layout problem happening.
    my website http://www.clhdesigns.com/portfolio.php is displaying excatly the way I want it to in IE. The text and headings are to the right of the image.

    Now in Firefox and Safari The text is showing directly underneath the images, which I do not want.

    here is the portion of css code that tells the text what to do.
    Code:
    #portfolio {
    	float:left;
    	margin-right:10px;
    	border:0;
    }
    #portfolio img {
    	float:left;
    	margin-bottom:5px;
    	margin-right:10px;
    	border:0;
    }
    #portfolio span {
    	display:block;
    	margin-bottom:5px;
    	color:#396886;
    	font-weight:bold;
    }
    #portfolio p {
    	float:left;
    	margin:0 0 10px 0;
    }
    and here is the little bit of code to control 1 of the images from the actual portfolio file.
    HTML Code:
    <p><a href="http://www.theranchresortbethany.com"><img src="images/ranch.jpg" alt="The Ranch Resort Bethany" width="280" height="217" /></a><span>The Ranch Resort Bethany</span>Full website solution</p>
    Obviously it is a problem with the CSS file. Is there a hack I have to put in to make it display the way I want it to in Firefox and Safari?

    thanks

  2. #2
    SitePoint Zealot loathsome's Avatar
    Join Date
    Jul 2008
    Location
    Norway
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you're displaying the span tag as a block level element.

    Substitute display:block; in #portfolio span with float:left;, and then change your markup as well. (e.g. add a breaking space after the span element)
    Time you enjoy wasting is not wasted time.

    Loathsome Systems

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You seem to have gone a bit overboard with the floats.

    You only need to float the image and then clear each p element.

    e.g.

    Code:
    #portfolio {
        margin-right:10px;
        border:0;
    }
    #portfolio img {
        float:left;
        margin-bottom:5px;
        margin-right:10px;
        border:0;
    }
    #portfolio span {
        display:block;
        margin-bottom:5px;
        color:#396886;
        font-weight:bold;
    }
    #portfolio p {
        margin:0 0 10px 0;
        clear:both
    }        

  4. #4
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have put in the br tag after my span tag and it still seems to lead to some undesireable results although it is getting there anymore ideas. here is what i have now for the html code for the portfolio page.

    HTML Code:
    <p><a href="http://www.theranchresortbethany.com"><img src="images/ranch.jpg" alt="The Ranch Resort Bethany" width="280" height="217" /></a><span>The Ranch Resort Bethany</span><br />Full website solution</p>


    http://www.clhdesigns.com/portfolio.php
    Your Websites Your Way!!
    www.clhdesigns.com

  5. #5
    SitePoint Zealot loathsome's Avatar
    Join Date
    Jul 2008
    Location
    Norway
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you didn't do what I advised you to do yet ...
    Time you enjoy wasting is not wasted time.

    Loathsome Systems

  6. #6
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul this is perfect and now works in all browsers thanks for the help and thanks to you too loathsome.
    Your Websites Your Way!!
    www.clhdesigns.com


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
  •