Alignment Issues On Different Computers

@JackyDravenFeb 11.2011

Hi all,

Im afraid I am a novice at website creation, just some basic html, css and trial and error.

I have designed a website for my company ~~[url]~~http://www.pisales.co.uk[/url]

It all looks fine and centered on my computer, however I have noticed on other computers the alignment is completely out, the 3 column of information is either below the main body or hidden, the div background (the main box) is sometimes too small for the content even though it looks perfect on my pc,

When clicking on the products link it is a complete mess,

Any help would be very greatly appreciated as I am at a total loss,

Thank you in advance,

to post a comment

HTML

23 Comments(s) _↴

@KorFeb 11.2011 — #

It all looks fine and centered on my computer, however I have noticed on other computers the alignment is completely out[/QUOTE]
Impossible. Which is different is the browser and, maybe, the Operating System, not the computer, thus you have to tell us on which browser (IE? FF? Opera? Chrome? Safari? Other?) and which OS (Win? Mac? Lynux? Other?)

Anyway, I suspect that you have problems in IE. Could not be IE's fault, but yours. You should have organized the content in 3 columns (not 4) and the menu should have been put on the top of the middle column.

@JackyDravenauthorFeb 11.2011 — #Oh sorry, both computers are running Windows XP, mine, where there is no problem, is using Mozilla 3.6.13 and the other is using IE 8,

Obviously I need to have it aligned on these two browsers atleast as the majority of our clients use these?

Thanks

@KorFeb 11.2011 — #See my previous post, and organize the content otherwise. In 3 columns.

@TazDevilLooneyFeb 11.2011 — #

