I'm currently in the process of styling a website and have hit a bit of a rut.
I'm trying to target and style this:
<asp:Button ID="cmdUpdate" runat="server" Text="Update Details" CssClass="update_btn" />
Using this CSS:
div#account .update_btn {
width:108px;
height:27px;
background:url("/furniture/images/buttons/update.jpg") no-repeat 0 0;
clear:both;
float:left;
}
However when I inspect the button in firebug it doesn't appear.
It's currently being styled by the code below but the one above doesn't even appear.
div#account input {
border: 1px solid #ccc;
width:150px;
padding:5px 0 5px 10px;
margin: 0 0 10px 0;
float:right;
}
I don't know ASP so I can't make alterations and I can't use input.button[type="submit"] as it isn't supported by IE7.
Any help or guidance would be much appreciated.
Put a comma in your style it should work fine.
div#account, .update_btn {
try this
div#account input.update_btn {
width:108px;
height:27px;
background:url("/furniture/images/buttons/update.jpg") no-repeat 0 0;
clear:both;
float:left;
}
Related
I have added schema markup to my website, and I have placed it at the bottom on my page in the footer. On my CSS it says
#copyright {
float:left;
margin:13px 10px 0 23;
width:380px
}
But when I browse it through Firebug it doesn't show the margin, only the float and width. It was showing it before, and all I changed was the first and last numbers of the margin trying to get the schema markup exactly where I wanted it.
One thing I see is that the 23 in your margin list does have 'px' on it. Could that be the issue? Try updating it to:
margin:13px 10px 0 23px;
You have syntax errors:
This:
#copyright {
float:left;
margin:13px 10px 0 23;
width:380px
}
Should Be:
#copyright {
float:left;
margin:13px 10px 0 23px;
width:380px;
}
Notice the missing semicolon after width. This could cause the previous styles from being read. Also the left margin won't be read because you didn't define a unit.
This should work:
#copyright {
float:left;
margin:13px 10px 0 23px;
width:380px;
}
How to remove the border around the square?
How it looks:
My HTML:
<input id="black" type="image" src="html5-canvas-drawing-app/images/color-swatch-brown.png" onClick="changeColorBlack()">
My CSS:
#black{
border:none;
outline:none;
background:none;
padding:0;
}
To disappear with it, set it's thickness to 0 instead:
border: 0;
border: 0;
put in the My css file....
For whatever reasons, stylesheets text/css are not very universally-predictable. Still, this should clear you all around:
img#black {
border: 0px solid #00000;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
Toss that in your style.css or whatever. Not all of it may be necessary at the moment, but it will protect you from weird inheritance problems that may arise down the road.
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
I'm hoping someone could help me out! I'm trying to achieve the desired effect seen on this wordpress template from themeforest (http://themeforest.net/item/lespaul-retina-responsive-wordpress-theme/full_screen_preview/4083224 -- scroll right down to the bottom).
Basically having a pixel divider repeat across the page, and have text embedded on the left side. I've tried SOOO many different CSS codes and html... It should be an easy thing to do but I just can't seem to get it.
The closest I've gotten a to achieve this effect is the horizontal divider with Text under it...
/////////////////////////////
TEXT(but centered)
but I would like to have
TEXT ///////////////////////////
Here's my code!
div.divider17a {
height:5px; width:100%; border:0; background:url(images/divider17.png) repeat-x;
margin:35px 0 25px;
padding:0;
text-align:left;
float:left;
width:100%;
}
div.divider_notext {
margin:50px 0 20px;
}
div.divider_left1 {
text-align:left;
}
HTML
<div class="divider17a divider_left1"><h3>Strategic Planning</h3></div>
Any help would be much appreciated... Thanks =D
Is there a reason you're not just using the same styling they use anyway?
<h3 class="widget-heading separator-heading">
<span class="text-holder">Companies that trust us</span>
</h3>
.separator-heading {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;
}
.separator-heading .text-holder {
display: inline-block;
padding: 0 .6em 0 0;
background-color: white;
}
Can you provide a link to your page and subsequent code? Also if you look at their code this is what they are doing:
.separator-heading, hr.diagonal {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;
}
If you have to use text you can use the following CSS style:
.divider17a h3:after{
content:"//////////////////////////////////////";
overflow:hidden;
}
and add the following to you container:
div.divider17a{
overflow:hidden;
white-space:nowrap;
}
Demo: http://jsfiddle.net/kyBaN/1/
Alternatively, use a background image.
<container>
<element1>
</element1>
<element2>
</element2>
</container>
#container {
position:absolute;
right:33px;
top:15px;
}
#element1 {
position:relative;
float:right;
height:31px;
background:url(../main_bg.gif) repeat-x top left;
border: 1px solid #6a6a6a;
clear:both;
}
#element2 {
position:relative;
float:left;
clear:both;
background-color:#f8f0ce;
border-left:1px solid #6a6a6a;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
}
The reason your container seems to be displayed as wide as it content in other browser is because it is out of the "body" and displayed in "nothing" (ence, as wide as its content). IE6/7 seems to treat this differently.
I do not have your issue in IE8, so I suppose you want this for IE6 or 7. It also seems you want 2 box, one under each other (clear).
From the code and the style you supplied, it seems we could simply get rid of the floating and put a text-align:right.
Would this solution work for you?
It does not work in IE6 however.
This one does however, but require a <br /> (and display:inline. Thanks #kei for the suggestion.)