Archived

This topic is now archived and is closed to further replies.

  • 0

Footer image solid line

Question

Posted · Report post

Hi,

 

Trying to move down the white solid line under the image to line itself up with the lines on either side. Currently I have this CSS code but seems like it is not changing:

 

 

#footer .footerimage li {
  padding-bottom: 10%;
}

 

is this incorrect? Assistance will be much appreciated

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi,

 

Since I cannot see your site, it's difficult to say. Is the site live? If so, please provide a link.

 

  padding-bottom: 10%; is not correct.  10px would be correct.

Share this post


Link to post
Share on other sites

Posted · Report post

sorry forgot to add...its test.propertywealthadvisors.com.au

Share this post


Link to post
Share on other sites

Posted · Report post

I see you didn't add the proper class surrounding the image.

 

Here's what I need you to do:

1. Go to that footer column.

You'll see <img align="left" src="http://test.propertywealthadvisors.com.au/wp-content/uploads/2013/05/TheClarence.jpg">

Please re-write that as follows:

<div class="myclarence"><img align="left" src="http://test.propertywealthadvisors.com.au/wp-content/uploads/2013/05/TheClarence.jpg"></div>

 

2. Add the following code to Dashboard > PageLines > Site Options > Custom Code:

 

.myclarence {

margin-bottom: 65px;

}

 

Note: You may need to adjust that 65px, since it is not exact, only a demonstration.

 

Another way of doing it would be to add a specific height to the image HTML itself.  Like this:

 

<img align="left" src="http://test.propertywealthadvisors.com.au/wp-content/uploads/2013/05/TheClarence.jpg" height="81px">

 

One problem I can see is that you're using a massive image scaled really small.  That will do two things: First, it will not work in IE, especially older versions, and next it will slow your page's load time. I'd recommend using a graphics editor to make a copy of the image and scale it graphically to the desired size. Upload that size, and still keep the height requirements.

 

Keep in mind, you've added an unspecified element to that content.  The white line only sees a short line of code, and doesn't see the desired height, nor does it see any height at all. So, the line acts as if it's only a single line break.  If you specify a height, then the white line will adjust to meet the specification.

Share this post


Link to post
Share on other sites

Posted · Report post

I have added as you suggested but still no affect to the line for some reason?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Well the div didn't work with the margin, so let's try replacing margin-bottom: 65px; with height: 81px;

 

Or, as I suggested in the second part of the reply, add height="81px" to the image HTML tag.

Share this post


Link to post
Share on other sites