I don't understand because sometimes a simple color line doesn't appears with Chrome.
My line is defined with CSS code :
/* line warning */
.line_warning {
background-color:#ff9900;
color:white;
margin-top:5px;
margin-bottom:5px;
height: 1px;
}
Apparently, I have this problem only with chrome (I use Bootstrap).
Thank you in advance if you have any idea to resolve it.
A quick solution would be to create your line with a border rather than a background colour...
.line_warning {
height:0px;
border-top:1px solid #ff9900;
margin-top:5px;
margin-bottom:5px;
}
Interested to know if anyone can explain why this is happening, as it seems a issue in Firefox too.
UPDATE: I looked further into this, and found that adding a margin to your body fixes it.
body {
margin:0px;
}
This seems to be what normalize.css use - I have no idea why it works, though. Seems like a bug.
Related
I'm building a bootstrap WP theme and am at the stage of just building the static html. I've tried googling, but since it's hard to describe I've not had any luck. To simplify things, instead of telling you what I'm trying to do, I'll show you via very bad photoshop mockups and hopefully we can do some good together :).
I'm using the navbar snippet from http://getbootstrap.com/components/#navbar
At the moment, it looks like this:
I want it to look like this:
ive tried playing with the paddings and the margins but am coming up blank. Any help is appreciated :).
.navbar-form{
margin-top:0px;
margin-bottom:0px;
}
.navbar-form input{
min-height:50px;
border-radius:0;
}
.navbar-form button{
min-height:50px;
border-radius:0;
background:green;
color:white;
}
I ve applied a background to my page like this,
body
{
background:#FFFFFF url('images/color.png') repeat top left;
color:#666666;
font-family:Arial,Helvetica,sans-serif;
font-size:80%;
font-style:normal;
font-variant:normal;
font-weight:normal;
white-space:nowrap;
margin:0 auto;
height:100%;
}
This seems to work in IE7,firefox and chrome but certainly not in IE6.
IE6 hates pngs..:) leave alone rendering them in background..! you will need some sort of PNGFix for this.. I usually use this
ie6 doesnt render pngs well. maybe you should just use a gif or jpg?
why would you use a transparent png for that? Using a gif would be a much better solution
I was hoping someone could help me figure out what to do about a browser inconsistency issue between Safari/Chrome and Firefox.
Here's a screenshot (the one on the left is chrome/right is Firefox): http://drp.ly/QVv2T
Here's the structure: http://drp.ly/QW47y
The css:
inside-wrapper {
position:relative;
min-height:320px;
font-family:Arial, Helvetica, Geneva, sans-serif;
width:785px;
margin-right:auto;
margin-left:auto;
}
select p a {
display:block;
clear:both;
margin:0;
padding:7px 0 6px 10px;
}
select ul {
position:absolute;
top:162px;
left:1px;
width:396px;
}
Thanks in advance for the help and let me know if I can post more info.
Sorry to those who took the time to look this over - I realize I was very vague and didn't provide nearly enough information.
I was able to find a fix. The problem was the main div that encompassed all of this needed to be set to position:relative and I instead had the parent of the whole thing set to relative.
Thanks everyone for the help!
Based on your CSS I noticed you put a <ul> inside a <select> tag. That's not a valid combination.
Edit: Found out that this happens even though Cufon isn't even applied!
Edit2: My bad, looks like Cufon is creating the slowless afterall.
However, removing the line where I replace the menuwrapper font style with Cufon still results in sluggish behaviour. So it doesn't seem like it's got anything to do with applying cufon to the lists themselves.
Hi, I'm using Cufon to "embed" a custom font to my site. And this font is used on the main menu and I've encountered a bug or something where setting the height, padding or anything of the li:hover makes IE go sluggish. I don't know why this happens but the problem dissapears when I remove the property from the li:hover. It works fine in Firefox though.
So my question is, is there another way of getting around this?
What I'm basically trying to do is to position the li:hover because it has a background to it. And I want to skew it a few pixels towards the bottom.
My CSS looks like this:
#menuwrapper {
float:right;
margin-top:10px;
height: 65px;
}
.menuwrapper li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;
padding-left: 23px;
padding-right: 23px;
height:23px;
}
.menuwrapper a{
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none;
}
.menuwrapper li:hover {
background-image: url(img/MenuHover.png);
padding-bottom:6px;
}
Could not understand what you mean exactly but as you said you want to get it a bit lower at the bottom, then you can do that with margin-top css property.
margin-top:10px; /* down it by 10 pixels */
Just have to lay this one dead I guess. Getting nowhere with it as it is now.
I'm still relatively new to CSS, but after lots of Stack Overflow reading, I have figured out how to add "headers" to a panel. Yay, go me. But the problem I'm running into is that one of my panels in particular won't render properly in Firefox. I've been doing all development work in Chrome, and I just now noticed this issue. The weird part is, I'm able to add my "header" (might be better to call it a div wrapper?) to other panels and they look fine - it's just 1 panel that is giving me issues I can't figure out why. To see what I mean, look at http://www.mobiuspc.com in both Firefox and Chrome. The difficult panel in question is title "System Construction Area" - the teal colored border in Firefox sprays itself everywhere, whereas in Chrome it displays properly.
Here is the CSS to the difficult panel:
.dropareaparent
{
height:528px;
width:690px;
margin-left:332px;
margin-top:-540px;
background-color:teal;
text-align:center;
color:White;
}
.droparea
{
height:500px;
width:680px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
float:left;
}
Here is the CSS to a different panel that is working great in both browsers:
.primarystatdivparent
{
height:428px;
width:266px;
margin-top:-530px;
margin-left:1045px;
background-color:teal;
text-align:center;
color:White;
}
.primarystatdiv
{
height:400px;
width:256px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
}
Other than my absolute positioning (still learning how to float things), to me the CSS between the problematic panel and the perfect panel appear to be the same?
For reference, IE looks fine as well (other than slow Javascript execution).
It seems a bit over-complicated. If - for example - you float your filterboxareaparent left, there is no need for large negative margin on dropboxareaparent.
I'd try to position the elements in a more logical way so the results will be more consistent across different browsers.
You need a negative margin-top for .droparea as well.