I think my last question was misunderstood. I have pasted below, the HTML of the page I am having troubles with, but you can see it here: http://jsfiddle.net/wCZYU/6/
Basically I would like a fixed header (pageHeader) and a colored div that fills the browser window, NOT the entire page background. I then would like a div under this that the user will be required to scroll to see
<header class="pageHeader">
<div class="setWidth">
<div class="navMain">
Home
Work
Blog
Contact
</div>
</div>
</header>
<div class="secFill">i want to be below the navigation</div>
<div class="content">i want to be below secFill</div>
This is the image that I posted earlier that I want it to look like
http://i.stack.imgur.com/jZgMb.png
The navigation must be fixed and compatible in ie7/8.
Thanks alot (again)
If I'm understanding correctly, you just need to define .secFill as height:100%.
.secFill {
height:100%;
background-color:red;
}
http://jsfiddle.net/wCZYU/7/
Is the following functionality a bug in Chrome, or is it correct behavior that I don't understand?
In Chrome (version 25), if I have a content editable span which has a node added after it through a :after css class, as in this jsfiddle
http://jsfiddle.net/yQBvn/
if I delete all of the content of the span, after I've deleted the last character, Chrome adds a <br> to the content editable span. This doesn't feel right.
I've verified that Chrome does not do this if the :after css content isn't added, and I've verified that Firefox doesn't do this in any case.
Wanna see something CRAZY?!
http://jsfiddle.net/joeframbach/VXMEN/
<body>
<div id="EDIT-AREA">
<span class='CHARACTER-NAME' contenteditable='true'>Bob</span><span> </span>
</div>
</body>
Adding a span with a space after it fixes the problem. Don't ask me why or how.
Firefox also does this using a DIV with contenteditable
Delete ALL content in the content editable and bam br tag.
Start with an empty CE, focus & hit space, bam br
Solution above of using an empty element directly after a div does nothing, with or without a pseudo element like :after.
Span works though?
Chrome untested.
I have this piece of code:
#bizMxp{position:absolute;min-width:140px;left:5px;z-index:100000;display:none;top:134px}
#bizMxp div{background-color:#fff;border:4px #6db03f solid;border-top:0;padding:15px;margin-top:20px}
$('.mxpbiz').hover(function(){$('#bizMxp').show('fast');},function(){$('#bizMxp').hide();});
<div id="mainMenu">
<ul>
<li<%=TabAttiva("mxpbiz",act)%>><a class="mxpbiz" href="#"><%=Lexicon("MXP BIZ")%></a></li>
</ul>
<div id="bizMxp">
<div>
<%=Lexicon("About us")%><br/>
<%=Lexicon("The Building")%><br/>
<%=Lexicon("Location")%>
</div>
</div>
</div>
and it works perfectly with Chrome, FF and IE <= 8, but with IE9 submenu's div doesn't appear even if I am using absolute position and z-index... is there something I could have missed for IE9?....
Thanks in advance to everyone! :-)))
Cheers,
Luigi
Which JS-Framework are you using? jQuery?
I tried out your code on JSFIDDLE: http://jsfiddle.net/PaEk9/
It works on my IE9.
Maybe it's the problem of IE loading jQuery - i hat that Problem too.
Try out to put your scripts at the bottom of the page or use jQuery instead of the dollar sign $ on scripts on the outside of the DOM-Ready Method.
Use the DOM-Ready function Like this:
jQuery(document).ready(function($){
// your code, now using '$'
});
Maybe this helps.
An example of my code is this:
<div class="print">
This div needs to be on one page.
</div>
<div class="print">
This div needs to print on a separate page.
</div>
I have a couple divs like above, and I need each div to be on it's own page when printed. I've tried 'page-break-before' and 'page-break-after' on the .print class in print.css. I'm not sure what I'm doing wrong.
It seems to me like 'page-break-after' would be right, and that's the solution I always find when searching, but I just can't seem to get it working.
You should use the css rule :
.print {page-break-after:always;}
It works for me in Chrome 12.0 and Firefox 3.5
The solution given by Allex using a br tag does not work in this version of Chrome
try this after every </div> tag
<br clear="all" style="page-break-before:always" />
it works for me...
I have a page that there is a list of "tags", just like here in SO, and when the mouse is over it, it gets darker.
It works great with Ie7, 8, FF, Chrome, Safari etc... but IE6 has a bug that when a:hover is triggered.
The bug is that the div that those (ul li a) are contained, gets a height's increase.
the css I have is:
div.options ul.tags li a:hover
{
background-color: #D5E4A5;
}
if I delete this style or just comment "background-color: #D5E4A5;" it doesn't happen...
any idea of how to fix it?
thanks!
EDIT: Here's a screenshot of the bug:
just fixed it! :D
what I had before was:
<div class="options clearfix">
<!--content here-->
</div>
and I replaced for:
<div class="options">
<div class="clearfix">
<!--content here-->
</div>
</div>
Now IE6 is happy, and I'm happy as well...
Thank you everybody for your help!
This is usually a border getting set that wasn't defined originally. Try setting a border on the growing DIV to the default background color. My guess is that you won't see anyting grow anymore.
I think I ran into this once, and what was happening was that the borders were being modified (or was it the margins?) I ended up copping out, and just giving the problematic elements a transparent border of 1px, and calling it a day.
I really doubt this will turn out to be your solution, but I'm hoping it'll give you some idea in which direction to look in!
I've had that happen to me as well, but I can't remember where that was exactly. I think I did solve it, but I'm not entirely sure how anymore. I can think of two things:
Give the element "layout". I tend to do that with zoom: 1.
Add vertical-align: top to either the a or li element.
Could you give a more complete code example? I can't reproduce it with just that CSS.
Did you specify the height for that div explicitly? If not, setting the height might make this go away.
Are the tags located in a place where you could give them background color all of the time? If so, does setting their background color when :hover is not activated still cause their height to change?
As a note, I can't reproduce this given HTML matching the rule you described, so the problem may be coming from somewhere else higher on the page.
<!-- This does not display the described behavior -->
<div class="options">
<ul class="tags">
<li>c++</li>
<li>not-programming-related</li>
<li>cheese</li>
<li>barnacle</li>
</ul>
</div>
The best thing I can suggest is to do what mercator said and give the element layout.
EDIT: Just a shot in the dark, but you may want to try setting a value for line-height on div.options.
EDIT 2: After seeing your screenshots I recall that I have had this problem at work before, and the fix in my case was to add position:relative; zoom:1; to the container (or maybe the links, I forget!). Try that?
EDIT 3: After googling for some solutions, you may want to try setting the height if your container explicitly. If this doesn't work, I have no idea what to do!
I have this exact problem as well. The trigger is definitely the background color on hover, but the usual solutions of giving the parent hasLayout don't work, I think because of nesting the A tags inside other tags. From what I ended up doing, your solution of nesting the clear fix is the right logic: separating the offending element, parent and clearing objects.
The solution I did was the following:
<div class="options">
<!--content here-->
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]-->
</div>
With the following CSS:
.ie6clear{ clear:both; height:0; overflow:hidden; }
This way the clearfix CSS is only applied for IE6, highlights what the extraneous markup is, and makes it easy to remove when IE6 is no longer supported.