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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer IE CSS poblem: extra space

    Hi,

    I have read all about IE CSS bugs and I can't find an answer.
    The page I am working on displays OK in Firefox and all other browsers but has problems in IE.
    I have fixed many problems but this one still remains:

    IE adds extra spacing to some div and table elements.

    You can see the problem by visiting http://www.lekarnar.com with IE(visit it with Firefox to see how it should look).
    - The drop-down menus have 2px transparent borders(only in IE).
    - The category menu(top box on the left) has 5px between categories(should be 1px).
    - The rounded boxes have 1px lines added.

    I think this could be an inheritance problem since only some div and table elements on the page are affected.

    Please help, I really need a solution for this.

    P.S. Please do not make test orders on the site as it is a live shop!

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    IE doesn't understand the css border-spacing property which you have set to 0 in your style sheet. To eliminate border-spacing you will have to use cellspacing="0" within table tags in your html.

    You have really many tables. Perhaps you should try to take better advantage of css.

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for you suggestion!
    It worked!!!!

    You are a genious!

    Adding cellspacing="0" to the table removed extra spacing.
    But only my "Category box" had tables. The drop-down menus use div elements. The rounded boxes use a combination of div and hr elements.
    Any ideas on how to fix those?

    I know I have way too many tables....this is left from the old design....this is really an oscommerce problem. I would have to change 100's of files to get rid of all of them. It would be great if you could help me to get it to work as it is now.

    Thanks so much really, I almost busted my head over this.
    Last edited by dotsi; 01-25-2007 at 02:32 PM.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hi dotsi,

    Alright I see it now.
    Your page is rendered in quirks mode which might cause problems. To avoid this try to put in a doctype declaration before the html tag and see if this resolves anything.

    I recommend you use this one for your document:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                  "http://www.w3.org/TR/REC-html40/loose.dtd">
    Edit: It is important that is is put at the very beginning of the file. There must not even be any comments before it.
    Last edited by koyama; 01-25-2007 at 04:49 PM.

  • #5
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Koyama,

    You were spot-on again!
    I added the doctype declaration and it "cured" the drop-down menus.

    Now, thanks to you I only have one problem left. The rounded boxes still get the white lines added.
    I used Nifty Corners with CSS and Javascript to make the rounded boxes. Like the other two poblems....works in every other browser, doesn't work in IE.

    Thanks for your great support, I wish I could at least buy you a beer!

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I don't think that the remaining problem is a trivial one. I see the stripes in IE7. But in IE6, for some reason, I only see them after hovering on the basket icon? Very mysterious to me.

    The 'Nifty Corners' script for adding rounded corners adds 1 pixel tall <b> block elements to simulate roundness. My best guess is that... somehow, something has triggered IE back to its usual behavior where some elements have minimum the height of the font size.

    I didn't test, but please try to change a part of your style sheet like this (add the red part) and see if it makes any difference. I think it is worth trying at least.
    Code:
    .rtop, .rbottom {display: block; font-size: 0}
    .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; font-size: 0}

  • #7
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi koyama,

    Great...it worked!

    You are really good with this things!!!
    Now you've fixed all of my problems.
    Just one more new little problem popped up:
    Im my search form the "Najdi"(Find in english) button gets put into a new line.
    This only happens on some browsers on some operating systems.Win Xp/ IE 6.0 for example.

    Thanks for all your valuable support!

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    To prevent this you must alter the white-space property for the form element that contains the input fields. Try this:
    Code:
    <td class="headerNavigation4"><form style="white-space: nowrap" name="quick_find" action="advanced_search_result.php" method="get" autocomplete="off">...
    Last edited by koyama; 01-27-2007 at 10:59 PM. Reason: added information


  •  

    Posting Permissions

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