[code=html]
 
  <div id="colone">
   <a href="social.html"><img src="http://www.pisales.co.uk/images/social.jpg" width=171 ALIGN=left BORDER=0/></a>
   <div Style="*margin-top:75px !important;"><img src="http://www.pisales.co.uk/images/logo_all.jpg" width=171 ALIGN=left /></div>
  </div>
 
 
  <div id="colfour">
   <a href="index.html" title="Home"><img src="http://www.pisales.co.uk/images/homebutton.png" BORDER=0 onmouseover="this.src='http://www.pisales.co.uk/images/homebutton2.png';" onmouseout="this.src='http://www.pisales.co.uk/images/homebutton.png';" /></a>
   <a href="aboutus.html#target1" title="About Us"><img src="http://www.pisales.co.uk/images/aboutusbutton1.png" BORDER=0 onmouseover="this.src='http://www.pisales.co.uk/images/aboutusbutton2.png';" onmouseout="this.src='http://www.pisales.co.uk/images/aboutusbutton1.png';" /></a>
   <a href="products.html#target1" title="Products"><img src="http://www.pisales.co.uk/images/productsbutton1.png" BORDER=0 onmouseover="this.src='http://www.pisales.co.uk/images/productsbutton2.png';" onmouseout="this.src='http://www.pisales.co.uk/images/productsbutton1.png';" /></a>
   <a href="news.html#target1" title="Services"><img src="http://www.pisales.co.uk/images/newsbutton1.png" BORDER=0 onmouseover="this.src='http://www.pisales.co.uk/images/newsbutton2.png';" onmouseout="this.src='http://www.pisales.co.uk/images/newsbutton1.png';" /></a>
   <a href="siemens.html#target1" title="Partners"><img src="http://www.pisales.co.uk/images/linksbutton1.png" BORDER=0 onmouseover="this.src='http://www.pisales.co.uk/images/linksbutton2.png';" onmouseout="this.src='http://www.pisales.co.uk/images/linksbutton1.png';" /></a> 
   <a href="contactus.html#target1" title="Contact Us"><img src="http://www.pisales.co.uk/images/contactbutton1.png" BORDER=0 onmouseover="this.src='http://www.pisales.co.uk/images/contactbutton2.png';" onmouseout="this.src='http://www.pisales.co.uk/images/contactbutton1.png';" /></a>
  </div>
 
  <div id="coltwo">
   <h3 class="heading"><font size=2>Welcome to Process Instrument Sales Ltd</h3>
   <p>Here you will find a vast range of instrumentation, field and panel products used across industry in a wide variety of applications.
   We are technical partners with <b>Siemens Process Instrumentation</b> and <b>Invensys Eurotherm</b>. We are the sole UK distributor for <b>Labom</b> of Germany and <b>Precision Digital</b> of the USA. We are distributors for <b>Sigrist</b>,
   <b>Turck Banner</b> and <b>Barksdale</b>.</p>
   <h3 class="heading">We supply basic instruments to fully engineered system solutions.</h3>
   <p>We have frequently solved customers energy optimisation and environmental requirements with our comprehensive range and we are renouned for our problem solving in new applications and replacement of outdated instrumentation.
   We have recently added a ThinkSiemens Youtube collection featuring both Tutorials & Product Demonstrations, <a href="thinksiemensmain.html">Click Here</a> to view them.</p>
   <h3 class="heading"><font size=2>Latest News</h3>
 
   <div style="height:300px;width:700px;font:10px/1.3 Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif; overflow-x:hidden;overflow-y:scroll;">
 
   <table>
 
   <td bgcolor=#F0F0F0>
   <p><b>01/02 - THE FIRST 78 GHZ RADAR LEVEL TRANSMITTER FOR SOLIDS LEVEL MEASUREMENT</B>
   <p>Siemens Industry Automation Division has launched Sitrans LR560, the first radar level transmitter operating at 78 GHz frequency. <a href="http://www.automation.siemens.com/w1/index.aspx?nr=19563&para1=The-first-78-GHz-radar-level-transmitter-for-solids-level-measurement.xml#related-newscenter_detail" target=#>Click Here</a> for full details.
   </td></tr>
 
   <tr><td bgcolor=#FFF>
   <p><b>19/01 - SIREL CONTROLLER IS NOW EX CERTIFIED FOR INDUSTRIAL TURBIDITY MONITORING</B>
   <p>The SIREL SMD Ex is a control unit for operation in hazardous areas and includes a display and keys for data entries/operating as well as analogue and digital signals. <a href="http://www.photometer.com/en/products/details/documents.html?productid=258" target=#>Click Here</a> for full details.
   </td></tr><tr>
 
   <td bgcolor=#F0F0F0>
   <p><b>12/01 - NEW! PRECISION DIGITAL PROVU MULTI-PUMP ALTERATION VIDEO</B>
   <p>This video demonstrates the PD6000 ProVu process meter in a level application, particularly pump alternation in a lift station. <a href="http://www.predig.com/video/video_library.php?Video=20" target=#>Click Here</a> for full details.
   </td></tr><tr>
 
   <td bgcolor=#FFF>
   <p><b>DEC 2010 - PD662 LOOP-POWERED METER IS NOW CSA AND CE CERTIFIED</B>
   <p>The PD662 Survivor NEMA 4X, CSA Certified loop-powered meter is perfect for applications where a simple, inexpensive display is required and AC power is not available. The PD662 derives all its power from the 4-20 mA loop. <a href="http://www.predig.com/news/news_archive.php?ID=244" target=#>Click Here</a> for full details.
   </td></tr><tr>
 
   <td bgcolor=#F0F0F0>
   <p><b>DEC 2010 - SIEMENS LVL200 LIQUID TUNING FORK NOW AVAILABLE WITH ATEX EXI CERTIFICATION</B>
   <p>SITRANS LVL200 is a standard vibrating level switch for use in all liquid and slurry applications such as overflow, high, low, and demand applications, as well as pump protection. <a href="http://www.automation.siemens.com/w1/automation-technology-sitrans-lvl200-18703.htm" target=#>Click Here</a> for full details.
   </td></tr><tr>
 
   <td bgcolor=#FFF>
   <p><b>DEC 2010 - LABOM PRESSURE TRANSMITTER UNIVERSAL CA FOR GENERAL APPLICATIONS</B>
   <p>The pressure transmitter UNIVERSAL CA is suited for measuring gauge pressure and absolute pressure of gases, vapors and liquids. <a href="http://www.labom.com/376-1-for-general-applications.html" target=#>Click Here</a> for full details.
   </td></tr><tr>
 
   <td bgcolor=#F0F0F0>
   <p><b>NOV 2010 - LABOM PRESSURE TRANSMITTER/PRESSURE SWITCH PASCAL CS AVAILABLE</B>
   <p>The pressure transmitter/pressure switch PASCAL CV is suited for measuring the relative and absolute pressures of gases, vapors and liquids. <a href="http://www.labom.com/373-1-for-general-applications.html" target=#>Click Here</a> for full details.
   </td></tr><tr>
 
   <td bgcolor=#FFF>
   <p><b>NOV 2010 - SIEMENS WM100 HEAVY DUTY MOTION SENSING SWITCH RELEASED</B>
   <p>SITRANS WM100 is a heavy-duty zero-speed alarm switch. This non-contacting unit provides cost-effective equipment protection even in the harshest conditions. <a href="http://www.automation.siemens.com/w1/automation-technology-sitrans-wm100-19563.htm#" target=#>Click Here</a> for full details.
   </td></tr><tr> 
 
   </table>
 
   </div>
  </div>
 
 
  <div id="colthree">
   <!-- BEGIN Comm100 Live Chat Button Code --><link href="http://chatserver.comm100.com/css/comm100_livechatbutton.css" rel="stylesheet" type="text/css"/><div id="comm100_ChatButton"><div id="comm100_warp"><div id="comm100_dvhelp"><a class="comm100_ahelp_css" href="http://www.comm100.com/livechat/" onclick="comm100_Chat();return false;" target="_blank" title="Live Chat"><img id="comm100_ButtonImage" src="http://chatserver.comm100.com/BBS.aspx?siteId=61560&amp;planId=253&amp;partnerId=-1" style="border:0px" width="171" alt="Live Chat Software for Website" /></a><script src="http://chatserver.comm100.com/js/LiveChat.js?siteId=61560&amp;planId=253&amp;partnerId=-1" type="text/javascript"></script>
   <div id="comm100_track"><a href="http://www.comm100.com/livechat/" target="_blank"></a><a style="color:#009999;cursor:pointer;" onclick="javascript:document.getElementById('comm100_dvbox').style.display='';"></a></div></div><div id="comm100_dvbox" class="comm100_dvbox_css" style="display:none;" onmouseover="this.style.display=''" onmouseout="this.style.display='none'"><div class="comm100_dvcontent_css"><p class="comm100_ptitle_css"><b><a href="http://www.comm100.com/" target="_blank" class="comm100_atitle_css" >Comm100</a> Products:</b></p><ul class="comm100_ulbox_css"><li style="display:none;" class="comm100_onelinone">&nbsp;</li><li>
   <a href="http://www.comm100.com/" target="_blank">Help Desk Software</a></li><li><a href="http://www.comm100.com/livechat/" target="_blank" >Live Chat Software</a></li><li><a href="http://www.comm100.com/knowledgebase/" target="_blank" >Knowledge Base Software</a></li><li><a href="http://www.comm100.com/forum/" target="_blank">Forum Software</a></li><li><a href="http://www.comm100.com/emailmarketingnewsletter/" target="_blank">Email Marketing Software</a></li><li><a href="http://www.comm100.com/emailticket/" target="_blank">Email Management</a> Software</li></ul></div></div></center></div></div><!-- End Comm100 Live Chat Button Code -->
   <a href="spotlight.html#target1"><img src="http://www.pisales.co.uk/images/seg2.jpg" width=171 ALIGN=left BORDER=0/></a>
   <div style="*margin-top:400px;"><a href="4iltd.html#mid"><img src="http://www.pisales.co.uk/images/seg3.jpg" width=171 ALIGN=left BORDER=0/></a></div>
  </div>
 
 
 </body>
 
 </html>[/code]

