Please see www.racedayworld.com
The plus sign (which is floated on the right of an accordian div panel) is being pushed down in certain browsers, but shows up fine is others...
I know it's happening in these browsers...
Firefox 3.0.5
IE 7
others?
Any ideas?
Instead of:
#accordion span {
float:right;
}
Get rid of the span. Float the image itself. Use:
#accordion img {
float:right;
display:block
}
Float only floats items above those which follow after in the document order. Try delivering something like this:
<h2><span><img src="plus.gif"/></span> text here </h2>
As others have also mentioned, the SPAN is possibly redundant.
id just make the img part of the background
#accordion h2 img{
position:absolute;
top:0; /* you might need to play with # */
right:0; /* you might need to play with # */
}
#accordion h2{
position:relative;
}
i would also just use JqueryUI's no-theme accordion instead, as it has support for open/active/inactive states/classes.
http://jqueryui.com/demos/accordion/
Related
I ran into this issue trying to implement https://github.com/jmosbech/StickyTableHeaders in an application. In my case, everything worked fine, but the header was visible outside of the container. Once it had position:fixed, it suddenly ignored z-index and overflow properties. I set up the following fiddle to demonstrate the issue:
.scroller{
overflow:scroll;
width:200px;
margin:2em auto;
}
.container{
width:400px;
background:green;
overflow:hidden;
}
.foobar {
width:350px;
height:10px;
position:fixed;
background:yellow;
opacity:0.5;
margin-left:-25px;
}
http://jsfiddle.net/z2x5Q/1/
How can I keep the .foobar div's width and fixed position, without it overlapping the div.container's boundaries?
Why are you trying to use position: fixed?
The problems you state are a standard behavior of a fixed position. The item is moved out of the flow of the DOM and you are required to explicitly state where and how you want it. I'm not sure position: fixed is giving you anything here that you would want. In fact, as soon as you take that property off your .foobar element, it looks like you get the behavior you want.
I'd suggest reading up a bit more on position fixed.
Good article here from CSS Tricks
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
Here I've got a jquery menu which is working perfectly. But Ive given it a fixed width of 400px and so what happens is that if I add more than certain number of links to the main ul they will flow in the next line and that is absolutely not desired.
I tried overflow:hidden and line-height to somehow overcome the issue BUT NO RESULT anyway.
Here is the menu : http://jsfiddle.net/b5Wdc/
As you see there, the red color link flows on the next line and that is the problem.
What do should I write to hide the overflown links in this situation?
Thank you all anyway.
From our conversation in the comments on the question, it seems that your menu is completely fixed and any "extra" items should always be hidden and there is no dynamic display or wrapping required. So you can just use CSS to hide all menu items that you know won't fit in. Since a menu item has a width of 99px and the menu is 400px you know you will only ever show 4 items. This purely CSS will hide the rest:
.HeadMenu #nav > li:nth-child(n+5) {
display:none;
}
However it requires a minimum of IE8 for the nth-child CSS selector support.
Since you mentioned jQuery in the question you could accomplish the same in JavaScript if you need to support IE8 with:
$('.HeadMenu #nav > li:nth-child(n+5)').hide()
Alternatively, keep the CSS solution (as it's cleaner) and use selectivizr to bring nth-child selector support to IE8.
if you change your styles to the following i think it may work:
.HeadMenu .HeadMenuMain
{
display:block;
position:relative;
margin:0;
width:400px;
padding:0;
direction:rtl;
height:40px;
white-space:nowrap; //will make elements stay on one row
}
.HeadMenu .HeadMenuMain li
{
display:inline-block; //will make elements stay on one row with the nowrap
list-style:none;
position:relative;
}
http://jsfiddle.net/b5Wdc/2
Adding an overflow:hidden to the navigation menu will do the trick:
.HeadMenu #nav {
overflow: hidden;
}
I created a overlay which i am using to show while doing ajax requests. In firefox it works great! But in IE7 i don't see the Div.
my div is simple its the first element after Body
<div id="overlay">
</div>
and my css is here
#overlay {
z-index:1000;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
display:none;
}
I think it maybe something to do with the sizing as i placed some text in the div and i don't see it on IE7 but i do on firefox.
Does anyon know where its not working, i am at a bit of a loss :-)
I tried removing display:none and its the same and i also inserting height:auto and still no joy.
I am using jquery to show and hide it liek so, but this isn't the problem as i removed Display:none and i don't see the div which should be over the top of the rest of the content
$("#overlay").show();
Any ideas?
Thanks in advance
since your div is positioned in absolute you should specify an height (different than auto). This can be done declaring height:100% to #overlay , then also html, body { height: 100% } when you open the overlay and html, body { height: auto } when closing the overlay);
Another (better) way is to dinamically calculate the height of body elements via javascript (e.g. document.body.offsetHeight) and then assign to the #overlay as a height
document.getElementById('overlay').style.height = document.body.offsetHeight + 'px';
this would be written in you jQuery snippet as
$("#overlay").height($('body').height()).show();
Try the following additional CSS:
#overlay {
zoom: 1;
}
I have a span with several other spans inside it, and I want to toggle the sub-spans between display:block and display:inline. The spans start off with display:inline-block, then are switched to display:block. This works fine. The problem is when toggling back in Webkit (it works fine in Firefox): the spans are rendered with extra line breaks in between them.
Can I make this render correctly without putting <br/> tags between the spans?
demo here: http://jsbin.com/omalu3/4/edit
Any other solution would be a workaround since it's a browser bug.
An alternative to derekerdmann's solution:
#a.multiline * { width: 100% }
#a.oneline * { width: auto }
#a * { border:solid 1px black; display:inline-block }
Another workaround would be to not wrap the children spans with another span -- which is an inline element. Use a <div> for #a and it behaves correctly (in Webkit at least!).
On another note, the star selector is not really efficient, although I understand this is only an example so I'm not going to criticise that here :D
Now isn't that fun.
I'm not sure what's causing the problem, but it goes away if you add float: left; to #a.oneline *. When you do that, you could change the display to block so your styles look like this:
#a.multiline * { }
#a.oneline * { float:left; }
#a * { border:solid 1px black; display:block;}
The only difference between this solution and your original layout is that the oneline blocks will be aligned at the top instead of the bottom, but you could set a fixed height for those elements.