Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Member
    Join Date
    Sep 2006
    Posts
    39
    Member #
    13897
    Hi people!

    I have searched the forums for an answer but could not find anything that i was looking for - apologies if this has been asked loads!!

    Im building a website which has a sub section sidebar with rounded corners top and bottom. Im laying it all out using div tags and CSS, I can get the top and bottom images to align fine in IE6 but there is a damn gap in Firefox. Please see jpg's attached - unfortunately developing this offline at the mo so cant post url!

    ive tried padding; margins; aligning baseline etc i just cant get it to work.

    This is my code
    Code:
        <div id="divContentWrapper">
       <div id="divContent">This is some content</div>
         <div id="divContentSidebar">
           <div id="divSidebartop"></div>
              <div id="divSidebar">
                            <ul>
                                <li><a href="#">Our goal</a></li>
                                <li><a href="#">Second Link</a></li>
                            <li><a href="#">Third Link</a></li>
                            <li><a href="#">Fourth Link</a></li>
                            <li><a href="#">Fifth link</a></li>
                            <li><a href="#">Sixth link</a></li>
                            </ul>            
                        </div>
            <div id="divSidebarbottom"></div>    
          </div>
    </div>
    My CSS file is attached.

    I think this is straight forward but i just cant solve it! Hope one of you can.

    Cheers for any help.
    Edd.

  2.  

  3. #2
    Junior Member
    Join Date
    Nov 2006
    Posts
    2
    Member #
    14245
    You could check your math in that css file...it doesn't look correct to me...i might be wrong, but i think this is it.

  4. #3
    Junior Member
    Join Date
    Nov 2006
    Posts
    2
    Member #
    14245
    oh....and the padding top for the divSidebarContent might be guilty for that empty area.

  5. #4
    Member
    Join Date
    Sep 2006
    Posts
    39
    Member #
    13897
    Which bit of my CSS has crap math? it doesnt surprise me as i cant add for toffee!! ive had a quick look and it seems okay??

    Also i want the whole of the sidebar nav to be 30px from the top and 30px from the bottom, which is why i have the padding set to this. I didnt think this would effect the div containers inside this divSidebar Content id - just the overall divSidebarContent?? I still dont see how this would split the images in Firefox!

    Any ideas?

  6. #5
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    To make the divContentSidebar a container, add [minicode]position:relative;[/minicode].

    The aforementioned padding should not be the problem, as it would be outside the container.

    But, it would not hurt to add [minicode]padding: 0; margin: 0[/minicode] to the two sidebar images.
    Shani

    I have an eye for detail like you'd never believe.

  7. #6
    Member
    Join Date
    Sep 2006
    Posts
    39
    Member #
    13897
    Hi DCScene, thanks for your help -
    Ive made my divSidebarContent position relative, and i had to make the divsidebartop and divsidebarbottom absolute within this container. Now Firefox displays fine - and IE6 Looks correct but my our goal link (1st in the list) appears underneath the top background image (within divsidebartop) - i can solve this in IE6 by putting top padding in my divsidebar but this causes Firefox to display the list further down from the top (due to this padding) which looks crap!
    Any suggestions??
    Edd.:squareeyed:

  8. #7
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Try putting the padding on [minicode]#divSidebar ul[/minicode]. Also make sure you're setting padding and margin to 0 on everything that doesn't need it, because browsers automatically add them.

    If that doesn't work, you can try the quick fix known as the "star html" hack where you feed certain features to IE. However, this will not work for IE7.

    [minicode]*html #nameOfDiv {padding: 10px 0 0 0; /*add 10px padding to IE*/}[/minicode]
    Shani

    I have an eye for detail like you'd never believe.

  9. #8
    Member
    Join Date
    Sep 2006
    Posts
    39
    Member #
    13897
    Thanks DCScene, i got this to work by playing around with it - and i will remeber the hack for future ref!
    Cheers for your help again.
    Edd.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:15 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com