I ran into this unusual Firefox-only (as far as I know - I only checked against Safari and Chrome, and was using Firefox 3.6) CSS bug today at work, and managed to reproduce the problem with a much smaller snippet of code, here:
<!DOCTYPE html>
<head>
<style>
/*
* A small snippet of some CSS resets code from html5doctor and YUI fonts and resets
* added just to make sure it's not from weird browser padding/margin. Still happens
* if this is removed though
*/
html, body, div, span, p, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
body {
line-height: 1;
}
li {
list-style: none;
}
body {
color: #333;
font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
line-height: 1.3;
}
/* Some clearfix code from HTML5 Boilerplate */
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div style="padding: 20px; border: solid thin black;">Hello!</div>
<div>
<ul class="clearfix">
<li style="float: left; padding: 5px; border: solid thin black;">There</li>
<li style="float: left; padding: 5px; border: solid thin black;">should</li>
<li style="float: left; padding: 5px; border: solid thin black;">be no</li>
<li style="float: left; padding: 5px; border: solid thin black;">margin</li>
<li style="float: left; padding: 5px; border: solid thin black;">above</li>
<li style="float: left; padding: 5px; border: solid thin black;">this</li>
<li style="float: left; padding: 5px; border: solid thin black;">list</li>
</ul>
<p style="margin-top: 30px">Yet for some reason the 30px margin-top on this p applies to both this p as well as the above list</p>
</div>
</body>
</html>
Here's a screenshot of what the problem looks like
So what I'd normally expect to happen here is that there's no margin between the two <div>s, or above the <ul>, and indeed, hovering over elements in Firebug will show no margin/padding coloring. But for some reason, the 30px margin-top from the <p> is being applied to both the <p>, as well as its containing <div>. My guess is that something's buggy with the clearfix (and indeed, if you use a clearing <br/>, this problem goes away), but I'm curious if anyone has insight into what exactly the problem here is. Thanks!
That's correct, you are not using the right clearfix ;-)
This one should fix the issue:
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
See:
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
BUT - the elephant in the room that isn't being mentioned is a Firefox float bug which affects at least 3.6-6 (tested). A float container styled with ':after { content:"" }' (where content is empty or any type or whitespace) will duplicate the margin-top of the following element! This only appears to affect Firefox and is clearly a bug.
Simple test case:
<div class="container cf">
<div class="floater"></div>
</div>
<div class="next">
<p>Some content here!</p>
</div>
<style>
body { padding: 0; margin: 0; }
.cf:after { content:""; display:block; clear:both; *zoom:1; }
.container { background:gray; }
.floater { float:left; width:46%; height:200px; margin:0 10px; background:#ddd; }
.next { background: yellow; margin: 30px 0px; }
</style>
http://jsfiddle.net/TjW6c/394/
You're not using the clearfix right. Using positioniseverything's clearfix(a.k.a. pie-clearfix) is usually my solution to all clearfixes:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
You can check it out here: http://jsfiddle.net/WVtYd/
Related
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
In the following code from: http://6.470.scripts.mit.edu/css_exercises/exercise5.html
<html>
<head>
<style type="text/css">
.wrapper1 {
width: 65%;
margin: 0px auto 0px auto;
border: 1px solid;
text-align: center;
background: #eeeeee;
}
.wrapper2 {
clear: left;
width: 80%;
margin: auto;
border: 1px solid;
background: #111111;
}
.p1 {
margin: 20px;
font-size: 70px;
}
.p2 {
font-size: 50px;
}
.link-gr {
list-type: none;
}
.link-gr li{
float: left;
}
.link-gr li a{
display: block;
width: 100px;
}
</style>
</head>
<body>
<div class="wrapper1">
<div class="wrapper2">
<p class="p1">MIT 6.470</p>
<p class="p2">Learn Web Programming this IAP</p>
<ul class="link-gr">
<li>Comprehensive Curriculum</li>
<li>Insightful Guest Lectures</li>
<li>Interaction with Sponsors</li>
<li>$30,000+ in Total Prizes</li>
</ul>
</div>
Copyright © 2012 MIT 6.470
</div>
</body>
the ul.link-gr links are falling outside the div. I mean everything excluding the links are wrapped inside div.wrapper2 with border and black-ish background but the links are placed outside the box (like outcast-ed). This is very strange. Some explanation from your side will be highly appreciated.
Thanks
I would think this is a float problem: your code contains
.link-gr li{
float: left;
}
The problem is that its container is not float: left, which means that the list items are free to go anywhere. Try adding float: left to the .link-gr as well:
.link-gr{
float: left;
}
This may solve the problem. Fiddle: http://jsfiddle.net/abZHK/1/
Ah floats...
Explanations
See this old article from P.I.E: Clearing floats (IE/Win is IE version 6 there)
Solution
Apply this modern clearfix (on parent of the non-contained floats)
My apologies if this too basic of a question but CSS is boggling me. I think I'm doing something that CSS is supposed to do easily but it is simply not working the way I read the documentation.
Here's my example. It's been massively simplified but the basic problem remains. I'm sure this is some core misconception on my part, I just don't know where it lies.
Here's the goal:
Here's what I get now:
Here is the HTML:
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
And here's the CSS:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000;
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
padding: 0px 30px;
border-top: none;
border-bottom: none;
color: #000;
background: #d6b982;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42 {
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background: #d6b982;
}
I can't get the floats right (I know, Yet Another Float Question). The main issue is that this is going to be a menu with a variable number of items, so as the menu grows, ("Departments" now, but later "Departments", "Services", "Sections", etc.) it should push to the left, reducing the length of the line I can't use a fixed length on the leading line (#block-imageblock-42). Also, the menu items will have separators, so I can't just full-width things. This needs to be done in pure CSS, no jQuery or other JS.
Here's my JSfiddle of the problem: http://jsfiddle.net/zjfsy/
UPDATE: I have modified the question to be more specific per the requests of folks trying to help. The "goal" image at the top has been updated to more accurately reflect the issue. One thing I really want to make clear is that this specific instance is not so important. I already doctored up a position:absolute fix that will hold for the short term. My desire is to understand better why this is so hard. I have three containers. I want two of them to float right and the third to expand to fill the space from the last container to the edge of the page. It seems like this is what float was supposed to do. I assume this is some base misunderstanding on my part.
Anyway. Here's more constraints:
The leading bar needs to expand to fill the empty space between the
left side and the swish.
Each of the tabs needs to have a separator that allows the background through.
The number of the tabs is variable, based on client choices -- which
can change regularly.
I can't really change the structure of the HTML, other than
modifying it with CSS.
And again, all help is very much appreciated.
here is my solution: http://jsfiddle.net/abbood/b56Vq/ (never used jsfiddle before.. so sorry if i did this wrong, or if i was supposed to fork your project)
here is the code:
<html>
<head>
<link href="betterStyle.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<ul>
<li><div></div><div>Departments</div></li>
<li><div></div><div>Services</div></li>
<li><div></div><div>Sections</div></li>
<li><div></div><div>stuff</div></li>
</ul>
</div>
</body>
</html>
//betterStyle.css
#wrapper {
height: 2.5em;
background-color: #e0203b;
background-image: url('http://s11.postimage.org/a1jmymlgv/bage_Box.png');
background-position: bottom;
background-repeat: repeat-x;
}
ul
{
list-style-type: none;
float: right;
margin: 0;
padding: 0;
}
ul li {
float: right ;
display: inline-block;
}
/* text */
ul li div:nth-child(2) {
line-height: 2.5em;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
background-color: #d6b982;
float: right;
padding-right: 1em;
}
/* image */
ul li div:nth-child(1) {
background-image: url('http://s8.postimage.org/b2qycoatd/top_menu_swish.png');
background-position: left top;
background-repeat: no-repeat;
float: left;
width: 53px;
height: 40px;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
}
notes:
i created my own image and I linked to it using some image hosting service.
you can add as many tabs as you want (i assumed that each tab will have that image attached to it.. i wasn't sure how you wanted the final thing to look like (the right edges look too sharp).. but i'm sure you can adjust it to your liking.. when adding extra tabs the horizontal line shrinks.. i think that's what you meant when you said so as the menu grows, it should push to the left, reducing the length of the line
update:
Here is the updated answer without changing a line in the html: http://jsfiddle.net/abbood/SkxkC/ (for some reason there is a bump under the folder image in jsfiddle.. i tested it on mac chrome/safari/firefox and they worked fine.. lemme know if it isn't working perfectly for you though)
html (pretty much same.. just added a couple of tabs just for fun):
<body>
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
<li><span title="Departments" class="nolink">Services</span>
</li>
<li><span title="Departments" class="nolink">Classes</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
</body>
css:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000; /* red */
height: 40px;
position: relative;
z-index: -2;
}
#line-wrapper div {
background-color: #ff0000; /* red */
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
border-top: none;
border-bottom: none;
color: #000;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
margin: 0;
padding: 0;
}
#nice-menu-1 ul {
padding: 0;
background-color: #ff0000; /* red */
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#nice-menu-1 li{
list-style-type: none;
display: inline-block;
padding: 0 2em;
background: #d6b982; /* bage */
height: 40px;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42
{
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background-color: #d6b982 !important;
position: absolute;
z-index: -1;
}
I a have also done something similar that does not use the position:relative feature for the #line-wrapper since that may cause you some problems when you implement it.
See http://jsfiddle.net/zjfsy/
#block-imageblock-42 {
/* top-menu-leading-line */
height:6px;
width:100%;
background: #d6b982;
position:absolute;
margin-top:34px;
}
#line-wrapper {
display: block;
height: 40px;
width: 100%;
background-color: #ff0000;
}
Hope this helps! (I am definitely going to vote wxactly's answer up since it is a better answer than mine since it doesn't require "hard coding" with magic number margins, etc. Definitely use his answer if you can, but now at least you have two different ways.
Please take a look at this laytout which i built with divs:
First of all you can ignore Header section
So Content has to be centered exactly at the center and it has a fixed width which is easy, but Left Column needs to extend from left side until it reaches Content and here is the difficult part, since the gap betwen Left Column and Content can be any length it's hard to know what width to set.
Now i know it would be fairly easy to do this with javascript but i would like to avoid that if possible.
EDIT as requested here is the code:
<div class="left_column"></div>
<div class="content"></div>
.left_column{
width:100px;
height:100px;
float:left;
}
.content{
width:100px;
height:100px;
margin:auto;
position:relative;
}
Take a look at Object-Oriented CSS. In particular, check out their grids page
tried percentages?
overflow: auto;
padding: 10px;
width: 45%;
try float left float right as well as display inline, you could also try width auto but that don't work too well
float:left;
width:auto;
height: auto;
display: inline;
there is also one more trick used in menus
<div id="mail_menu">
<ul>
<li><a href=something</a></li>
</ul>
</div>
css
#mail_menu {
position: relative;
top: 0px;
left: 0px; /* LTR */
z-index: 3;
color: #000;
}
#mail_menu ul {
list-style-type: none;
}
#mail_menu li {
display: inline;
float:left;
margin: 0px;
padding: 3px;
}
#mail_menu a {
color: #000;
background: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px;
border-color:#CCC;
border-width:1px 0;
padding: 2px;
float:left;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mail_menu a:hover {
color: #0000DD;
text-decoration: none;
background-image: url(/images/lyel.png);
background-repeat: repeat-x;
}
css to middle something
.middle {
display: block;
width: 50em;
margin-left: auto;
margin-right: auto
}
and finally some table values for display to mess with
.td {
display: table-cell;
display:inline
}
.wrap{
position: inherit;
}
.tr {
display: table-row;
display:inline
}
table {
border-collapse: collapse;
}
th {
text-align: left; /* LTR */
padding-right: 1em; /* LTR */
border-bottom: 3px solid #ccc;
}
I would use percentages, but go 1% short of where you should. I've found a lot of times a browser will "round up" a pixel or something, so if you have your percentages totaling 100%, any extra added will push a div below.
For instance, if you wanted two divs, one on the right and one on the left, have one of them have width:49%; and the other width:50%;.
This can be accomplished using this hack, please try this:
div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }
with this markup:
<div class="header">Header</div>
<div class="wrapper">
<div class="left-column">Left Column</div>
<div class="content">Content</div>
</div>
Note the left-column will be cutted if you resize the screen too much. Either way, I hope it helps.