HTML - Create A Transparent Rectangle With Rounded Edges For Text?

Hello,

I have a graphic background with image buttons ("img" inside an "a href" link).

By default, when you right click a button (or left click and move pointer out), the browser paints a selection rectangle, painted with dotted lines, that remains there.
The same selection is visible when you click the image button, until the new page loads.
You can see it even on the top round buttons of this forum.
It looks really bad on my page because the image buttons are ment to be part of the background, and such a selection is out of style.

Is there a way I can instruct the browser not to paint this selection? Some CSS style or some other property?

Thanks!
Alex

I know there are a lot of table scaling issues out there, but I can't find one with my specific problem. I've set up this page made of a simple table with 9 cells. 3 Rows and 3 columns. All the cells have jpegs in them except the center one. That has a flash swf. My end intention is to have this without any scrollbars. I already know how to take those off, but I've left those on until I figure out this problem so that you can scroll around the page to see what I'm talking about.

http://www.cachemeadow.com/beta_website/index2.html

MY ISSUE:

I'm wanting the viewer's screen to automatically center on the flash movie (the center cell). I would like all other cells in the table to 'bleed' off screen, thereby accommodating viewers with higher/lower screen resolutions. This also includes the first cell (top left) to bleed off the top-left so that the screen can be centered on the center cell.

I would also prefer to make the page so that if anybody views or scales the entire window that it would always center in on the center cell (flash swf).

I don't know very much code. I'm more of a graphics guy. Please help.

Here's my existing code:

Thank you.

i'm trying to put a transparent png img on a colored background, in IE6 the transparent part of the img appears as a color instead of transparent
how can i fix that???
the attached imgs shows how it's appearing in IE6 and FF

I would like to create a hierarchical text menu for my site, that does not require me to have a different menu for each page. I am currently creating UL's for each page then adding that to the page to display the menu.
Example:
Creating page called "Sidebar.htm", adding a UL, then using webbot to add that page to the home page:
<ul>
<li><a href="foundationvents.htm">Automatic Foundation Vents</a></li>
<!---<li><a href="#">Home Insulation</a></li>
<li><a href="#">Security Systems</a></li> --->
<li><a href="waterheaters.htm">Tankless Water Heaters</a></li>
<!---<li><a href="#">Home Windows</a></li>--->
</ul>

I then create another page called "Sidebar1.htm", and proceed to do the same thing for the next page:
<ul>
<li><a href="foundationvents.htm">Automatic Foundation Vents</a></li>
<!---<li><a href="#">Home Insulation</a></li>
<li><a href="#">Security Systems</a></li> --->
<li><a href="waterheaters.htm">Tankless Water Heaters</a></li>
<ul>
<li><a href="waterheaters1.htm">How do they work?</a></li>
<li><a href="waterheaters2.htm">How much can I save?</a></li>
</ul>
<!---<li><a href="#">Home Windows</a></li>--->
</ul>

There has got to be an easier and more organized way to create a hierarchical text menu and I would appreciate any suggestions about how to do it.

Thanks,
Chuck

Hi Folks,

I am new to create static website and HTML. I have created two applications using Asp.net/Visual Studio. I am wondering how i can make static website.
I found built in templates on web hosting site is easy to change, I can also try to use Ms Expression Web/Ms Front Page but unable to measure which one is better for maintaing pointing of view. How i can easily create graphics logo.
I heard Corel Draw is good one.
Do i have to buy licence to upload site built by Ms Expression Web/Ms Front Page.

Could any body share his/her experience about creating static website.

You help is greatly appreciated.

Chao

RS

Hey guys, my first post here.

I'm a normal web developer, and know my stuff pretty well. However, there i sone thing that I don't understand, and that is how to make fancy text boxes.

I really like how Lockerz.com made their text boxes, and want to make mine like that.

The entire rounded rectangle appears to be the box, and the font is large, a sans-serif font, and grey.

How is that even possible?

I looked into using backgrounds in the CSS, but that didn't work.

If anyone knows anything, please post it here haha

Thank you in advanced

Hi all ;

Does anyone know how to make a rounded rectangle fields like here in htmlforums . (look at the sponsored ads ) . I can make it via background tags but there is a problem when the size of the table changes the picture repeats itself

In some sites there are nicely rounded borders. How do they make them?

With images of course, but is there any easier way?

Hi
Was wondering if there was a way of doing rounded corners for buttons etc using CSS/HTML. Any ideas? Is there a more effective way for accessibility?

I'm new to CSS/HTML so please go slow

Thanx

Hi,

I'am newbe to this forum and I serach all arround but didn't find a solution.

I created some html in order to create a box with rounded corners with <div>. The problem is that the result is ok in Firefox, but everything is scrambled up in IE.

Can somebody help me in order to make this code work in IE and Firefox?

Code:

<!-- left-side -->
<div>
<div style="width:100%;margin:0px auto;background: url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/left.gif) repeat-y left top ".$roundtxtbg2.";">


<!-- top + topleft_corner-->   
<div style=" width:100%;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/topleft.gif) no-repeat left top;">
        

<!-- top-right -->
        
<span style=" display:block;position:relative; height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/topright.gif) no-repeat right top;">&nbsp;</span>
</div>
        
        
<div style=" position:relative;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/right.gif) repeat-y right top;	padding:1px 20px 1px 25px;	margin:-1px 0 0 0;">


<div style=\" color:".$roundtxtcolor2.";\">***code***</div>
</div>
                
<div style=" width:100%;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/bottomleft.gif) no-repeat left bottom;">
<span style=" display:block;position:relative;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/bottomright.gif) no-repeat right top;">&nbsp;</span></div></div>
    
</div>

Many thanks

Hi,

Just wondered if anyone has any opinions on this

Rounded corners can be achieved either by using JavaScript on one div or by using a couple of nested html tags and CSS,

Forgetting about cross browser issues and support for a minute, which way should be used when considering standards?

Scott

Well, I finally applied my layout I've been designing for my site to my forums. ALl was going well until I tried to make rounded corners for the head of my tables. I was attempting this effect with nested divs, but instead of doing like it should (creating rounded corners), it went all over the place.

Any help?

Link to problem
Link to CSS

By the way, both the template HTML and CSS validates fine.

Hi

I have made a rounded corners box with images, but the bottom line doesn't connect with the two side lines. Thanks for any help:


<html><body dir=rtl>
<Table CELLPADDING="0" CELLSPACING="0" >
<TR>
<TD valign=top align=right><IMG SRC="http://www.bkesher.co.il/bkesher/images/tr.png" WIDTH="16" HEIGHT="16"></TD>
<TD><img src="http://www.bkesher.co.il/bkesher/images/hline200.png"></TD>
<TD align=left valign=top><IMG SRC=" http://www.bkesher.co.il/bkesher/images/tl.png" WIDTH="16" HEIGHT="16"></TD>
</TR>
<TR style="margin-top:0px;margin-bottom:0px;">
<TD align=center>
<IMG SRC="http://www.bkesher.co.il/bkesher/images/vline130.png" border="0" alt="" >
</TD>
<TD>
<TABLE align=center border=2 style="font-size:10pt; border: 2px solid ;border-collapse:collapse;border-color:black">
<TH colspan=2>DDD</TH>
<TR><TD width=70%> </TD><TD width=30%></TD></TR>
<TR><TD> </TD><TD>AA</TD></TR>
<TR><TD>BB
</TD><TD>CC</TD></TR>
<TR><TD>DD
</TD><TD>EE</TD></TR>
<TR><TD> FF</TD>
<TD>GG</TD></TR>
</TABLE>
</TD>
<TD align=center>
<IMG SRC="http://www.bkesher.co.il/bkesher/images/vline130.png" border="0" alt="" >
</TD></TR>
<TR valign=top style="margin-top:0px;margin-bottom:0px;">
<TD valign=top align=right><IMG SRC=" http://www.bkesher.co.il/bkesher/images/bottr.png" WIDTH="16" HEIGHT="16"></TD>
<TD valign=top><img src=" http://www.bkesher.co.il/bkesher/images/hline200.png"></TD>
<TD align=left valign=top><IMG SRC=" http://www.bkesher.co.il/bkesher/images/bl.png" WIDTH="16" HEIGHT="16"></TD>
</TR>
</TABLE>
</body></html>

Hi All,

Iv been browsing and browsing the internet to try and figure this one out and sadly i cant find a solution,

Im trying to do a rounded corners effect in CSS for a button and im using IE7(due to where i work) and the rounded corners effect doesnt seem to wanna happen, can anyone tell me or link me to a document on the net that will give me the effect below is the main button you can see i have put a mox border radius and webkit border radius but doesnt seem to work in IE7

HTML Code:

.BtnRaiseTask 
{
	-moz-box-shadow:inset 0px 1px 16px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 16px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8f002b), color-stop(1, #b20939) );
	background:-moz-linear-gradient( center top, #8f002b 5%, #b20939 100% );
	background-color:#8f002b;
	-moz-border-radius:19px;
	-webkit-border-radius:19px;
	border:2px solid #c2c2c2;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:21px;
	font-weight:bold;
	padding:10px 28px;
	text-decoration:none;
	
}

Can some one please help me its driving me insane.