Page 1 of 1
[SOLVED] Alignment issues in Internet Explorer
Posted: Thu Jul 26, 2007 11:53 am
by 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?
Re: Alignment issues in Internet Explorer
Posted: Thu Jul 26, 2007 1:07 pm
by 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....
Re: Alignment issues in Internet Explorer
Posted: Thu Jul 26, 2007 2:51 pm
by 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?
Re: Alignment issues in Internet Explorer
Posted: Fri Jul 27, 2007 12:51 am
by Nullig
Can't get your site to open.
Nullig
Re: Alignment issues in Internet Explorer
Posted: Fri Jul 27, 2007 3:21 am
by Greg
Looks like the 'Three Pixel Jog' check
this page out.
Re: Alignment issues in Internet Explorer
Posted: Fri Jul 27, 2007 11:57 am
by forextrader36
Greg wrote:
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;
}
Re: Alignment issues in Internet Explorer
Posted: Fri Jul 27, 2007 12:28 pm
by 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
Re: Alignment issues in Internet Explorer
Posted: Fri Jul 27, 2007 1:06 pm
by forextrader36
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?
Re: Alignment issues in Internet Explorer
Posted: Fri Jul 27, 2007 3:12 pm
by 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.
Re: Alignment issues in Internet Explorer
Posted: Fri Jul 27, 2007 8:47 pm
by Nullig
Have you tried adding:
height: 1%;
to div#main
Nullig
Re: [SOLVED] Alignment issues in Internet Explorer
Posted: Fri Jul 27, 2007 9:52 pm
by forextrader36
Nullig wrote:
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%;
}