I have problem with CSS, can someone help me with it? I can make my design for one browser but then it breaks in another browser.
For example if I fix it for Chrome then it does not work for Firefox, and vice versa...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Bookmark Storage</title>
<style>
.frmsub{
}
.btnsub{
position:relative;
left:-80px;
bottom:-24px;
}
.btnclear{
position:relative;
right:-30px;
top:0px;
}
.mltsub{
position:relative;
right:-30px;
top:375px;
}
.load{
position:relative;
right:290px;
top:30px;
}
</style>
</head>
<body background="http://www.dodaj.rs/f/1F/l0/2CSIzyy1/notebook1.jpg">
<div align="center">
<div align="center">
<form class="frmsub" action="./BK.pl" method="POST">
URL: <input name="HWID" type="text"> <br>
Short description(optional): <input name="HWID1" type="text1"> <br>
<input class="btnsub" value="Submit" type="submit"></form>
<form action="./clear.pl" method="POST">
<input class="btnclear" value="Clear" type="submit">
</form></div></div>
<div align="center"><form method="POST" action="./multiBK.pl">
<input class="mltsub" value="Submit" type="submit">
</form><form method="POST" action="./AddS.pl">
<textarea name="HWID" rows="20" cols="50">Add bookmark source here, press load and then submit.
</textarea>
<input class="load" value="Load" type="submit">
</form></div>
<p align="center"></p>
<div align="center">
<div align="center"> </div></div>
<p align="center"> *Check your bookmarks: Click</p>
</body>
</html>
Just look is important not pay attention to form...
Yes, like Markus said, use a CSS Reset like this well know: http://meyerweb.com/eric/tools/css/reset/
if after applying it still not working well, maybe there's something wrong in your code
Try addin this to the top of your css file:
*{
margin:0;
padding:0;
}
Try addin this to the top of your css file:
{
margin:0;
padding:0;
}
That way you can test if there is some default browser padding/margin issue without using some large css reset thingy...
What i can tell you is that i think the problem is that you are wrapping that in which have default 10px bottom and top padding so maybe try reseting that to 0 in your css.
lineInput{
padding:0;
}
Or just change that paragraph to div.
Maybe that is the solution, but maybe it aint, because you are using absolut positioning...
I have counted the px's and letters in both part of the picture are 15px. In firefox below the letters to the end of the orange part is 11px and in chrom there is 8px. In firefox from top of the letters to the start of the orange part there is 12px and in chrom there is 10px. So that is 5px of difference.
Try this:
btnSubmit{
height:38px;
padding:0;
}
That will make the button be 38px high and letters will be in top left of the button. Then you could add maybe this:
text-align:center;
padding-top:10px;
// or how much is needed to be verticaly centered.
Related
i'm simply trying to set a background image to my submit button in my form. I've tried a couple variations of methods but every time I get the default browser button. Anyone know where I'm going wrong here?
HTML
<div id="headerSearch">
<form method="post" action="Test.php">
<div id="headerSearchBar">
<input class="tbSearch" type="text" name="search" size="12" placeholder="Search...">
</div>
<div id="headerSearchBtn">
<input class="btnSearch" id="button" name="submit" type="submit" value="">
</div>
</form>
</div>
CSS
#headerSearch{
float:right;
width:80%;
height:80px;
}
#headerSearchBar{
float:left;
width:90%;
height:80px;
}
.tbSearch{
height:25px;
width:95%;
margin-top:27.5px;
margin-left:2%;
margin-right:0;
margin-bottom:0
}
#headerSearchBtn{
float:right;
width:10%;
height:80px;
text-align:center;
}
.btnSearch{
background-image:url(../IMAGES/btnSearch.svg) no-repeat;
width:25px;
height:25px;
margin-top:27.5px;
}
You need to use just background
background:url(../IMAGES/btnSearch.svg) no-repeat;
I've found a method that fixes the issue, as Michael St Clair has mentioned I needed to use just background in the css rather than background-image. This removed the default browser image and didn't display my selected image.
I used a different method that has now fixed the issue, I tried this method before but with the background-image tag rather than with just background as Michael St Clair suggested, which all and all has now fixed the issue.
HTML
<input class="btnSearch" id="btnSearch" name="btnSearch" type="submit" value="">
CSS
.btnSearch{
width:25px;
height:25px;
margin-top:27.5px;
}
input#btnSearch{
background:url(../IMAGES/btnSearch.svg) no-repeat;
}
Add background-size:100% 100% to your button css. Something like this: http://codepen.io/shreya1289/pen/QEKGWa
so I have a submit button with this code:
<form method="post">
<input name="submit" type="submit" class="icon" value=" "/>
</form>
an in the CSS I have:
.icon{
background-color:transparent;
background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
height:20px;
width: 20px;
background-position:center;
border:none;
cursor:pointer;
background-size: 100%;
}
But the problem is that the image ( that have h:40px and w:40px) does not shrink to fit the 20px button... Do you guys have any solution for this??
(I rather not use javascript if possible)
EDIT:
Currently working. I just delete history, cash and it works... ty
try this : -
background-size:20px 20px;
Use an image submit button instead, and shrink the element to the desired dimensions using CSS.
<input name="submit" type="image" class="icon"
style="width: 20px; height: 20px"
src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png"
alt="Send" />
add this line in css file:
display:block;
You need to wrap a span to submit button and style it.
DEMO http://jsfiddle.net/H5dmd/2/
HTML
<form method="post">
<span class="icon">
<input name="submit" type="submit" value=" "/>
</span>
</form>
CSS
input[type=submit]{
background:transparent;
width:20px;
height:20px;
border:none;
padding:none;
cursor:pointer;
}
.icon{
float:left;
background-color:transparent;
background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
height:20px;
width: 20px;
background-position:center;
border:none;
cursor:pointer;
background-size: 100%;
}
Add an id to the button, Updating the image:
document.body.onclick=function(e){
debugger;
var bid=document.getElementById('bid');
bid.style.backgroundImage="url('http://www.google.co.il/images/srpr/logo4w.png')";;
}
js fiddle here.
You can simply use input of type image, it exists for this purpose exactly: submit button showing an image. As a bonus you'll also get the coordinates where the user clicked.
Example:
<input name="mysubmit" type="image" src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" />
Live test case.
Only one downside: in the server side code handling the form, you'll have to check if "mysubmit.x" and/or "mysubmit.y" are not empty to know if you got anything sent which is less intuitive than just checking "mysubmit".
I see multiple options here :
Change saving
Save your image to 20x20, and whoops, problem gone.
Use CSS3
CSS3 introduces a new feature that is backgroud-size
Just put that in your CSS :
background-size: 20px 20px;
But it won't be compatible with old browsers.
Use JavaScript [Bad style]
HTML
<form method="POST" action="test.php" name="myform">
<a onclick="javascript:document.forms['myform'].submit ();" ><img src="myimage.png" onclick="submit();" /></a>
</form>
So, I was messing with CSS for my buttons and tried to test the following CSS code on the button element:
button {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
The 2 buttons at the end are created by this HTML:
<div id="header">
<div id="logo"><img src="logo.jpg" /></div>
<div id="search">
<form id="search-form">
<input type="text" style="width:80%;height:28px;background-color:#F5F5F5;font-size:16px;position:relative;top:-3px;"/>
<button type="button" style="position:relative;top:6px;"><img src="mgt.jpg" /></button>
</form>
</div>
<div id="upload" class="top-button"><button>Upload</button></div>
<div id="signin" class="top-button"><button>Sign in</button></div>
</div>
Last 2 buttons "upload" and "signin" are the ones n question.
and the result:
As viewed in Firefox. Any ideas what is causing this?
I don't see the issue .... Check out http://jsfiddle.net/vb7S3/
But I would still recommend not to use <button> tags and rather define style classes for #upload and #signin.
HTML
<button id="upload" class="top-button">Upload</button>
<button id="signin" class="top-button">Sign in</button>
CSS
#upload, #signin {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
Also <button> is tag may not be supported by all browsers.
Better Way...
HTML
<input id="button" class="upload-button" type="submit" value="Upload" />
<input id="button" class="sign-in-button" type="submit" value="Sign In" />
CSS
#button {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
Must include <input> tag inside the <form> ... </form> block.
see this demo on jsfiddle
you issue is id='upload' or id="signin"in
<div id="upload" class="top-button"><button>Upload</button></div>
there is some conflect between the CSS for upload and signin ids, possibly , some hieght value issue
It could be the height property that's causing this, since the purple area appears to be 29 px high. I'm not sure what the extra border below the text is, but it's possible that the border is being applied around the text instead of the entire button. Try adding border:none and see if that helps.
I'm trying to reduce the amount of html markup related to presentation in my front end code. In a form I'm currently working on, I want to have 2 column of form fields. One way that will definitely do what I want is this:
<html>
<head>
<style>
body {width:400px;}
.col {width:200px; height: 100px; float:left; display:block;}
label, input {display:block;}
</style>
</head>
<body>
<div class="col">
<label>Field1:</label>
<input>
</div>
<div class="col">
<label>Field2:</label>
<input>
</div>
</body>
</html>
I want to achieve the same results when rendered in browser WITHOUT the div tags in the mark up. So I did something like this:
<html>
<head>
<style>
body {width:400px;}
label,input {width:200px; height: 30px; float:left; display:block;}
</style>
</head>
<body>
<label>Field1:</label>
<label>Field2:</label>
<input>
<input>
</body>
</html>
This is close, but I want the <label> markup tag to appear before each <input> markup tag in the code like so:
<label>field1</label>
<input>
<label>field2</label>
<input>
But problem here is that I can't think of maintainable css code that will make the label appear on top of each input field. Is there a good way to make both the mark up and the rendered result appear the way I want to?
One solution is to put the input inside the label..
<label>Field1:<input></label>
<label>Field2:<input></label>
then example CSS..
label {width:200px; height: 30px; display:inline-block;}
input {display: block;}
or
label,input {width:200px; height: 30px; display:inline-block;}
Seem's hacky, but this works.
http://jsfiddle.net/pxfunc/VCaMe/1/
using class="col1" or class="col2"...
HTML:
<form>
<label for="i1" class="col1">Label 1</label>
<input id="i1" class="col1" type="text" value="Input 1" />
<label for="i2" class="col2">Label 2</label>
<input id="i2" class="col2" type="text" value="Input 2" />
</form>
CSS:
form {width:600px;background-color:#eee;overflow:hidden;}
.col1 {display:block;float:left;line-height:30px;width:301px;height:30px;background-color:#f00;border:0;}
.col2 {position:relative;top:-30px;display:block;float:right;line-height:30px;width:299px;height:30px;background-color:#ff0;border:0;}
That said I still agree with the first comment under the question, seems like over-thinking a solution that could use div's or some kind of <label> & <input> wrapper
If I want my textarea to be hidden, how do I do it?
Everyone is giving you answers, but not much on the reasons. Here you go: if you use the CSS rule visibility:hidden; the text area will be invisible, but it will still take up space. If you use the CSS rule display:none; the textarea will be hidden and it won't reserve space on the screen—no gaps, in other words, where it would have been. Visual example below.
So you want something like this to be totally hidden:
<textarea cols="20" rows="20" style="display:none;">
Example
/* no styling should show up for either method */
textarea {
background: lightblue;
border: 1px solid blue;
font-weight: bold;
}
<p><strong>Textarea (not hidden)</strong></p>
<textarea>Text within.</textarea>
<p>Some text after.</p>
<hr />
<p><strong>Textarea with <code>display:none;</code></strong></p>
<textarea style="display:none;">Text within.</textarea>
<p>Some text after. Neither height nor margin/padding/layout kept. No other styles visible.</p>
<hr />
<p><strong>Textarea with <code>visibility:hidden;</code></strong></p>
<textarea style="visibility:hidden;">Text within.</textarea>
<p>Some text after. Height and margin/padding/layout kept. No other styles visible.</p>
You have a few options, here are some examples:
Display:none
Visibility:hidden
Here is some example code for you to see for yourself
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Area Hidden</title>
<style type="text/css">
.hideButTakeUpSpace
{
visibility: hidden;
}
.hideDontTakeUpSpace
{
display:none;
}
</style>
</head>
<body>
<h1>Text area hidden examples</h1>
<h2>Hide but take up space (notice the gap below)</h2>
<textarea class="hideButTakeUpSpace" rows="2" cols="20"></textarea>
<h2>Hide Don't take up space</h2>
<textarea class="hideDontTakeUpSpace" rows="2" cols="20"></textarea>
</body>
</html>
See this jsFiddle Example
Using css: display: none; (this will make the textarea disappear completely, the space it would normally take up will not be reserved)
Hidden with occupy the space on current webpage.
<textarea style="visibility:hidden"></textarea>
Disappear on current webpage with no other effect.
<textarea style="display:none" ></textarea>
<!DOCTYPE html>
<html>
<head>
<style>
textarea.none {
display: none;
}
textarea.hidden {
visibility: hidden
}
</style>
</head>
<body>
<textarea class="none">The display is none.</textarea>
<br>
<textarea class="hidden">visiblity is hidden</textarea>
<br>
<textarea >This is visible and you can see a space taken visiblity:hidden</textarea>
</body>
</html>
Using the CSS visibility property should do the trick.