Announcement

Collapse
No announcement yet.

CSS styled block stretches.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS styled block stretches.

    Hi,

    I am trying to learn more about CSS/HTML. I want to style my Avatars on my site. I want to give them a little white border.

    I use this CSS code :

    Code:
     
    <div style="border: 1px solid #a9a9a9; padding: 4px 4px 4px 4px; background-color: White; margin-top: 8px;" class="smallfont">
    </div>
    ... for the Avatars inside postbit_legacy template.

    I end up with this:

    Click image for larger version

Name:	css_border_streched.gif
Views:	1
Size:	27.4 KB
ID:	3698977

    The white background of the styled div is stretched. I guess this is due to the fact that this avatar-div is inside a table?

    How can I prevent the white background to stretch along with the table?

    I have searched and searched and... searched. I can't seem to find a solution yet.

    Thanks for any help,
    How much do you love XenForo?

  • #2
    width: 1px;

    I added

    Code:
    width: 1px;
    to the above code and that seems to work for me in MSIE. But in FireFox it doesn't work : the white border implodes completely to the left.

    Hmmm. Any ideas to solve this?
    Last edited by Grover; Sun 23rd Oct '05, 9:19am.
    How much do you love XenForo?

    Comment


    • #3
      Originally posted by Grover
      Hmmm. Any ideas to solve this?
      Part of the problem is all the font spacers and <br />. :|

      Don't know how it'll work in FF (don't have it installed on this computer), but give the below a try.

      Adjust the values to your needs. Then create the CSS as classes to keep as much pseudo/presentation code out of the templates, if you can (makes it look tidier too).
      HTML Code:
      <if condition="$show['avatar']">
            <div style="margin:5px 0px 5px 0px;">
                <div style="width:65px; border:1px solid white;">
      <a href="member.php?$session[sessionurl]u=$post[userid]">
      <img src="$avatarurl" alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></div></div></if>
      
            <div class="smallfont">
              <if condition="$post['joindate']"><div>$vbphrase[join_date]: $post[joindate] </div></if>
      	<if condition="$post['field2']"><div>$vbphrase[location_perm]: $post[field2]</div></if>
      	<if condition="$post['age']"><div>$vbphrase[age]: $post[age </div></if>
      <div>
      Hope that helps.

      Chris
      "Anyone who conducts an argument by appealing to Authority
      is not using his intelligence, he is just using his memory."
      ~~~
      Leonardo da Vinci

      Comment


      • #4
        Hi Chris,

        Thanks for your help. I figured it out thanks to someone at Sitepoint.com

        I was putting a div around my image. Instead of styling this div, I had to apply a style just to the image instead of this div. That seems to be all:

        Code:
        Code:
        .classname img { border: 1px solid #a9a9a9; padding: 4px; background: #FFF; margin-top: 8px; }
        This worked like a charm. I am fairly new to CSS, but learning by the day.
        How much do you love XenForo?

        Comment

        Related Topics

        Collapse

        Working...
        X