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 to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS in IE vs FireFox issue.

    Ok.. Now I'm having an issue with the CSS with IE. Firefox works fine.


    Notice how the FireFox screen shot has a border around the table and IE doesn't? Well I want IE to show it up like FireFox.

    Here's the code that I'm using (css and html):
    CSS:

    a.mainlevel:link, a.mainlevel:visited {
    /*background: url(menu_bg.png) no-repeat;*/
    /*background:#eaeaea;*/
    vertical-align: left;
    font-size: 10px;
    font-weight: bold;
    color: #888888;
    text-align: left;
    /*padding-top: 0px;*/
    padding-left: 1px;
    /*height: 20px !important;*/
    /*height: 25px;*/
    width: 100%;
    text-decoration: none;
    }

    table.moduletable {
    width: 100%;
    margin-bottom: 5px;
    padding: 1px;
    border-spacing: 0px;
    border-collapse: separate;
    cellspace: 1px;
    background: black;
    }

    table.moduletable th {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    /*background: url(../images/subhead_bg.png) repeat-x;*/
    background: #7F5D00;
    color: #FFBA00;
    text-align: right;
    padding-top: 4px;
    padding-left: 4px;
    height: 21px;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;

    }

    table.moduletable td {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 0px;
    margin: 0px;
    font-weight: normal;
    background:#eaeaea;
    }


    Table layout:

    <table cellpadding="0" cellspacing="0" class="moduletable">
    <tr>
    <th valign="top">
    Main Menu
    </th>
    </tr>
    <tr>
    <td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr align="left"><td><a href="index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel" id="active_menu">Home</a></td></tr>
    <tr align="left"><td><a href="index.php?option=com_content&amp;task=section&amp;id=1&amp;Itemid=2" class="mainlevel" >News</a></td></tr>
    <tr align="left"><td><a href="index.php?option=com_content&amp;task=blogsection&amp;id=0&amp;Itemid=9" class="mainlevel" >Blog</a></td></tr>
    <tr align="left"><td><a href="index.php?option=com_weblinks&amp;Itemid=23" class="mainlevel" >Links</a></td></tr>
    <tr align="left"><td><a href="index.php?option=com_contact&amp;Itemid=3" class="mainlevel" >Contact Us</a></td></tr>
    <tr align="left"><td><a href="index.php?option=com_search&amp;Itemid=5" class="mainlevel" >Search</a></td></tr>
    <tr align="left"><td><a href="index.php?option=com_content&amp;task=category&amp;sectionid=3&amp;id=7&amp;Itemid=25" class="mainlevel" >FAQ's</a></td></tr>
    </table>
    </td>
    </tr>
    </table>

    So what's my problem?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its the way IE renders padding, that black border you saw in FF, was just the background color of the table showing through, I say just make a border in CSS, use this for your CSS, I have taken out the items you had commented, and items that didnt make a difference if they were there or now. You had vertical-align:left. Thats not even valid how would it be? Vertical is up and down, left is well sideways.
    Code:
    a.mainlevel:link, a.mainlevel:visited {
    font-size: 10px;
    font-weight: bold;
    color: #888888;
    padding: 1px;
    text-decoration: none;
    }
    
    table.moduletable {
    width: 100%;
    margin-bottom: 5px;
    border:1px solid #000000;
    background: #000000;
    }
    
    table.moduletable th {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    background: #7F5D00;
    color: #FFBA00;
    text-align: right;
    padding-top: 4px;
    padding-left: 4px;
    height: 21px;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    }
    
    table.moduletable td {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    background:#eaeaea;
    }

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    figured it out..
    here's the new css
    table.moduletable {
    width: 100%;
    margin-bottom: 5px;
    padding: 0px;
    border-spacing: 0px;
    border-collapse: separate;
    border: 1px solid black;
    cellspace: 1px;
    background: black;
    }

  • #4
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Its the way IE renders padding, that black border you saw in FF, was just the background color of the table showing through, I say just make a border in CSS, use this for your CSS, I have taken out the items you had commented, and items that didnt make a difference if they were there or now. You had vertical-align:left. Thats not even valid how would it be? Vertical is up and down, left is well sideways.
    Code:
    a.mainlevel:link, a.mainlevel:visited {
    font-size: 10px;
    font-weight: bold;
    color: #888888;
    padding: 1px;
    text-decoration: none;
    }
    
    table.moduletable {
    width: 100%;
    margin-bottom: 5px;
    border:1px solid #000000;
    background: #000000;
    }
    
    table.moduletable th {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    background: #7F5D00;
    color: #FFBA00;
    text-align: right;
    padding-top: 4px;
    padding-left: 4px;
    height: 21px;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    }
    
    table.moduletable td {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    background:#eaeaea;
    }
    Thanks that helps too!
    Now to figure out the issue with Mambo and how to change how the front side looks with posts on the front page..

    http://ellisgl.mine.nu/mambo/
    I'm trying to convert an old theme over. So the new stuff is on top of the old stuff for reference.
    Last edited by ellisgl; 05-21-2005 at 03:49 AM.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    fyi, cellspace isn't valid css, to get cellspace you can use border-spacing, which isn't supported by MSIE, and border-collapse which is supported by MSIE.
    You can check the specs.
    http://www.w3.org/TR/CSS2/

  • #6
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I used your code since it looked a lot smaller and well it works .. =P
    thanks a ton man!


  •  

    Posting Permissions

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