@TazDevilLooneyFeb 11.2011 — #Past the two codes togeather. This is the 1st piece. Dont know why it don this in that order. Works with Ie7 8 and 9

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 
 <script type="text/javascript" src="crawler.js"></script>
 
 <title>Process Instrument Sales Ltd</title>
 
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
 
 <!-- TO EDIT IMAGE BELOW OPEN FILE /photoshop psd files/logo.psd -->
 <div><p align="center"><img src="http://www.pisales.co.uk/images/pisaleslogo.jpg" width="1100" height="120"/></div>
 <!-- END EDIT --></center>
 
 <center>
 
 <!-- TO EDIT IMAGE BELOW OPEN FILE /photoshop psd files/banner.psd --><div class="marquee" style="*max-height:950px;" id="mycrawler">
 <img src="http://www.pisales.co.uk/images/marq01.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq02.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq03.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq04.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq05.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq06.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq07.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq08.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq09.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq10.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq11.jpg" height="152" />
 <img src="http://www.pisales.co.uk/images/marq12.jpg" height="152" />
 
 <script type="text/javascript">
 marqueeInit({
 uniqueid: 'mycrawler',
 style: {
 'padding': ' 0 0 0 0px',
 'width': '1100px',
 'height': '160px',
 'background': 'white',
 'border': '0px solid #CC3300'
 },
 inc: 8, //speed - pixel increment for each iteration of this marquee's movement
 mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
 moveatleast: 2,
 neutral: 150,
 savedirection: true
 });
 </script>
 
 </center>
 
 <!-- END EDIT -->[/code]

