#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    205
    Rep Power
    22

    Page layout. Fine with IE not fine with Firefox


    http://www.refinethetaste.com/step3.htm

    Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help.....

    s.o.s

    Code:
    style>
    /*review order*/
    #checkoutprocess	{ width:576px; float:left; margin-right:2px; }
    #checkoutprocess .checkoutprocess	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
    #checkoutprocess h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
    #checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
    #checkoutprocess .checkoutprocess .th	{ float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
    #checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
    #checkoutprocess .checkoutprocess .tddesc { float: left; width:274px;  height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
    #checkoutprocess .checkoutprocess .color	{ float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top;  }
    #checkoutprocess .checkoutprocess .noncolor	{ float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
    #checkoutprocess .checkoutprocess .intprice	{ font-weight:bold; }
    
    #checkoutprocess .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }
    
    #checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
    #checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
    #checkoutprocess img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
    #checkoutprocess img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }
    
    </style>
  2. #2
  3. No Profile Picture
    Not as smart as I should be.
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Posts
    66
    Rep Power
    14
    How SHOULD it look? It looks fine here with FF3. It may not be as you expected but there is nothing that stands out to me as being wrong.

    Can you post a screen grab of your correct layout with IE.


    EDIT. I can just see the bottom of some text poking out from under billing and payment and the same below. Is this the problem?

    EDIT 2. Sorry, the more I look the more I can see things that you obviously did not want.
    Last edited by Monkey Fist; January 30th, 2009 at 02:05 PM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    205
    Rep Power
    22
    Originally Posted by Monkey Fist
    EDIT 2. Sorry, the more I look the more I can see things that you obviously did not want.

    ... I am attaching a screenshot on which I circled problem areas. Any idea why I get the circled problems only with firefox?
    Attached Images
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Don't give float:left to <tr>, <th>, or <td> elements. That's a large part of your problem. IE is ignoring it but Firefox is doing what you told it to do.

    Also the margin property doesn't apply to <tr>, <th>, and <td> elements.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    205
    Rep Power
    22
    Kravvitz, you made my friday night. I can meet up my friends all in peace now

    Almost everything fixed when I removed float: left from tr, th, th, td elements. But I still could not fix the top section. That part, still doesn't look correct. If you can suggest anything, I'd appreciate.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Please update the live page.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    205
    Rep Power
    22
    Updated.

    Also can you tell me how to vertically align the following bottun to bottom.

    Code:
    css.
    #checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
    
    html.
    <a href="#"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a>
    Last edited by yeniuye; January 31st, 2009 at 12:14 AM.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Why are you using a <dl> for a navigational menu? Anyway, you need to give it ("dl.nav") margin:0

    Give "#headerbottom p" margin:0 as well.

    For the button, I suggest you just give the link a top margin.

    Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid.
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/

    Also, you might find this helpful:
    10 Things You Might Not Know About Using CSS
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo