The css is exactly like this:
body {
background:#FFFFFF none repeat scroll 0;
margin:2px 5px;
font-family:Arial,sans-serif;
font-size:10pt;
}
But from firebug I see the style is:
body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 50%;
font-family:Arial,sans-serif;
font-size:10pt;
margin:2px 5px;
}
Why does firefox add those un-needed styles? How can I get rid of them?
It is added by the rendering engine for its own use, so you cannot get rid of them.
See this question for details.
It is not adding anything for me. Are you sure these are not default styles saved in your default user stylesheet?
Related
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 writing a mobile website and I've looked for hours at a centering problem I'm having.
The website is http://peatarian.com and you can emulate the iphone browser using transmog.
The CSS can be found at this page, but the most important parts are the following :
html, body {height:100%;float:center;text-align:center;}
body {background-url:url(raypeat.gif) no-repeat left top;margin:0; padding:0; text- align:center;color:black;}
body,td,input,textarea {font-size:100%; font-family:Verdana, Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
p {margin-top:0;}
table {background: none repeat scroll 0 0 white;}
and
.qa-nav-main {float:center;clear:both;border-top:1px solid black;border-bottom:1px solid black;background-color:#B7E3DA;margin:auto;margin-top:10px;padding:10px 0px;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-list {font-size:125%; list-style:none;margin:auto;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-item,.qa-nav-main-item-opp {margin:auto;display:block;float:left;margin-left:auto;margin-right:auto;}
.qa-nav-main-item {display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-item-opp {margin:auto;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-link {color:#fff; display:block; padding:6px 10px; background-color:none;}
.qa-nav-main-selected {background-color:none; text-decoration:none;}
.qa-nav-main-hot .qa-nav-main-link {background:none;}
.qa-nav-main-hot .qa-nav-main-link:hover, .qa-nav-main-hot .qa-nav-main-selected {background:#396E63;}
The images are the (main) menu. If you'd turn the iphone on its side, you'd see that they aren't centered.... I've tried editing so many things in .qa-nav-main and also .qa-nav-mean-item but if I set float:center in the latter the menu items are all on a new line (though they are centered).
If you want to keep your code structure like you have it now, then just add a class to the <span> which contains your <center> which contains your buttons. The class would have the following rules:
display: block;
width: 200px; /* this should be the width you need, please assign your own */
margin: 0 auto;
To your .qa-nav-main class add the following rule:
text-align:center;
This should give you the desired effekt of your spans floating in the middle. But I would suggest that you rework your markup a bit and get rid of all the spans and center tags.
The above gives you the result depiced on the following image:
i have the following selector in my css:
a:active {
position: relative;
top: 1px;
}
So every link has this little button-effect when it's pressed.
How can i prevent that behaviour for specific links?
e.g. i have a "back to top" link on my website that shouldn't have this behaviour.
a#back-to-top {
position:fixed;
right:0px;
bottom:20px;
width:20px;
height:20px;
background:green;
}
In this case the "back-to-top" starts to jump.
However if I try to reset this it doesn't work.
a#back-to-top:active {
position:fixed !important;
bottom:20px !important;
}
any idea what I'm doing wrong or how I could exclude specific links from that active behaviour?
Try resetting the top property as well.
a#back-to-top:active {
position: fixed !important;
top: auto !important;
}
The following
a#back-to-top:active {
position:fixed;
top: auto;
}
would fix it, since it is more specific and will get applied, and it overrides the part that makes your button move..
No need for the !important directive since the rule has higher specificity and will get applied instead..
demo: http://jsfiddle.net/gaby/zUEER/
i think you should "reset" the top decleration
a#back-to-top:active {
position:fixed;
bottom:20px;
top: auto;
}
also, use !important only if for some reason the a#back-to-top:active style declartion comes before a:active one.
I've built a site using the contempt theme (wordpress) and I'm changing it's CSS to make it wider.
The problem is that I can make it look great on either Internet Explorer or Firefox and chrome but not all 3 at the same time.
If I remove the sidebar tag:
#sidebar {
width:200px;
padding:20px 200px 10px;
}
the page looks OK on IE (as it now - physiocall.co.il) but the sidebar is hidden in Firefox and chrome.
If I add this little tag to the css -
The site looks great on Firefox and chrome (the sidebar pushed left to it's place)
but on IE it goes down - below the entire page.
Any ideas how can I change the css to make it look correct on both IE and Firefox.
Any ideas what cause FF and Chrome to render the css in one way, and IE in another way ?
Thanks.
the entire CSS:
#content {
float:right;
width:649px;
margin:-50px 30px 0;
padding:0 0 20px 45px;
}
#topbar {
max-width:950px;
height:25px;
line-height:23px;
background:#FFFFE6;
overflow:hidden;
border-bottom:1px black solid;
margin:0;
}
#pagebar {
background:url('images/blue_flower/pagebar.jpg');
width:950px;
height:35px;
border-bottom:1px black solid;
margin:0;
padding:0;
}
#pagebar .children li,#pagebar .sub-menu li {
min-width:105px;
border-left:1px #e1e1e1 solid;
border-bottom:1px #e1e1e1 solid;
margin:0;
padding:0;
}
#pagebar ul a {
background-color:#f1f1f1;
width:101px;
}
#page {
width:950px;
}
#sidebar {
width:200px;
padding:20px 200px 10px;
}
sorry to say that, but you should start from scratch and completly rearrange your html output and css. maybe this is a coding practice due to rtl but your #content appears before the sidebar and has a float:right while your sidebar is positioned left to the content with a margin-left:530px.
and your content has a 640 width..
that can't work out and is not to be fixed by some niffty css trick.
sorry.
Since it works in IE but not the modern browsers, this tells me you used IE as your initial test. Never, ever do that. IE is 12 years behind all others in modern standards and compliance. Inept at best, you should never trust IE to do anything right.
It's been a long time since I've used frames so I'm not sure that the lack of a doctype on your index page, which puts you into quirks mode, is causing the problems.
So, while reworking your markup, use any browser but IE for the initial test. Then look to see how IE screws it up. The quirks and bugs in IE are well known, as are the hacks to fix it.
The solution was
#sidebar {
float:left;
width:200px;
margin:-20px 10px 5px 5px;
}
It looks like IE and FF had the opposite default value to the float parameter, hence making it impossible to set it straight. once given a float value, the margin fixed the rest for both browsers.
I use this piece of CSS code for fieldset in my ASP.net
.important
{
border:1px solid #33CC00;
padding:8px 10px 7px 20px;
}
.important
{
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
background:#FFFFFF none repeat scroll 0 0;
}
.important legend
{
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-x-system-font:none;
background:#F3FFF3 none repeat scroll 0 0;
border:1px solid #33CC00;
color:#33AA00;
font-family:"Trebuchet MS";
font-size:1.2em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
padding:1px 15px;
}
It look fine on FireFox but it look like crap on IE7 and IE8. I'm not sure how i can fix this on IE. Does anyone know any website dealing with CSS hack in IE or should i just give up because life is too short to waste on cross browser compatibility.
-moz-border-radius- is a Mozilla specific selector which IE will ignore. border-radius is the equivalent CSS3 selector, but IE almost certainly won't support it (Firefox 3 does, but I seem to remember there are problems with either the standard or the implementation)