@JackyDravenauthorFeb 14.2011 — #Thank you very much that has solved the problem on all the main pages, however it hasnt fixed the products page and subsequent pages,

Thanks again I really do appreciate your time,

@TazDevilLooneyFeb 14.2011 — #I'll have another look. Its a bit difficult to test all pages with only the web site address available. I'll see if i can make the adjustments in the .css

@JackyDravenauthorFeb 14.2011 — #thanks, here is the css file i use,

html {

text-align: center;

font: 10px/1.3 "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif;

background-color: #fff;

color: #4b4b4b;

}

body {

margin: 0 auto;

padding: 0;

width: 800px;

text-align: left;

background-color: #fff

}

a:link, a:visited {

background-color: inherit;

color: #333;

text-decoration: underline;

}

a:hover, a:active {

background-color: inherit;

color: #555;

text-decoration: underline;

}

ul#nav {

margin: 0;

padding: 0 0 0 6px;

width: 794px;

height: 44px;

background: #000 url(images/nav_bg.gif) repeat-x;

color: inherit;

}

ul#nav li {

float: left;

margin: 0;

padding: 15px 0 0 0;

list-style-type: none;

text-transform: uppercase;

}

ul#nav li a {

text-decoration: none;

padding: 13px 30px 14px 30px;

}

ul#nav li a:link, ul#nav li a:visited {

background-color: inherit;

color: #fff;

}

ul#nav li a:hover, ul#nav li a:active {

background-color: inherit;

color: #c9f381;

}

ul#subnav {

margin: 0;

padding: 0 0 0 30px;

width: 770px;

height: 31px;

background: #000 url(images/subnav_bg.gif) repeat-x;

color: inherit;

}

ul#subnav li {

float: left;

margin: 0;

padding: 9px 0 0 0;

list-style-type: none;

text-transform: uppercase;

}

ul#subnav li a {

text-decoration: none;

padding: 7px 20px 7px 20px;

background: transparent url(images/subnav_sep.gif) no-repeat left;

}

ul#subnav li a:link, ul#subnav li a:visited {

background-color: inherit;

color: #303030;

}

ul#subnav li a:hover, ul#subnav li a:active {

background-color: inherit;

color: #000;

}

ul#subnav li#subnavfirst a:link, ul#subnav li#subnavfirst a:visited {

background: transparent url(images/subnav_icon.gif) no-repeat left;

color: #303030;

}

ul#subnav li#subnavfirst a:hover, ul#subnav li#subnavfirst a:active {

background: transparent url(images/subnav_icon.gif) no-repeat left;

color: #000;

}

div#banner {

margin: 0;

}

width: 850px;
  float: left;
  margin: 0 0 35px 20px;

}

h2 span {

background-color: inherit;

color: #a3c76a;

}

div.featureimg {

padding: 12px 0 0 12px;

width: 206px;

height: 96px;

background: #fff url(images/feature_bg.gif) no-repeat;

color: inherit;

}

ul.featurelist {

margin: 0 0 0 20px;

padding: 0;

}

ul.featurelist li {

margin: 0;

padding: 3px 0 3px 16px;

list-style-type: none;

background: #fff url(images/bullet.gif) left no-repeat;

color: inherit;

}

h2.heading {

font: bold 16px/1.3 "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif;

text-transform: uppercase;

background-color: inherit;

color: #4b4b4b;

margin: 20px 0 0 0;

padding: 0 0 1px 25px;

border-bottom: 1px solid #ddd;

background: #fff left no-repeat;

color: inherit;

clear: both;

}

h3.heading {

margin: 5px 0px 0px 0px;

padding: 5px 0px 5px 5px;

background: #f0f0f0;

}

p {

font-size: 11px;

margin-bottom: 15px;

}

div#foot {

clear: both;

margin: 0;

padding: 0;

width: 800px;

height: 43px;

background-color: #ededed;

color: #4b4b4b;

text-align: center;

}

div#foot p {

padding: 9px 0 0 0;

}

div#foot p a {

text-decoration: none;

}

div#foot p a:link, div#foot p a:visited {

background-color: inherit;

color: #4b4b4b;

}

