studio.colby.edu: Wiki

Complex center align layout
Center aligned websites are becoming increasingly popular. One has to go the extra length to create an attractive and original design. One way of achieving this is to incorporate a 3D effect using a drop-shadow around a center-aligned page (see Produce Media). Although this may seem simple in principle, a more complex design may prove difficult across browser platforms.

In designing Barbara Nelson's Spanish Language and Culture website, I attempted a slightly more complicated layout.In doing so, I came across a mis-alignment problem on IE6 on PC (by far the most popular browser): The edge of the banner did not align with the edge of the page. The annotated code in the diagram below shows what is responsible for the mis-alignment.

glitch

The reason for this glitch is that IE6 calculates center-alignment differently for background and embedded images. (In the above diagram, I denoted which of my images were in the background or embedded.) The images suffer IE6's even/odd pixel browser width calculations, so they shift as a browser window is resized. Below is a snippet of the corrected code and design layout.

corrected

Edited on Jan 19 2007 03:38PM by Nikolai Barnwell


On the Menu:	Wiki:	>> View All \| Start New
Home About Contact Colby: Colby Home LRC Home LRC Schedule Corporate Time Weblog: Login View Post New Register User ChPass Archive Quick Search: Most Recent Wikis: 1Scanning Images 2Scanning Slides 3Video Dub Station Studio: LRC Wiki PM Toolkit Projects Media Stations Inspiration: Netdiver Levitated TheBestDesigns Depiction Links: Webmail Payroll Google Dictionary	Complex center align layout Center aligned websites are becoming increasingly popular. One has to go the extra length to create an attractive and original design. One way of achieving this is to incorporate a 3D effect using a drop-shadow around a center-aligned page (see `Produce Media`). Although this may seem simple in principle, a more complex design may prove difficult across browser platforms. In designing Barbara Nelson's Spanish Language and Culture website, I attempted a slightly more complicated layout.In doing so, I came across a mis-alignment problem on IE6 on PC (by far the most popular browser): The edge of the banner did not align with the edge of the page. The annotated code in the diagram below shows what is responsible for the mis-alignment. The reason for this glitch is that IE6 calculates center-alignment differently for background and embedded images. (In the above diagram, I denoted which of my images were in the background or embedded.) The images suffer IE6's even/odd pixel browser width calculations, so they shift as a browser window is resized. Below is a snippet of the corrected code and design layout. Edited on Jan 19 2007 03:38PM by Nikolai Barnwell