Problems Aligning Elements

[lilOlMe]

I'm designing a sort of error message screen.
Well it's not a screen...its just a <div> that displays the error messages and allows the user to close it (or drag it around etc.)

The title essential has two components:
- a link that contains a small image followed by the text "Error"
- a button that "closes" the screen

My problem is that when I changed the button into a button (as apposed to the link that I had it before) the text "Error" is squished over next to the image.

When the close button was simply a link it displayed properly:
the image was on the right (floated there), the close link on the left (floated there), and the "Error" text was displayed in the middle.

Is there anything I'm doing wrong?

<div id="PNL_ErrorMessages" style="position:absolute;top:20;left:20;width:350px;height:auto;padding:5px 5px 5px 5px;visibility:visible;">
 
    <div style="background-color:#C00000; color:White; width:100%;  border:solid 2px black; border-bottom:none; text-align:center; padding: 3px 0px 3px 0px;"> 
        <input name="BTN_CloseError" type="button" id="BTN_CloseError" style="float:right; padding-right:3px;" value="x" OnClick="javascript:CloseErrorWindow('PNL_ErrorMessages');" />
        <a onclick="return false;" id="LBTN_Error" href="javascript:__doPostBack('LBTN_Error','')" style="color:White;;">
           <img id="img_colapseError" src="../images/collapse.jpg" style="border-width:0px;float:left; padding-left:3px;" />
           Error</a>
    </div>
    <div id="PNL_ErrorMessageContent" style="background-color:White; border:solid 2px black; width:100%; color:#C00000;">
 
        <span id="LBL_Error">Error Message:<br />My error Messages</span>
 
    </div>   
 
</div>
 
 

Thanks!

-LilOlMe

[drhowarddrfine]

Isn't this what you meant?

[lilOlMe]

Isn't this what you meant?

Yeah that's what I want it to look like.
<edit>errr...you're missing an image....</edit>
But the "Error" in the title bar is squished over with the collapsing image on the left.

<edit>The image on the left indicates if the div is "collapsed" or "expanded"</edit>

-LilOlMe

[drhowarddrfine]

That's what I had in IE6 but I don't have the image.

[lilOlMe]

That's what I had in IE6 but I don't have the image.

Aye,

When I take the image out its fine.
When I take the button out its fine.
But with the two of them the "Error" gets squished over.

The image is tiny ...how do I post it for you like you posted that one?

-LilOlMe

[drhowarddrfine]

You have to use a service like imageshack.com and link to it.

[lilOlMe]

You have to use a service like imageshack.com and link to it.

What?
Its simply an <img> tag that is set by an Ajax function depending on whether or not the window is "rolled up/ collapsed" or "expanded"

Showing the image isn't the problem.

The problem is that the text "Error" isn't aligned in the middle of the title bar. It is squished over next to the <img> (floated on the left) when the close button (floated on the right) is added to the title bar.

I used to have the close button represented by a <a href>X</a> and everything looked fine....but when I changed it into a button (appropriately) it moves the text: "Error" over next to the <img> tag.

I just can't seem to figure out how to make it work properly....seems like it should be simple...my CSS is just not cooperating.

-LilOlMe

[lilOlMe]

You have to use a service like imageshack.com and link to it.

OHHHH I see what you're saying.

Yeah, I'm not going to be able to upload anything.

-LilOlMe