This is my css for a paypal sprite I have made..
Image below shows what we get in Internet Explorer and what we get in Firefox ..
The code to display the sprite is:
.ppsprite {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px 0px transparent;
width:200px;
height:100px;
position:absolute;
left:54px;
}
.ppsprite:hover {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px -100px transparent;
}
The code to display the sprite ( html )
<input class="ppsprite" type="image" name="submit" alt="">
The screenpic ( internet explorer and firefox )
The sprite works perfectly in all browsers, but you can see a shitty border in IE and a kind of missing image icon top left.
In chrome and safari, pretty much same ( but shows alt text on top of sprite )
Add a src attribute to your input tag:
<input class="ppsprite" type="image" name="submit" alt="" src="images/blank.gif">
Just create a file called blank.gif
You don't need to do anything with it, just make sure it's in the right directory.
don't use an image-input for your sprite - obviously this should show a broken-link-icon as it must contain an image (set via the src-attrtibute) but you dont set one. maybe you can replace the input with an a (a link) or a button (type="button" or type="submit"). the later should work without changing anything else as a type="submit" would still submit the form, just like type="image" does (and i don't think you'll need to know the klicked x/y-coordinates in this case).
the border simply appears because an input-image has a border by default in some browsers - simply set border:0; for .ppsprite (but, as said, you shouldn't use an input-image at all in this case).
Related
So I have tried manipulating the style within the chrome inspector and copying it directly into my stylesheet, but it is not reflected when I run it again on chrome. The code runs fine on firefox otherwise and also if I manually input the change in chrome inspector.
Not sure what the issue is as I've tried adding the !important as well and making sure of the hierarchy is of the right order.
css code
.select2-container--default .select2-selection--single {
border: 1px solid #ced4da;
}
.is-invalid .select2-container--default .select2-selection--single {
box-shadow: none;
border: 1px solid #dc3545 !important;
}
html
<div class="form-group d-flex flex-wrap justify-content-between {{ $errors->first('contact_name', 'is-invalid') }}">
<label for="contact_name">Name</label>
<span class="message">{{ $errors->first('contact_name', ':message') }}</span>
<input type="text" class="form-control" id="contact_name" name="contact_name" placeholder="e.g. John Smith">
</div>
I have also cleared the cache and checked to see the source file that everything is as per updated. It is just not showing on the result ONLY in chrome
Sometimes it needs hard reload.
Hold down Ctrl and click the Reloadbutton. Or, Hold down Ctrl and press F5.
Ctrl+F5
You can also clear the cache using the chrome debugging tools. Press F12 then select Application then select Clear Storage make sure the cache checkboxes are checked, then click the clear site data button.
Try Hard Reload by right click on reload button.
Here's a description of the problem: for starters, I have a background logo image displaying on the webpage version (screen media) at the top of the page spanning the entire width of the page (basically a masthead).
Then I added a print stylesheet and have been hiding and showing certain parts to optimize the experience for users and their printers .
However, and here's the problem, I noticed that on IE in every page of the print preview the logo image is being added to the top of every page in the print out when the page content is enough for more than one page in the total number of pages. So if there's enough content for 3 pages then in all those three pages the logo image appears at the top every page in the print out, when it should only appear in the 1st one.
I've checked my CSS and I can't find whats going on. I don't have the section that contains the CSS class that defines the background image repeated more than once. This only happens on IE. Not on Chrome nor Firefox.
Here's an excerpt of the HTML:
....
<body>
<div class="repeating-bg-img">
<div class="container">
...
<!-- /.inner content that is long enough for more than one page -->
...
</div><!-- /.container -->
</div><!-- /.repeating-bg-img -->
</body>
</html>
and here's an excerpt of the CSS in the print.css stylesheet with media = print :
.repeating-bg-img {
background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}
Has anyone encountered this before on IE? If so, do you have a fix for this?
I ran into the same problem today. One solution is a structure like this:
<body>
<div id="background" style="position: relative;">
<img src="bkgnd.png" style="position: absolute; z-index: -1;">
<div class="container" ...>
...
</div>
</div>
</body>
The basic idea is to take the image out of the flow but position it relative to its containing <div>. The z-index pushes it behind other elements. So this can be used as any kind of column header.
One upside to this is that the background image will print even if the "background images" option isn't set in the print dialog. I'd like to see a proper solution as well though.
Edit 2013/07/23:
It looks like the CSS3 property will be box-decoration-break. This isn't going to help with older versions of IE but the spec is available here: http://www.w3.org/TR/css3-background/#box-decoration-break
If what you really want is a masthead, I also thought this might work:
#media print {
div#background { background: none; }
#page :first { background: url('bkgnd.png') center no-repeat;
margin: ...; }
}
But it looks like that is CSS3 as well. Chrome loads the image from the server but only honors the 'margin' attribute; Firefox and IE9 seem to ignore all of it.
I am working on my new site and I checked it in multiple browsers: ie6+, chrome, safari and firefox.
I noticed that firefox display the top offset of my button in wrong position - like top=-1 and I cant fix it in NORMAL way...
Here's an example
http://jsfiddle.net/7XRZG/
Thank you
button inputs and text inputs seem to have different default vertical align properties in firefox. Try explicitly setting them to the same thing. For instance:
<input type="text" style="height:19px;border:1px solid silver;font-size:10px;vertical-align:text-top;">
<input type="button" value="Search" style="margin-left:5px;background-color:#f5f5f5;color:#707070;border:1px solid #e3e3e3;font-size:9px;padding:0 10px;height:21px;font-weight:700;vertical-align:text-top;">
I use asp .net image button to show a static jpeg file,
How to make image button has pressed effect
This is what I have so far:
<asp:ImageButton ID="Login_Button" runat="server" onclick="Login_Button_Click" ImageUrl="~/Image/Login.jpg" />
How to remove red cross when ImageUrl not set?
.Login
{
height:50px;
width:100px;
margin: 5px;
background: url(Image/Login.jpg) no-repeat 0 0;
}
.Login:hover
{
background: url(Image/Login_Pressed.jpg) no-repeat 0 0;
}
This might help with rollovers.
Or, this one would work if you only want it to change when you press the button, instead of when you mouseover it.
I'm not totally sure what you're asking...
Only Link button can do this without a invalid icon
<asp:LinkButton ID="Login_Button" runat="server" style="float:left;"
onclick="Login_Button_Click" CssClass="Login" />
To remove the "red x," you could reference a placeholder transparent gif. They're usually named something like "spacer.gif" or "pixel.gif" and they're just a single transparent pixel. They provide the valid reference when an image file is required but are very small and, of course, transparent. What you're seeing with the "red x" is the image button not being able to find the image file. When no file is referenced or when it can't be found, some browsers (IE) will show the red x.
<asp:ImageButton ID="Login_Button" runat="server" onclick="Login_Button_Click"
ImageUrl="~/Image/pixel.gif" />
Or, as you've answered your own question, you can switch to a LinkButton and go from there.
CSS is definitely the way to go if you want the button to react to mouse actions, and the CSS you provided appears to be valid. You might find, however, that some browsers don't interpret the :hover pseudo class unless it's attached to an anchor (link) tag. If you've had trouble getting the mouse actions to work correctly in some browsers when you use the ImageButton, this is probably why.
I want to add an image, instead of the default button.
I already have a CSS class for the image, will this work?
<asp:Button ID="..." CssClass=""/>
I am trying it now, and the image is all scrunched up. Maybe it's a CSS issue?
Why not use an ImageButton control?
Although you can "replace" a button with an image using the following CSS...
.className {
background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
border: 0;
height: 61px;
width: 250px
}
...the best thing to do here is use an ImageButton control because it will allow you to use alternate text (for accessibility).
I actually prefer to use the html button form element and make it runat=server. The button element can hold other elements inside it. You can even add formatting inside it with span's or strong's. Here is an example:
<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>
I dont know if I quite get what the issue is. You can add an image into the ASP button but it depends how its set up as to whether it fits in properly. putting in a background images to asp buttons regularly gives you a dodgy shaped button or a background image with a text overlay because its missing an image tag. such as the image with "SUBMIT QUERY" over the top of it.
As an easy way of doing it I use a "blankspace.gif" file across my website. its a 1x1 pixel blank gif file and I resize it to replace an image on the website.
as I dont use CSS to replace an image I use CSS Sprites to reduce queries. My website was originally 150kb for the homepage and had about 140-150 requests to load the home page. By creating a sprite I killed off the requests compressed the image size to a fraction of the size and it works perfect and any of the areas you need an image file to size it up properly just use the same blankspace.gif image.
<asp:ImageButton class="signup" ID="btn_newsletter" ImageUrl="~/xx/xx/blankspace.gif" Width="87px" Height="28px" runat="server" /
If you see the above the class loads the background image in the css but this leaves the button with the "submit Query" text over it as it needs an image so replacing it with a preloaded image means you got rid of the request and still have the image in the css.
Done.
Assuming a Css class of "image" :
input.image {
background: url(/i/bg.png) no-repeat top left;
width: /* img-width */;
height: /* img-height */
}
If you don't know what the image width and height are, you can set this dynamically with javascript.
.my_btn{
font-family:Arial;
font-size:10pt;
font-weight:normal;
height:30px;
line-height:30px;
width:98px;
border:0px;
background-image:url('../Images/menu_image.png');
cursor:pointer;
}
<asp:Button ID="clickme" runat="server" Text="Click" CssClass="my_btn" />
You can add image to asp.net button. you dont need to use only image button or link button. When displaying button on browser, it is converting to html button as default. So you can use its "Style" properties for adding image. My example is below. I hope it works for you.
Style="background-image:url('Image/1.png');"
You can change image location with using
background-repeat
properties. So you can write a button like below:
<asp:Button ID="btnLogin" runat="server" Text="Login" Style="background-image:url('Image/1.png'); background-repeat:no-repeat"/>