I have applied two different styles for two different text buttons.
.BC {
background-color : DC143C;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
.DE {
background-color : black;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
The look and feel of the buttons are great in Mozilla,chrome,Opera and Safari browser with the expected colour changes(ie the button appers with default length and the text is wrapped inside it).But in IE8 and IE9 the color is applied only upto the text what I have mentioned and adjusts itself with the buttton structure.
Can you please help me with this?
Hey used to # before in color
as like this
background-color : #DC143C;
and replace this one
.BC{background-color : #DC143C;}
Related
I just started to learn html and css again and I am struggling with some weird stuff that I didn't see before.
I have this button
.btn {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 30px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
Explore
this all good but if you pay attention there is some margin or just some space at the bottom
inside the blue square I just want to be the text height so it will be centered perfectly
I check your codes in my editor and it is correct perfectly. Your codes' problem is due to over-code or other ones.
This image is from my Chrome browser:
I have a donate banner i have created for my site .. it works fine on desktop
But the color wont work on mobile browsers
Here is the code for the Donate Banner
.Donate {
background-color: #ffee00e3;
height: 50%;
width: 100%;
padding-top: 5px;
}
.PayPalClk {
text-align: center;
}
.PayPalTxt {
text-align: center;
color: #2a2626;
padding-top: 1em;
font-size: 16px;
line-height: 0;
padding: 0;
text-indent: 0;
display: block;
}
.PayPalbtn {
align-items: center;
justify-content: center;
font-family: 'Cabin', sans-serif;
display: inline-block;
background-color: #2a2626;
/*Font styling*/
text-transform: uppercase;
color: #ffee00e3;
font-weight: 500;
font-style: normal;
font-size: 0.700rem;
letter-spacing: 0.3em;
/*End of font styling*/
padding: 14px 60px 16px;
background-size: 10px;
text-decoration: none;
margin: 0.550rem;
border: 1px solid rgb(42, 38, 38);
border-radius: 4px;
}
<section class="Donate">
<p class="PayPalTxt">Help us Raise Seed Capital In Order to improve our Products and expand our Team for a better Environment. <i class="fa fa-smile-o"></i></p>
<div class="PayPalClk">
<a class="PayPalbtn" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2PE57UH79H8TY" target="_blank">Donate<i class="fa fa-gift"></i></a>
</div>
</section>
Any help or advise on how i could make it work would be helpful
Thanks
You have set the background-color on .Donate to #ffee00e3 and not #ffee00 (Should be in #RRGGBB format).
This might cause undefined behavior since every browser will handle it differently. Some browsers might ignore the background-color altogether (like you are seeing on mobile browsers), or some browsers might be reading it as #ffee00 (which is the color you are seeing on desktop browsers), ignoring the last integer.
I created an HTML 5 form where my legends all have background colors. My aim, which is accomplished in FireFox, Google Chrome, IE 9>, is to have text then background color extend the width of the page. The problem however is that in IE8 and lower versions it only extends to the end of the words. This is what I have so far CSS wise for my regular page:
.FormArea legend
{
font-weight: bold;
font-size: 1.2em;
line-height: 2em;
display: block;
color: white;
background-color: #A70C1E;
width: 95%;
padding-left: 7px;
}
May I have some insight on how to make the necessary adjustments for IE8
I just used a padding:
.FormArea legend
{
font-weight: bold;
font-size: 1.2em;
line-height: 2em;
color: white;
background-color: #A70C1E;
width: 80px !Important;
padding-right: 650px !important;
display: block;
}
.FormArea legend span
{
width:100%;
}
I have an infoBubble with some text and images. The right aligned image (arrow) is pushed down in Firefox (Mac) but not Safari or Opera dependent on the length of the text to the left and above. See the marker over Australia: http://www.hostelbars.com/map_test_v3_3.html
Here's the css:
.infowindow {
background-color: #000;
color: #FFF;
font-size: 18px;
font-family: Helvetica Neue, Helvetica, Arial;
text-shadow: 0 -1px 0 #000;
font-weight: bold;
position: relative;
overflow: hidden;
}
.infowindow .iwPhoto {
background-color: #F00;
position: relative;
padding-bottom: 1px;
padding-top: 2px;
padding-left: 5px;
}
.infowindow .iwName {
background-color: #0F3;
line-height: 33px;
white-space: nowrap;
position: relative;
margin-left: 115px;
margin-top: -70px;
padding-right: 5px;
padding-top: 2px;
}
.infowindow .iwCity {
background-color: #C03;
line-height: 32px;
margin-left: 115px;
padding-bottom: 1px;
}
.infowindow .iwCity .iwArrow {
background-color: #0CF;
padding-right: 5px;
padding-left: 5px;
margin-top: 3px;
float: right;
}
Aside from the images I don't want the div's to have a fixed width. Would appreciate some help.
Brendon
Seems to only happen the first time, and for items with city values longer than name values. This suggests you didn't set width and height values for your img element (arrow.png), so the first time it has no idea what size it's going to be, and subsequent times it does.
What you should probably do is change it to a background image, as it's merely an iconified decorative image meaning 'next' or 'more', and thus should be in CSS's realm of style, not HTML's realm of meaning (where 'img' lives). See this list of image replacement techniques.
Otherwise, you could just apply img[src$="arrow.png"] { width: 29px; height: 29px; }, or add width and height attributes to the img element.
Help a CSS newbie out here. What I'm trying to do is very simple.
As I said in the image, I want the text to be in the same line. I tried everything i could think of.
Here is the index.php:
http://pastebin.com/9LVVFgUZ
Here is the style.css:
http://pastebin.com/v8Eius2A
Thanks.
Original code:
.box_con a {
color: #111111;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Remove the float, make the a element block-level and add a left margin like so:
.box_con a {
color: #111111;
display: block;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
margin-left: 150px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Result:
Adding to .box_con a these rules: float: left and width: 470px seems to get what you asked for in your image.