Jump to content

Firefox > IE Differences (Minor)


Guest walmarc

Recommended Posts

Guest walmarc

Hi all

I've searched but can't find an answer - the nearest was a post by Convict about <p> tags which I've played with but don't understand.

I'm not that experienced with CubeCart and have absolutely no idea about css. I've put up a store and there is a minor difference between the view in Firefox (my preferred browser) and Internet Explorer.

I'm using an as yet minimally modified Classic skin and in IE the left side menus show double spacing of the text or menu items but in Firefox they appear as I think they should - single spacing.

Any help greatly appreciated.

Regards ;)

Link to comment
Share on other sites

Guest estelle

I haven't checked out your site, but I know that p tags have different margin settings between browsers.

Try this:

p {

margin: 1em 0;

}

Link to comment
Share on other sites

Guest walmarc

I haven't checked out your site, but I know that p tags have different margin settings between browsers.

Try this:

p {

margin: 1em 0;

}

Thank you estelle - but I have no idea what file I'd change or where to change it ;)

Sorry - in the early stages of learning! ;)

Link to comment
Share on other sites

Your problem is not with a <p> tag, though, the problem is in the unordered lists boxes. Try this to fix it:

OPEN /skins/Classic/styleSheets/style.css

FIND this block of code:

li.bullet {

	list-style-type: square;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 75%;

	color: #000000;	

}




REPLACE it with this:




li.bullet {

	list-style-type: square;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 75%;

line-height: 1.2em;

	color: #000000;	

}

If it doesn't suit you, change the value 1.2 to 1.3 or 1.4 to add more space between lines. The line-height property with this syntax will set the line height at 1.2 times the size of the font.

Link to comment
Share on other sites

Guest walmarc

Thank you so much markscarts - that fixed it - it's now exactly the same in both browsers.

Hmmm....now to get back to that on-line css course so I can learn these things.... :)

Link to comment
Share on other sites

This is the white space issue. FF doesnt have any problem. As Mark has mentioned height of line is the trick.

I used manage this only for IE (Advanced Expanding Category Link mod has this fix) General 'patch' for all LI:

<!--[if IE]>

<style>

li {line-height:1.3em;}

</style>

<![endif]-->

just before </head> tag.

Link to comment
Share on other sites

  • 5 months later...

Yes, I know its bad form to bump an old thread like this, so I apologize profusely for any breach in etiquette. However, since I'm not sure how long threads are archived here before they disappear into the abyss, and since the tip MarksCarts posted here helped me immensely, I thought I'd give it a bump for good measure.

Kudos to Mark. This is the third time in the past week that one of his posts helped me with a vexing problem.

Link to comment
Share on other sites

Guest SwishEmporium

This is the white space issue. FF doesnt have any problem. As Mark has mentioned height of line is the trick.

I used manage this only for IE (Advanced Expanding Category Link mod has this fix) General 'patch' for all LI:

<!--[if IE]>

<style>

li {line-height:1.3em;}

</style>

<![endif]-->

just before </head> tag.

which file do we place this in?

p.s. sometimes it helps to explain fully for those of us learning to use .css and php

Link to comment
Share on other sites

  • 6 months later...

Had the same problems with the different spacing between IE and Firefox.

Solutions above solve the problems with the "shop by category" box (thanks) but I had the same problem with the "popular products" box which is not a bulleted box.

The solution above pointed me in the right direction to solve though. Look in /skins/*****/styleSheets/style.css

li.num {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 70%;

	color: #000000;




Replace with:




li.num {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 70%;

	line-height: 1.4;

	color: #000000;

Adjust the 1.4 to siut.

Thought this might help someone else

Link to comment
Share on other sites

Well, that is the point my friend, the convict, was making . . .

Since the mess is in IE, he gave a fix that goes in the document head that concerns only IE, but works for all list items whether numbered or bulleted.

To prevent having to edit multiple times and multiple files, I will offer this advice, rather than what we have already written above.

At the bottom of style.css just place this code:

li {

line-height: 1.3em;

}

Like convict's code, this will keep ALL your list items the same line-height, regardless of bulleted or numbered, and it simply instructs all browsers to use the same line-height. Change the actual measurement, 1.3, to suit.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...