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.
Related
I am having an issue with IE11 and utilizing the CSS calc() function along with display: inline-block and/or display: inline-table.
Currently I have a text input and a button that should be next to each other (inline), with the button always being a fixed width and the input should take up the available space leftover (i.e. calc(100% - 92px)). Both elements are display: inline-table;. In all other browsers, doing this calc() worked fine. In IE11, it drops the button to the next line.
Included in the JSBin are a couple styles at the bottom that make the elements appear inline, although this fix will not work for an end result. What I did was added display:inline-block to both the input & button and also removed padding and border from the input. At the end of the day, the input **must have padding & border` so this will not work for my use case.
^^ box-sizing: border-box fixed that "hack", but the issue as a whole still exists in IE11.
Here is the JSBin (in order to see the issue, you must be using IE11)
The CSS, as it stands now, looks like this...
body, dd, figure, form {
margin: 0;
}
form {
margin-top: 1.6875rem;
width: 100%;
margin-right: auto;
margin-left: auto;
}
form fieldset {
margin: 0;
padding: 0;
border:0;
}
input {
border: none;
border-radius: 0;
outline: 0;
margin: 0;
padding: 0;
text-align: left;
}
input {
font-size: 12px;
line-height: 15px;
display: inline-table;
padding: 4px 12px 5px;
border: 1px solid #000;
border-radius: 0;
background-color: #fff;
color: #999;
font-style: italic;
font-weight: 300;
vertical-align: top;
margin: 6px 0 14px;
margin-top: 0;
margin-bottom: 0;
width: calc(100% - 92px);
height: 40px;
}
button {
border: 0;
height: 40px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
font-size: 13px;
display: inline-table;
position: relative;
padding: 0;
background-color: #000;
color: #fff;
width: 92px;
}
I'm assuming there is a bug with IE11 and calc() in which calc() doesn't take into account the border/padding when an element is display:inline-block or display:inline-table, although I could not find anything in my research to suggest this 100%.
Ultimately my question is, how do I get two elements to be "inline" with one being a fixed pixel value and the other a percentage width that is cross browser compliant.
EDIT: added box-sizing: border-box which made the display: inline and padding/border: 0 obsolete at the bottom of the JSBin. The issue still persists in IE11 though.
The answer to my question is as follows...
As Adam mentioned in the comments above, adding box-sizing: border-box; to, at the very least, the input & button elements fixed the issue where the border/padding was not being calculated in the calc() function.
In addition to that, changing display: inline-table to display: inline-block fixed the issue in IE11.
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.
Here's a puzzle. Basic page, one element:
http://jsfiddle.net/PZj6t/
HTML:
<div id="container"></div>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#container {
position: relative;
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
}
That one looks how I want, with the #container neatly flush to the top. But when I add a nested element:
http://jsfiddle.net/PZj6t/1/
HTML:
<div id="container">
<nav id="topnav"></nav>
</div>
CSS (new):
#topnav {
width: 100%;
height: 40px;
margin: 30px 0;
background-color: red;
}
The container jumps down. It seems that the margin-top from #topnav is somehow being passed to the container, and now the page has a scrollbar I don't want. (I'm testing in Chrome.) How do I prevent this?
(As a further mystery, if I add border: 1px solid white; to the #container's CSS, the jump disappears. Which would be fine, except that also adds two pixels worth of undesirable scroll to the page.)
This is due to a feature of CSS called margin collapsing. If there is no padding or border on a parent element, the parent and its child's margins "collapse" to the greater value of the two and is essentially applied to the parent.
For your situation, I would suggest simply adding an additional inner wrap within the container, and throwing some padding on it to simulate the margin effect you're looking for: http://jsfiddle.net/PZj6t/3/
Anything within the #inner div or below should behave as you expect, as margins only collapse when they are at the edge of their parent (and no padding or borders are present).
display:inline-block;
On Your nav element appears will fix this. Its to do with margin-collapsing see here for more detail.
Jblasco is correct, this is a neater solution though: http://jsfiddle.net/PZj6t/4/
#container {
position: relative;
margin: -1px auto 0;
width: 400px;
height: 100%;
padding-top:1px;
background-color: #666;
}
#topnav {
width: 100%;
height: 40px;
margin: 29px 0 30px;
background-color: red;
}
#container {
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
border:1px solid;
}
http://jsfiddle.net/PZj6t/12/
Update:
http://jsfiddle.net/PZj6t/1/
apply display:inline-block; on both container and topnav
I am trying to design a simple header to a page in css. I planned to stack two divs on top of each other. The top one has many tabs and the bottom one is a plain solid single image div. But when rendering i see that an extra 5px is getting added to the the heights of both these divs. So i am not able to place the bottom on exactly on top of the other one.
There is a 5px bottom margin automatically. I tried negative margins, reset the global margins and paddings to zero. Still no use.
Heres the code.
<div class ="main_nav">
<div class="first_tab">
<img src ="images/startup/tab1_brown.png" height="25" width="90" alt="Temp" />
</div>
<div class = "ind_tab">
<img src ="images/startup/tab1_orange.png" height="25" width="90" alt="Temp"/>
</div>
<div class = "ind_tab">
<img src ="images/startup/tab1_brown.png" height="25" width="90" alt="Temp" />
</div>
</div>
<div class="lock">
<img src ="images/startup/divbg_new.png" alt="Temp" />
</div>
CSS:
*{ margin:0; padding:0; }
ul.master_navigation
{
font-size: 125%;
font-weight: bold;
text-align: center;
list-style: none;
margin: 0.5em 0;
padding: 0;
}
ul.master_navigation li
{
display: inline-block;
padding: 0 1%;
}
a
{
color: #08f;
font-weight: bold;
text-decoration: none;
}
a:visited
{
color: #88f;
}
a:hover
{
color: #f00;
}
p
{
text-align: justify;
}
p.cent
{
text-align: left;
}
div.header
{
height: 200;
}
div.main_nav
{
display: inline-block;
height: 25;
width: 900;
padding: 0;
margin: 0;
vertical-align: bottom;
}
div.first_tab
{
height: 25;
float: left;
}
div.ind_tab
{
height: 25;
float: left;
margin-left: -10px;
z-index: -5;
}
div.lock
{
margin-top: -100;
height: 91;
width: 900;
padding: 0;
margin: -5;
}
body
{
width:900px;
max-width: 100%;
margin: auto;
padding: 0;
background-image:url(images/startup/bg_2.gif);
background-repeat:repeat-x;
}
.pad
{
padding: 0;
margin: 0;
}
Here's the link to the page
http://net4.ccs.neu.edu/home/pradep/
Ive been spending too much time on this. Please help.
Ege's answer was very useful for me. I have spent hours to find the reason of a bottom padding of some images in div's. It was the line-height. Set it to 0px on the interesting areas:
.divclass {
line-height: 0px; /* crucial for bottom padding 0 !!! */
}
I think your problem is the line-height. Yup, there it is. Just added line-height:0, on firebug and they stuck together.
The thing about inline-blocks is that they behave just like any inline text, you also have a similar issue on the navigation below, because you pressed enter in your code, it will render it as a non-breaking space and add extra x margins to the right and left sides as well. X here will depend on the font size.
In order to solve this, you can either close and open tags on the same line like below:
<div>
.
.
.
</div><div>
.
.
.
</div>
or you can set the font-size and line-height to 0, but thats not always possible if you don't have other selectors inside that div.
You need to specify units on your CSS declarations.
http://jsfiddle.net/m7YCW/
div.main_nav
{
display: inline-block;
height: 25px; /* set px */
width: 900;
padding: 0;
margin: 0;
vertical-align: bottom;
}
Learn to make use of your developer tools in Chrome, if you had right mouse buttoned on the elements and chosen -> inspect it would bring up the dev tools. You can then view the 'metrics' and 'computed styles' areas to see that main_nav was rendering as 30px instead of 25px and also that there was a warning symbol next to the 25 css declaration and it was being explicitly dropped.
Try setting vertical-align:bottom on the images.
<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.