Topic: Border issues Pages that link to <a href="https://ozoneasylum.com/backlink?for=10760" title="Pages that link to Topic: Border issues" rel="nofollow" >Topic: Border issues\

 
Author Thread
indus2002
Paranoid (IV) Inmate

From: Maine
Insane since: Nov 2001

IP logged posted posted 06-22-2002 05:12 Edit Quote

I have an image that I am using and trying to put a solid border around it and it keeps leaving this space below the image. Here is the image CSS tag:

#image2 {
position:absolute;
top:400px;
left:340px;
border-color:black;
border-width:4px;
border-style:solid;
height:322px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
voice-family: "\"}\"";
voice-family:inherit;
height:320px;
}

Can anyone help me with this simple issue that I cannot figure out.

Peace

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 06-22-2002 07:31 Edit Quote

We may need to see more of your code (primarily, the HTML that displays the image).

But, one flaw that I see here, is you're saying

height:322px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */

But I think the correct calculation for this is 320 + 4+4 = 328, since you have a 4px border and no padding.

indus2002
Paranoid (IV) Inmate

From: Maine
Insane since: Nov 2001

IP logged posted posted 06-22-2002 08:32 Edit Quote

Sorry here is the code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>Untitled</TITLE>

<style type="text/css">

body {
background-color:white;
}

#backdrop {
position:absolute;
top:0px;
left:0px;
z-index:auto;
}

#content {
position:absolute;
margin:90px 0px 0px 90px;
padding:10px;
background-color:white;
line-height:5px;
}

#content2 {
position:absolute;
top:250px;
margin:5px 0px 0px 90px;
padding:10px;
font-size:14px;
font-weight:bold;
background-color:white;
line-height:15px;
}

#image {
position:absolute;
top:550px;
left:105px;
border-color:black;
border-width:4px;
border-style:solid;
height:322px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
voice-family: "\"}\"";
voice-family:inherit;
height:320px;
}

#image2 {
position:absolute;
top:550px;
left:340px;
border-color:black;
border-width:4px;
border-style:solid;
height:322px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
voice-family: "\"}\"";
voice-family:inherit;
height:320px;
}

#image3 {
position:absolute;
top:550px;
left:580px;
border-color:black;
border-width:4px 4px 4px 4px;
border-style:solid;
height:242px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
voice-family: "\"}\"";
voice-family:inherit;
height:240px;
}

h2 {
font-size:18px;
text-transform:capitalize;
letter-spacing:5px;
font-family:"tahoma", serif;
}

p {
font-size:12px;
font-family:"tahoma", serif;
font-weight:bold;
}

</style>

</HEAD>
<BODY>

<div id="backdrop">
<IMG SRC="file://D

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 06-22-2002 09:08 Edit Quote

I was suspicious of that. Don't say

<div id="image">
<IMG SRC="DieselJeanFront.jpg" WIDTH="220" HEIGHT="280" BORDER="0" ALT="DieselJeanFront.jpg (7726 bytes)">
</div>

say

<IMG SRC="DieselJeanFront.jpg" id="image" WIDTH="220" HEIGHT="280" BORDER="0" ALT="DieselJeanFront.jpg (7726 bytes)">

You're applying the border to the DIV, not the image. Removing the white space between the image and div tags might have done it, also, but this is the better way overall.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 06-22-2002 09:10 Edit Quote

Oh, by the way, don't use an ID for this! Use a class! You have three identical style sheets. If for some reason you didn't want to use a class, you should have said

#image, #image2, #image3 {
...
}

instead of having three separate style sheets.

But do this:

.image {
...
}

and then use class="image" instead of id, because you can use the same class for each image - no need to have multiple ids.

indus2002
Paranoid (IV) Inmate

From: Maine
Insane since: Nov 2001

IP logged posted posted 06-22-2002 20:43 Edit Quote

Thanks a lot Slime

It worked great....still learning CSS but I am kind of getting the hang of it.

Peace



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu