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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts

    CSS Border problem (with IE 6)

    Hi guys. I have a problem trying to get the borders to show up in my IE 6. They show up fine in firefox and opera. I was wondering if you could help me fix it.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    	background-color: #FF00FF;
    }
    #a { 
    	border-left: 1px solid #FFFFFF;
    	border-right: 1px solid #FFFFFF;
    }
    #b { 
    	border-bottom: 1px solid #FFFFFF;
    }
    -->
    </style></head>
    
    <body>
    <table align="center" width="200">
      <tr>
    	<td height="10" id="b"></td>
      </tr>
      <tr>
    	<td height="10" id="b"></td>
      </tr>
      <tr>
    	<td height="10" id="a"></td>
      </tr>
    </table>
    </body>
    </html>

  • #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
    The td cells can't be empty. Try adding &nbsp; inside of them. I'm also curious as to why you are using tables for this. I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?".

    Also you can't use the same ID more than once. If you must use the same styles then use a class. I would do like this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    background: #F0F;
    margin:0;
    padding:0;
    color:#FFF;
    }
    
    #container {
    width:200px;
    margin:auto;
    }
    
    .a {
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    height:10px;
    }
    
    .b {
    border-bottom: 1px solid #FFF;
    height:10px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div class="b"></div>
    	<div class="b"></div>
    	<div class="a"></div>
    </div>
    </body>
    </html>
    If text is to be inside of the elements then I wouldn't really set a height on them either.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    The td cells can't be empty. Try adding &nbsp; inside of them. I'm also curious as to why you are using tables for this. I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?".

    Also you can't use the same ID more than once. If you must use the same styles then use a class.

    If text is to be inside of the elements then I wouldn't really set a height on them either.
    Thanks for the quick reply and for the advice on IDs and class. I pretty much learnt what little html coding i know from looking at other people's coding and experimenting. So my knowledge is really lacking in general.

    I've been using tables inside tables for yonks now to hold together images and text as the basis of my website's structure. I guess that's outdated and bad coding now. I'll definitely read up on your linky. Sounds helpful.

    Anyways, what i was trying to do was make some space and a white line to separate my navigation buttons from my counter. I wanted to keep the 10px height so i didn't put &nbsp; inside them. Like:

    [ button ]

    ---------- (line)

    [ counter ]

    How would you go about doing this? The problem i had was that the line wouldn't show up in IE unless i had something within the empty space. There's a few options i can take to do this, but they don't feel right to me.

    I was either going to make an image and place it as a background in the space to make a separator but i really wanted to create the border from the code. The other option was to make a table but that feels kinda wrong.

    Your method works, so should i use it? Or is there a better way or doing it?


  •  

    Posting Permissions

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