Zen Cart Logo
Forums / General Questions / Help with CSS and Compatibility Mode

Help with CSS and Compatibility Mode

Locked

Views: 4,898

Results 21 to 23 of 23
This thread is locked. New replies are disabled.
2 Jun 2009, 9:24 AM
#21
limelites avatar

limelites

Totally Zenned

Join Date:
Jan 2009
Posts:
2,085
Plugin Contributions:
0

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 Jun 2009, 11:07 AM
#22
limelites avatar

limelites

Totally Zenned

Join Date:
Jan 2009
Posts:
2,085
Plugin Contributions:
0

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.

2 Jun 2009, 11:44 AM
#23
limelites avatar

limelites

Totally Zenned

Join Date:
Jan 2009
Posts:
2,085
Plugin Contributions:
0

Re: Help with CSS and Compatibility Mode

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.