Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    kink when viewing in IE

    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

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by tizbo1423 View Post
    I built up a website with Dreamweaver using CSS divs for the layout
    divs 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.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    * {
    margin:0;
    padding: 0;
    border: 0;
    outline: none;
    }
    That is a CSS reset, you can see it explained in detail here.

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

    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 -
    Code:
    #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 -
    Code:
    #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.

    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    74
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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>
    Last edited by frankle; 12-21-2009 at 06:35 AM.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Hi frankle,

    Please edit your post and add [CODE][/CODE] tags around your code. Thanks
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •