SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    UK
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    strange border issues

    Just working on an email template and have encountered a problem with borders.

    Here is the section of the template that's affected:

    strange.jpg

    Firstly directly below the short fat white border (with no gaps) I want a 1px white border running all the way to the right-hand edge of the page.

    As you can see for some reason there is a problem with this.

    Here is the CSS:

    Code:
    .didyouknow {
    	background-color: #4896de;	
    	margin: 10px;	
    	padding: 10px;
    	color: #ffffff;
    }
    
    .didyouknow h2 {
    	color: #ffffff;
    	margin: 0;
    	padding: 0;
    	font-size:	22px;
    	padding-bottom: 5px;
    	border-bottom: 6px solid #ffffff;
    	width: 175px;
    }
    
    .didyouknow hr {
    	margin: 0;
    	padding: 0;
    	border-top: 1px solid #ffffff;
    	margin-bottom: 5px;
    }

    Here is the HTML

    Code:
    <div class="didyouknow">
    <h2>Did you know?</h2><hr> Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    
    </div>

    I want the same think to happen with the two blue borders at the bottom. The fat one for some reason appears sunken, and the thin blue one is experiencing the same issue as the thin white one mentioned earlier.

    Again here is the CSS

    Code:
    td .decoration hr {
    		padding: 0;
    		margin: 0;
    		border-bottom: 6px solid #4896de;
    		margin-left: 10px;
    		width: 175px;
    }
    
    td .decoration {
    		padding: 0;
    		margin: 0;
    		}
    
    
    td .footer hr{
    		padding: 0;
    		margin: 0;
    		border-top: 1px solid #4896de;
    		margin-left: 10px;
    
    }
    And the HTML

    Code:
     <tr>
        	<td class="decoration">
        		<hr>
        	</td>
        </tr>
        
        <tr>
        	<td class="footer">
            	<hr>
        		<p><span class="contact">Contact Telephone Numbers:</span> #<br>
                <span class="contact">email:</span> #            </p>
        	</td>
        </tr>
    Can anyone help with this?

  2. #2
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you notice that you set a width on your h2? IF you remove that the 6px bottom border will go all the way across. Try removing that horizontal line tag, and changing the border-bottom on the h2 to 1px with no width.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    UK
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by polyhedra View Post
    Did you notice that you set a width on your h2? IF you remove that the 6px bottom border will go all the way across. Try removing that horizontal line tag, and changing the border-bottom on the h2 to 1px with no width.
    Hi,

    Thanks but that's not what I want.

    I want the 6px border. I want it to be 10px from the left of the container, and I only want it about 175px long.

    Directly underneath it, so that it looks like it's coming out of the 6px border, I want a 1px border starting 10px from the left side of the container, going all the way to the right wall of the container.

    EDIT:

    Oh I think I get you. You mean there's no need to add a border to the HR tag, I can just set the tag itself to be 6px, and add a background color?

  4. #4
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okey cool there are a lot of different techniques to accomplish the style your looking to get. But first draw up a sketch in gimp and post it here, that way someone can help!!
    1)Faux border that is background-image.
    2)Border-bottom and border-top on the element below it.


Tags for this Thread

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
  •