Help with CSS and Compatibility Mode

[limelites]

I've been checking my site in compatibility mode today and it's proving to be a bit of a headache as i can't seem to pinpoint the source of my problems using Firebug. Please, can anyone with some more experience of CSS take a look at my site in compatibility mode and/or cross browser views?

In IE7 I am getting this. Circled you can see a strange staggered effect between the left nav headers and the centre .h2 header.... this only happens in IE7. Also, only in IE7 I am having a strande left alignment on the manufacturers list:


Then, in Safari, Chrome and Opera, I am getting this where my languages widget/flags are pushed up and off the top of the screen slightly. Also in these browsers, there's a strange white horizontal line that I can't seem to find the source of:


I've been trying for hours to sort these issues out using trial and error and a very limited knowledge of CSS. Please, any help from the forum will be hugely appreciated...

[Get Em Fast]

LL, One thing I've found that's throwing your left column off.... is you've got Free currency conversion by Dynamic Converter box hiding up there. Move that, delete it, whatever you want to do with it......just don't leave it there. Then, we'll see what it all looks like.

That's step 1, which might clear up some of the other mis-alignment issues. Keep us posted.

[limelites]

LL, One thing I've found that's throwing your left column off.... is you've got Free currency conversion by Dynamic Converter box hiding up there. Move that, delete it, whatever you want to do with it......just don't leave it there. Then, we'll see what it all looks like.

That's step 1, which might clear up some of the other mis-alignment issues. Keep us posted.

Hi Get 'em Fast, Thanks for replying. I've deleted the table that the currency converter was inside. Now it's just in a table row.

Checked back on the site and it's definitely gone, but unfortunately, it's made no difference to the alignment issues.

What would you say was stage 2 ?

[limelites]

Hmmm noticed another discrepancy too... the languages widget is 150px further to the right in FF, IE and Opera..... than it is in Chrome and Safari.

[Get Em Fast]

Think I wasn't coming back?

LL, that little box has a friend.....like to have never found it, but it gives the info:

<span id="dc_box" style="visibility: visible;"><div id="dc_box2" style="width: 144px;"><a style="text-decoration: none;" target="_blank" title="Free currency conversion by Dynamic Converter. Visit DynamicConverter.com now!" href="http://DynamicConverter.com"><table cellspacing="0" cellpadding="2" style="border: 1px solid black; margin: 0px; background: black none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><tbody><tr><td style="padding: 1px; background: white none repeat scroll 0% 0%; text-align: center; color: black; font-weight: normal; font-size: 8pt; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-family: tahoma,verdana,geneva,arial,helvetica,sans-serif;"> Free currency conversion by</td></tr><tr><td style="padding: 1px; background: black none repeat scroll 0% 0%; text-align: center; color: white; font-weight: bold; font-size: 8pt; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-family: tahoma,verdana,geneva,arial,helvetica,sans-serif;"> Dynamic Converter </td></tr><tr/></tbody></table></a></div></span>

Notice, there's "dc_box" AND dc_box2. No gurantees, but if you'll move or delete that whole <div>, I think a lot of it MAY come together, a little more correctly.

Don't forget to backup, first......if you haven't already.......remember.....you're playing with more than just css, now. I know you already know this, but we all get in a hurry, and forget sometimes. That's where that "little hole" will sink you.

[s_t_e_v_e]

changes to fix the first issue with the headings not aligned.

1. #navColumnOneWrapper change to top:0;
2 h2.centerboxheading change to height:25px
3. h2.centerboxheading change to bottom:0;
4 h2.centerboxheading add margin-top:0;

[limelites]

Hi Get Em Fast... 10/10 for speediness all round :-) You're barking up the wrong tree though (I think)... I carried out a few tests on your theory.

Here's the code I've inserted at the foot of my tpl_header.php:

<table id="newLanguagesWidget">
    <tr>
        <td>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" src="https://www.limelites.co.uk/flags/_chinese_s.png" /></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" src="https://www.limelites.co.uk/flags/_french_s.png"  /></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" src="https://www.limelites.co.uk/flags/_german_s.png" /></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" src="https://www.limelites.co.uk/flags/_italian_s.png" /></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" src="https://www.limelites.co.uk/flags/_japanese_s.png"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" src="https://www.limelites.co.uk/flags/_korean_s.png" /></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" src="https://www.limelites.co.uk/flags/_russian_s.png" /></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" src="https://www.limelites.co.uk/flags/_spanish_s.png" /></a>
        </td>
    </tr>
</table>



<div>
<span id="currency_select" style="z-index:3000; float:left; position:relative; left:843px; top:-58px;"></span><br/><span id="dc_box"></span>
</div> 

The thing is, when I remove this code completely from the header file, it doesn't make any difference to any of the issues in the OP.... Still have staggered padding on the headings, still have the wacky white line under the menu and still IE7 shows the strange alignment on the manufacturers sidebox.

Something small is indeed sinking my ship

[s_t_e_v_e]

The designers list shows in IE7 with padding-left:35px rather than margin-left:35px...

[limelites]

changes to fix the first issue with the headings not aligned.

1. #navColumnOneWrapper change to top:0;
2 h2.centerboxheading change to height:25px
3. h2.centerboxheading change to bottom:0;
4 h2.centerboxheading add margin-top:0;

Hi Steve,

Thanks for helping me out again, really appreciate it, especially at this hour :-) Here are the results of the changes:

1.
#navColumnOneWrapper {
top:0;
margin-left:0px;
/*background-color: #fff;*/
background-image: url("../images/back-ground-vertical2.jpg");
background-repeat:repeat;
background-position:top;
position:relative; top:-6px;
}

2-4.
h2.centerBoxHeading {
/* background:transparent url('../images/box-title-bg.jpg') center center repeat-x; */
bottom:0;
line-height: 1.8em;
margin-left: 7px;
margin-top:0;
background-image: url(../images/title-bar-back.jpg);
background-repeat: no-repeat;
background-color: transparent;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
padding-top:2px;
font-weight:900;
padding-left:37px;
position:relative; bottom:6px; left:3px;
height:25px;
/* border-bottom: 3px solid #FDA7CA; */
}

.........has definitely cured the heading alignment... Excellent!!! Been at that for hours and couldn't get it :-)

[limelites]

The designers list shows in IE7 with padding-left:35px rather than margin-left:35px...

That's odd... here's the relevant CSS for the manufacturers sidebox:

#manufacturerslistContent ul {
height:645px;
width:85%;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:35px;
margin-top:0;
overflow:auto;
overflow-x:hidden;
padding:0;
}

#manufacturersHeading {
}

#manufacturersContent {
width: 200px;
height: 11px;
float: right;
font-size: 10px;
margin-top: -0.25em;
}