CSS - Safari Input Focus Blue Border

Hey as the topic title says, can I put a background-image on a text input so that it shows in safari? I can't figure it out and can't find anything using google. Anyone have any experience with this?

Thanks

This afternoon I could finaly continue working of a menu bar.

First I did use Table's but after reading a CSS guide ( E. Meyer ), I could change that with a ul/li and CSS.

I have floating on the left side: / spacer / two icons / spacer / ... / set of centered links / ... / and floating on the right side / spacer / form fields /

Here my CSS

Code:

#footer {
clear: both;
padding: 2px 0px 10px 0px;
font: 11px arial, helvetica, sans-serif;
width: 100%;
overflow: auto;
text-align: center;
border: 1px solid;
/*min-height: 23px;
max-height: 32px;*/
position: absolute;
bottom: 0px;
left: 0px;
height: 25px;
}

#footer li.img {
padding-left: 4px;
padding-right: 4px;
float: left;
}

#footer li.spacer {
min-width: 6px;
float: left;
}

#footer li#spacerLeft {
margin-left: 8px;
float: left;
border-left: 2px #ddd dotted;
}

#footer li#spacerRight {
border-right: 2px #ddd dotted;
margin-right: 8px;
float: right;
}

#footer li#txtSelector {
margin-right: 10px;
float: right;
}

#footer a {
clear: both;  margin: 0 0 ; height: auto; 
}

#footer ul {
text-align: center; margin: 0 0 ; padding: 0; list-style-type: none;
}

#footer li {
padding-left: 3px;
padding-right: 3px;
display: inline;
min-height: 23px;
width: auto;
 }

#footer input {
font-family: Verdana; color: #333333; font-size: 7pt;
width: 80px;
}

This with my HTML
Code:

<div id="menu_container">
			<div id="footer">
				<ul>
					<!-- spacer -->
					<li class="spacer">
					<!-- icons -->
					<li class="img"><img src="comment.gif">
					<li class="img"><img src="feedicon.gif">
					<li id="spacerLeft" class="spacer">
					<!-- links -->
					<li class="link"><a href="/">Inline test</a>
					<li class="link"><a href="/">home</a>
					<li class="link"><a href="/">web</a>
					<li class="link"><a href="/">Simple more links</a>
					<li class="link"><a href="/">Simple, even more links</a>
					<!-- input search field -->
					<li id="txtSelector">
						<form action="search.php" method="post">
							<input type="text" name="search" value="Search Here" size="20" >;
						</form>
					<!-- spacer -->
					<li id="spacerRight" class="spacer">
				</ul>
			</div><!-- footer -->
		</div><!-- footer container -->

I am close, with what I want. But If I use this in Safari, it crashes when I make my window small.
On FireFox the input field is not in line with the other items.

If I the window is to small to show them all, I would love to have the middle li items wraps under them selfs.

like:
link link link link
one two three four

and not
link one link two link three link
four

This did work in my table test, but not here. I did have it one time, but I think it was by accident.

Does someone have any clue?

Thanks

I'm going round and round without getting any head way so hopefully someone can give me a hand...
I'm creating a mail form using a background image for the input fields. What I don't want is a border. If I don't add a border: solid black, for instance, I get a default white. Is there a way to have no border?

Code:

INPUT.email {
	background-image: url(images/bg_email.jpg);
	width:206px;
	height:21px;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	color: #ffffff;
	border: 1px solid black;
	margin: 0 0 0 10px;
	padding: 0 0 0 6px;
}
 

Thanks in advance!

Hi, I am trying to make a link's text black with a blue underline. Is this possible?

Here is my code, which produces black text with a black underline: Code:

.link{ text-align:left; 
color:#000000; 
font-size:14.5pt; 
font-family:times new roman,serif; 
font-weight:normal; 
text-decoration:underline color:#09328a; }

Hi All,

I have created a site in pure html and one of very strange behaviour i have ever seen is blue lines just like the a href links are coming ,Please can any one help there.They come on site first time and again on refresh they got disappear and its coming on Mozilla firefox and netscape not on IE.
Site name: http://tedje.com/

Thanks in advance or any suggestion.

Hi.

Have created some simple tabs using table cells.

Active tab should have bottom-border color equal to page background-color.
Non-active tabs should have bottom-border=black.

Works fine in IE, but does not work very well in Firefox.

If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell.

So is there a way to make this work in both IE and Firefox...
and hopefully most other browsers...

See code below:

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
	a.menu_top:link {color: #000000; text-decoration: none;}
	a.menu_top:visited {color: #000000; text-decoration: none;}
	a.menu_top:hover {color: #000000; text-decoration: none;}
	a.menu_top:active {color: #000000; text-decoration: none;}
	
	td.menu_top_passive { 
		background-color: #777;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #000000 solid;
		
		text-align: center;
		
		cursor:pointer;
		font-weight: bold;
		
		padding: 5px 20px 5px 20px; 
		 
		margin: 0;
		 
	}
		
	td.menu_top_active { 
		
		background-color: #bbb;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #bbb solid;
		
		text-align: center;
	
		cursor:pointer;
		font-weight: bold;
		padding: 5px 20px 5px 20px;
		
		margin: 0;
		
	}
	

</style>

<script language="JavaScript">


function change(id, url) {
	for (i=1; i<6; i++){
		eval("document.getElementById("+i+").className='menu_top_passive'");
	}	
	eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>

</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?

</center>
<br><br><br>
	<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
		<tr>
			<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a  href="javascript:;" class="menu_top">Item 1</a></td>
			<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>	 
			<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a  href="javascript:;" class="menu_top">Item 3</a></td>				
			<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a  href="javascript:;" class="menu_top">Item 4</a></td>
			<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a  href="javascript:;" class="menu_top">Item 5</a></td>

		</tr>
	</table>
</body>
</html>

I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style.

If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all.

I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened.

How do you fix that problem?

Thanks...

Hi,

This used to be my solution:
Code:

<table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'>

But this only works well on IE - not Mozilla

Now I want to use CSS:
Code:

	.results {
	  	border: 1px solid #CCCCCC ;
	}

Code:

<table class='results'>

---------------

The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't.

If I specify
Code:

<td class='results'>

for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping).

Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration?

Thanks a lot!

I would like to set up a table with a different border than the cells inside it. Here's my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
	TD {border: 1px solid #ccc}
</style>


</head>

<body>
<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different?

Hi there,

I've been battling to get this right...basically I have the following HTML setup:


<input class="tboxes" type="textbox" />
<input class="tboxes2" type="textbox" />


"span.label01" is an inline element, and appears to the left of the textbox "input.tboxes". What I am trying to do attach some style to "span.label01" AND "div.box10" when the textbox receives focus.

I have tried the following CSS code:

input.tboxes:focus {
color:#FF9900;
}

input.tboxes2:focus {
color:#FF9900;
}
but nothing happens. I know this is a CSS selector issue, but I just can't seem to get it right. I have even tried adjacent sibling selectors, and nothing. Can anyone help me here? TIA!

Hi,

I've created a DIV ( that contains an iframe ) over a flash movie ( it could be an image also ). The problem is that if I click outside the iframe/DIV it disappears completely.

Is there a way around this?

Just one more question: what version of Netscape deals with iframes?

Kind regards,

Kepler

Hi,

in firefox I can do this to highlight a form element when it is selected.

input[type="text"]:focus,
input[type="password"]:focus,
input[type~="text"]:focus,
input[type~="password"]:focus,
select:focus,
textarea:focus {
border: 1px solid #9ED175;
}

Is there a way I can do this in IE ?

thanks
scott

you know that little black dotted inobtrusive focus ring that appears on links when you click them in firefox. I can make a case for shutting it down temporarily on this one link I have. I've found out ways to edit your profile and fix it. but obviously I cant go edit every visitor to my website's firefox/mozilla profile. In general I think it is a nice feature. But what css can I put on this one thing so it wont do it?

OK... I went back to the original source. and it did not suffer from this problem So I went back and tweaked my css correspondingly . Now the focus ring goes where its supposed to. Good thing cuz I never heard of anybody changing it except for themself.

Hi, I have a file named button.html with this code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
input:focus { border: 1px solid navy; }
</style>
</head>
<body>
<input type = "text" />
</html>

When I store it in my desktop, and open it from there, the focus works as expected. But when I store the file in Wamp and open it there either by typing C:\Wamp\www\button.html or http://localost/button.html in the URL bar, nothing happens. Can anybody explain this and offer a remedy?

Here's the problem: aparently Opera places an inverse color highlight on links that receive the keyboard focus (see Javascript Development: How do I hide focus on Opera?), and I'd like to hide it. CSS3 property Code:

outline-style

is useless here, and I've also tried setting the JScript Code:

hideFocus

property, but aparently this only works on IE. In fact, I've tried everything I can think of except blurring the link, which would completely defeat my purpose. I tried Javascript Development and got nothing, so maybe the answer is not Javascript. Is there possibly some proprietary CSS extension in Opera that would hide the highlight? If so, what is it and how do I use it?