div#foot p a:hover, div#foot p a:active {

background-color: inherit;

color: #000;

}

.hoverbox

{

cursor: default;

list-style: none;

}

.hoverbox a

{

cursor: default;

}

.hoverbox a .preview

{

display: none;

}

.hoverbox a:hover .preview

{

display: block;

position: absolute;

top: -70px;

left: -45px;

z-index: 1;

}

.hoverbox img

{

background: #fff;

border-color: #aaa #ccc #ddd #bbb;

border-style: solid;

border-width: 0px;

color: inherit;

padding: 5px;

vertical-align: center;

width: 90px;

height: 70px;

}

.hoverbox li

{

background: #eee;

border-color: #ddd #bbb #aaa #ccc;

border-style: solid;

border-width: 0px;

color: inherit;

display: inline;

float: left;

margin: 6px;

padding: 2px;

position: relative;

}

.hoverbox .preview

{

border-color: #000;

width: 200px;

height: 175px;

}

@TazDevilLooneyFeb 14.2011 — #This CSS code will work in IE8 and IE9, however you will need to add additional code to each template wth the sidebars to work with IE7. I was unable to correct IE7 from the css alone.

CSS IE9, IE8 and IE7 Ready.

[CODE] 
 html {
 text-align: center;
 font: 10px/1.3 "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif;
 background-color: #fff;
 color: #4b4b4b;
 }
 body {
 margin: 0 auto;
 padding: 0 auto;
 width: 1200px;
 text-align: left;
 }
 a:link, a:visited {
 background-color: inherit;
 color: #333;
 text-decoration: underline;
 }
 a:hover, a:active {
 background-color: inherit;
 color: #555;
 text-decoration: underline;
 }
 ul#nav {
 margin: 0;
 padding: 0 0 0 6px;
 width: 730px;
 height: 44px;
 background: #000 url(images/nav_bg.gif) repeat-x;
 color: inherit;
 }
 ul#nav li {
 float: left;
 margin: 0;
 padding: 15px 0 0 0;
 list-style-type: none;
 text-transform: uppercase;
 }
 ul#nav li a {
 text-decoration: none;
 padding: 13px 30px 14px 30px;
 }
 ul#nav li a:link, ul#nav li a:visited {
 background-color: inherit;
 color: #fff;
 }
 ul#nav li a:hover, ul#nav li a:active {
 background-color: inherit;
 color: #c9f381;
 }
 ul#subnav {
 margin: 0;
 padding: 0 0 0 30px;
 width: 730px;
 height: 31px;
 background: #000 url(images/subnav_bg.gif) repeat-x;
 color: inherit;
 }
 ul#subnav li {
 float: left;
 margin: 0;
 padding: 9px 0 0 0;
 list-style-type: none;
 text-transform: uppercase;
 }
 ul#subnav li a {
 text-decoration: none;
 padding: 7px 20px 7px 20px;
 background: transparent url(images/subnav_sep.gif) no-repeat left;
 }
 ul#subnav li a:link, ul#subnav li a:visited {
 background-color: inherit;
 color: #303030;
 }
 ul#subnav li a:hover, ul#subnav li a:active {
 background-color: inherit;
 color: #000;
 }
 ul#subnav li#subnavfirst a:link, ul#subnav li#subnavfirst a:visited {
 background: transparent url(images/subnav_icon.gif) no-repeat left;
 color: #303030;
 }
 ul#subnav li#subnavfirst a:hover, ul#subnav li#subnavfirst a:active {
 background: transparent url(images/subnav_icon.gif) no-repeat left;
 color: #000;
 }
 div#banner {
 margin: 0;
 }
 div#colone {
 width: 175px;
 float: left;
 margin: 0 0 0px 50px;
 }
 div#coltwo {
 width: 750px; 
 height: 693px;
 float: left;
 margin: 0px 2px 2px 2px;
 background-image: url(images/bgtab1.jpg); 
 background-repeat: no-repeat;
 padding-top: 20px;
 padding-right: 20px;
 padding-bottom: 13px;
 padding-left: 20px;
 }
 /* ------------------------- Taz Changed Start ---------------------------- */
 div#colthree {
 width: 175px;
 float:right;
 margin-top:-771px;
 *margin-top:-769px;
 margin-right:40px;
 }
 div#water-ie7 {
 margin-top:0px;
 *margin-top:395px;
 }
 div#left-col-ie7 {
 margin-top:0px;
 *margin-top:75px;
 }
 /* ------------------------- Taz Changed End ----------------------------- */
 div#colfour {
 width: 750px;
 height: 41px;
 float: left;
 margin: 0px 2px 2px 2px;
 }
 div#colone h2, div#coltwo h2, div#colthree h2 {
 font: bold 12px/1.3 "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif;
 text-transform: uppercase;
 background-color: inherit;
 color: #4b4b4b;
 margin: 0px 0px 0px 0px;
 padding: 5px 5px 5px 5px;
 }
 h2 span {
 background-color: inherit;
 color: #a3c76a;
 
 }
 div.featureimg {
 padding: 12px 0 0 12px;
 width: 206px;
 height: 96px;
 background: #fff url(images/feature_bg.gif) no-repeat;
 color: inherit;
 }
 ul.featurelist {
 margin: 0 0 0 20px;
 padding: 0;
 }
 ul.featurelist li {
 margin: 0;
 padding: 3px 0 3px 16px;
 list-style-type: none;
 background: #fff url(images/bullet.gif) left no-repeat;
 color: inherit;
 }
 h2.heading {
 font: bold 16px/1.3 "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif;
 text-transform: uppercase;
 background-color: inherit;
 color: #4b4b4b;
 margin: 20px 0 0 0;
 padding: 0 0 25px 25px;
 border-bottom: 1px solid #ddd;
 background: #fff left no-repeat;
 color: inherit;
 clear: both;
 }
 h3.heading {
 margin: 5px 35px 0px -10px;
 padding: 5px 0px 5px 5px;
 background: #f0f0f0;
 }
 h4.heading {
 background-image: url(images/newsbg.jpg); 
 background-repeat: no-repeat;
 padding-top: 5px;
 padding-right: 35px;
 padding-bottom: 13px;
 padding-left: 40px;
 }
 
 p {
 font-size: 11px;
 margin-bottom: 15px;
 margin-right: 35px;
 }
 div#foot {
 clear: both;
 margin: 0;
 padding: 0;
 width: 1200px;
 height: 43px;
 background-color: #ededed;
 color: #4b4b4b;
 text-align: center;
 }
 div#foot p {
 padding: 9px 0 0 0;
 }
 div#foot p a {
 text-decoration: none;
 }
 div#foot p a:link, div#foot p a:visited {
 background-color: inherit;
 color: #4b4b4b;
 }
 div#foot p a:hover, div#foot p a:active {
 background-color: inherit;
 color: #000;
 }
 
 .hoverbox
 {
 cursor: default;
 list-style: none;
 }
 .hoverbox a
 {
 cursor: default;
 }
 .hoverbox a .preview
 {
 display: none;
 }
 .hoverbox a:hover .preview
 {
 display: block;
 position: absolute;
 top: -300px;
 left: -600px;
 z-index: 1;
 }
 .hoverbox img
 {
 background: #fff;
 border-width: 0px;
 color: inherit;
 padding: 0px;
 vertical-align: center;
 width: 171px;
 height: 130px;
 }
 .hoverbox li
 {
 background: #eee;
 border-color: #ddd #bbb #aaa #ccc;
 border-style: solid;
 border-width: 0px;
 color: inherit;
 display: inline;
 float: left;
 margin: 0px;
 padding: 0px;
 position: relative;
 }
 .hoverbox .preview
 {
 border-color: #000;
 width: 500px;
 height: 550px;
 } 

 [/CODE]

