Topic: Border issues (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10760" title="Pages that link to Topic: Border issues (Page 1 of 1)" rel="nofollow" >Topic: Border issues <span class="small">(Page 1 of 1)</span>\$

indus2002 Paranoid (IV) Inmate From: Maine Insane since: Nov 2001	posted 06-22-2002 05:12 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	posted 06-22-2002 07:31 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	posted 06-22-2002 08:32 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	posted 06-22-2002 09:08 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	posted 06-22-2002 09:10 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	posted 06-22-2002 20:43 Thanks a lot Slime It worked great....still learning CSS but I am kind of getting the hang of it. Peace

Topic: Border issues (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10760" title="Pages that link to Topic: Border issues (Page 1 of 1)" rel="nofollow" >Topic: Border issues <span class="small">(Page 1 of 1)</span>\$

indus2002
Paranoid (IV) Inmate

From: Maine
Insane since: Nov 2001

posted 06-22-2002 05:12

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

posted 06-22-2002 07:31

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

posted 06-22-2002 08:32

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

posted 06-22-2002 09:08

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

posted 06-22-2002 09:10

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

posted 06-22-2002 20:43

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:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Border issues (Page 1 of 1)

Insert Slimies »

Insert UBB Code »

Topic: Border issues (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10760" title="Pages that link to Topic: Border issues (Page 1 of 1)" rel="nofollow" >Topic: Border issues <span class="small">(Page 1 of 1)</span>\$