[SOLVED] Alignment issues in Internet Explorer

[forextrader36]

While building my website I have noticed an alignment issue in Internet Explorer.  Everything looks fine in Firefox, only IE seems to have this issue.



In this example you can see that where the left column ends (below the red line) the text becomes out of line.

I have tried playing with the margin setting in CSS but it didn't seem to solve this issue.

Can anybody offer any advice on how to solve this issue?

[Dr.CSS]

It looks like it's taking it's side margin from the news div, as in once it's past news then it wraps over to the left...

A link would make it easier to help....

[forextrader36]

I've added a bulleted list to the page so it is easier to see.

In Internet Explorer the text goes out of line below the news container.

http://forextrader36.ifastnet.com/

Any ideas how I can correct this?

[Nullig]

Can't get your site to open.

Nullig

[Greg]

Looks like the 'Three Pixel Jog'  check this page out.

[forextrader36]

Looks like the 'Three Pixel Jog'   check this page out.

It looks like it is this 3 pixel jog.  Could somebody help me solve this phenomena!

I have tried some of the suggestions I have found, but I maybe doing it wrong because it is not fixing the problem.  Could somebody please give me an example of the code that needs to be changed in order to solve this phenomena!

Here is what I have as standard in the templates:

Code: Select all

<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(950,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
<!-- The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" -->

CSS:

Code: Select all

div#content {
   margin: 1.5em auto 2em 0;   /* some air above and under menu and content */
}


div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
}

div#sidebar {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
}

[RonnyK]

I've setup the template as follows for IE. Not only the first part is needed, but also the second.

http://forum.cmsmadesimple.org/index.ph ... l#msg48346

Ronny

[forextrader36]

I've setup the template as follows for IE. Not only the first part is needed, but also the second.

http://forum.cmsmadesimple.org/index.ph ... l#msg48346

Ronny

I have tried this suggestion and it didn't fix the problem.  It seems to be a solution to a different issue.

Any other suggestions?

[casidougal]

I just checked your link: http://forextrader36.ifastnet.com/ in IE 6, IE 7, and FF 2.0

None of them show the alignment issue you screen shot.

[Nullig]

Have you tried adding:

height: 1%;

to div#main


Nullig

[forextrader36]

Have you tried adding:

height: 1%;

to div#main


Nullig

Thanks Nullig, this seems to have solved the problem

CSS:

Code: Select all

div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
   height: 1%;
}