For IE7 to display correctly, There are 2 changes to each template with the 2 sidebars.

Look for code

[CODE]<img src="http://www.pisales.co.uk/images/logo_all.jpg" width=171 ALIGN=left /></div>[/CODE]

And replace with

[CODE]<!-- Taz -->
 <div id="left-col-ie7">
 <img src="http://www.pisales.co.uk/images/logo_all.jpg" width=171 ALIGN=left /></div>
 </div>
 <!-- Taz -->[/CODE]

Look for code

[CODE]<a href="4iltd.html#mid"><img src="http://www.pisales.co.uk/images/seg3.jpg" width=171 ALIGN=left BORDER=0 /></a>[/CODE]

And replace with

[CODE]<!-- Taz -->
 <div id="water-ie7">
 <a href="4iltd.html#mid"><img src="http://www.pisales.co.uk/images/seg3.jpg" width=171 ALIGN=left BORDER=0 /></a>
 </div>
 <!-- Taz -->[/CODE]

@JackyDravenauthorFeb 16.2011 — #Thank you again for your help, I have implemented the code as you have suggested, however it still seems to be playng up,

@TazDevilLooneyFeb 16.2011 — #Looks fine here in IE8 and IE7, try CTRL + F5 in your browser

@JackyDravenauthorFeb 16.2011 — #http://www.pisales.co.uk/products.html#target1

