|
CSS - Css Style <input Type="submit"
I found this great website that shows me how to create these great buttons with some images.
http://www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/ How can I do this with a button instead of a link??? Similar TutorialsHi 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 I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it. Any ideas on how to rectify this? Code:
<td><input type="text" class="loginbox" size="13" /></td>
.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}
on a page i have a <input type="file"> tag for upload purposes. I want that thing have the following look:
no borders
'Courier New' font
a height of 16 pixels
a font-size of 14 pixels
a special background color
and a paddin of 0 pixels
I have made the apropriate CSS definitions: Code: <style type="text/css">
input {
height: 16px;
border-width: 0px;
background: #e0e0e0;
padding: 0px;
font-size: 14px;
font-family: Courier New;
}
</style>
The problem is that Mozilla does not fully implement these definitions. Mozilla makes the height and the background of the textfield-part the way i specified. The rest is left the way it is. I would appreciate any help you could give me. is there any way to change the style of the "Browse..." button on the <input type="file"/> tag? for instance, setting background-color will only change the text box of the tag and not the button. Hi, I have sort of a strange problem. I'm making a centered website, and I have a shopping cart image which is actually a submit button for a form. If I make it just a plain image it looks like this: http://www.rit.edu/~jtn5684/test/index1.html However, when it's an <input type="image"> (which is what I need) it moves it drastically. http://www.rit.edu/~jtn5684/test/index2.html My styles are he http://www.rit.edu/~jtn5684/test/styles.css Any idea how to make index2 look like index1 while using <input type="image">? Thanks! Jon Hi, I'm not overly accomplished when it comes to CSS so here's my question. I've got the following HTML code: Code: <input type="text" name="field1" value="value1" style="width:100%"> I'm preloading a value into this text field which may run past the visible length of the textbox. The text box is situated inside a table cell. The text box fills the table cell space completely whilst the text inside it does not run over but once the text is more than can be displayed in the space provided by the table cell, it forces the textbox to grow. My question is, is there a way around this so that I can still instruct the textbox to be 100% width of the table cell without expanding when the text overflows. Thanks. I'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks Hi there, I've read that for using decorative images in web design its preferred that you apply them as background images instead of using the <img> tag, as using the <img> tag stops the page from displaying until all the images have fully loaded in the browser, where as using a css background image will output the page completely, then start to load in the images (users can start reading the text whilst the images load in). I was just wondering really if anyone else has used this method and gone to the extreme measure if replacing all <img> tags with css background images to dramatically improve their page load speeds? So for example... before Code: <img src="my_thumbnail.jpg" alt="Thumbnail Graphic" title="Thumbnail Graphic" width="100" height="70" /> after Code: .thumb {
background-repeat: no-repeat;
width: 100px;
height: 70px;
}
<div class="thumb" style="backgound-image: url('my_thumbnail.jpg");"></div>
Just an idea really, not sure on how standard compliant it is but I might test it out later to see what speed improvements it brings. I'd be very interested in anyones thoughts what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css? i've tried PHP Code: table { border-spacing: 0px; padding: 0px; border-colapse: colapse; border-style: solid; border-width: 1px; } td { border-style: solid; border-width: 1px; padding: 2px; } That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well. I have designed one page. I am getting correct behavior in IE but there is some problem with Mozilla. Here is the code sample: <DIV class=ColumnHeader><SPAN class=noSort style="WIDTH: 6%; TEXT-ALIGN: center"><input type=checkbox id=chkSelAllAvail value="" name=chkSelAllAvail></SPAN> <SPAN style="WIDTH: 20%">Year</SPAN> <SPAN style="WIDTH:36%">Type of Report</SPAN> <SPAN style="WIDTH:24%">End Date</SPAN></DIV> I have attached both screen shots of IE and Mozilla. Can anyone help me ?? Is there a method or property which will tell me if the above div has visable scrollbars? I need to resize some elements based on whether the scroll bars are visable or not. I don't want to have them visable all the time, only if needed. Hi Guys, I'm building some forms, and when they are submitted, I'd like to integrate a method that will fade out the screen a bit, and show an animated "processing" .gif. Basically when the "submit" button is pressed, the form is being submitted to it's destination. The page will hang on the form until the next page is ready to load. While it's hanging there after submitting, I'd like the screen to fade out, and display an image in the center of the screen. I'm hoping this can be achieved with CSS, as I try to use as little Javascript as possible. What's the best way to achieve this? I figure if anything a javascript "onsubmit" function will be a good start. Can the screen be faded with CSS? I want to change the "flashing cursor" color in an input field in my css. This field has a dark background, the text over it is white but when you click in it, the flashing cursor is darkgray an almost invisible. Look in my login and password box, you will understand: http://www.jeudebourse.com. I'm mostly speaking in French and I don't know what is called this cursor. I don't mean the mouse pointer but the cursor that is flashing in the field to indicate your position in this field. Thanks. Hi, Im using CSS, and have included the code in a separate .css file. The whole website uses DIVs and is displaying correctly in both I.E. and Firefox. Now, I need to generate a dynamic DIV using PHP, so I did this to test it out, Code: <div style="{ background: #00cc00; width:100%; height:100%;}">abc</div>
But the problem is that it displays correctly in I.E. but not in FIREFOX, all the attributes that I have specified within the style="{}" tag are NOT at all applied in FIREFOX. Only the text "abc" is displayed in firefox and the style, including the background colour is not applicable at all! Please tell me what Firefox is upto? Thanks! Your sisncerely, mbk, mbkweb. Hello. I'm trying to avoid using the <div style="clear:both"> fix for keeping elements from floating outside of their containers in IE7. Here's the code that's working with that fix. I'd like to have a way to adjust the CSS so I can take that out. 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=iso-8859-1" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="css/.css" rel="stylesheet" type="text/css" /> <title>A Beautiful Smile</title> </head> <body> <div id="wrapper"> <div id="banner"> <ul id="navigation"> <li><a href="">Home</a></li> <li><a href="">Help</a></li> <li><a href="">Contacts</a></li> </ul> <img id="logo" src="images/global/logo.jpg" alt="Company Logo" /> <div style="clear:both"></div><!--Prevents img changesmile.jpg from going outside banner in IE7 --> <img id="changesmile" src="images/global/changesmile.jpg" alt="Learn how we can change your smile." /> </div> <div id="footer"> </div> </div> </body> </html> CSS Code:
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, textarea
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
/* End CSS Reset, Begin Styling */
#wrapper{
margin: 10px auto;
width: 735px;}
#banner{
width: 100%;
height: 279px;
margin: 0px auto;
background: URL('../images/global/banner.jpg') no-repeat;}
#navigation{
width: 200px;
margin: 50px 0px 0px 330px;
float: left;
}
#navigation li{
display: inline;
list-style-type: none;
float: left;
margin-left: 20px;}
#navigation li a{
color: #CCCCCC;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: .70em;
text-decoration: none;}
#navigation li a:hover{text-decoration: underline;}
#logo{
display: block;
width: 180px;
height: 82px;
float: right;
margin: 0px;
}
#changesmile{
display: block;
width: 228px;
height: 75px;
float: right;
clear: both;
margin: 100px 60px 0px 0px;
}
I appreciate your help! I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. http://stuweb.cms.gre.ac.uk/~as234/full/full.htm some problems: in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok! in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image! the background colour should be grayish however that DOESNT happen! (I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? Hello everybody, I used the following line <td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td> and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla: <td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img> but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla? Hi guys, For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ? Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html). Thank you |
|||||||