<style type="text/css">
.header
{
background-color: #000000;
margin-bottom: 10px;
}
.body
{
background-color: #FFFFFF;
margin-bottom: 10px;
}
.footer
{
background-color: #000000;
}
.body #content
{
width: 80%;
min-height: 500px;
float: left;
background-color: red;
}
.body #menu
{
width: 20%;
min-height: 500px;
float: right;
background-color: blue;
}
</style>
The above code works but the "margin-bottom" property doesn't create space at the bottom of the body div. Why is that so?
Try overflow-y: auto on the .body selector. Should then recognise the height of the floats.
Here is a jsfiddle that shows the border: http://jsfiddle.net/PDk7b/
The styles that I added are:
.body
{
background-color: #FFFFFF;
margin-bottom: 10px;
min-height: 500px;
display: block;
}
Hope that helps.
Bob
The technical answer to your question likely depends upon which browser you're using. In one browser, the answer might be that Fred forgot to implement it and no testing caught it. Another browser might have an answer that the project manager didn't find the issue to be significant enough to fix yet.
If you're dealing with CSS and browsers in any meaningful way, you just have to get used to all the quirks. Some browsers require weird contortions to do a specific task right, while another browser requires none whatsoever. Then, on another task, the roles reverse.
Related
This is a pared down version of a problem I am facing with IE7. In all other (newer) browsers, this displays fine... why does position:relative; have an effect on float: right; or float: left;? Is there a way to keep the position: relative without sacrificing the functionality of float?
JS fiddle: http://jsfiddle.net/uW7JV/2/
Without position: relative;
With position: relative; (on the red box)
Even more trimmed-down version: http://jsfiddle.net/uW7JV/4/
Interesting... Removing the <div class="clearboth"></div> allows the content to show. However, I do need that functionality there, so I'm still looking for a fix. http://jsfiddle.net/uW7JV/9/
You need to add overflow: hidden to .column-wrapper so that it wraps its floating children. You won't need the .clearboth div and CSS at all after you do this.
The other issue you need to solve is column widths, since box-sizing: border-box is not supported in IE7, you need to account for your padding when assigning width.
div {
padding: 5px 1%;
}
.column-wrapper {
background: orange;
position: relative;
overflow: hidden;
}
.main {
background: yellow;
float: right;
width: 64.6%;
}
.sidebar {
float: left;
background: green;
width: 31.3%;
}
DEMO: http://jsfiddle.net/myajouri/uW7JV/15/
Another way to go about this is to use the Clearfix hack
.clearfix {
zoom: 1; /* for IE6/7 */
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
Then add the clearfix class to .column-wrapper.
In a CSS file I have the following rules:
div.breadcrumbs span {
position: relative;
left: -120px;
height: 16px;
line-height: 16px;
margin: 0 20px;
overflow: hidden;
}
div.breadcrumbs img {
margin: 0 -20px;
padding: 5px 5px 0px 5px;
}
div.breadcrumbs a {
color: #88263F;
font-weight:bold;
}
The rules for img and a work, but not for span.
Also something does not work like
span {
display: none;
}
At the moment I have no clue how to debug this.
In principal, your posted CSS works.
If your HTML looks like this...
<div class="breadcrumbs">
These are <span>breadcrumbs</span> in a line...
</div>
and this is your CSS:
div.breadcrumbs span {
position: relative;
left: -120px;
height: 16px;
line-height: 16px;
margin: 0 20px;
overflow: hidden;
}
span {
display: none;
}
then the span element is not shown as you intended.
See demo at: http://jsfiddle.net/audetwebdesign/qyu5A/
You may have other problems such as other CSS rules that are conflicting and preventing the display: none property from working correctly.
There is nothing wrong with the positioning of an inline element, but you may not get exactly what you expect depending on the line height and surrounding content.
You may want to learn more about how the CSS cascade and specificity work.
Reference: http://www.w3.org/TR/CSS2/cascade.html#cascade
Note: The height property is ignored for inline elements.
Thank you for your hints, especially the fiddle!
Playing around with it I found the following code snippet also in the CSS file:
body.home div.breadcrumbs span { position:relative; left:0; }
Placing "div.breadcrumbs span" after this and deleting "position: relative;" it works as exspected.
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.
I've got a page, with three sections. Each section is an that takes the entire view of the page. I would like the article and background to fit within the mobile device screen, as it does on a desktop, but can't figure out how to get the article to adjust. Here's a fiddle: http://jsfiddle.net/kRjUn/
Here's the CSS:
html {
height: 100%;
}
body {
font-size: 1em;
line-height: 1.4;
height: 100%;
}
article {
height: 100%;
padding-top: 2em;
}
.wrapper {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
height: inherit;
}
.content {
margin-top: 25em;
height: inherit;
}
I found this gridless boilerplate, and set the body height to 100% and it seemed to work great. I also just used a div instead of article. Anyone looking for a clean and responsive boilerplate I would def. give this one a shot: https://github.com/thatcoolguy/gridless-boilerplate
What i feel that you code is not handling case for each devices, you need to use CSS 3 media query feature which can help you.
I think you can use HTML5 boilerplate template as example.
Here you go, use display tables.
article {
height: 100%;
padding-top: 2em;
display: table;
}
.wrapper.content {
padding: 2em;
display: table-cell;
}
DEMO
I am having some problems with my DIV, it wont display over a a DIV that has a web user control in it. Below you can find my css. I believe I have done everything right and am hoping that someone can maybe see an error that I have made and help me out. If you need any other code let me know. I also wonder if its just IE rendering it wrong? Thanks for looking.
The Popup CSS:
{
background: #ececec;
position:absolute;
top: 236px;
left: 201px;
height: auto;
width: 280px;
border: solid 1px gray;
z-index: 50;
text-align:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 15px;
font-size: 8pt;
}
The Activity DIV (same the div above just changed position)
{
border: solid 2px #A9C5EB;
position: absolute;
top: 353px;
left: 290px;
width: 710px;
height: 227px;
font-size: small;
overflow: scroll;
overflow-x: hidden;
background-color: #F8FBFE;
z-index: 2;
}
To know the HTML is essential to fix your problem.
What is the html that contains your popup? Is it relative to the body tag or some other element? Is the containing element position: relative;?
Try setting the containing element's z-index and position:
#my-container {
position: relative;
z-index: 1;
}
See this SO post about absolute positioning.
On a side note, check out IE-7.js which fixes many IE browser issues, including - AFAIK - this bug.