is this looking correct on your pc? because on mine it is misaligned, could it possibly be a resolution issue?

@TazDevilLooneyFeb 16.2011 — #Whats your resolution?

@JackyDravenauthorFeb 16.2011 — #1280 x 800

@TazDevilLooneyFeb 16.2011 — #Looks fine in 1280 x 720 and 1280 x 960. I have no option for 1280 x 800 but have gone up and down of the figure. Still no problems i can see. have you got another machine you can use?

[upl-file uuid=d0e6bea0-5800-40cd-8086-dddaa5e4ff0e size=63kB]Untitled.jpg[/upl-file]

@JackyDravenauthorFeb 16.2011 — #Yes i have checked it on 2 different machines, the layout is fix, however the content (the images and titles of each link) is spread across the page,

here is what i see on my screen,

http://www.pisales.co.uk/error.jpg

@KorFeb 16.2011 — #It looks bad in all the browsers except IE7. The resolution doesn't not matter (or should not). Anyway, I see on dual, one 1280x1024, the other 1680x1050

@TazDevilLooneyFeb 16.2011 — #That was the only changes i made to the css.

div#colthree {

width: 175px;

float:right;

margin-top:-771px;

*margin-top:-769px;

margin-right:40px;

}

div#water-ie7 {

margin-top:0px;

*margin-top:395px;

}

div#left-col-ie7 {

margin-top:0px;

*margin-top:75px;

}

[/QUOTE]

I sorry chap you have a bigger problem then i can correct. I would sujest paying someone to sort the hole site out. This is not a little fix.

If you restore your css from before the site will be back to normal.

@JackyDravenauthorFeb 16.2011 — #Thanks for all of your help anyway Taz, I really do appreciate your time and help,

@TazDevilLooneyFeb 16.2011 — #It was looking sooo goood. I was looking at the home page to hard and not taking in to account the rest of the site. Sorry chap. Maybe someone can add something i have missed. Try and hire a coder for the correction.

@KorFeb 16.2011 — #I don't understand how you've made your whole construction so messy. As a schematic layout, your site should have been set on a base like that:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 
 &lt;style type="text/css"&gt;
 *{
 margin:0;
 padding:0;
 }
 .clear{
 clear:both;
 }
 #container{
 width:1200px;
 margin:auto;
 }
 #header{
 width:100&amp;#37;;
 height:100px;
 background:#36F;
 }
 #content{
 width:100%;
 background:#FF9;
 }
 #left, #right{
 width:200px;
 float:left;
 height:600px;
 background:#036;
 }
 #center{
 width:800px;
 float:left;
 }
 #menu{
 width:800px;
 height:50px;
 background:#F90
 }
 #footer{
 width:100%;
 height:100px;
 background:#696;
 }
 &lt;/style&gt;
 &lt;body&gt;
 &lt;div id="container"&gt;
 &lt;div id="header"&gt;header&lt;/div&gt;
 &lt;div id="content"&gt;
 &lt;div id="left"&gt;left&lt;/div&gt;
 &lt;div id="center"&gt;
 &lt;div id="menu"&gt;menu&lt;/div&gt;
 &lt;div id="mainbody"&gt;main body&lt;/div&gt;
 &lt;/div&gt;
 &lt;div id="right"&gt;right&lt;/div&gt;
 &lt;div class="clear"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;div id="footer"&gt;footer&lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@JackyDravenauthorFeb 16.2011 — #As I said a the very beginning of this thread, I am very new to all of this and the messy structure of my site is undoubtedly due to this,

@KorFeb 16.2011 — #Rebuild your structure according to my example. Otherwise you will spend a lot of time trying to botch and repaired a messy code on and on.

Also in #HTML _↴

</tr> in a cell - Browser incompatability.How do I get external text data into a form?help me in web designing

Success!

Help @JackyDraven spread the word by sharing this article on Twitter...

Tweet This

Alignment Issues On Different Computers

23 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Alignment Issues On Different Computers

23 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

23 Comments(s) _↴

Also in #HTML _↴