SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    white space in IE

    Hi there

    Does anyone know how to fix this white space at the bottom of the nav menu? It only happens in IE. See attached image highlighted with red border.

    The background banner image is longer in IE but in other browsers it's the same height as the navigation menu. Any ideas?

    Here's the CSS if needed:
    http://www.tagdesign.co.nz/jornas/css/menu.css

    and here's the css container the image sits in:

    #navbanner-container {
    background-color: #015945;
    height: 128px;
    background: url(../images/banner-image.jpg) no-repeat right top;
    }

    Thanks so much.
    Attached Images Attached Images

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately I don't have the ability to approve images, otherwise I'd be able to help you right now.

  3. #3
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh bugger - I wasn't aware that it had an approval status on it. OK - here is the html page to view:

    http://www.tagdesign.co.nz/jornas/index.html
    Thanks so much.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    The background shorthand properties overrides the long winded versions.
    Code:
    #navbanner-container {
    	height: 128px;
    	background: #FDDB9A url(../images/banner-image.jpg) no-repeat right top;
    }
    But your real problem is that you are relying on the font-size / line-height to be pixel perfect unless it breaks the design. It's best to not make requirements like this.

  5. #5
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK thanks. What should I rely on instead though - padding and pts for the font sizing?

  6. #6
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This type of layout is going to break if someone resizes the text size in their browser (does so now using Firefox and an increase of one). It doesn't break completely, just your menu expands way down and after a couple of increases, the content is way down the page. I saw a site a while back on how to overcome this issue - but for the life of me I can't find the link now that I need it - sorry ! PS: You shouldn't really use pt for font size (its a unit used mostly in print work), use %ages or ems or px instead.

    Nadia

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    OK thanks. What should I rely on instead though - padding and pts for the font sizing?
    I was talking about page layout and design.
    Don't make a design that requires the font-size to be an exact size. In your example it's having a menu that needs to be exactly the same height as an image.
    Try and make design elements flexible with their heights.

  8. #8
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I was talking about page layout and design.
    Don't make a design that requires the font-size to be an exact size. In your example it's having a menu that needs to be exactly the same height as an image.
    Try and make design elements flexible with their heights.
    Ah - OK I see what you are saying. Unfortunately I didn't design the site. But yes, I totally agree. It's a lesson learned for the next time though. Cheers.

  9. #9
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Nadia P View Post
    This type of layout is going to break if someone resizes the text size in their browser (does so now using Firefox and an increase of one). It doesn't break completely, just your menu expands way down and after a couple of increases, the content is way down the page. I saw a site a while back on how to overcome this issue - but for the life of me I can't find the link now that I need it - sorry ! PS: You shouldn't really use pt for font size (its a unit used mostly in print work), use %ages or ems or px instead.

    Nadia
    wow - it would be great to get that information from that site as that's something I would cherish to learn. Yes - agree about pts. But I haven't used them in this template. Not sure where you saw them being used. Also, I'm not experiencing the breaking of the nav menu in any of my browser testing yet - which version browser did you see the break in?
    Last edited by Feliciaf; Aug 22, 2007 at 15:46.

  10. #10
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It breaks in Firefox 2 when you increase the font size a couple of steps, by pushing down the centrecontent div. In IE7 it breaks by letting the menu text flow out of the green coloured section into the section below.

    You simply need a basic two-col with header and footer template.
    Place the company logo in the header on a white background
    Place the nav in a list in the left hand div, that way you style the list to be green and when the text gets bigger, the green area expands
    Place the main body content in the second column.

    Borrow one of paul's tried and tested designs from www.pmob.co.uk.

    Like this one http://www.pmob.co.uk/temp/2columnce...equalising.htm - youjust have to adjust the widths a bit then the colours, and it will soon be like yours. But crash-proof.

  11. #11
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dr John View Post
    It breaks in Firefox 2 when you increase the font size a couple of steps, by pushing down the centrecontent div. In IE7 it breaks by letting the menu text flow out of the green coloured section into the section below.

    You simply need a basic two-col with header and footer template.
    Place the company logo in the header on a white background
    Place the nav in a list in the left hand div, that way you style the list to be green and when the text gets bigger, the green area expands
    Place the main body content in the second column.

    Borrow one of paul's tried and tested designs from www.pmob.co.uk.

    Like this one http://www.pmob.co.uk/temp/2columnce...equalising.htm - youjust have to adjust the widths a bit then the colours, and it will soon be like yours. But crash-proof.
    Oh brilliant! Thanks very much for your help. I will soldier on. Thanks again.

  12. #12
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there Dr John
    I tried the http://www.pmob.co.uk/temp/2columnce...equalising.htm and yes it's great but the one thing that really is problematic is the background colouring for the left column. It doesn't work. It seems that only one area for colours works and that is in the container. I can't get the bg image in the left to work. Any ideas?

  13. #13
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Look at this bit in paul's code
    #content {
    border: 1px solid #000;
    padding: 0;
    background-image: url(images/navbg.gif);/*this is the background colour of the left column */
    background-repeat: repeat-y;
    background-position: left top;
    }

    It is using an image as the backgound to the #content div
    The left hand side appears coloured as the image for the .content div shows through - it's called faux columns - fake columns - don't set a colour for the left column at all.

    It's a fake because your left column may only be 100px or 200 px high, but the bigger content area's image shows all the way down the page. Indeed in your case the real left column colour will be that of the navigation list itself, and that will expand as needed.

    So make an image of your own that is the colour you wish and the width desired for the left column, and use that where navbg.gif is. You can just call yours navbg.gif and it will work automatically. (the image needs to be the width you require, but only a few pixels high.)

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

    As Dr John already said the easiest way to fake columns is simply to use a background image on the parent.

    For example in this layout I use this image to replicate all three column colours and even their borders. You can do it without images but it gets far too complicated when there are other alternatives available.

    Here's another example of using a background image to good effect.

  15. #15
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. got that and I do understand it. But the image that I have been using in the bg is not working at all check this out - http://www.tagdesign.co.nz/jornas/index-2.html

    I need the image in the left side to go all the way down to the footer and the colour should be a orangey colour. I have the nav-bg image in there repeating y but still nothing. Am I being particularly useless here? OK, you don't have to answer that.

    CSS - http://www.tagdesign.co.nz/jornas/css/main-2.css

  16. #16
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I have finally sorted it and have used your layout thanks Paul. I have used background images with a height in the right column to get the images to show but that works OK.

    One wee problem is that the footer floats too high in Opera and the banner image is ever so slightly longer (by about 2 pixels) in Opera and IE. Not sure how to fix these two wee things.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Not sure how to fix these two wee things.
    If you are still having issues then post the updates code or link


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
  •