Results 1 to 10 of 23

Hybrid View

  1. #1
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: Help with CSS and Compatibility Mode

    OK, so I've taken your advice guys and gotten rid of these hidden elements and is looking better. I positioned each element as close as possible to the final location.

    I moved the languages widget right next to the code that generates the manufacturers drop down and just above the BR/ so it just nested in beautifully.

    I moved the code for the currency selector into the tpl_drop_menu.php positioned it within that file so similarly, it's nested in neatly.

    Now, both the languages widget and the currency selector are positioned perfectly in all browsers.

    Unfortunately though, I still can't figure out what's generating the weird white line under the menu.

    Similarly, with the overflowed manufacturers side box, I can't seem to determine where the weird alignment is coming from in IE7.

  2. #2
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: Help with CSS and Compatibility Mode

    OK, I've managed to fix the sidebox width like this:

    #manufacturerslistContent {
    width:91%
    }

    #manufacturerslistContent ul {
    height:645px;
    width:85%;
    list-style-image: url(../images/bullet1.gif);
    list-style-position:outside;
    list-style-type:none;
    margin-left:35px;
    margin-top:0;
    overflow:auto;
    padding:0;
    }

    There wasn't anything in the stylesheet.css for #manufacturerslistContent and that seemed to be the problem.

    The only issue I have now with cross browsers is the white line in Chrome, Safari and Opera.

  3. #3
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Solved!!

    OK, finally got to the bottom of the annoying white line.

    I deleted the following red text from my stylesheet_header_menu.css:

    div#dropMenu li {
    position:relative;
    list-style:none;
    margin:0;
    float:left;
    line-height:1em;
    width:16.5%;
    *width:16.5%;
    }

    .clearBoth {
    clear:both;
    height:0;
    font-size:0;
    font-style:normal;
    line-height:0;
    }


    Finally, 100% cross browser display :-)

    Thanks all who helped here!! Pixel perfect now.

 

 

Similar Threads

  1. IE8 compatibility mode
    By simondale123 in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 4 Nov 2009, 03:26 AM
  2. Replies: 18
    Last Post: 13 Jul 2009, 12:31 AM
  3. IE compatibility mode problems
    By DML73 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 1 Jul 2009, 04:32 PM
  4. Replies: 1
    Last Post: 7 Oct 2007, 03:24 PM
  5. IE7 and Zen CSS Compatibility
    By sholly in forum Templates, Stylesheets, Page Layout
    Replies: 11
    Last Post: 10 Oct 2006, 01:40 AM

Posting Permissions

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