www.webdeveloper.com
Results 1 to 8 of 8

Thread: CSS border not showing in IE

  1. #1
    Join Date
    Jan 2009
    Posts
    5

    CSS border not showing in IE

    Hi, I'm just learning CSS but theres something I can't figure out, I've done lots of reading but nothing works.

    I have a site that I wanted to make a spreadsheet type look with grid lines of course using all CSS. I found some methods that used the table tags but I don't want any table tags and I know I don't need them. Anyways I finally got some code to work which does exactly what I want but the borders don't show up in IE, firefox you can see it fine. Here's the code I have and a link to my page so you can see it. Thanks for the help.

    http://robsworld.comze.com/index.html

    CSS Code for tables:

    #table {
    margin: 0;
    padding: 0;
    float: left;
    width: 100px;
    max-width: 100px;
    min-height: 25px;
    height: 25px;
    border: solid #000000 thin;
    vertical-align: bottom;
    }
    #table2 {
    margin: 0;
    padding: 0;
    float: left;
    width: 100px;
    max-width: 100px;
    min-height: 25px;
    height: 25px;
    border-right: solid #000000 thin;
    border-bottom: solid #000000 thin;
    border-top: solid #000000 thin;
    vertical-align: bottom;
    }
    #table3 {
    margin: 0;
    padding: 0;
    float: left;
    width: 100px;
    max-width: 100px;
    min-height: 25px;
    height: 25px;
    border-right: solid #000000 thin;
    border-bottom: solid #000000 thin;
    border-left: solid #000000 thin;
    vertical-align: bottom;
    }
    #table4 {
    margin: 0;
    padding: 0;
    float: left;
    width: 100px;
    max-width: 100px;
    min-height: 25px;
    height: 25px;
    border-right: solid #000000 thin;
    border-bottom: solid #000000 thin;
    vertical-align: bottom;
    }


    HTML code for tables

    <div id="table">gfds </div>
    <div id="table2"></div>
    <div id="table2"></div>
    <div id="table2"></div>
    <div id="table2"></div>
    <div id="table2"></div>
    <div id="table2"></div>


    <div id="table3">gfds </div>
    <div id="table4"></div>
    <div id="table4"></div>
    <div id="table4"></div>

  2. #2
    Join Date
    Jan 2009
    Posts
    5
    Now I'm confused, it works fine my last reload but it didn't?? Anyways now there's another problem, why is the border different thicknesses in IE and firefox? I like the thinner line in firefox, anyway to have that look in IE?

    Thanks!

  3. #3
    Join Date
    Jan 2009
    Posts
    5
    Well I'm an idiot, I wish I could delete this thread but maybe it will help someone because it all works great. I changed "thin" to "1px" and IE showed the thinner line.

  4. #4
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    32
    One thing left, you have to use 'class' instead of 'id', if you want to use it more than one time. 'id' is only allowed once.

  5. #5
    Join Date
    Jan 2009
    Posts
    5
    thanks but that confuses me, its working fine with "id". I still use the "div" right?

  6. #6
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    32
    Quote Originally Posted by robsworld View Post
    thanks but that confuses me, its working fine with "id". I still use the "div" right?
    PHP Code:
    <div id="table">gfds  </div
    This is ok, only once in use, but:

    PHP Code:
    <div id="table2"></div
    'table2' you use 6 times. So you write instead
    PHP Code:
    <div class="table2"></div
    For the stylesheet you write '.table2' instead of '#table2'.

  7. #7
    Join Date
    Jan 2009
    Posts
    5
    Hi, I made the changes, are you able to explain why the . over the # and why class instead of id? I realize this may be the right way but if the other way worked and validated why can't it be used? Just trying to get a better understanding. Thanks for your help!

  8. #8
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    32
    Quote Originally Posted by robsworld View Post
    I realize this may be the right way but if the other way worked and validated why can't it be used?
    NOPE You've got an validation service of your own? W3C Validator will always note it as wrong.

    'id' is only once to be used - 'class' you can mention as often as you need. Here is the W3C document on the element identifiers:
    http://www.w3.org/TR/REC-html40/stru...l.html#h-7.5.2

    When something works in one browser that doesn't mean, that other browsern will act the some way. Driving on the wrong side of a street may work but can cause a bad accident. So rules will help you to be on the safe side.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles