CSS Codes
CSS Layouts
Results 1 to 5 of 5

Thread: Why is image not completely on the left?

  1. 04-05-2007, 09:34 AM #1
    toplisek
    toplisek is offline Regular Coders
    Join Date
    Jan 2006
    Posts
    126
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Why is image not completely on the left?

    Hello,
    I have tried many times but do not understand why Image can not be completely on the left.

    there is line 329 in enclosed file:
    PHP Code:
    <td width="366"><img src="index_files/homepage_mainimage2.gif" width="366" height="303"></td> 
    Need this image completely on the left without small space as you can se if you open in IE. Strange that in Mozilla it works without problem.

    If I add sample text xyyxy in line 311 it will have white space between left menu (text xyyxy) and image homepage_mainimage2.gif

    I kindly aks you to send me what I have to change that it will work.
    Enclosed is complete file.
    Regards


    PHP Code:

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd"    >
    <    html>
    <    head>
    <    title>Testing page</title>
    <    meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <    style type="text/css">

       * {
            margin:0;
            padding: 0;
    }


            #wrapper {
            width: 771px;
            margin: 0 auto;
            font-size: 80%;
            color: #54628a;
            line-height: 1.5em;
            text-align: left;
    }

            #header {
            border-bottom-width: 3px;
            border-bottom-style: solid;
            border-bottom-color: #FF9300;
            top: 36px;
        }


            #logo {
            background-repeat: no-repeat;
            height: 56px;
            top: 0px;
            right: 0px;
            width: 120px;
    }

            #navbar {
            background-image: url(index_files/index_bar.gif);
            background-repeat: repeat-x;
            height: 20px;
            width: 771px;
    }
            #midbar {
            width: 771px;
            top: 50px;
            background-repeat: repeat-x;
            background-image: url(index_files/index_bar.gif);
            height: 17px;
    }

    #holderdiv {
            padding-right: 10px;
            padding-left: 10px;
            margin-right: 0px;
            width: 180px;
            background-color: #FEEAB7;
    }

    .    leftcoldiv {
            margin: 10px 0px;
            border: 1px solid #323c5a;
            background-color: #FFFFFF;
            width: 100%;
    }

    .    leftcoldivlight {
            margin: 10px 0px;
            border: 1px solid #323c5a;
            background-color: #f5f7ff;
            width: 100%;
    }

         body {
            font-family: Arial, Helvetica, sans-serif;
            text-align: left;
            font-size: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
            background-image: url(index_files/fondo2.GIF);
            background-position: left;
        }

    p {
    }


    .    leftcoldiv p {
            margin: 5px 0;
            padding: 5;
            color: #323c5a;
            font-size: 90%;
            line-height: 1.3em;
    }

    .    leftcoldivlight p {
            margin: 5px 0;
            padding: 5;
            color: #323c5a;
            font-size: 90%;
            line-height: 1.3em;
    }

    .    leftcoldiv h2 {
            margin: 0;
            background-color: #98a5cb;
            color: #000000;
            font-size: 120%;
            padding: 1px 5px;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #323c5a;
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: #bec6df;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
    }

    .    leftcoldiv h3 {
            margin: 0;
            background-color: #ff9300;
            color: #000000;
            font-size: 120%;
            padding: 1px 5px;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #323c5a;
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: #fec16f;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
    }
    .    leftcoldivlight h4 {
            margin: 0;
            color: #000000;
            font-size: 120%;
            padding: 1px 5px;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #323c5a;
            background-image: url(index_files/index_h4bg.gif);
            background-repeat: repeat-x;
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: #f5f7ff;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
    }


    h1 {
            font-size: 130%;
            margin: 0px;
            color: #000000;
            padding-top: 6px;
            padding-left: 10px;
            font-family: Arial, Helvetica, sans-serif;
    }
    h2 {
            font-size: 120%;
            color: #000000;
            margin-top: 4px;
            margin-bottom: 2px;
    }

    ol {
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 25px;
            color: #54628a;
    }

         ul {
            margin-top: 0px;
            margin-bottom: 0px;
            color: #54628a;
            font-size: 80%;
            font-weight: normal;
        list-    style-type: disc;
        list-    style-image: url(index_files/index_bullet.gif);
    }

    a:link {
            color: #ff9300;
    }
         a:visited {
            color: #ff9300;
    }
         a:link:hover {
            color: #ffffff;
    }

    .    divider {
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: #54628a;
    }

        .    left {
            float: left;
    }

       .    right {
            float: right;
    }

    .    footer {
            font-size: 75%;
            border-top-width: 2px;
            border-top-style: solid;
            border-top-color: #ff9300;
            background-image: url(index_files/index_bar.gif);
            background-repeat: repeat-x;
            width: 771px;
            text-align: center;
            padding-top: 4px;
            padding-bottom: 8px;
            color: #FEEAB7;
            border-right-width: 1px;
            border-left-width: 1px;
            border-right-style: solid;
            border-left-style: solid;
            border-right-color: #98a5cb;
            border-left-color: #98a5cb;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #54628a;
    }


    #rightcoldiv {
            background-color: #FFFFFF;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 200px;
            padding-bottom: 10px;
            padding-top: 10px;
    }


    .    coldiv2
    {  
            background-color:#FFFFFF;
            border-top: 1px solid #E6D3A8;
            color: #000000;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #E6D3A8;
            background-position: top;
    }

    }

    .    coldiv h1{
            margin: 8px 0 10px;
            background-color: #faf9f5;/*themecolour3;*/
            border-top: 1px solid #E6D3A8;
            border-bottom: 1px solid #E6D3A8;
            padding: 1px 0px 3px 0px;
            color: #000000;
    }

    .    style1 {
            vertical-align:top;
            font-size: 14px;
            font-weight: bold;
            color: #D26200;
    }




    -->
    </    style>


    </    head>

    <    body leftmargin="0" topmargin="0" border=1>

    <    div id="wrapper">





      <    div id="header"><table width="770" border="0" cellpadding="0" cellspacing="0">
      <    tr>
        <    td valign="top"><div align="right"><img src="index_files/Banner_772_px.jpg" /></td>
        <    td valign="top"><div align="left"><img src="index_files/Banner772_pxlogo.jpg"  width="297" height="113"/></td>
      </    tr>
    </    table>
    </    div>



      <    div id="midbar">
        <    div align="center" >
        </    div>
      </    div>

      <    div class="left" id="holderdiv">


          xyyxy


          <div>





        </    div>

      </    div>
      <!--    start of right-hand column content-->

     <    div id="rightcoldiv">
     <    div class="coldiv2">  
     <    table width="566" height="39" cellpadding="5" cellspacing="0">
         <    tr>
           <    td width="366"><img src="index_files/homepage_mainimage2.gif" width="366" height="303"></td>
           <    td width="198"><table width="195" height="298">
             <    tr>
               <    td width="10" height="298">&nbsp;</td>
               <    td width="160" valign="top"><p class="style1">Welcome</p>
                 <    p></p>

                 <    p>&nbsp;</p>
                 <    p>&nbsp;</p>
                 <    p>&nbsp;</p>
                 <    p>&nbsp;</p>
            </    td>
               <    td width="9">&nbsp;</td>
             </    tr>
           </    table></td>
         </    tr>

       </    table>
       </    div>

       
     </    div>

     <!--        -->




      <    div style="clear: both;"></div>

     <    div class="footer">
     <    span></span>
     </    div>

    </    div>





    </    body>
    </    html> 
    Reply With Quote Reply With Quote
  2. 04-05-2007, 10:13 AM #2
    mburt's Avatar
    mburt
    mburt is offline Elite Coders
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    It's definitely an IE rendering flaw... I can't see what's wrong, but I wouldn't recommend tables for your layout. Use float:left; and corresponding widths for divs to create columns.
    Example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>3 column layout</title>
<style type="text/css">
.left {
height:400px;
border:1px solid black;
float:left;
width:25&#37;;
}
.middle {
height:400px;
border:1px solid black;
float:left;
width:50%;
}
.right {
height:400px;
border:1px solid black;
float:left;
width:25%;
}
</style>
</head>
<body>
<div class="left">
	test 123
</div>

<div class="middle">
	test 123
</div>

<div class="right">
	test 123
</div>
</body>
</html>
    - Mike
    Reply With Quote Reply With Quote
  3. 04-05-2007, 02:44 PM #3
    toplisek
    toplisek is offline Regular Coders
    Join Date
    Jan 2006
    Posts
    126
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    thank you for suggestion. it works now. Just have small question:
    If tehre is
    .middle {
    margin-top: 10px;
    width:571px;
    float:left;
    background-color: #FFFFFF;

    }
    How can I do background in area where is margin-top: 10px; like background-color: #FFFFFF;
    Last edited by toplisek; 04-05-2007 at 02:52 PM.
    Reply With Quote Reply With Quote
  4. 04-06-2007, 12:17 PM #4
    boogyman
    boogyman is offline Elite Coders
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    if you are talking about having some whitespace above your content, then you do not use margin, you should use

    Code:
    padding-top: 10px;
    Reply With Quote Reply With Quote
  5. 04-06-2007, 01:43 PM #5
    toplisek
    toplisek is offline Regular Coders
    Join Date
    Jan 2006
    Posts
    126
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello,
    thank you very much.I have found this (your) solution after 10 minutes.
    Regards
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

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

Forum Rules