I need to get the area outlined in red in the image below completely transparent. I'm new to this HTML stuff, but I've tried searching for transparency and opacity in the HTML editing section and I don't seem to be able to find the correct bit to edit.
If there's a simple CSS code someone could provide me with that would be even better.
I'm using the Picture Window theme on Blogger.
Thanks :)
The CSS I would use is background-color: rgba(0,0,0,0); (red,green,blue,alpha)
for alpha, 0 is transparent, 1 is solid, so 0.5 would be halfway transparent
If you are unsure where to put this css, you'll need to identify the div; you can use developer tools in most popular browsers to find the ID or Class of the div; right click on it and choose "Inspect" or "Inspect element" or similar.
EDIT:
The div you need to alter is <div class="content-outer">....</div>
add the style background:none; to remove the existing background.
<div class='content-outer' style="background:none;box-shadow:none;">
<div class='content-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
see here
If you want to ensure the box-shadow (fuzzy outline) does not appear on older browsers, see https://www.w3schools.com/cssref/css3_pr_box-shadow.asp for browser specific css. For example for older versions of chrome you would also add -webkit-box-shadow:none;
Related
I've made this fiddle, to demonstrate my problem and question.
I want to have the div that holds all the text have an opacity so that you can see the background (for some reason the background won't show up, works on my machine).
However, in my example all the text has got the same opacity, and that isn't useful for reading.
So basically, how do you have full opaque text, I assume that any child elements will be set to the opacity setting of the parent?
html:
<div class="mainPage">
<h1>Welcome</h1>
<p>... some text ...</p>
</div>
css:
.mainPage {
opacity:0.6;
}
You want to use
.mainPage {
background:rgba(0,0,0,0.6);
}
where 0,0,0 represent black (255,255,255 would be white then) and 0.6 alpha channel
but it is CSS3 so check for the compatibility. Also if you want to this to work in older versions of IE, you could consider PIE CSS
EDIT: As other have mentioned, there are other solutions possible here. To use repeating transparent 1x1px image as your background (which will not work in IE6 if you care?), there are also some php scripts to include to your css that will generate those images automatically for you.
Or another solution would be to use another div with opacity and position it absolutely behind your content, so that div wouldn't contain your content but anyway would be behind.
Opacity affects whole element, so there is no way to do that just using "opacity".
You may set RGBA color to background (last argument is opacity), use transparent BG image or create another div (wrapper) with opacity.
If you need support old browsers, see fiddle with wrapper:
http://jsfiddle.net/nick4fake/N78G8/
<div class="a"><div class="b b2"></div>My text example</div>
<div class="b">My text example</div>
Here b2 is wrapper class.
Also, check this link:
http://css-tricks.com/forums/topic/css-transparency-in-wrappers/
Two possibilities:
Use rgba colours:
background-color:rgba(255,255,255,0.6);
Though you'll want to check the compatibility of this, as it's CSS3. The only browsers that it doesn't work in are Internet Explorer 6, 7, and 8 (and less), so you might be ok using this - it works in all other major browsers.
Make a semi-transparent PNG in Paint.NET, Photoshop, or some other similar program, and use that as the background image:
background-image:url("./myTransparentImage.png");
This has the benefit of working on pretty much every browser, except probably IE6 and the like as it doesn't support alpha transparency.
You'd probably want to make it a 1px × 1px image, to keep the size down, and then that would tile across the whole element.
I am working on editing our intranet site and basically all I am able to change is the CSS. Although I have gotten it to look like I want with these limitations, I have one little snag. If I was told correctly, the html is generated via a .aspx file, and in this html is the inline CSS applied to the navigation menu of
border-collapse: collapse;
When I preview it in Chrome and Firefox it works fine, but when I view it in IE10, the navigation is pushed to the left. If I disable it using the developer tools, it works fine, but I can't access the html since it is generated, so I can't, at lease as far as I know, create a rule that can trump it. I have zero experience with ASP, but I have opened the file and looked through it, but it's all greek to me. Any thoughts? TIA!
Use !important in your stylesheet to override the inline value, like this:
Inline style:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
Stylesheet:
div[style] {
background: yellow !important;
}
Note: This will result in a div with a yellow background, even though the inline style said for the background to be red.
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image
I am wondering if there is some way to make an box have the Safari's light highlight all of the time. I would assume there would be a way to replicate this, however I have not found one.
Thanks for any help!
If there is a doubling up, you can remove Safari's blue outline with outline:none.
Currently the only way to achieve this would be to use a background image. You'd take a screenshot from the field and use that as the background for the input. The main drawback here is that you can only have a fixed-size field because the image is static.
However, you may wish to take advantage of some CSS3 styles such as box-shadow which will work in Safari, Chrome and Firefox. Take a look at this page for more info. For your example you'd probably want something like this:
box-shadow: 0 0 4px #aaf;
One final point to make - if you replicate Safari's highlight outline, it's very likely Safari itself will "double up" the effect, so you need to be careful...
I have a site that has a simple HTML button in a form. All browsers show this button correctly. However, in Firefox 2 and Seamonkey it appears just as a solid grey square that cannot be clicked on and that has no text.
<input id="getaudiobutton" type="button" value="Get Audio" onclick="convert()" />
For those of you that have Firefox version 2 or Seamonkey, please see my site
Thanks all
SOLVED
No idea why but what I did was increase the size of the div holding the button so that the button can be shown fully. There wasn't enough space for the button to be clicked. Firefox 2 and Seamonkey managed to find this a bit troublesome.
Thank you all for your help. :)
From what I can see just by viewing it in Seamonkey and looking at the contents of the page and your CSS, you may want to check the style for the div that the button is contained in. I can see the button in Seamoney, but it is cut off at the very top, only allowing about 1-3 pixels to show. I can click it as well.
My guess would be that since you are setting a static height of 34px for the style that is applied to the parent div of the button, it is cutting off most of the button.
I observe the same behavior as s13james (+1 for that) but have some more things I want to point out.
You may want to rethink your use of line-height and height there, as the wrapping of that input element to the next line with the combination of those values has a lot to do with your trouble.
I see you're applying the same style via id and class, however that style is declared only for use as a class:
div.w_span_auto{
background:url(../images/wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
text-align:left;
border:none;
}
(For an id, you'd need to have declared it as div#w_span_auto.)
I'm not sure why you're declaring it twice either. There's an identical declaration later in the same css file.
Cheers.
Are you sure JS is enabled on your copy of Firefox?
Do you really have to worry about FireFox 2? It also only has a 3% market share:
http://marketshare.hitslink.com/report.aspx?qprid=0
DO you need a type="submit", instead of type="Button"?