Help with CSS and Compatibility Mode

[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]

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;
}

[Get Em Fast]

It's possible.....(woof, woof) That has been known to happen.......But, did you find the <div> for those little dc_boxes?......I can still see the <div> for them:

<span id="dc_box" style="visibility: visible;" align="center">
<div id="dc_box2" style="width: 144px; z0ab9: auto; z6bee: auto;">....................................................................

And s_t_e_v_e, you're right.....that DOES make it look nice when you're in comp. mode, but with those settings, will it still look nice outside of comp. mode? or in FF? If it will, then that's what LL should do........if not, it STILL looks to me like those little boxes are the culprit, as that blank space below the dropdown menu is taken up with them.


Also, you have to ole' csshover.htc error in IE:

Message: Access is denied to: http://www.limelites.co.uk/includes/csshover.htc
Line: 0
Char: 0
Code: 0
URI: http://limelites.co.uk/


Easy fix to this: Log into your cPanel set up a perm redirect, so that it will take the "www" off your url. That will fix you right up on that part. You can also do this with your .htaccess file, if you'd rather.

[kuroi]

Sorry, got to insert the "V" word here. Your site doesn't validate (201 errors at the time of writing) and almost from the get go the issues are structural, tags closed that weren't open, opened but not closed, in places where they're not allowed, i.e. exactly of the sorts of errors that cause cross-browser inconsistencies as they attempt, in different ways, to deal with the problems that they encounter.

[s_t_e_v_e]

Dont forget to 'V' the CSS too...

[Get Em Fast]

Yea, kurio, I ran the validation, also. Is it just all those little details messing things up, or am I on the right track of getting rid of that whole <div> containing the dc_boxes?
See those little buggers just sitting up there in (what looks like to me) the way?(hidden)

I sure don't want to steer LL the wrong way.

[limelites]

Steve, your fixes look perfect in all browsers, FF and IE8 included.

Those V links are way too scary... I'd need a spare year and a half to figure out all those little conflicts. It seems a tad OTT when there are only two or three little niggles as the site looks identical in all browsers.... apart from the items I outlined in the OP.

[limelites]

Yea, kurio, I ran the validation, also. Is it just all those little details messing things up, or am I on the right track of getting rid of that whole <div> containing the dc_boxes?
See those little buggers just sitting up there in (what looks like to me) the way?(hidden)

I sure don't want to steer LL the wrong way.

It those dc_boxes were causing the white line or the manufacturers box width, then the problems would be sorted when I totally removed them temporarily to test your theory.

I'm 99.99% sure those aren't having any impact on the issues I'm having as I did test it.