11 replies to this topic

[Pezbury]

Hello!

If you look at this page:

/scripts/prodList.asp?idCategory=80

on my Bikers Paradise site, it works fine in FF and Chrome - the category lists (not the main menu but the list under the 'You are at...' section) are aligned left. In IE, they are in the centre, which they shouldn't be.

Someone told me it could be a 'quirks mode' issue. I have been searching this term and trying to find relevent information for me, but I can't find anything at the moment.

Would anyone have any idea where I should go from here?

[Wit]

First question: which version of MSIE is that?

Quirks mode is what Firefox goes into when a webpage's code - be it HTML or CSS - is not 100% valid. In that case, they "guess" what you meant to achieve. MSIE is not a good guesser, apparently.

Have you checked if the code is "valid"?

..........could be this:

.popUp		{font-size: 11px; background-color: #BBC3D3; margin: 0 10px; padding: 5px; width: 150px; border: solid 1px black; position: left; visibility: hidden;}

position:left is NOT standard CSS

[Pezbury]

Thanks Wit.

I've looked at it on IE9, IE8 and IE6 - it is the same on all three.

I'll look into whether the code is valid or not. Hopefully it's as simple as that.

[Pezbury]

I've gone through my _inctop_.asp file and validated all the code I could (with my limited expertise).

But I can't even find any code in either my _inctop_.asp file or my prodlist.asp file that says: "position:left".

Were you referring to this, Wit?:

"position:absolute;left:"

I have a few of these in my _inctop_.asp file.

[iamlost]

At the very bottom of the CSS for 'bikersparadise.co.uk/scripts/prodList.asp?idCategory=80' is

.popUp		{font-size: 11px; background-color: #BBC3D3; margin: 0 10px; padding: 5px; width: 150px; border: solid 1px black; position: left; visibility: hidden;}

Note the position: left; mentioned by Wit.

Would not expect this to be a problem but you could comment it out

/*
.popUp		{font-size: 11px; background-color: #BBC3D3; margin: 0 10px; padding: 5px; width: 150px; border: solid 1px black; position: left; visibility: hidden;}
*/

and reload to see if makes a difference.

[Wit]

...or change it to align:left or float:left or whatever it was supposed to be




P.S.: /UserMods/_INCstyleshome_.css

P.P.S.: On that page, and probably on every page, you also link to the genaral css file AFTER you specify the page-specific css code. You may want to change that around. I haven't checked if it would make any difference here, but if you want some css code to override the site-wide code, it should come last.

Edited by Wit, 22 June 2011 - 11:15 AM.

[Pezbury]

Thanks guys.

I tried commenting it out, iamlost, and you were right, it didn't make a difference.

I changed it to align:left, Wit and that hasn't made a difference either.

But when I am editing the _incstyleshome_.css file, a box with this dialogue keeps popping up:

"The following translators were not loaded due to errors;
Server Model SSI.htm: has configuration information that is invalid."

But it still lets me save the file and upload it if I keep clicking this dialogue box away. I'm not sure what it means, could it be to do with the problem?

"P.P.S.: On that page, and probably on every page, you also link to the genaral css file AFTER you specify the page-specific css code. You may want to change that around. I haven't checked if it would make any difference here, but if you want some css code to override the site-wide code, it should come last."

Thanks for the tip, Wit. I shall make some time soon to change this. Much appreciated.

[iamlost]

"The following translators were not loaded due to errors;
Server Model SSI.htm: has configuration information that is invalid."

I ran a Google search [Server Model SSI.htm] and your error notice appears to have been a popular Dreamweaver CS4 question last year. Because I can't speak to the validity of the suggested fix (deleting WinFileCache-7A9586CB.dat) I will leave the decision to you. I do note that that dat file should regenerate on restarting DW (it remembers certain settings).


...back to .popUp - you have property:attribute align:left; which is incorrect. Do you want to left-align text within containing box [text-align:left;] or left-align containing box [float:left;] or [position: absolute|relative|fixed; left: 0;] or ???

[Pezbury]

I ran a Google search [Server Model SSI.htm] and your error notice appears to have been a popular Dreamweaver CS4 question last year. Because I can't speak to the validity of the suggested fix (deleting WinFileCache-7A9586CB.dat) I will leave the decision to you. I do note that that dat file should regenerate on restarting DW (it remembers certain settings).

I'll leave that for now then. As long as it isn't causing immediate problems. My brain space is not big enough to think about that now lol.

...back to .popUp - you have property:attribute align:left; which is incorrect. Do you want to left-align text within containing box [text-align:left;] or left-align containing box [float:left;] or [position: absolute|relative|fixed; left: 0;] or ???

I'm not up with all the technical terms but I think I want the first one: text-align: left; as I want the category items to be on the left, directly to the right of the main CSS menu on the far left (as it is in FF). Not centered like it is at the moment in IE. However, I have just added the word 'text' to 'align:left;' so it now reads 'text-align:left;' but that hasn't changed it either.

I may have misunderstood your meaning...

[iamlost]

However, I have just added the word 'text' to 'align:left;' so it now reads 'text-align:left;' but that hasn't changed it either.

That is not totally unexpected as 'text-align:left' is the default setting.
Given your requirement description text-align:left is indeed what you want. As it makes no change that means that no where prior up the cascade have you used text-align:right or text-align:justify.

[Pezbury]

Ahh I see.

I'll keep digging around and also get the order of the CSS sorted out.

Thanks for your help, guys.

[Wit]

Sometimes it helps to turn

text-align:left

into something like

text-align:left!important

If you're using MSIE 8 or 9, you can press the F12 key and fiddle with the css online, without having to re-upload all the time. I just added the line

li {text-align:left}

and that seemed to do the trick. But the list of css rules showing is different from what we saw before. It's only listing the first set of css rules (=first <style> element on the page). But hey: tweaking it worked