PDA

View Full Version : Website displays differently on two of the same computers?


sydesign
02-03-2011, 09:30 PM
I recently made a website for a client and the client and his business partner have the same computer, however, the client says that the website i designed for them displays differently on their computers even though they are the same exact computer.

They have 2 dell latitude e6400's that they say it displays differently on.

Also their 20" monitor displays the website larger (disproportionally) than the 15" laptops do.

I assume it is an issue with resolution or browser settings on the computers though I'm not sure...is there anything i can do to make it look better other than redesigning the format of the site and making the containers sized by percentage rather than pixels as it is now?

or does anyone have ideas on what the issues may be?

Thank you very much any help is greatly appreciated.

johnMoss
02-03-2011, 10:27 PM
A likely scenario is somewhere along the way one of them inadvertently increased or decreased their screen magnification. This is accomplished by pressing and holding control (command on Mac) and then pressing either the "+" or "-" key on the above right of the keyboard (to the right of the zero). Call 'em up & determine which one is properly set & then have them make the necessary correction to the respective computer...

Also, what is the site URL? I have a widescreen also...

edbr
02-04-2011, 01:15 AM
also check the screen resolution on both computers

jmichae3
02-04-2011, 04:32 AM
if you are NOT using a fixed-width layout for your pages, then that is why.
I use a liquid layout. this means that for a 15" monitor, it will display the full width of the browser window. if the browser window is maximized, then the window will be full screen width. same with a 20" widescreen monitor (I just switched).

YES a 15" monitor is going to look differently with a liquid layout than a 20" monitor.

use a fixed width of 960px and you won't have this problem. make sure your page is centered.

sydesign
02-04-2011, 08:10 PM
I am already using a fixed width of 950 px

I think what they want is a more liquid layout that adjusts depending on the computer. I just want to make sure its not something else before i have to through again and redesign the site using the liquid layout since the way i made the site doesn't look too nice if you put it in a liquid layout as is.

I will ask and see if maybe they did have different resolutions or if they zoomed in by accident. We'll see.


Thanks a lot for your thoughts!

johnMoss
02-06-2011, 05:25 PM
Sy, be sure & let us know what the solution was; would like to know if it was indeed a technical issue or just a simple setting change...

jmichae3
02-07-2011, 03:25 AM
does it have to do with something like browser type/version?
IE6 is notorious for getting things wrong, so for IE browsers you usually have to put in conditional comments. see

http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx#dlhidden (http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx#dlhidden)

windows XP users who have the default ie6 often don't know how to upgrade to ie7 or ie8.
windows 98/me/2000 users usually have the old crt monitors, and those can have IE 5.5 which is worse as far as standards compliance.
it is possible to upgrade them to ie6 if they are aware of the update.
but that's just IE.

Dw cs5 has Browserlab, which would indicate to you what the page looks like in other browser versions (although not all recent ones).

sydesign
02-07-2011, 05:28 AM
Well i still haven't found a solution...thank you all though!

The clients are using IE 7 & 8 with Windows XP

Here is the code for the site..i dont know if maybe theres something im missing, i don't have much experience with coding so a lot of it i dont exactly understand, maybe i did something wrong.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xxxxxxxxxxx</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #d5d5d5;
background-image: url(images/newback.jpg);
background-repeat: repeat-x;
}
.oneColFixCtrHdr #container {
width: 950px;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-repeat: repeat-x;
background-position: center 20px;
}
.text {
color: #FFF;
background-image: url(images/quantumback.png);
background-repeat: no-repeat;
}
.oneColFixCtrHdr #header {
background-image: url(images/newheader.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 143px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
color: #FFF;
text-transform: none;
font-family: "Times New Roman", Times, serif;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
}
.mainContent {
background-repeat: repeat-x;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 24px;
font-size: 16px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background-repeat: no-repeat;
background-position: center top;
text-align: right;
font-size: 12px;
font-family: MYRIAD, "Myriad Pro";
border-top-width: 1px;
border-top-style: solid;
border-top-color: #600;
}
.tabs {
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
font-family: MYRIAD, "Myriad Pro";
}
header_subtext {
font-size: 14px;
}
.oneColFixCtrHdr #container #header table tr td p {
font-size: 24px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #CCC;
text-decoration: none;
}
a:hover {
color: #999;
text-decoration: none;
}
a:active {
text-decoration: none;
}
.oneColFixCtrHdr #container .mainContent h2 {
color: #611d09;
font-family: Georgia, "Times New Roman", Times, serif;
}
.logoinsert {
text-align: left;
}
.oneColFixCtrHdr #container .mainContent p strong {
color: #611d09;
font-family: Georgia, "Times New Roman", Times, serif;
}
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
}
.footer_links {
text-align: right;
}
.footer_copyright {
text-align: left;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>

<body class="oneColFixCtrHdr" onload="MM_preloadImages('images/SYdesignlogo2.jpg','images/tabs/images/down_01.jpg','images/tabs/images/over_01.jpg','images/tabs/images/down_02.jpg','images/tabs/images/over_02.jpg','images/tabs/images/down_03.jpg','images/tabs/images/over_03.jpg','images/tabs/images/down_04.jpg','images/tabs/images/over_04.jpg','images/tabs/images/down_05.jpg','images/tabs/images/over_05.jpg')">

<div id="container">
<div id="header">
<!-- end #header -->
<label style="display: block;width: 76px; height:107px;float:left;padding: 6px 0px 0px 0px;font-family: Times New Roman, Times, serif;line-height: 1em;font-size: 30px;"><a href="index.html"><img src="images/logo.jpg" width="76" height="107" border="0" /></a>
<br />
</label><label style="display: block;width: 333px;float:left;padding: 40px 50px 5px;font-family: Times New Roman, Times, serif;line-height: 1em;font-size: 30px;"><a href="index.html">xxxxxxxxx</a><br />
</label>
<label style="display: block;width: 240px;float: right;text-align: right;font-family: Times New Roman, Times, serif;padding: 30px 10px 0px 0px;line-height: 1.2em;font-size: 13px;">xxxxxxxxxx<br />
xxxxxxxx<br />
<br />
xxxxxxxxxx<br />
<a href="contact.html">Contact us </a></label>
<label style="display: block; float:left; width: 375px; font-family: Times New Roman, Times, serif; padding: 0px 0px 0px 80px; line-height: 1em; font-size:16px; font-style: italic;">&quot;xxxxxxxxxxxxx;</label>
</div>
<div class="tabs">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','home','images/tabs/images/down_01.jpg',1)" onmouseover="MM_nbGroup('over','home','images/tabs/images/over_01.jpg','images/tabs/images/down_01.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_01.jpg" alt="" name="home" width="190" height="35" border="0" id="home" onload="" /></a></td>
<td><a href="about.html" target="_top" onclick="MM_nbGroup('down','group1','about','images/tabs/images/down_02.jpg',1)" onmouseover="MM_nbGroup('over','about','images/tabs/images/over_02.jpg','images/tabs/images/down_02.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_02.jpg" alt="" name="about" width="190" height="35" border="0" id="about" onload="" /></a></td>
<td><a href="services.html" target="_top" onclick="MM_nbGroup('down','group1','services','images/tabs/images/down_03.jpg',1)" onmouseover="MM_nbGroup('over','services','images/tabs/images/over_03.jpg','images/tabs/images/down_03.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_03.jpg" alt="" name="services" width="190" height="35" border="0" id="services" onload="" /></a></td>
<td><a href="clients.html" target="_top" onclick="MM_nbGroup('down','group1','clients','images/tabs/images/down_04.jpg',1)" onmouseover="MM_nbGroup('over','clients','images/tabs/images/over_04.jpg','images/tabs/images/down_04.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_04.jpg" alt="" name="clients" width="190" height="35" border="0" id="clients" onload="" /></a></td>
<td><a href="contact.html" target="_top" onclick="MM_nbGroup('down','group1','contact','images/tabs/images/down_05.jpg',1)" onmouseover="MM_nbGroup('over','contact','images/tabs/images/over_05.jpg','images/tabs/images/down_05.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_05.jpg" alt="" name="contact" width="190" height="35" border="0" id="contact" onload="" /></a></td>
</tr>
</table>
</div>
<div class="mainContent">
<h2 class="header">Welcome</h2>
<p><span style="float:left;color:#666;font-size:70px;line-height:10px;padding-top:0px; padding-right:30px;font-family: Times, serif, Georgia;"><img src="images/computerstockphoto.png" alt="" name="" width="288" height="193" border="0" /></span>xxxxxxxxxxx</p>
<p>
<label style="display:block;width: 570px;float:left;padding: 0px 9px 10px 0px;font-family: Georgia, Times New Roman, Times, serif; font-size:15px;"><img src="images/time.png" alt="When Time is of the Essence" width="579" height="45" />xxxxxxxxxxxxxxx</label>

<label class="text"label style="display:block;width: 300px; height:200px;float:right;padding: 0px 15px 0px 14px;font-family: Georgia, Times New Roman, Times, serif; font-size:13px; line-height:20px"><br /><br /><br />xxxxxxxxxxx </label>
<p><strong><a href="services.html"><img src="images/services_btn.png" width="325" height="35" border="0" /></font></a></strong></p>
</div>
<div id="footer">
<table width="930" cellspacing="0" cellpadding="0">
<tr>
<td width="403" height="26" class="footer_copyright"><font color="#666666">&copy;2010, All Rights Reserved <span class="footer_links">| </span>xxxxxx</font></td>
<td width="395" class="footer_links"><a href="xxxxxxxxxxx" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logoinsert','','images/SYdesignlogo2.jpg',1)"><img src="images/SYdesignlogo.jpg" alt="SyDesign Graphics" name="logoinsert" width="55" height="15" border="0" id="logoinsert" /></a></td>
</tr>
</table>
</div>
</div>
<!-- end #container --></div>
</body>
</html>

johnMoss
02-07-2011, 05:34 AM
What's the site URL?

sydesign
02-07-2011, 05:43 AM
The post is located at this URL

http://www.coetechnology.com

jmichae3
02-07-2011, 08:53 AM
the font-size:100% looks useless to me. you want to specify an actual size.

that's probably not too much an issue, but I just used browserlab to look at the page in ie6, and the navigation bar is shadowed/broken - you have two images there. so for IE6 (the usualy culprit) you will have to make an adjustment. you don't know for sure, the browser may be in "compatibility mode" (shown by a little icon, don't know what triggers it, but standards-based and non-standards-based code seems to trigger it, so I throw up my hands in disgust).
If you don't have a less-than-1-year-old cs5, browserlab will probably cost money, so beware getting a bill if you click on this and you don't have browserlab or cs live. wonderful service to have - lotsa browsers and browser versions at your fingertips, through the use of a browser, but they are flat captured images. onionskinned if you want.
File, Preview in browser, Adobe Browserlab in CS5.
https://browserlab.adobe.com/en-us/index.html#browsers=WXPIE7000%2CWXPIE6000%2COSXSF5 000%2CWXPFF4000%2CWXPFF3500%2COSXFF3500%2CWXPCH800 0%2CWXPIE9000%2CWXPIE8000;state=use;url=http%3A%2F %2Fwww.coetechnology.com%2F;zoom=100;view=0

you have a bug in the following:
<label class="text"label style="display:block;width: 300px; height:200px;float:right;padding: 0px 15px 0px 14px;font-family: Georgia, Times New Roman, Times, serif; font-size:13px; line-height:20px"><br /><br /><br />xxxxxxxxxxx </label>

the bad syntax (missing space) will probably cause xhtml parsing to choke, and probably incorrectly render your page.

also, labels go with form controls, and if I am not mistaken, should only be within a <form>...</form> element set. the form element has some formatting properties in that it causes a line break and I think has vertical padding like p.
like p, form is 100% wide unless you float it.
instead of label, a proper element to uise might be span, maybe div (div is harder to control and is 100% wide, span is only as wide as what's in it, but there is one feature lacking from span that div has, and I forgot what that was, probably the ability to use onclick properly, I don't know.


also, you might want to do Commands, Apply Source Formatting to your source here, you have 1 too many </div> tags at the end.

the bad syntax (extra </div>) will probably cause xhtml parsing to choke, and probably incorrectly render your page. If the xhtml is not perfect, the page will not render correctly or may give an error at the browser. try installing firebug in firefox to see what those are.

xhtml is not forgiving on syntax. you might want to run your code through the free w3c html validator service. http://validator.w3.org/ it validates html, xhtml, xml, and I think it does css.

dw doesn't validate anything except XML anymore (and that rather poorly, doesn't do dtd's properly).

The Verdana font you chose is not being rendered from my last look at firebug.

sydesign
02-07-2011, 08:02 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>COE Technology, Inc.</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: "Times New Roman", Times, serif;
background-color: #d5d5d5;
background-image: url(images/newback.jpg);
background-repeat: repeat-x;
}
.oneColFixCtrHdr #container {
width: 950px;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: "Times New Roman", Times, serif;
background-repeat: repeat-x;
background-position: center 20px;
}
.text {
background-image: url(images/quantumback.png);
background-repeat: no-repeat;
color: #FFF;
}
.oneColFixCtrHdr #header {
background-image: url(images/newheader.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 143px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
color: #FFF;
text-transform: none;
font-family: "Times New Roman", Times, serif;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
}
.mainContent {
background-repeat: repeat-x;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 24px;
font-size: 16px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background-repeat: no-repeat;
background-position: center top;
text-align: right;
font-size: 12px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #600;
}
.oneColFixCtrHdr #container #header table tr td p {
font-size: 24px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #CCC;
text-decoration: none;
}
a:hover {
color: #999;
text-decoration: none;
}
a:active {
text-decoration: none;
}
.oneColFixCtrHdr #container .mainContent h2 {
color: #611d09;
font-family: Georgia, "Times New Roman", Times, serif;
}
.logoinsert {
text-align: left;
}
.oneColFixCtrHdr #container .mainContent p strong {
color: #611d09;
font-family: "Times New Roman", Times, serif;
}
body,td,th {
font-family: "Times New Roman", Times, serif;
}
.footer_links {
text-align: right;
}
.footer_copyright {
text-align: left;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>

<body class="oneColFixCtrHdr" onload="MM_preloadImages('images/SYdesignlogo2.jpg','images/tabs/images/down_01.jpg','images/tabs/images/over_01.jpg','images/tabs/images/down_02.jpg','images/tabs/images/over_02.jpg','images/tabs/images/down_03.jpg','images/tabs/images/over_03.jpg','images/tabs/images/down_04.jpg','images/tabs/images/over_04.jpg','images/tabs/images/down_05.jpg','images/tabs/images/over_05.jpg')">

<div id="container">
<div id="header">
<form><label style="display: block;width: 76px; height:107px;float:left;padding: 6px 0px 0px 0px;font-family: Times New Roman, Times, serif;line-height: 1em;font-size: 30px;"><a href="index.html"><img src="images/logo.jpg" width="76" height="107" border="0" alt=""/></a>
<br /></label></form>
<label style="display: block;width: 333px;float:left;padding: 40px 50px 5px;font-family: Times New Roman, Times, serif;line-height: 1em;font-size: 30px;"><a href="index.html">COE Technology, Inc.</a><br />
</label>
<label style="display: block;width: 240px;float: right;text-align: right;font-family: Times New Roman, Times, serif;padding: 30px 10px 0px 0px;line-height: 1.2em;font-size: 13px;">8910 5th Avenue, Suite 1A<br />
Brooklyn, NY 11209<br />
<br />
(718) 836-1930<br />
<a href="contact.html">Contact us </a></label>
<label style="display: block; float:left; width: 375px; font-family: Times New Roman, Times, serif; padding: 0px 0px 0px 80px; line-height: 1em; font-size:16px; font-style: italic;">&quot;The Center of Excellence in IT Consulting &amp; Services&quot;</label>
</div>
<div class="tabs">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','home','images/tabs/images/down_01.jpg',1)" onmouseover="MM_nbGroup('over','home','images/tabs/images/over_01.jpg','images/tabs/images/down_01.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_01.jpg" alt="" name="home" width="190" height="35" border="0" id="home"/></a></td>
<td><a href="about.html" target="_top" onclick="MM_nbGroup('down','group1','about','images/tabs/images/down_02.jpg',1)" onmouseover="MM_nbGroup('over','about','images/tabs/images/over_02.jpg','images/tabs/images/down_02.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_02.jpg" alt="" name="about" width="190" height="35" border="0" id="about"/></a></td>
<td><a href="services.html" target="_top" onclick="MM_nbGroup('down','group1','services','images/tabs/images/down_03.jpg',1)" onmouseover="MM_nbGroup('over','services','images/tabs/images/over_03.jpg','images/tabs/images/down_03.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_03.jpg" alt="" name="services" width="190" height="35" border="0" id="services"/></a></td>
<td><a href="clients.html" target="_top" onclick="MM_nbGroup('down','group1','clients','images/tabs/images/down_04.jpg',1)" onmouseover="MM_nbGroup('over','clients','images/tabs/images/over_04.jpg','images/tabs/images/down_04.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_04.jpg" alt="" name="clients" width="190" height="35" border="0" id="clients"/></a></td>
<td><a href="contact.html" target="_top" onclick="MM_nbGroup('down','group1','contact','images/tabs/images/down_05.jpg',1)" onmouseover="MM_nbGroup('over','contact','images/tabs/images/over_05.jpg','images/tabs/images/down_05.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_05.jpg" alt="" name="contact" width="190" height="35" border="0" id="contact"/></a></td>
</tr>
</table>
</div>
<div class="mainContent">
<h2 class="header">Welcome to COE Technology, Inc. </h2>
<p><span style="float:left;color:#666;font-size:70px;line-height:10px;padding-top:0px; padding-right:30px;font-family: Times New Roman, serif, Georgia;"><img src="images/computerstockphoto.png" alt="" width="288" height="193" border="0" /></span>In our rapidly changing information age, there's only one way to stay competitive; by staying ahead of the curve. Smart companies know that their operations, data centers, telecommunications and systems organizations must be equipped to meet the demands of today's business climate, as well as the challenges of tomorrow. That's why many fortune 500 companies have turned to COE Technology for Information Systems consulting. The senior leadership team of COE Technology has over sixty years of combined IT experience. We offer unparalleled technological expertise and a proven track record of success.</p>
<label style="display:block;width: 555px;float:left;padding: 0px 15px 10px 0px;font-family: Georgia, Times New Roman, Times, serif; font-size:15px;"><img src="images/time.png" alt="When Time is of the Essence" width="579" height="45" />In today’s business world, the smooth flow of Information is critical to success. No organization, large or small, can afford the loss of revenue that may result from an interruption in their communications and operations. COE Technology specializes in working in “mission critical environments,” like trading floors and Tier 1 Data Centers, where time, information and technology impact profitability. Time urgent projects are professionally addressed. We’re sensitive to your particular networking, communications and infrastructure needs. With COE Technology, responsiveness <br />
and superior service mean no “down time”, no lost revenue. </label>
<form><label class="text" label style="display:block; width: 300px; height:145px; float:right; padding: 55px 15px 0px 14px; font-family: Georgia, Times New Roman, Times, serif; font-size:13px; line-height:20px">STEP - BY – STEP ANALYSIS, Careful evaluation, understanding the intricacies with an eye on the future. That’s the way we approach every project at COE Technology. You present the challenge and we provide a “quantum solution.” </label></form>
<p><strong><a href="services.html"><img src="images/services_btn.png" width="325" height="35" border="0" alt=""/></a></strong></p>
</div>
<div id="footer">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="468" height="26" class="footer_copyright"><font color="#666666">&copy;2010, All Rights Reserved <span class="footer_links">| </span>COE Technology, Inc.</font></td>
<td width="495" class="footer_links"><a href="http://www.sydesigngraphics.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logoinsert','','images/SYdesignlogo2.jpg',1)"><img src="images/SYdesignlogo.jpg" alt="SyDesign Graphics" name="logoinsert" width="55" height="15" border="0" id="logoinsert" /></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>


jmichae2,

thanks for telling about the browser lab, i dont have dw5 but for now i have a trial of the cs live which will let me use the browser lab.

im not exactly sure what you meant by a couple things you said, since im not too familiar with code and coding terms i suppose.

you have a bug in the following:
<label class="text"label style="display:block;width: 300px; height:200px;float:right;padding: 0px 15px 0px 14px;font-family: Georgia, Times New Roman, Times, serif; font-size:13px; line-height:20px"><br /><br /><br />xxxxxxxxxxx </label>

is the "bug" refering to the xxxxxxx i put in there temporarily? or am i missing spaces?

im also not sure how to implement using labels with form tags like you said.
I updated one of the labels to see if that is what you meant?

Also using the browser lab i saw another issue between IE 7 & IE 8. One of my labels:

<label style="display:block;width: 555px;float:left;padding: 0px 15px 10px 0px;font-family: Georgia, Times New Roman, Times, serif; font-size:15px;"><img src="images/time.png" alt="When Time is of the Essence" width="579" height="45" />In today’s business world, the smooth flow of Information is critical to success. No organization, large or small, can afford the loss of revenue that may result from an interruption in their communications and operations. COE Technology specializes in working in “mission critical environments,” like trading floors and Tier 1 Data Centers, where time, information and technology impact profitability. Time urgent projects are professionally addressed. We’re sensitive to your particular networking, communications and infrastructure needs. With COE Technology, responsiveness <br />
and superior service mean no “down time”, no lost revenue. </label>

when in IE 8 it looks fine but when in IE 7 the first word "it" wraps around the picture going to the right side of the picture and underneath the label on the right side. Its as if when in IE 7 the left side label width stretches and makes room for a word to be added on the top line. (i dont know if im making sense, but thats what it seems like to me).

Any ideas of what maybe causing that?

jmichae3
02-07-2011, 10:58 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>COE Technology, Inc.</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: "Times New Roman", Times, serif;
background-color: #d5d5d5;
background-image: url(images/newback.jpg);
background-repeat: repeat-x;
}
.oneColFixCtrHdr #container {
width: 950px;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: "Times New Roman", Times, serif;
background-repeat: repeat-x;
background-position: center 20px;
}
.text {
background-image: url(images/quantumback.png);
background-repeat: no-repeat;
color: #FFF;
}
.oneColFixCtrHdr #header {
background-image: url(images/newheader.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 143px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
color: #FFF;
text-transform: none;
font-family: "Times New Roman", Times, serif;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
}
.mainContent {
background-repeat: repeat-x;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 24px;
font-size: 16px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background-repeat: no-repeat;
background-position: center top;
text-align: right;
font-size: 12px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #600;
}
.oneColFixCtrHdr #container #header table tr td p {
font-size: 24px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #CCC;
text-decoration: none;
}
a:hover {
color: #999;
text-decoration: none;
}
a:active {
text-decoration: none;
}
.oneColFixCtrHdr #container .mainContent h2 {
color: #611d09;
font-family: Georgia, "Times New Roman", Times, serif;
}
.logoinsert {
text-align: left;
}
.oneColFixCtrHdr #container .mainContent p strong {
color: #611d09;
font-family: "Times New Roman", Times, serif;
}
body,td,th {
font-family: "Times New Roman", Times, serif;
}
.footer_links {
text-align: right;
}
.footer_copyright {
text-align: left;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>

<body class="oneColFixCtrHdr" onload="MM_preloadImages('images/SYdesignlogo2.jpg','images/tabs/images/down_01.jpg','images/tabs/images/over_01.jpg','images/tabs/images/down_02.jpg','images/tabs/images/over_02.jpg','images/tabs/images/down_03.jpg','images/tabs/images/over_03.jpg','images/tabs/images/down_04.jpg','images/tabs/images/over_04.jpg','images/tabs/images/down_05.jpg','images/tabs/images/over_05.jpg')">

<div id="container">
<div id="header">
<form><label style="display: block;width: 76px; height:107px;float:left;padding: 6px 0px 0px 0px;font-family: Times New Roman, Times, serif;line-height: 1em;font-size: 30px;"><a href="index.html"><img src="images/logo.jpg" width="76" height="107" border="0" alt=""/></a>
<br /></label></form>
<label style="display: block;width: 333px;float:left;padding: 40px 50px 5px;font-family: Times New Roman, Times, serif;line-height: 1em;font-size: 30px;"><a href="index.html">COE Technology, Inc.</a><br />
</label>
<label style="display: block;width: 240px;float: right;text-align: right;font-family: Times New Roman, Times, serif;padding: 30px 10px 0px 0px;line-height: 1.2em;font-size: 13px;">8910 5th Avenue, Suite 1A<br />
Brooklyn, NY 11209<br />
<br />
(718) 836-1930<br />
<a href="contact.html">Contact us </a></label>
<label style="display: block; float:left; width: 375px; font-family: Times New Roman, Times, serif; padding: 0px 0px 0px 80px; line-height: 1em; font-size:16px; font-style: italic;">&quot;The Center of Excellence in IT Consulting &amp; Services&quot;</label>
</div>
<div class="tabs">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','home','images/tabs/images/down_01.jpg',1)" onmouseover="MM_nbGroup('over','home','images/tabs/images/over_01.jpg','images/tabs/images/down_01.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_01.jpg" alt="" name="home" width="190" height="35" border="0" id="home"/></a></td>
<td><a href="about.html" target="_top" onclick="MM_nbGroup('down','group1','about','images/tabs/images/down_02.jpg',1)" onmouseover="MM_nbGroup('over','about','images/tabs/images/over_02.jpg','images/tabs/images/down_02.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_02.jpg" alt="" name="about" width="190" height="35" border="0" id="about"/></a></td>
<td><a href="services.html" target="_top" onclick="MM_nbGroup('down','group1','services','images/tabs/images/down_03.jpg',1)" onmouseover="MM_nbGroup('over','services','images/tabs/images/over_03.jpg','images/tabs/images/down_03.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_03.jpg" alt="" name="services" width="190" height="35" border="0" id="services"/></a></td>
<td><a href="clients.html" target="_top" onclick="MM_nbGroup('down','group1','clients','images/tabs/images/down_04.jpg',1)" onmouseover="MM_nbGroup('over','clients','images/tabs/images/over_04.jpg','images/tabs/images/down_04.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_04.jpg" alt="" name="clients" width="190" height="35" border="0" id="clients"/></a></td>
<td><a href="contact.html" target="_top" onclick="MM_nbGroup('down','group1','contact','images/tabs/images/down_05.jpg',1)" onmouseover="MM_nbGroup('over','contact','images/tabs/images/over_05.jpg','images/tabs/images/down_05.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_05.jpg" alt="" name="contact" width="190" height="35" border="0" id="contact"/></a></td>
</tr>
</table>
</div>
<div class="mainContent">
<h2 class="header">Welcome to COE Technology, Inc. </h2>
<p><span style="float:left;color:#666;font-size:70px;line-height:10px;padding-top:0px; padding-right:30px;font-family: Times New Roman, serif, Georgia;"><img src="images/computerstockphoto.png" alt="" width="288" height="193" border="0" /></span>In our rapidly changing information age, there's only one way to stay competitive; by staying ahead of the curve. Smart companies know that their operations, data centers, telecommunications and systems organizations must be equipped to meet the demands of today's business climate, as well as the challenges of tomorrow. That's why many fortune 500 companies have turned to COE Technology for Information Systems consulting. The senior leadership team of COE Technology has over sixty years of combined IT experience. We offer unparalleled technological expertise and a proven track record of success.</p>
<label style="display:block;width: 555px;float:left;padding: 0px 15px 10px 0px;font-family: Georgia, Times New Roman, Times, serif; font-size:15px;"><img src="images/time.png" alt="When Time is of the Essence" width="579" height="45" />In today’s business world, the smooth flow of Information is critical to success. No organization, large or small, can afford the loss of revenue that may result from an interruption in their communications and operations. COE Technology specializes in working in “mission critical environments,” like trading floors and Tier 1 Data Centers, where time, information and technology impact profitability. Time urgent projects are professionally addressed. We’re sensitive to your particular networking, communications and infrastructure needs. With COE Technology, responsiveness <br />
and superior service mean no “down time”, no lost revenue. </label>
<form><label class="text" label style="display:block; width: 300px; height:145px; float:right; padding: 55px 15px 0px 14px; font-family: Georgia, Times New Roman, Times, serif; font-size:13px; line-height:20px">STEP - BY – STEP ANALYSIS, Careful evaluation, understanding the intricacies with an eye on the future. That’s the way we approach every project at COE Technology. You present the challenge and we provide a “quantum solution.” </label></form>
<p><strong><a href="services.html"><img src="images/services_btn.png" width="325" height="35" border="0" alt=""/></a></strong></p>
</div>
<div id="footer">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="468" height="26" class="footer_copyright"><font color="#666666">&copy;2010, All Rights Reserved <span class="footer_links">| </span>COE Technology, Inc.</font></td>
<td width="495" class="footer_links"><a href="http://www.sydesigngraphics.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logoinsert','','images/SYdesignlogo2.jpg',1)"><img src="images/SYdesignlogo.jpg" alt="SyDesign Graphics" name="logoinsert" width="55" height="15" border="0" id="logoinsert" /></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
jmichae2,

thanks for telling about the browser lab, i dont have dw5 but for now i have a trial of the cs live which will let me use the browser lab.

im not exactly sure what you meant by a couple things you said, since im not too familiar with code and coding terms i suppose.



is the "bug" refering to the xxxxxxx i put in there temporarily? or am i missing spaces?

im also not sure how to implement using labels with form tags like you said.
I updated one of the labels to see if that is what you meant?

Also using the browser lab i saw another issue between IE 7 & IE 8. One of my labels:



when in IE 8 it looks fine but when in IE 7 the first word "it" wraps around the picture going to the right side of the picture and underneath the label on the right side. Its as if when in IE 7 the left side label width stretches and makes room for a word to be added on the top line. (i dont know if im making sense, but thats what it seems like to me).

Any ideas of what maybe causing that?

class="text"label= was one of the problems before. syntax means how things like sentences are put together. asentencelikethis is bad syntax and is kind-of-like a run-on sentence - that is the problem you have here, except the words are jammed together. syntax is also spelling, for instance clas="text" would be invalid HTML syntax and in this case would simply be ignored because it is an unknown attribute, whereas elements the browser might choke on. a grammar is the usage of the words.

these terms (parse, syntax, grammar) are used in English class and also in compiler technology class (engineering) for the parsing of HTML documents, etc. how a given browser parses and interprets HTML is really important to the author since this is his platform. parsing converts a syntax and a grammar and an input stream into what you would think of as a DOM. a syntax tree. that's hidden inner stuff of the browser most people don't talk about until a bug comes along, like mozilla's <!-- --> "comment bug" (use spaces to be safe).

The w3c html validator is a syntax checker.
hope this helped.

jmichae3
02-07-2011, 11:04 PM
I will look at it.

jmichae3
02-07-2011, 11:08 PM
exactly what page is this on the site?

sydesign
02-07-2011, 11:20 PM
It is the home page:

www.coetechnology.com/index.html

i updated the label tags to span tags as well (as i believe you advised me to) so here is the updated html for that section (the main content/body are)

<div class="mainContent">
<h2 class="header">Welcome to COE Technology, Inc. </h2>
<p><span style="float:left;color:#666;font-size:70px;line-height:10px;padding-top:0px; padding-right:30px;font-family: Times New Roman, serif, Georgia;"><img src="images/computerstockphoto.png" alt="" width="288" height="193" border="0" /></span>In our rapidly changing information age, there's only one way to stay competitive; by staying ahead of the curve. Smart companies know that their operations, data centers, telecommunications and systems organizations must be equipped to meet the demands of today's business climate, as well as the challenges of tomorrow. That's why many fortune 500 companies have turned to COE Technology for Information Systems consulting. The senior leadership team of COE Technology has over sixty years of combined IT experience. We offer unparalleled technological expertise and a proven track record of success.</p>
<span style="display:block;width: 565px;float:left;padding: 0px 15px 10px 0px;font-family: Georgia, Times New Roman, Times, serif; font-size:15px;"><img src="images/time.png" alt="When Time is of the Essence" width="579" height="45" />In today’s business world, the smooth flow of Information is critical to success. No organization, large or small, can afford the loss of revenue that may result from an interruption in their communications and operations. COE Technology specializes in working in “mission critical environments,” like trading floors and Tier 1 Data Centers, where time, information and technology impact profitability. Time urgent projects are professionally addressed. We’re sensitive to your particular networking, communications and infrastructure needs. With COE Technology, responsiveness and superior service mean no “down time”, no lost revenue. </span>
<span class="text" style="display:block; width: 300px; height:145px; float:right; padding: 55px 15px 0px 14px; font-family: Georgia, Times New Roman, Times, serif; font-size:13px; line-height:20px">STEP - BY – STEP ANALYSIS, Careful evaluation, understanding the intricacies with an eye on the future. That’s the way we approach every project at COE Technology. You present the challenge and we provide a “quantum solution.” </span>
<p><a href="services.html"><img src="images/services_btn.png" width="325" height="35" border="0" alt=""/></a></p>
</div>

jmichae3
02-08-2011, 07:34 AM
I just recently looked at the page and debugged it, but not after I got your message (probably afterwards though, because I see span tags).

you're not entirely coded for older browser "gracefully falling back".
the code you just gave was for a different page than what has the problem.

on the index page:
- class "tabs" is used, but not defined.
- br tag is needed between img tag and the first word "In" (you said "It") otherwise it causes improper flow in IE6 and IE7. the BR tag causes a line break.
- IE conditional comments on the tabs class may or may not help in your situation. after these fixes, page should look fine in all major browsers except IE6. to do this, you will have to remove the comments on your style tag.
- the font tag is deprecated (only used by really old browsers). use style sheets. the css color:#666666; would be a more appropriate replacement. I don't know if <font>'s officially supported in xhtml (because my books are in boxes right now).

I would highly suggest you buy dw cs5 and learn how to use its helpful features through tv.adobe.com (also has plugins and widgets at http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=3&loc=en_us ) or get cs5 web premium, or get really good at coding in HTML and simply use the free notepad++ or some other programmer's editor. note: Amaya is one free editor from the w3c, but I can't remember if it has color syntax highlighting. notepad++ does to some degree (no html5).

if you are on a budget, you can do plenty with a programmer's editor like notepad++. notepad++ can also "open a browser on your page". it has regex search and replace somewhat similar to dreamweaver.

some people use eclipse instead for their web development, but I could never get it to work properly. I don't know what all the hype is about.
if someone ever helps me get that thing installed correctly, I will include it in my office package if the distribution license allows it.

jmichae3
02-08-2011, 07:50 AM
if you need to implement conditional comments to get IE6 working for the many XP users who have not upgraded or 2000 users who can't upgrade to a newer browser and won't upgrade their OS (some businesses refuse to upgrade past 2000),

http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx#dlhidden
IE conditional comments
for example,

<!--[if IE 6]>some IE6 html or css<![endif]-->
<!--[if gte IE 7]>some IE7 or greater html or css<![endif]-->
<!--[if gte IE 7]>some IE7 or greater html or css<![endif]-->
<!--[if !IE]><!-->non-ie html or css<!--<![endif]-->


that last one is not a mistake - something you have to do to get downlevel browsers to work.

jmichae3
02-08-2011, 12:14 PM
ie7 and ie8 are fine, but I can't seem to shake the problem with ie6. the IE box model is broken on some versions. ie6 is likely one of them. I think it has something to do with margins and padding.

sydesign
02-08-2011, 07:33 PM
Thank you for your help! I fixed the class "tabs" and added the br tag on the page which worked with the change b/w IE 7 & 8 thank you.

I plan on getting dw cs5 at some point but ill have to save up for it.

I will see if the client is still having display issues with the site. If they still do, i don't know what else i can do on my side to fix it.

jmichae3
02-09-2011, 07:33 AM
All Rights Reserved is a legal term that does not apply to all copyrights by default. it is something you have to obtain if I remember correctly, you can't just use it.
http://www.copyright.gov/help/faq/faq-register.html#online
http://www.copyright.gov/help/faq/faq-protect.html#website
http://www.copyright.gov/circs/circ1.pdf

...The notice for visually perceptible copies should contain all
the following three elements:
1 The symbol © (the letter C in a circle), or the word
“Copyright,” or the abbreviation “Copr.”; and
2 The year of first publication of the work. In the case of
compilations or derivative works incorporating previously
published material, the year date of first publication of
the compilation or derivative work is sufficient. The year
date may be omitted where a pictorial, graphic, or sculptural
work, with accompanying textual matter, if any, is
reproduced in or on greeting cards, postcards, stationery,
jewelry, dolls, toys, or any useful article; and
3 The name of the owner of copyright in the work, or an
abbreviation by which the name can be recognized, or a
generally known alternative designation of the owner.
Example: © 2008 John Doe
The “C in a circle” notice is used only on “visually perceptible
copies.”...

jmichae3
02-09-2011, 08:18 AM
I thought I reaqd that somewhere about all rights reserved. but I am not really clear about it. I just remembered I knew I couldn't use it myself for my audio cd's that I made. there were some things I couldn't do.
at least you know the format of a copyright statement.

I am still working out the layout bugs of your site. after I am done, you might want to run winmerge on it to see what I've done once I'm finished, IF I figure things out about IE6's box model weirdness (compare new with old , highlight differences). http://winmerge.org/

jmichae3
02-09-2011, 10:21 AM
it was the 6px padding in the header div that was causing a problem with IE6. padding: 6px 0px 0px 0px; the padding appears to be useless. remove it and nothing changes except that in IE6 the navbar starts to work right. spaces between tags in that section also cause a problem, so if you apply source formatting, you will have to remove spaces from between tags in the header area.

the png's transparency problem in IE6 is not something you can get around easily, so I guess you can simply let the users suffer - on most lcd monitors the div box square's color difference barely even shows up when you are looking at the monitor at an angle - I barely noticed it at first. I thought you had set a background color on the divs, but then I noticed it wasn't on the other browsers.

I totally redesigned the footer and made some modifications to some sections of the CSS and did a little shuffling of footer containers. there are now only 2 containers instead of 3. I used width:910px; clear:both; margin-left:20px; and you can use this footer and the footers css and html across all your pages and because of clear:both it will properly clear the previous html tags and surely start a new line.


<div id="footer">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
<td class="footer_copyright">&copy; 2010 COE Technology, Inc., All Rights Reserved</td>
<td class="footer_links"><a href="http://www.sydesigngraphics.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logoinsert','','images/SYdesignlogo2.jpg',1)"><img src="images/SYdesignlogo.jpg" alt="SyDesign Graphics" name="logoinsert" width="55" height="15" border="0" id="logoinsert"/></a></td></tr></table>
</div>


by the way, you can also make a colored line with hr of a specific width/percentage, position, and centered, but it has whitespace and line break which I suppose you could remove using css - I think I successfully floated it right once, but the image was in the middle of the sylogo.

I used position:absolute; and left:510px; to position your sydesign logo, and I changed all your 0's to 0px so that they would register properly. they need a dimension (margin, padding, width, left, top, etc. lotsa css requires dimensions).

I know I get dinged for doing table layout, but for me it's the most effective way to do certain things and I have not found any other way on some items.

you can also do it with


<div id="footer">
<span class="footer_copyright">&copy; 2010 COE Technology, Inc., All Rights Reserved</span>
<span class="footer_links"><a href="http://www.sydesigngraphics.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logoinsert','','images/SYdesignlogo2.jpg',1)"><img src="images/SYdesignlogo.jpg" alt="SyDesign Graphics" name="logoinsert" width="55" height="15" border="0" id="logoinsert"/></a></span>
</div>



if you use float:left; and float:right; on the footer_copyright and footer_links.


the css is


<style type="text/css">
body {
margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0px;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: "Times New Roman", Times, serif;
background-color: #d5d5d5;
background-image: url(images/newback.jpg);
background-repeat: repeat-x;
}
.oneColFixCtrHdr #container {
width: 950px;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: "Times New Roman", Times, serif;
background-repeat: repeat-x;
background-position: center 20px;
}
.text {
background-image: url(images/quantumback.png);
background-repeat: no-repeat;
color: #FFF;
}
.oneColFixCtrHdr #header {
background-image: url(images/newheader.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 143px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 20px;
color: #FFF;
text-transform: none;
font-family: "Times New Roman", Times, serif;
}
.oneColFixCtrHdr #header h1 {
margin: 0px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.mainContent {
background-repeat: repeat-x;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 24px;
font-size: 16px;
}
.oneColFixCtrHdr #footer {
padding: 0px 0px;
background-repeat: no-repeat;
background-position: center top;
text-align: right;
font-size: 12px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #600;
width:910px;
clear:both;
margin-left:20px;
}
.oneColFixCtrHdr #container #header table tr td p {
font-size: 24px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #CCC;
text-decoration: none;
}
a:hover {
color: #999;
text-decoration: none;
}
a:active {
text-decoration: none;
}
.oneColFixCtrHdr #container .mainContent h2 {
color: #611d09;
font-family: Georgia, "Times New Roman", Times, serif;
}
.logoinsert {
text-align: left;
}
.oneColFixCtrHdr #container .mainContent p strong {
color: #611d09;
font-family: "Times New Roman", Times, serif;
}
body, td, th {
font-family: "Times New Roman", Times, serif;
}
.footer_links {
text-align: right;
float:right;
}
.footer_copyright {
text-align:left;
float:left;
height:26px;
color:#666666;
}
<!--[if IE 6]>
.tabs {
text-align:center;
position:absolute;
top:143px;
padding:0px;
margin:0px;
margin-left:20px;
margin-top:0px;
}
<![endif]-->
<!--[if IE 7]>
.tabs {
text-align:center;
position:absolute;
top:143px;
padding:0px;
margin:0px;
margin-left:20px;
}
<![endif]-->
<!--[if IE 8]>
.tabs {
text-align:center;
position:absolute;
top:143px;
padding:0px;
margin:0px;
margin-left:20px;
}
<![endif]-->
<!--[if gte IE 9]>
.tabs {
text-align:center;
position:absolute;
top:143px;
padding:0px;
margin:0px;
margin-left:20px;
}
<![endif]-->
<!--[if !IE]><!-->
.tabs {
text-align:center;
position:absolute;
top:143px;
padding:0px;
margin:0px;
margin-left:20px;
}
<!--<![endif]-->
</style>




the button code has been changed to span elements, and the tabs class has been defined once again, to make absolutely sure that the navbuttons go where they should.


<div class="tabs"> <span class="button"><a
href="index.html" target="_top" onclick="MM_nbGroup('down','group1','home','images/tabs/images/down_01.jpg',1)" onmouseover="MM_nbGroup('over','home','images/tabs/images/over_01.jpg','images/tabs/images/down_01.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_01.jpg" alt="" name="home" width="190" height="35" border="0" id="home" class="button"/></a><a
href="about.html" target="_top" onclick="MM_nbGroup('down','group1','about','images/tabs/images/down_02.jpg',1)" onmouseover="MM_nbGroup('over','about','images/tabs/images/over_02.jpg','images/tabs/images/down_02.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_02.jpg" alt="" name="about" width="190" height="35" border="0" id="about" class="button"/></a><a
href="services.html" target="_top" onclick="MM_nbGroup('down','group1','services','images/tabs/images/down_03.jpg',1)" onmouseover="MM_nbGroup('over','services','images/tabs/images/over_03.jpg','images/tabs/images/down_03.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_03.jpg" alt="" name="services" width="190" height="35" border="0" id="services" class="button"/></a><a
href="clients.html" target="_top" onclick="MM_nbGroup('down','group1','clients','images/tabs/images/down_04.jpg',1)" onmouseover="MM_nbGroup('over','clients','images/tabs/images/over_04.jpg','images/tabs/images/down_04.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_04.jpg" alt="" name="clients" width="190" height="35" border="0" id="clients" class="button"/></a><a
href="contact.html" target="_top" onclick="MM_nbGroup('down','group1','contact','images/tabs/images/down_05.jpg',1)" onmouseover="MM_nbGroup('over','contact','images/tabs/images/over_05.jpg','images/tabs/images/down_05.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/tabs/images/up_05.jpg" alt="" name="contact" width="190" height="35" border="0" id="contact" class="button"/></a></span> </div>


I can't fit the entire page here, but you can find it at http://JesusnJim.com/coetechnology-index.xhtml

Corrosive
02-09-2011, 11:30 AM
I know I get dinged for doing table layout


Ding! :wink: