How to do image top and on the left? [Archive]

Click to See Complete Forum and Search --> : How to do image top and on the left?

toplisek

03-30-2007, 08:05 AM

I have code for web site but can not achieve that image will be top at the divider and on the left.
Now is 1 px difference between yellow divider and image and image is also not completely on the left (1 px is white space).
Need help:)

<!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 {
margin-top: 0px;
margin-bottom: 0px;
}

.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;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
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: #AA3150;
}

-->
</style>

</head>

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

<div id="wrapper">

<div id="navbar">

</div>

<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">

<div>

</div>

</div>


<div id="rightcoldiv">
<div class="coldiv2">
<table width="565" height="39">
<tr>
<td width="355"><img src="index_files/homepage_mainimage2.gif" width="366" height="303" vspace="0" align="left"></td>
<td width="198"><table width="195" height="300">
<tr>
<td width="10" height="261"> </td>
<td width="160" valign="top"><p class="style1"> </p>
<p></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td width="9"> </td>
</tr>
</table></td>
</tr>
</table>
</div>

</div>



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

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

</div>

</body>
</html>

gil davis

03-30-2007, 08:11 AM

Specify "border=0" on the image.

KDLA

03-30-2007, 08:19 AM

You might try, also:

img {display: block; margin: 0; padding: 0;}

toplisek

03-30-2007, 08:27 AM

I have tried with css:
.img {display: block; margin: 0; padding: 0;}
and code for image
<td width="355" class="img"><img src="index_files/homepage_mainimage2.gif" border="0" width="366" height="303" vspace="0" align="left"></td>

but it does not show completely on the left and under divider at the top.

KDLA

03-30-2007, 08:39 AM

Also add, in your table coding:
style="border-collapse: collapse;"

KDLA

toplisek

03-30-2007, 08:42 AM

It works great on the top and bottom.
But problem is that on the left is still not completely on the left.

KDLA

03-30-2007, 08:45 AM

Did you notice that your image size is larger than the cell's containing it?
<td width="355"><img src="index_files/homepage_mainimage2.gif" width="366" height="303" vspace="0" align="left"></td>

KDLA

toplisek

03-30-2007, 08:50 AM

I have changed. Problem is that in Mozilla still does not work at the bottom and in IE it does not work the same at the bottom and on the left.

toplisek

03-30-2007, 08:52 AM

Oh, my mistake also height="303" had to be changed. Sorry. Thank you for your idea.

toplisek

04-02-2007, 03:28 AM

Strange,
need help. There is still 1 px in IE on the left. Do you have idea what to change?
In Mozilla it works.

WebJoel

04-02-2007, 07:36 AM

Do you have the site online? I'd like to see this with images. I cannot see just 'just the code' what the problem is..

toplisek

04-02-2007, 07:40 AM

It's on testing server local, not public.

renuka

04-02-2007, 07:43 AM

Hi,
The problem is not with the CSS, it is with the table u have taken. U didn't mention cellspacing and cellpadding for the table u have taken. If u didn't mention them, it'll take cellsapacing and cellpadding as 1px. That is ur problem.
Change ur code like this:

<table width="565" height="39" cellpadding="0" cellspacing="0">
<tr>
<td width="355"><img src="index_files/homepage_mainimage2.gif" width="366" height="303" vspace="0" align="left"></td>
<td width="198"><table width="195" height="300">
<tr>
<td width="10" height="261"> </td>
<td width="160" valign="top"><p class="style1"> </p>
<p></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td width="9"> </td>
</tr>
</table></td>
</tr>
</table>

toplisek

04-02-2007, 08:26 AM

I have found problem but do not know solution. If I remove left navigation, it will be ok in IE and Mozilla. It is problem with small white space on the left of image if I put code for left navigation. Please see:

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

<div>





<div class="imrcmain1 imgl" style="width:181px;z-index:999998;position:relative;"><div class="imcm imde" id="imouter1"><ul id="imenus1">
<li class="imatm" style="width:100%;"><a class="" href="#" style="text-align:center;"><span class="imea imeam"><span></span></span>Our products</a>

<li class="imatm" style="width:100%;"><a href="#" style="text-align:center;"><span class="imea imeam"><span></span></span>Services</a>

<li class="imatm" style="width:100%;"><a href="#" style="text-align:center;">Inquiry</a></li>
</ul><div class="imclear"> </div></div></div>



</div>

</div>