|
CSS - File Inputs In Ie And Ff
First off, I use Firefox more than IE, so I'm a little upset to see my Firefox version doesn't look as nice as the IE version...
When I design, I like to design to make the Firefox one always look better (even though you should make them look the same, sometimes the FF one still looks better than IE... <h3> tags anyone?). So, I have to make these file inputs look better than they do. A couple things I want to focus on (css code below for reference): 1. Make the FF inputs have a width of 450 like they should. 2. Make the FF input buttons have the same border as IE buttons. 3. Remove the bevelled border from FF inputs. First, the screenshots (attached) Second, the inline HTML styles: Code:
<tr>
<td colspan="4" align="left" style="padding-left: 50px;">
Image 1: <input type="file" name="file[]" style="width: 450px;" /><br />
Image 2: <input type="file" name="file[]" style="width: 450px;" /><br />
Image 3: <input type="file" name="file[]" style="width: 450px;" /><br />
Image 4: <input type="file" name="file[]" style="width: 450px;" /><br />
Image 5: <input type="file" name="file[]" style="width: 450px;" />
</td>
</tr>
Third, the CSS code: Code:
input, textarea, select
{
border: 1px solid #45649B;
}
input {-moz-box-sizing: border-box;}
Any help is appreciated, Thank You! Similar TutorialsHi there, I am trying to add some padding to my inputs, but the padding is being ignored by IE. This is my CSS: PHP Code: INPUT { background-color:#FFFFFF !important; border: 1px solid #ececec; padding: 10px; } Any ideas why it is not working? i tried to search for any threads that talk about this problem, but i wasn't able to find any. i have a css dropdown menu and it works great in firefox(cuz FF rocks). there is an input dropdown under the css dropdown menu, and in IE, the input dropdown shows through the css dropdown layer. i've tried playing with the z-index, but it doesn't seem to work. can anyone help me with this? here is an example of my problem, you'll see the input is showing through the div layer when it shouldn't. Code:
<html>
<head>
<title>Untitled</title>
<style>
div#layerOne { background-color: #fff000; position:absolute; width:50; top:1em;left:1em; z-index:2;}
div#layerTwo { z-index:1; position:absolute; top:2em;left:2em; }
</style>
</head>
<body>
<div id="layerOne">
11 adsf adsf asdf asdfasdf asdfasdf asdf
</div>
<div id="layerTwo">
<select>
<option selected="selected">Choose a topic...</option>
<option>
DECORATING</option>
<option>
All Rooms</option>
</select>
</div>
</body>
</html>
Has anyone seen hidden inputs being rendered as periods or dots under FF? I am using FF 3.5.4. Is this normal? Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-language" content="en">
<title>Funny Dots</title>
<style type="text/css">
input
{
border:1px solid blue;
display:inline-block;
}
</style>
</head>
<body>
<form action="index.php" method="post" name="mainForm">
<input type="hidden" name="aaa" value="5" />
<input type="hidden" name="bbb" value="" />
<input type="hidden" name="ccc" value="" />
</form>
</body>
</html>
I'm trying to make a simple input form, but the problem is that when trying to use CSS to align things, it makes it seems a lot more difficult. I was trying to get away from using tables because I was told they are unnecessary most of the time for alignment purposes. So if I have a couple of labels and form fields, how can I align them so that the labels all are at around 10px left , and then the inputs start at around 150x left. This is what I started to do, and I was thinking...wouldn't tables be much @$!# easier? I have to specify the position for every form field, and this is just one row: Code: <label style="position:relative; left: 10px; top: 50px; ">Input <u>N</u>ame:</label> <input style="position:relative; left: 100px; top: 50px; " type="text" name="txtInputName" maxlength="40" accesskey="n" > I tried it without the style tags, but the labels and fields would then be right next to each other on each line (no way to horizontally space it out nicely because the label length will vary) Can they play nicely together? What I have is a series of check boxes displayed inline with a short label next to each one. Problem is, when there are a lot of check boxes generated and it comes time for a line break, the check box gets broken off from its label. I've tried everything, the label tag, the white-space: nowrap styling. I can't get it to work. So, how do I do this? I have a very curious problem with the formatting of input fields in html forms which has me completely stumped. Basically, input fields are not looking as they should (and in particular, not showing any text typed inside them) in any versions of IE (well, 6, 7 and 8 anyway) - tested on various machines so not a Windows installation issue. Despite my setting a class for them I cannot get them to look like proper inputs, nor can I make the inputted text visible. I can see the cursor for the text when I click inside where the input should be, but it looks far too small- about 4 px as far as I can tell. (???) Interestingly in Firefox the text inputted IS visible, although the border of the inputs doesn't show. I've set a class for input: input {border:1px #000; color:#000;} I also tried setting this explicitly for inside the div holding a form where the input appears: .searchform input {border:1px #000; color:#000;} Neither of which work. Here's one of the forms where I'm trying to include the input (hashes at the moment for links as it's in development): <form action="#" method="POST" name="searchform"> <img src="/images/freecallback.gif" alt="Free Call Back"> <a href="#" title="Member Login"><img src="/images/memberlogin.gif" alt="Member Login"></a> <input type="text" name="searchtext" value="" size="8" /> <input type="image" src="/images/searchbutton.gif" name="searchform" /> </form> And here's another form (same result though interestingly the SELECT appears ok): <form action="#" name="bookahotel" method="post"> <label>Arrival</label> <input name="date" size="6" type="text" /> <p class="text_normalblack">Arriving Today</p> <input name="country" size="6" value="Country" type="text" /> <input name="towncity" size="6" value="Town/City" type="text" /> <select name="_EnquiryType" size="1" class="forminputs" /> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select> <input name="bookahotel_search" size="6" value="" type="image" src="/images/bookahotel_search.gif" /> </form> Any ideas??? Thanks When a Text Input is disabled, is there a way to control the visual characteristics such that it's not as subdued, or use different colors for the text / background? Hi guys, Let's say I have 2 inputs: <input ... /> and <input type="submit" ... :> How do I grap the type="submit" input in CSS? For example: input submit {....} I know this does not work... Thank you If I include url(images/blah.gif) in a CSS file in my webroot, and i then load that into a file in a html dir off my roor and run the html from the html folder, is the image supposed to be relative to my css file or my html file? It seems like its relative to the HTM which doesnt seem correct. I know It would just make sense to move things around but it has to do with robohelp and I think I'm stuck doing it this way for now. Many of my web pages (CGI) have css styles which have a user defined color present throughout the site. How can i get that varible data back to my site if I refer to it in my css style? for example, i get a hex color from the user and store it in a global variable C1$=#000000 in my web app. then in my css definition i assign border color based on the user defined variable like Code: .table { border: solid 1pt $C1 }
when i copy that into my css file, the color thing in my tables is no worky. putting it back into my cgi file, it works fine of course. What to do? thanks, JOhn am creating a website and when I swap between pages the page is shifting to right around 5px, I need to fix it. you can find the files in that link: http://www.designmasr.com/assets/source_files.zip Hi Im new here and have a css problem please could somone make a text box or allow me to write next to the menu thanks. heres the download link http://www.filegone.com/qxw0 I am contemplating trying to learn CSS and redesign my home page, from tables to CSS. I basically have my index page, with a header image at the top (image map), a left menu, a right menu, and the area in the middle is where the content is displayed. Would I use one CSS file for this, or one for each page? Sorry for the stupid question, I am completely new to the use of CSS. I would imagine I just use one and load the file in on my main page, and use it through out all the pages that I load into the content area, but im not sure. www.NightmareMotorSports.com Is it possible to store a default menu, along with a default style in a .css stylesheet? So that, for example, i could have plain html pages, linked to the style sheet and have css 'insert' a menu, along with all the other styling stuff. Am i just lazy? Its a real pain changing all my menus whenever i add a new page or feature. If i could just have 'content' html files, with a little .css link in them it would save me loads of time. I remember seeing once that you could insert a picture using css by some obscure method. Surely this couldnt be much harder? thanks for your help EDIT, The pages i want to do this with are on chuck54.com Right now i dont even have a separate .css file. But im working on that. how do i reference a .gif file in css i have multiple instances where an identical cell always references the same gif - can this be done? I have few .css file, and each of them have numbers of style setting. It is growing big and getting more difficult in manage this setting. So, I wish to put in some remarks to help me locate style setting in section. Can I put remark in .css file? If yes, How? Thanks First off, I am a noob, but i learn quickly... I have a cgi site (poor me) and it uses css and javascript, which i am just learning. I noticed that javascript tags refer to an exteral file, since the same fuctions are used on many different pages. The same css definitions are used over and over again also, but they are defined in each page (like 50 or 60 files). Can I create a css only file like my .js files and simply refer to it like i do with javascript? If so what does the format look like? Thanks, JOhn friends how to apply the style for file browse input any idea Hello, I'm a novice at CSS, but have managed to do use a CSS template to create a website which works for our company. However, I want to change the .jpg banner up top to a .swf flash file. When I go into the styles2.css file and change the file it's referencing to the flash file, the area just shows up blank. I know the .swf is in the right place. Is there a reason that this CSS file won't allow me to reference a .swf file? Do I need to change something besides the URL it references? For clarification... The css reads now... Code: #header {
background-image: url(images/head3.jpg);
background-repeat: no-repeat;
width: 760px;
height: 148px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 11px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 0px;
background-image: url(images/head3.jpg);
I change it too Code: #header {
background-image: url(images/head3.swf);
background-repeat: no-repeat;
width: 760px;
height: 148px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 11px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 0px;
background-image: url(images/head3.swf);
Any ideas? (the swf file is in the images folder, and named head3.swf) THANKS! PS, the website URL is aesrenew dot com |
|||||||