|
CSS - Anomaly With :focus In Ie Between Local And Server Files
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? Similar TutorialsHi 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! 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. Hello Im trying to find a way to force :active and :focus from temporary states to permanent effects in safari ? basically make them behave just like they behave on internet explorer. As of right now, if you go to the website using safari, you will have to press and hold the mouse button in order to see the image. is there any hack ? or fix to do this ? thanks the website is http://www.danielyanez.com and the css is http://www.danielyanez.com/Stylesheet.css it works well on IE and even in firefox, but in safari you have to keep pressing the button. 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 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 heys all, so im trying to get rid of that input:focus blue 'border' or 'outline' that happens in safari browsers. determined that if you apply a opacity: 0.99 to only the safari browsers, then it won't do that. however, this is only a fix for safari MAC. any thoughts on safari PC? thanks. 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? I have a rather perplexing problem. I just created a website locally in CSS and it works fine when I open it locally (i.e., from my harddrive) in either Firefox or IE. But when I upload the HTML, images, and CSS to my webserver, the formatting breaks rather badly. I've checked that the files are exactly the same, so I do really don't know what the problem is. Here is the disfunctional online version: http://www.forma3.com/fs/jmf/index_v0.1.html And what it looks like locally: http://www.forma3.com/fs/jmf/local.png Hi, The local styling of my table, td objects is suppressed by CSS. Please help. Simple html file: test.html Code: <html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> Table 1 <table border=0 bgcolor=blue> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> </table> <body> </html> Corresponding CSS: test.css Code: th, td { font-size: 75%;
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: red;
background-color: white; }
table {
border-width: 2px;
border-style: solid;
border-color: black;
border-collapse: collapse;
background-color: white; }
hello. i'm building a javascript application which will allow the user to select a file from his/her hard drive (using <input type='file' />) and display the image in the background. when the user hits submit, the image will be uploaded and in the future, the user will have the image hosted from the server. the reason i post this in the CSS forum is because the error is coming from CSS, not javascript. i need to know how to point the css to an image on the user's local machine. In my main CSS file, the background-color is set to #FFFFFF (white) however this also erased my background images in the cells of my table i have tried to add them with style tags, but the main CSS still overrides Top of the table + cell with bg PHP Code: <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td width="766" height="295" valign="top" style="background-image:url(images/row1.gif); background-repeat:no-repeat "> This is the main CSS: PHP Code: body,td,th { font-family: Tahoma; font-size: 11px; color:#5D5D5D; background-color:#FFFFFF; } body { font-family: Tahoma; font-size: 11px; color:#5D5D5D; background-color:#FFFFFF; } I am a developer. Recently developed a site on my server, then moved it to client server. On the client server, some of the CSS is different. Nothing major, small stuff like spacing and a drop down menu that are off. Nothing changed. I moved everyfile, for sure. This is not the first time this has happened to me. Am I missing something? I have created a website design using Visual Studio 2005. When I debug/test my website, the CSS layout all works and looks good in IE7. However I then upload the website to our hosting website's webserver which is an Apache/1.3.33 Server, and view it with IE7, it doesn't look the same. From what I can tell (as I am still learning CSS and never worked with an Apache Webserver) is that the right: 0px isn't working as my layout isn't spanning the entire page. There are a couple of other issues to, but this is the main one initially. I have validated my CSS and it checked through ok. Is the Apache Server just serving up my CSS differently than what I am expecting and seeing when I test locally? I thought the different browsers (IE, Netscape, Firefox) were what usually caused these type of problems; not what type of server it was. Thank you for any help! Hello all, I'm working through a tutorial and everything seems to work fine. The page appears except for the css part. i have wamp server installed, newest version. apache, mysql, and php works i'm running wamp server on my laptop searched google and the answers i found didnt work so i thought i try here. what am i doing wrong? http://localhost/widget_corp/staff.php PHP Code: <html> <head> <title> Widget corp Staff</title> <link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1>Widget Corp</h1> </div> <div id="main"> <table id="structure"> <tr> <td id="navigation"> </td> <td id="page"> <h2> Staff Menu</h2> <p> Welcome to the staff area.</p> <ul> <li><a href="content.php">Manage Website Content</a> </li> <li><a href="new_user.php"> Add Staff User</a></li> <li><a href="Logout.php"> Logout</a></li> <ul> </td> </tr> </table> </div> <div id="footer">Copyright 2007, widget Corp</div> </body> </html> PHP Code: /* site colors: #1A446C - blue grey #689DC1 - light blue #D4E6F4 - very light blue #EEE4B9 - light tan #8D0D19 - burgundy */ html {height: 100%; width: 100% } body (width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; font-family: Verdana, Arial, Helvetica, Sans-srif; background: #D4E6F4; font-size: 13px; line-height: 15px; } img { border: none; } table, tr, td { border-collapse: collapse; vertical-align: top; font-size: 13px; line-height: 15px; } a { color: #8D0D19; } #header { height: 70px; margin: 0px; padding: 0px; text-align: left; background: #1A446C; color: #D4E6F4; } #header h1 {padding: 1em; margin: 0px;} #main {margin: 0px; padding:0px; height:600px; width:100%; background: #EEE4B9; } #structure {height: 600px; width:100% } #footer { height: 2em; margin: 0px; padding: 1em; text-align: center; background: #1A446C; color: #D4E6F4;} /* navigation */ #navigation { width: 150px; padding: 1em 2em; color: #D4E6F$; background: #8D0D19; } #navigation a { color: #D4E6F4; text-decoration: none; } ul.subjects { padding-left: 0; list-style: none; } ul.pages {padding-left: 2em; list-styl: square; } .selected { font-weight: bold;} /* page Content */ #page { padding-left: 2em; vertical-align; top; background: #EEE4B9; } #page h2 { color: #8D0D19; margin-top: 1em;} #page h3 { color: #8D0D19; } Hi Can you please say me how I can make permanent spraylogos on my server. Hi All, I'm new here so here's my problem: Ive created a style sheet with the thumbs-style that resizes pictures. .thumbs { border: 2px solid #524b2f; position: static; height: 80px; width: auto; } body { background-color: #f5f0ec; font-family: Verdana, Arial, Helvetica, sans-serif; scrollbar-face-color : #f5f0ec; scrollbar-highlight-color : #aca899; scrollbar-3dlight-color : #f5f0ec; scrollbar-shadow-color : #aca899; scrollbar-darkshadow-color :#f5f0ec; scrollbar-track-color : #f5f0ec; scrollbar-arrow-color : #524b2f; } .text1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 24px; color: #524b2f; font-style: normal; font-weight: bold; text-transform: none; font-variant: normal; text-decoration: none; } .text2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-weight: normal; color: #524b2f; } .titel { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-style: normal; line-height: normal; font-weight: bold; color: #524b2f; text-decoration: underline; } Everything works fine on my computer. But load the page on the server the resizing doesn't work anymore. Here's the link http://www.sleuyter.be/04/lay04-1.htm When i right click on the thumbs in the I-frame and select properties than they resize to the specified size in the CSS-sheet. On my pc everything is ok , what can it be with the server? Who can help me? Thx, ROY Possible? I cant work out how to comment my css files Can anyone tell me? Also - anyone got any views on the best way to structure a CSS file? How can I fit the following into a CSS file (external stylesheet)? Code:
<div id=Canterbury style="position:absolute; width: 200px; height: 52px; z-index: 1; visibility: hidden"><table
border="0" cellspacing="0" cellpadding="0"><tr><td bgcolor="#FFB928"><!-- border colour --><table border=0
cellpadding=1 cellspacing=1>
<tr id="Canterbury1" bgcolor="#FFD784"><td><a class=menu href="#" onMouseOut="menuOut('rollimg2'),setBgColor(
'Canterbury1','#FFD784')" onMouseOver="menuOver('rollimg2'),setBgColor('Canterbury1','#990000')" target=
_top><img src="rp.gif" border="0"> BBC Radio Kent</a></td></tr>
<tr id="Canterbury2" bgcolor="#FFD784"><td><a class=menu href="mms://ms1.capitalinteractive.co.uk/invicta_low"
onMouseOut="
menuOut('rollimg2'),setBgColor('Canterbury2','#FFD784')" onMouseOver="menuOver('rollimg2'),setBgColor(
'Canterbury2','#990000')" target=_top><img src="wmp.gif" border="0"> Invicta FM</a></td></tr>
</table></td></tr></table></div>
I have a few other placenames as well, as you can see from www.radiofeeds.co.uk/maptest/csstest.html, but there are a few ids where I'd like to exclude these settings from. I know I can set the whole of the Canterbury block with: div#Canterbury,div#<any other placeneames> { position:absolute; width: 200px; height: 52px; z-index: 1; visibility: hidden } But how can I also have the border colour (<td bgcolor="#FFB928">), bgcolor, onMouseOut and onMouseOver properties put into the CSS file? Please can I have the code for the CSS file and for the replacement code that goes back into the page. I'd like this to be efficient as possible. I know that there have been a few posts on this in the past but none seem to specifically cover what I am after. I am currently creating a CMS for a few sites that I run. Now don't get me wrong this is nothing flashy, it's just a personal project, however, when designing pages I can get everything to display in FF, Opera and IE perfectly well, however, as I add new elementes to the page things seem to get a little.. out of place. My pages always display perfectly well in FF and Opera, however, IE 6 & IE 7 usually have small problems to do with margins and such, nothing life changing but I am very critical of my own work. My question is whether or not I should create seperate style sheets for IE6 & IE7 that overwrite certain bits of the CSS that IE doesnt like and replace it with code that works well in IE, whilst hiding it from other browsers. I would also be interested if people have other suggestions with regard to this as I am always up for learning new skills and ways of doing things. Thanks for reading! Regards, Matt. |
|||||||