[RESOLVED] Image and border

[RobDog888]

I have this half circle image that is not displaying correctly. It is contained in a cell and the cells bgcolor is set to light grey. Why doesnt the image align all the way to the right so it can cover part of the bgcolor? Its leaving a grey vert. line on the right side. The table padding is set to 0px.

Thanks

<TD style="FONT-SIZE: 8pt; HEIGHT: 12px" vAlign="top" align="right" bgColor="#e8e8e8"><img src="images\circle-half-right.gif" align="right" border="0"></TD>

[mendhak]

Which part of it is the image in question? Show us that.

Show us more of the html, including the code for the table. If it's a lot of code, highlight the relevant part. Have you set the table's cellspacing too?

[RobDog888]

Its the right side of the image. The grey vertical line is the bgcolor and should be covered by the image. I did set the cellspacing to 0 also. I'll post more code and the actual image in a sec. Hold on ...

[mendhak]

*1 second later*

[RobDog888]

<TABLE id="MainTable" height="100%" cellSpacing="0" cellPadding="0" width="770" align="left" border="0">
    <TR>
        <TD style="BORDER-RIGHT: #e8e8e8 1px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 8pt; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 160px; PADDING-TOP: 0px; HEIGHT: 12px"
        vAlign="top" align="left"><IMG height="12" src="images\corner-topleft-grey.gif" width="160" align="left" border="0"
        style="BACKGROUND-COLOR: #e8e8e8"></TD>
        [hl=yellow]<TD style="FONT-SIZE: 8pt; HEIGHT: 12px" vAlign="top" align="right" bgColor="#e8e8e8"><img src="images\circle-half-right.gif" align="right" border="0"></TD>[/hl]
    </TR>
'...

I'm in a different time zone!

[mendhak]

Ah yes, welcome to one of the bugs prevalent in your favorite browser.

Use this in the img tag:

style="vertical-align:bottom;"

[mendhak]

Oh by the way, specify your font size in PX not PT.

[RobDog888]

Freaking @#$%! Would you mind explaining this "bug" to me as I have wasted too much time on this stupid part alread.

I have the TD vAligned to the top and now the IMG tag aligned to the bottom. Other the a couple of issue I now can see I should be on my way to the next part.

But THANK YOU for the help so far

[RobDog888]

I'm making a page like this site - http://www.jcxsoftware.com/vs.php?info

Btw, it looks like a good addin.
Compliments of Gigemboy

[mendhak]

Different browsers have different rendering modes. In IE, the rendering mode is such that when an image is placed inside an element, and since images are by default inline content, IE is now wrapping around the entire area where the image is sitting. This causes a gap to show up top/right/left/bottom because all inline content has a baseline which you simply cannot avoid.

By baseline I mean the space just below the general line of text, because some letters such as y and j and g go below the general line.

Firefox is SMART enough to know that the image needs to be wrapped up.

[mendhak]

I'm making a page like this site - http://www.jcxsoftware.com/vs.php?info

Btw, it looks like a good addin.
Compliments of Gigemboy

Where does your image come into all this though?

All the corners in that image seem to be of the type topleft, topright, bottomleft, bottomright.

BTW, that is one amazing add-in, I had no idea one existed. VisualAd will be thrilled to hear this.

[RobDog888]

I thought that was taken care of by the cellpadding or cellspacing, but I guess not.

Thanks

[RobDog888]

Yes, I DL'd already but need to get this page finished asap.

I am making a variation of it with a top and left menu "area" that have that trendy rounded look.

See this thread here for the PHP Add-In.
http://www.vbforums.com/showthread.php?t=391008