This is my jsfiddle
Here is the signup code, the code can be fully viewed in the jsfiddle
<li class="footer_row" align="center"><a href="" class="tsc_buttons2 grey" >sign up!</a></li>
All the Signup options is left aligned, in mozilla firefox , but it is perfect in the chrome browser in other few browsers, i just want to make it aligned centre in all the browsers, how can i make it ??
Please give text-align:center in your div.tsc_pricingtable03 li.footer_row class.
div.tsc_pricingtable03 li.footer_row {
background-color: #E2E2E2;
border-bottom: 1px solid #CCCCCC;
float: left;
height: 40px;
padding-bottom: 6px !important;
padding-top: 14px !important;
text-align: center /*changes here*/;
width: 100%;
}
you mixed the class name with attributes, should be:
<li class="footer_row align_center"><a href="" class="tsc_buttons2 grey" >sign up!</a></li>
try this.
<li style="text-align:center" class="footer_row"><a class="tsc_buttons2 grey" href="">sign up!</a></li>
Use position as absolute , and left alignment as 30 % , it is followed below,
.tsc_buttons2.grey {
position: absolute;
left: 30%;
Use style="text-align:center" inside the List Tag
Related
Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)
<div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px" text-align="center">
<span display="inline;" float = "center;" style="color: white;">Visual Analysis of US Accidents Data </span>
<button position = "absolute;" background-color ="black;" color = "white;" float ="right;" display="inline-block;" padding-left = "100%;" id="reset" onclick="reset">Reset
</button>
</div>
display, float, etc.
are all CSS variables that should be included in the style="" part of the HTML, not as keyword parameters. I have demonstrated the correct way to insert them in the snippet below. You can also use right: 0 to align an element to the right side of its parent. It is often more reliable than float. I used right: 10px in this example so the button had a bit of breathing room on its right side.
<h1>Only fixed syntax:</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px; text-align: center;">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; color: white; background-color: black; float: right; display: inline-block; padding-left: 100%" id="reset" onclick="reset">
Reset
</button>
</div>
<h1>Fully fixed version</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; background-color: black; color: white; float: right; display: inline-block; right: 10px" id="reset" onclick="reset">
Reset
</button>
</div>
You have quite a few issues with your code, so let's clean them up and break down what's happening:
First off, don't style inline unless you have some specific reason for doing so. Use classes or ids or even just generic selectors but separating your HTML and your CSS will make your life much easier(and ours when you come looking for assistance! ;) )
You have tags that are opened and never closed which is causing some problems. The float isn't doing anything for you. If you want to position your button to the right of the page using absolute you need to tell it to be on the right using the right attribute. Your headline is centered, you just can't see it because it's white on a white background.
If you are going to style inline, you need to include your style information in the style="" section, otherwise, you're risking issues or invalid code altogether.
Let me know if you need any additional help or explanations :)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#project-heading {
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.title {
display: inline;
float: center;
color: white;
}
.btn {
position: absolute;
right: 10px;
background-color: black;
color: white;
display: inline-block;
}
<div id="project-heading">
<span class="title">Visual Analysis of US Accidents Data </span>
<button class="btn" id="reset" onclick="reset">Reset</button>
</div>
I am trying to show an image inside the customized circular li. I just want to show a success tick image in that li. I have a CSS as -
span.round-tabs {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
li.success span.round-tabs.one {
background-image: url('img/if_Tick_Mark_Dark_1398912.png');
}
<li class="success">
<a href="#" aria-controls="home" id="DivPatientDetails" name="PatientDetails" >
<span class="round-tabs one">
<i class="icon icon-profile-male"></i>01
<h4>Patient's Details</h4>
</span>
</a>
</li>
But I am getting the result as:
instead of:
What am I missing here?
Either use
background-position: center center;
or use
background-position-y or background-position-x to position the image correctly.
Then you may want to make sure the size is correct using the background-size rule in CSS. If you post a jsfiddle, I'll be happy to implement this solution into that for you to see.
CSS:
.share {
width: 150px;
height: 20px;
background: #000;
float: right;
white-space: nowrap;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 3px;
background-color:rgba(255, 255, 255, 0.5);
border-bottom-left-radius: 5px;
box-shadow: 0px 0px 10px #888;
vertical-align: top;
}
HTML:
<div class="share">
<div class="fb-like" data-href="http://bronies.info/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" style="width:47px; overflow:hidden; top:-3px; left:3px;"></div>
Tweet
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" style="width:32px; overflow:hidden;"></div>
</div>
Chrome, Safari:
Internet Explorer, Firefox, and Opera:
If you can see what I did in my HTML style property, I used top:-3px, and I did this before testing my website out on other browsers (Chrome is my primary web browser). I used top because a quick Google search led me a page instructing me to do so. Now that this solution doesn't work, how would I adjust it to align and work on all web browsers?
My solution is:
.fb-like.fb_iframe_widget span{
vertical-align: top !important;
}
You should remove top:-3px; completely. Because you don't have position:relative;, which is required (something other than static) to activate positioning, then Webkit (Chrome, Safari) is correctly ignoring it, but Internet Explorer, Firefox, and Opera are mistakenly honoring it (-3px shift).
EDIT:
From the comments...
Facebook's script adds a <span> inside your <div> which then triggers a CSS rule they also provide: .fb_iframe_widget span { vertical-align: text-bottom; }. I suggest adding float: left; to all three of your <div> tags so they will not share a common flow (or baseline).
try using top: auto and look at the result, check and see if it is in the same position in all browsers. If it needs to be aligned virtually then use bottom: 3px; (or any appropriate value that suites your need)
do not forget you have to position:relative; to your code
so the final styling for the facebook button should look something like this :
width:47px; overflow:hidden;position:relative; top:auto; bottom:3px; left:3px;
I suggest using display: inline-block; and vertical-align: middle; for container of Facebook button ...
I added vertical-align: text-bottom; to the <span> enclosing each button (to match what Facebook does), and everything lines up perfectly in Chrome, Firefox, and IE. (My spans also have display: inline-block if that matters.)
Try adding this to your "share" div. I don't know how it looks on other browsers but it seems to make things line up in Chrome.
font-size: 0.1px;
I ended up wrapping each button in their own div, and setting the div to
display:inline-block; white-space: nowrap; vertical-align:top;
and then added the following to the facebook specific div:
#facebookButton > div > span {vertical-align:baseline;}
Adding the following style to my css aligned the facebook share button with other social icons.
.fb_iframe_widget{vertical-align:top;}
This is my solution: Wrap each social button by an inline-block element. And each social button has display attribute is block
HTML
<div class="social-share clearfix">
<div class="social-share-item">
<div id="fb-like" class="fb-like" data-href="{url}" data-layout="button_count" data-size="small" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div class="social-share-item">
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
</div>
<div class="social-share-item">
<div class="g-plus" data-action="share"></div>
</div>
</div>
CSS
.social-share {
display: block;
background: #f9f9f9;
padding: 0.2em 0.4em;
margin-top: 1em;
}
.social-share-item > * {
display: block;
float: left;
}
.social-share-item {
display: inline-block;
}
I was having the same problem with mobile browsers and solved it with the following:
.fb-like span{
vertical-align: initial !important;
}
I'm applying a css class for the following asp.net custom control which renders in browser something like this:
<div class="box search_mlo">
<div class="gray_box">
<div class="blue_box">
<div>
<input id="Search_srcText" class="btn" type="text" onblur="return objSearchWidgetLibrary.searchLostFocus(ECMSSearchTextBox2_srcText)" onfocus="return objSearchWidgetLibrary.clearText2(ECMSSearchTextBox2_srcText)" onkeypress="return objSearchWidgetLibrary.fnTrapKD2('ECMSSearchTextBox2_srchAnchor1',event)" name="ECMSSearchTextBox2$srcText">
</input>
<a id="Search_srchAnchor1" class="btn" onclick="return objSearchWidgetLibrary.onsearchclick1('ECMSSearchTextBox2_srcText','ECMSSearchTextBox2_srchAnchor1')" href="../System/SearchResults.aspx?k=">
<span>Search</span>
</a>
</div>
</div>
</div>
</div>
The CSS class is:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
}
.blue_box div input.btn
{
background: url("/publish/images/bg_search.jpg") no-repeat scroll 9px 6px #FFFFFF;
border: 1px solid #0064AD;
color: #BFBFBF;
float: left;
font-size: 1.3em;
font-style: italic;
font-weight: bold;
height: 21px;
margin-right: 4px;
margin-top: 2px;
padding: 5px;
width: 328px;
}
so it looks something like search box and button to submit. This control is used by other sites so, for some sites we require only hyperlink search button and in some we replace image. But in this case I'm trying to replace image but I'm getting only half of the image something like below..
http://i.stack.imgur.com/Dfaqn.jpg
You can see a search text coming inside that image.
The prototype is something like this and the first button should match with this:
http://i.stack.imgur.com/QpRmg.jpg
I cannot remove that span tag present inside anchor tag since in other sites its working fine and removing that would create problem in them.
can any one help with feasible solution where I can get the entire image.?
Thanks in advance.
#Sayed; a tag is an inline element & inline elements didn't take height, width, vertical margin & padding. So; give display:block in your css for a tag like this:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
display:block
}
UPDATE #2: I have solved almost all my issues bar the one major one. With the same structure and CSS IE7/6 displays each a with 100% width of it's container. I need this to no happen. Besides that everything else is fine. Can anyone enlighten me?
UPDATE: Should Look Like This
I have the following html page (detailed below). It simply renders 2 styled buttons from the links. My problem is IE6 & 7 renders it differently than Firefox, Safari, IE8 and Chrome that all render it correctly.
I have been banging my head against the wall for a day now trying to make it work in IE6/7. Can anyone offer advice as to what I am doing wrong?
Thanks
<html>
<head>
<style>
.niw-button {
background: #1f81c0 url(niw-btn-gradient-normal.png) repeat-x;
border: none;
color: #fff;
display: inline-block;
font-weight: bold;
margin-right: 6px;
min-width: 95px;
padding: 2px;
text-decoration: none;
}
.niw-button:hover {
background: #5e698f url(niw-btn-gradient-hover.png) repeat-x;
}
.niw-button > .niw-button-contents {
border: 1px solid #73b1da;
}
.niw-button > .niw-button-contents:hover {
border: 1px solid #99a1bc;
}
.niw-button .niw-button-icon {
background-position: center;
background-repeat: no-repeat;
float: right;
height: 25px;
width: 27px;
}
.niw-button .niw-button-text {
height: 25px;
line-height: 1.5em;
padding-left: 5px;
padding-right: 27px;
text-align: center;
text-transform: uppercase;
}
.right-align {
float:right;
}
.niw-icon-cancel {
background-image: url(niwater_cancelIcon.png);
}
</style>
</head>
<body>
<a class="niw-button right-align" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
<a class="niw-button" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
</body>
</html>
EDIT: Now that I understand your image:
Just make your <a> elements block elements with display:block and put some kind of span inside of them to hold the icon. Or you could make the whole thing an image...
IE6/7 doesn't support display: inline-block, IE6 doesn't support the child (parent > child) selector. So you probably should look into those points in your css...
Edit: I actually don't get correct rendering in IE8, which is what I address below:
For a start, you should put the <a> elements inside the elements rather than the other way round. Block level elements shouldn't really exist within inline elements. e.g.
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div>
</div>
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div>
</div>
This fixes the positioning for me but there is a subsequent loss in styling. I haven't tinkered with the CSS to correct that yet but it should be straightforward. Secondly, you have an awful lot of classes to deal with a straightforward issue. Arguably you should only need one class in the outer div to identify what's happening inside, and then your CSS can descend from there.
Just one tip for a resource to the button/link problem in general:
http://mezzoblue.com/archives/2008/09/17/anchor_butto/
I'm actually confused myself. How are they supposed to look? If you don't let us know what you're intending to do, it's very difficult to fix the problem.