Results 1 to 11 of 11
  1. #1

    Firefox and IE Table + CSS help

    Hey guys,

    I am having a couple of problems with IE and Firefox reacting diferently. I am going to use to explain my problems

    1. I can not get FF to change the widths of tables. As you can see I got the <table width="75%"> and if you open the page in IE, the table is 75% but in FF it is 100%

    2. I can not get tables to center in IE. Again open up the training.php to see example. Ive tried table align="center" and div align="center" and it will still refuse to center.

    3. For some reason in FF my buttons on top are all misalligned when I attempt to use my own CSS code. No matter how I apply the CSS code, for some reason when I use CSS it messes up the buttons in FF but not IE These are template based buttons that I am unable to edit,

    What makes this a little tricky is that the template is controled on the school server and I only have access to where it says

    <!--CONTENT STARTS===!>

    I am thinking it is whats causing a lot of my problems but I was hoping you guys can help!!

  2. #2
    Join Date
    Apr 2005
    Right now, your comments before the doctype will put IE into quirks mode. Remove everything before the doctype.
    Validate for your other errors . I can't finish looking at this right now. Just remember you need to get it working in Firefox first so we know your code is right. IE is old, buggy and non-standard but we can adjust for that.
    Last edited by drhowarddrfine; 11-27-2006 at 06:09 PM.
    IE7 is nine years behind the standards or wrong.
    But it works in IE!
    "IE is a cancer on the web" -- Paul Thurott
    "Avoid hacker-bait apps like Internet Explorer" -- Kevin Mitnick

  3. #3
    I think dihowarddrfine is right. And I will suggest you to test your design regularly both in IE and FF during designing.

  4. #4
    thanks for the suggustion guys

    I got the nav bar fixed but now im just have to fix items #1 and #2

    Its weird, at home the table width is correct in FF. But at work the table is coming to 100% even though I set it deferently. I am using FF 1.07 at work, but sure about home. Anyone ever heard of this problem before?

    Also when using the above validator i get the error "No Character Encoding Found! Falling back to UTF-8" I even took the comments above the doctype out like someone suggusted

  5. #5
    Join Date
    Aug 2006
    To get the table to center in IE, you need to remove the left float in the div#centercol in 2 of your css files.

    If you can't edit the template css, then just create a new div in your custom css file. You can call it #xcentercol, duplicate the syntax in the old #centercol, and then remove the line which has the left float. You will also have to rename <div id="centercol"> to < div id="xcentercol"> in your source code.

  6. #6
    Thanks for the suggustion seagrass. It did not work though, do you have any other ideas?


  7. #7
    I almost got it, but it seems like the center is a little off

    any ideas?

  8. #8
    Join Date
    Aug 2006
    Yup, looks like you fixed it without editing the 2 css template files. Unless you can edit these css templates, I think it's going to be difficult to get it to look exactly alike in FF and IE. Besides, the difference is barely noticeable and nobody really surfs a site with both browsers on.

  9. #9
    Join Date
    Aug 2006
    To illustrate, these css files are conflicting with each other which prevents you from getting them exactly alike in IE and FF.

    #main {
    MARGIN: 0px 0px 0px 240px
    #centercol {
    PADDING-RIGHT: 30px; PADDING-LEFT: 20px; FLOAT: left; PADDING-BOTTOM: 10px; PADDING-TOP: 5px; FONT-FAMILY: arial, verdana, helvetica; TEXT-ALIGN: left

    #main {
    MARGIN: 0px 0px 0px 220px
    #centercol {
    PADDING-RIGHT: 10px; PADDING-LEFT: 40px; FLOAT: left; PADDING-BOTTOM: 10px; PADDING-TOP: 5px; FONT-FAMILY: arial, verdana, helvetica; TEXT-ALIGN: left

    If you can just un-attach the ie css file by deleting it from your source, you'll have a better chance of getting them alike.

    <link href="template-ie.css" rel="stylesheet" type="text/css">

  10. #10
    Join Date
    Aug 2006
    Wait wait wait. Try this instead.

    Copy this into your msds.css file:

    #centercol {
    PADDING-RIGHT: 10px;
    PADDING-LEFT: 40px;
    FLOAT: left;
    PADDING-TOP: 20px;
    FONT-FAMILY: arial, verdana, helvetica;
    TEXT-ALIGN: left
    H1 {
    FONT-WEIGHT: bold;
    FONT-SIZE: 30px;
    FONT-FAMILY: arial, verdana, helvetica;
    margin: 0px;
    padding: 0px;

    Then change this part of the html:

    <TH align=middle width="30%" bgColor=#1c3664><div align="center">Name</div></TH>
    <TH align=middle width="70%" bgColor=#1c3664><div align="center">Description</div></TH></TR>

    As far as I can tell from my browser preview, this should make the table look alike in FF and IE.

  11. #11
    Thanks for the suggustions guys.

    I think I got it. What I did was added

    <div style="text-align:center;">
    <div style="text-align: left; margin: 1em auto; width: 100%;">

    To the source code and also added back the left float

Posting Permissions

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