Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Can anyone explain this "Bizarre" behaviour??

    Hi

    I am definitely having a WTF moment here

    All I wanted to do was get an image to float to the bottom of a div, simple you might say but I could not get it to for love nor money. There was a gap underneath, which I just could get my head round

    I decided to start from the beginning and go through a process of trial and error to see if any of my code was broken or any code was affecting it and very bizarrely it's to do with the font size and font family in the body tag (CSS)

    If I remove these lines from my body tag it snaps to the bottom or is it not that it's snapping to the bottom at all but the unstyled text is pushing it further down?

    Code:
    font-family: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif;
    font-size: 0.9em;
    Here is a pic example of before and after:



    Here is an upload of the test page:

    http://vicarscafebistro.co.uk/OTCC/test/test.html

    I do need to set that font for the whole site, so have I done something wrong? How would I do this without this happening?

    Also this problem is in Chrome and I've not tried other browsers

    HTML:

    Code:
    <div class="box1">
    
    <img src="box1.png" width="265" height="35" alt="Hello!" />
    <p>Welcome to OfF ThE CuFf CaKeS!! sparkly new website, where you will find pictures of our latest mouthwatering confections! Specialising mainly in novelty cakes and cupcakes, OTCC uses delicious and fresh ingredients so that they taste as good as they look.</p>
    
    <p>We like to make things with a twist for that extra 'wow' factor and can assure that our creations will leave you smiling! x</p>
    
    
    <a href="#"><img src="box1-bottom.jpg" alt="See people enjoying OTCC" width="265" height="65" class="box1_bottom_image" /></a>
    
    
    <!-- end .box1 --></div>
    CSS

    Code:
    body {
    
    margin: 0; 
    background-color: #fbf7f4;
    font-family: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif;
    font-size: 0.9em;
    }
    
    .box1 {
    	height: 350px;
    	width: 275px;
    	margin: 20px;
    	float:left;
    	border: 1px solid #000;
    }
    
    
    
    
    
    .box1_bottom_image {
        position: relative;
    	bottom: 0;
    	left: 0;
    }
    Last edited by mzpresto; 02-10-2013 at 02:10 PM.

  • #2
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Duh! How thick am I lol I think it's just the unstyled text pushing it down further, so I need help with some positioning tags please to get it to position to the very bottom, I tried HTML align tags and that didn't work either.

    I did try a top margin but it pushed it out the div is that the only way and with the exact measurements?
    Last edited by mzpresto; 02-10-2013 at 02:15 PM.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    You have set a fixed height on the container. Remove that height and the bottom of the container is at the bottom of the image, too.

    And to explain the difference you see: when you apply font-size: 0.9em you are – well – changing the size of the text, so the text is smaller and the lines are narrower than the default which makes the text take less space. You can also play around with the line height to increase the space the text takes.

  • Users who have thanked VIPStephan for this post:

    mzpresto (02-10-2013)

  • #4
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    You have set a fixed height on the container. Remove that height.
    Thanks for the quick response, problem is I need a fixed height because it has to line up with another 2 divs, so is my only option absolute positioning?

    Thanks

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Quote Originally Posted by mzpresto View Post
    so is my only option absolute positioning?
    Yes, I would guess. If you know the text will never change you can also play with the line height.

  • Users who have thanked VIPStephan for this post:

    mzpresto (02-10-2013)

  • #6
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Cool thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •