...

View Full Version : kink when viewing in IE



tizbo1423
12-20-2009, 03:53 AM
I built up a website with Dreamweaver using CSS divs for the layout and it looks fine in Safari, and ok in Firefox, but in Internet Explorer (tested on a windows pc) the "mainContent" content is consistently outside of the layout and shows up way off to the right of the site. Also, there is a harsh drop shadow on some images, when there is no drop shadow applied, and there is a black stroke around the logo in the header that I'm sure is due to the logo being a link back to the home page (this also happens in Firefox).

Does anyone know how to fix these problems?

the site is: www.chrissybdesign.com/exporttradebrokers

drhowarddrfine
12-20-2009, 04:32 AM
I built up a website with Dreamweaver using CSS divs for the layoutdivs are HTML, not CSS.


Does anyone know how to fix these problems?
Validate your html and css for those lists of errors that need fixing.

Excavator
12-20-2009, 04:34 PM
Good morning tizbo1423,
The logo is not a link right now so I'm not seeing the "black stroke" ... it sounds like either that or the "harsh dropshadow" is a border applied to linked images.
Try adding this to the top of your CSS file -

* {
margin:0;
padding: 0;
border: 0;
outline: none;
}
That is a CSS reset, you can see it explained in detail here (http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/).

=================

I'm also not seeing you #mainContent moving out of it's container. There is no real reason for a margin:auto; or width though so you might try this -

#mainContainer #mainContent {
/*margin: auto;*/
height: 290px;
/*width: 716px;*/
border: thin solid #009900;
position: relative;
}

==================

The reason we float things is to put other things beside them. Your #feature1 is basically a full width div with nothing beside it so I'm not seeing the need to float it. Try it like this instead -

#mainContainer #feature1 {
background-position: center center;
/*clear: right;
float: left;*/
height: 115px;
width: 715px;
/*background-repeat: no-repeat;*/
text-indent: 0px;
text-align: left;
margin: auto;
filter: DropShadow(Color=000000, OffX=5, OffY=5, Positive=5);
padding: 15px 0 0;
}

==================


drdr has already suggested you fix the errors in your code. The validator finds a lot of errors with your js that you will probably not be able to fix. Keep scrolling down though, it finds a lot of errors in your code that you will be able to fix.

See the links about validation in my sig below.

...

frankle
12-21-2009, 05:33 AM
Replace your logo from .png to .gif cause ie6 dont support .png images with transparent background. Try replace your code with the one below.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0049)http://www.chrissybdesign.com/exporttradebrokers/ -->
<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Export Trade Brokers</TITLE>
<META http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<STYLE type=text/css>#mainContainer {
BORDER-RIGHT: #c6e4cd thin solid; BORDER-TOP: #c6e4cd thin solid; MARGIN: auto; BORDER-LEFT: #c6e4cd thin solid; WIDTH: 720px; BORDER-BOTTOM: #c6e4cd thin solid; HEIGHT: 600px; BACKGROUND-COLOR: #ffffff
}
BODY {
BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #dde8db
}
#mainContainer #header {
WIDTH: 300px; HEIGHT: 100px
}
#mainContainer #mainContent {
BORDER-RIGHT: #009900 thin solid; BORDER-TOP: #009900 thin solid; MARGIN: auto; BORDER-LEFT: #009900 thin solid; WIDTH: 716px; BORDER-BOTTOM: #009900 thin solid; POSITION: relative; HEIGHT: 290px
}
#mainContainer #mainContent .imageBox {
CLEAR: right; BORDER-RIGHT: #006600 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11px; FLOAT: left; WIDTH: 110px; COLOR: #333333; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 280px
}
#mainContainer #mainContent .imageLink {
BORDER-TOP-WIDTH: thin; CLEAR: none; BORDER-RIGHT: #00cc99 thin solid; BORDER-LEFT-WIDTH: thin; FLOAT: right; BORDER-BOTTOM-WIDTH: thin; WIDTH: 110px; HEIGHT: 200px
}
#mainContainer #mainContent .busMarketing {
CLEAR: right; BORDER-RIGHT: #006600 1px solid; FLOAT: left; WIDTH: 110px; HEIGHT: 200px
}
#mainContainer #mainContent .exportMarketing {
CLEAR: right; BORDER-RIGHT: #006600 1px solid; FLOAT: left; WIDTH: 110px; HEIGHT: 200px
}
#mainContainer #mainContent .contentRight {
CLEAR: right; PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FLOAT: right; PADDING-BOTTOM: 15px; WIDTH: 230px; PADDING-TOP: 15px; HEIGHT: 120px
}
.style1 {
FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.style2 {
FONT-SIZE: 18px; FONT-STYLE: italic; FONT-FAMILY: georgia
}
#mainContainer #mainContent .questions {
CLEAR: right; FLOAT: right; WIDTH: 265px; HEIGHT: 130px
}
#mainContainer #bottomBar1 {
PADDING-RIGHT: 10px; BACKGROUND-POSITION: center center; PADDING-LEFT: 10px; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(images/bottomBar1.png); PADDING-BOTTOM: 10px; WIDTH: 303px; PADDING-TOP: 10px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 88px
}
#mainContainer #topNav {

}
#mainContainer #feature1 {
CLEAR: right; PADDING-RIGHT: 0px; BACKGROUND-POSITION: center center; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: auto; WIDTH: 715px; TEXT-INDENT: 0px; PADDING-TOP: 15px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 115px; TEXT-ALIGN: left
}
#mainContainer .chrissyBad {
CLEAR: left; FLOAT: right; WIDTH: 120px; HEIGHT: 60px
}
#mainContainer #feature1 #feature1Text {
CLEAR: both; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 5px; MARGIN: auto; WIDTH: 287px; PADDING-TOP: 5px; HEIGHT: 50px
}
.style6 {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 11px; PADDING-BOTTOM: 3px; TEXT-INDENT: 5px; PADDING-TOP: 3px; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
#mainContainer #feature2 {
CLEAR: none; PADDING-RIGHT: 0px; BACKGROUND-POSITION: center center; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; WIDTH: 400px; PADDING-TOP: 0px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 125px
}
#mainContainer .footer {
CLEAR: both; FONT-SIZE: 9px; Z-INDEX: 10; MARGIN: auto auto 0px; WIDTH: 720px; FONT-FAMILY: Arial, Helvetica, sans-serif; POSITION: relative; TEXT-ALIGN: center
}
#mainContainer #spacer {

}
#mainContainer #spacer {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 720px; PADDING-TOP: 0px; HEIGHT: 30px
}
.backShadow {
MARGIN: auto; WIDTH: 750px; HEIGHT: 600px
}
A:link {
COLOR: #333333; TEXT-DECORATION: none
}
A:visited {
TEXT-DECORATION: none
}
A:hover {
COLOR: #006600; TEXT-DECORATION: none
}
A:active {
TEXT-DECORATION: none
}
.style7 {
FONT-SIZE: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.backShadow #mainContainer .feature2 {
CLEAR: right; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 410px; PADDING-TOP: 15px; HEIGHT: 115px
}
.footer {
CLEAR: both; Z-INDEX: 10; MARGIN: auto auto 0px; WIDTH: 720px; BOTTOM: 0px; POSITION: relative
}
</STYLE>

<SCRIPT type=text/JavaScript>
<!--
<!--
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_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_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>

<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY
onload="MM_preloadImages('images/exportBrokerServRO.jpg','images/exportBrokerServRO.png','images/exportManagementRO.png','images/exportConsultingRO.png','images/busMarketingRO.png','images/Feature1RO.png','images/Feature2RO.png','images/topNavRO_01.png','images/topNavRO_02.png','images/topNavRO_03.png','images/topNavRO_04.png')">
<DIV class=mainContainer id=mainContainer>
<DIV id=header><A
href="http://www.chrissybdesign.com/exporttradebrokers/index.html"></A><IMG
height=100 alt="Export Trade Brokers"
src="Export Trade Brokers_files/logoHeader.png" width=261></DIV>
<DIV id=topNav>
<DIV align=right>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD><A
onmouseover="MM_nbGroup('over','HOME','images/topNavRO_01.png','',1)"
onclick="MM_nbGroup('down','group1','HOME','',1)"
onmouseout="MM_nbGroup('out')"
href="http://www.chrissybdesign.com/exporttradebrokers/index.html"
target=_top></A></TD>
<TD><A
onmouseover="MM_nbGroup('over','WhoWeAre','images/topNavRO_02B.png','',1)"
onclick="MM_nbGroup('down','group1','WhoWeAre','',1)"
onmouseout="MM_nbGroup('out')"
href="http://www.chrissybdesign.com/exporttradebrokers/whoweare.html"
target=_top><IMG id=WhoWeAre height=21 alt="Who We Are"
src="Export Trade Brokers_files/topNav_02B.png" width=91 onload=""
border=0 name=WhoWeAre></A></TD>
<TD><A
onmouseover="MM_nbGroup('over','WhyExport','images/topNavRO_03.png','',1)"
onclick="MM_nbGroup('down','group1','WhyExport','',1)"
onmouseout="MM_nbGroup('out')"
href="http://www.chrissybdesign.com/exporttradebrokers/whyexport.html"
target=_top><IMG id=WhyExport height=21 alt="Why Export"
src="Export Trade Brokers_files/topNav_03.png" width=91 onload="" border=0
name=WhyExport></A></TD>
<TD><A
onmouseover="MM_nbGroup('over','Contact','images/topNavRO_04.png','',1)"
onclick="MM_nbGroup('down','group1','Contact','',1)"
onmouseout="MM_nbGroup('out')"
href="http://www.chrissybdesign.com/exporttradebrokers/contact.html"
target=_top><IMG id=Contact height=21 alt=Contact
src="Export Trade Brokers_files/topNav_04.png" width=69 onload="" border=0
name=Contact></A></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=mainContent>
<DIV class=imageBox>
<DIV align=center><A
onmouseover="MM_swapImage('Export Trade Services','','images/exportBrokerServRO.png',1)"
onmouseout=MM_swapImgRestore()
href="http://www.chrissybdesign.com/exporttradebrokers/exportbrokerservices.html"><IMG
id="Export Trade Services" height=191 alt="Export Trade Services"
src="Export Trade Brokers_files/exportBrokerServ.jpg" width=104 border=0
name="Export Trade Services"></A> </DIV>
<DIV align=center><A
onmouseover="MM_swapImage('Export Trade Services','','images/exportBrokerServRO.jpg',1)"
onmouseout=MM_swapImgRestore()
href="http://www.chrissybdesign.com/exporttradebrokers/exporttrade.html"></A><BR><A
href="http://www.chrissybdesign.com/exporttradebrokers/exportbrokerservices.html">Export
Broker Services</A></DIV></DIV>
<DIV class=imageBox>
<DIV align=center><A
onmouseover="MM_swapImage('Export Management Services','','images/exportManagementRO.png',1)"
onmouseout=MM_swapImgRestore()
href="http://www.chrissybdesign.com/exporttradebrokers/exportmanagement.html"><IMG
id="Export Management Services" height=191 alt="Export Management Services"
src="Export Trade Brokers_files/exportManagement.jpg" width=104 border=0
name="Export Management Services"></A><BR><BR>Export Management Services
</DIV></DIV>
<DIV class=imageBox>
<DIV align=center><A
onmouseover="MM_swapImage('Export Consulting Services','','images/exportConsultingRO.png',1)"
onmouseout=MM_swapImgRestore()
href="http://www.chrissybdesign.com/exporttradebrokers/exportconsulting.html"><IMG
id="Export Consulting Services" height=191 alt="Export Consulting Services"
src="Export Trade Brokers_files/exportConsulting.png" width=104 border=0
name="Export Consulting Services"></A><BR><BR>Export Consulting Services
</DIV></DIV>
<DIV class=imageBox>
<DIV align=center><A
onmouseover="MM_swapImage('Business Marketing Services','','images/busMarketingRO.png',1)"
onmouseout=MM_swapImgRestore()
href="http://www.chrissybdesign.com/exporttradebrokers/businessmarketing.html"><IMG
id="Business Marketing Services" height=191 alt="Business Marketing Services"
src="Export Trade Brokers_files/busMarketing.png" width=104 border=0
name="Business Marketing Services"></A><BR><BR>Business Marketing Services
</DIV></DIV>
<DIV class="contentRight style1">
<P><SPAN class=style2><BR>We're Here To Assist<BR></SPAN>An international trade
specialist works with you on a confidential, one on one basis to help you plan
and implement your import export strategies.</P></DIV>
<DIV class=questions>
<DIV align=center>
<P><BR><IMG height=80 alt="Export Trade Brokers Customer Service"
src="Export Trade Brokers_files/questions.png" width=206></P></DIV></DIV>
<P>&nbsp;</P>
<P>&nbsp;</P></DIV>
<DIV class="style6" id="feature1">
<P align=center><a
onMouseOver="MM_swapImage('Feature1','','images/Feature1RO.png',1)"
onMouseOut=MM_swapImgRestore()
href="http://www.chrissybdesign.com/exporttradebrokers/getStarted.html"><img
id=Feature1 height=107 alt="Get Started"
src="Export Trade Brokers_files/Feature1.png" width=303 border=0
name=Feature1></a><A
onmouseover="MM_swapImage('Feature 1','','images/Feature1RO.png',1)"
onmouseout=MM_swapImgRestore()
href="http://www.chrissybdesign.com/exporttradebrokers/getStarted.html"></A><A
onmouseover="MM_swapImage('Get Started','','images/Feature1RO.png',1)"
onmouseout=MM_swapImgRestore()
href="http://www.chrissybdesign.com/exporttradebrokers/getStarted.html"></A><A
onmouseover="MM_swapImage('Get Started','','images/Feature1RO.png',1)"
onmouseout=MM_swapImgRestore()
href="http://www.chrissybdesign.com/exporttradebrokers/contact.html"></A> <A
onmouseover="MM_swapImage('Feature 2','','images/Feature2RO.png',1)"
onmouseout=MM_swapImgRestore()
href="http://www.chrissybdesign.com/exporttradebrokers/whatexport.html"><IMG
id="Feature 2" height=107 alt="What We Export"
src="Export Trade Brokers_files/Feature2.png" width=402 border=0
name="Feature 2"></A></P>
</DIV></DIV>
<DIV class=footer>
<P align=center><SPAN class=style7><STRONG>Export Trade Brokers, LLC</STRONG> |
P.O. Box 1034, Columbia, MD 21044, United States<BR>p: 240-401-4815 | f:
410-465-5583 | alt: 410-461-0097 | <A
href="mailto:staff@exporttradebrokers.com">staff@exporttradebrokers.com</A></SPAN></P></DIV></BODY></HTML>

abduraooft
12-21-2009, 08:22 AM
Hi frankle,

Please edit your post and add
][/COLOR] tags around your code. Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum