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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Border-spacing & IE

    I have a table in which I want the cells particularly spaced. It is quite easy to achieve in Firefox (using border-spacing), but I cannot for the life of me get it to work in IE. I understand that no version of IE supports border-spacing (although IE8 plan to support it). What could I use as a substitute?

    I do NOT want any attributes in my HTML; I want it all done in my CSS. Border-collapse: collapse is not an option, either, because I do not want my spacing to be zero.

    This my current CSS, which works with Firefox:

    div#navigationDiv table.navigation
    {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-spacing: 15px;
    }

    If anyone could help me out, I would be very grateful. I have been trying to find a solution for this all day, and it's really starting to irritate me.

  • #2
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I am attempting to use an unordered list in lieu of a table. I have it to where the list displays like this: blah blah blah blah , instead of the traditional top-to-bottom. However, I cannot get the whole thing centered on my page. Also, I think the spacing between each item in the list is still not working properly in IE. *wait, I take that back; the spacing is proper in IE*

    Here is the CSS code for the ul list and its components:

    div#navigationDiv ul#navigation
    {
    height: 2em;
    list-style: none;
    width: 740px;
    margin-right: auto; <--this does not work
    margin-left: auto; <--this does not work
    }

    div#navigationDiv ul#navigation li
    {
    float: left;
    margin: 0px 1em 0px 1em;
    }


    Please, any help with my questions will be greatly appreciated.
    Last edited by leelu; 07-08-2008 at 09:57 PM.

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    i believe this is your problem

    Code:
    div#navigationDiv ul#navigation li
    {
    float: left;
    margin: 0px 1em 0px 1em;
    }
    try this

    Code:
    div#navigationDiv ul#navigation li
    {
    display:inline;
    margin: 0px 1em 0px 1em;
    }

  • #4
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I changed my previous ul/li CSS to this:

    div#navigationDiv ul#navigation
    {
    height: 2em;
    /*list-style: none;*/
    width: 740px;
    }

    div#navigationDiv ul#navigation li
    {
    display: inline;
    /*float: left;*/
    margin: 0px 1em 0px 1em;

    }

    I changed to display: inline as you suggested, but I am still having difficulty getting the list to center on my page.

    It is at least displaying (nearly) identically now, whether I use Firefox or IE, though.

    Thank you for the advice, by the way, whether it works or not. 8)

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If anyone has any suggestions, please, I'd like to hear them.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    We really need to see your entire code or better still a link to your site.

    It is very difficult to help without access to your images, etc.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    CSS:
    Code:
    body
    {
        background-color: #000000;
        color: #FFFFFF
    }
    
    div#companyName
    {
        width: 740px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    div#navigationDiv
    {
        width: 740px;
        margin: 25px auto auto auto;    /* top right bottom left */
    }
    
    div#navigationDiv table.navigation
    {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        border-spacing: 15px;
    }
    
    div#navigationDiv ul#navigation
    {
        height: 2em;
        /*list-style: none;*/
        width: 740px;
    }
    
    div#navigationDiv ul#navigation li
    {
        display: inline;
        margin: 0px 1em 0px 1em;
        width: 740px;    
    }
    
    img
    {
        border: none;
    }
    
    a
    {
        text-decoration: none;
    }
    
    a:hover
    {
        background-color: green;
    }
    
    div#content
    {
        width: 740px;
        margin: 2em auto auto auto;    /* top right bottom left */
        border-top: 2px dotted;     /* thickness type */
        border-bottom: 2px dotted;    /* thickness type */
        padding: 2em 0px 1em 0px;    /* top right bottom left */
    }
    
    div#content p
    {
        padding: 0em 2em 1em 2em;    /* top right bottom left */
        text-align: justify;    
        font-family: Arial;
        font-size: 15px;
    }
    
    div#footer
    {
        width: 740px;
        margin: 2em auto auto auto;    /* top right bottom left */
        margin-right: auto;
        margin-left: auto;    
    }
    
    div#footer p
    {
        font-family: Arial;
        font-size: 10px;
        text-align: center;
    }
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" dir = "ltr" lang = "en-us">
       <head> 
          <meta content = "text/html; charset = ISO-8859-1" http-equiv =
               "content-type" />
     
          <link rel = "shortcut icon" href = "BC.ico" />
          <link rel = "stylesheet" type = "text/css" href = "home3_v2.css" />
            
          <title> BC - Home </title>
       </head>
        
       <body>
          <div id = "companyName"> <img src = " BC_logo.png" alt = "logo" /> 
          </div>
            
          <div id = "navigationDiv">
             <ul id = "navigation">
                <li> <a href = "home3_v2.html"> <img src = "BC_navHome.png" alt = 
                     "Home" /> </a> </li>
                <li> <a href = "services.html"> <img src = "BC_navServices.png" alt 
                     = Services" /> </a> </li>
                <li> <a href = "products.html"> <img src = "BC_navProducts.png" alt 
                     = Products" /> </a> </li>
                <li> <a href = "store.html"> <img src = "BC_navStore.png" alt = 
                     "Store" /> </a> </li>
                <li> <a href = "contact.html"> <img src = "BC_navContact.png" alt =
                     "Contact" /> </a> </li>
             </ul>
          </div>
    
          <div id = "content">
          </div>
    
          <div id = "footer">
          </div>
       </body>
    </html>
    Okay, that is the whole of the code. I did not include the contents of the "content" and "footer" because it is just simple <p> stuff. The "companyName" and "navigationDiv" are the two that contain images. Also, the "companyName" is working fine. It's just the navigation that will not center.

    Both the CSS and HTML were run through a validator and passed, so I do not think anything is incorrect, but I cannot think of anything else to do to make the navigation bar center.

    I cannot link to the site because it is not up yet. I have just been local hosting it while I work on it. Oh, and the images used in the navigation bar are just pngs that say "Store" or "Contact", etc. I only used images for that because I used a font that is not very common--this way it always looks the same whether that browser has that font or not.

    I hope all this helps. 8)
    Last edited by leelu; 07-11-2008 at 05:40 PM.


  •  

    Posting Permissions

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