Help with CSS and Compatibility Mode

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...

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.

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.

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 ?

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.

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.

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

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

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 :blush:

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

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
2. 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 :-)

s_t_e_v_e:

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

I'm a little puzzled why you are using top:-6px in navColumnOneWrapper to fix the bottom:6px in h2.centerBoxHeading ?

Although the elements look as you want, extra padding/margins/position:relatives etc, can causes problems in other areas and other browsers.

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:

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.

s_t_e_v_e:

I'm a little puzzled why you are using top:-6px in navColumnOneWrapper to fix the bottom:6px in h2.centerBoxHeading ?

Although the elements look as you want, extra padding/margins/position:relatives etc, can causes problems in other areas and other browsers.

I'm not any more.... Never noticed this before..... I guess that's sort of like one step forward, one step back, or rather in this case, six pixels up, six pixels down.. :lookaroun

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.

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

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.

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.

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.

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.

limelites:

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.

Oh, o.k.......didn't know you removed them, as everytime I looked, they were still there. But glad to see you got it sorted out except for the "V" part.

Myself.......just my opinion.......I'd move everything a little closer to the top, so that the lines from the main categories box and the header would match up a little better, as it looks like it's supposed to do.........but that's just my opinion, not my site.

I agree with 'Get Em Fast' both the mods for the currency and languages need to be moved within the template files to place them in the correct place rather than using CSS position:relatives/absolute to get them there.