I'm trying to figure this one out. Its explained in the image.
As you can seem the margins are set as follows:
margin: -5px -5px 5px 5px;
However, for some reason, chrome is reading the right margin as -25px. Why is this happening?
Related
I posted this question in WordPress Stack, but now they're telling me I should post in in Stack Exchange because this is probably a purely css problem.
I am developing a WordPress page with a fixed background, so the content area scrolls up and down. I guess it's parallax, or something like it. When I view the page in Chrome, the end of the content area meets the footer correctly, and the footer is the last thing you see at the bottom of the page. So far, so good.
But in Firefox, the content area scrolls upward another few hundred pixels, so that you can see the bottom of the fixed background picture below the bottom edge of the footer.
In order to understand the problem, view the following link in both Chrome and Firefox to see the differences. What I want it to do in Firefox is what it is doing in Chrome:
About page
You have a hardcoded height in your code.
#second-string {
position: relative;
background-color: #fee;
width: 100%;
height: 3000px; // Overwrite this or remove it, if you can
margin-top: 500px;
margin-bottom: 0px;
padding-top: 30px;
box-shadow: inset 0px 11px 8px -10px #000, inset 0px -11px 8px -10px #000;
}
I have this site here:
http://artendijen.com/susan_dev/
and I have a box-shadow around my nav box, I am looking to have the shadow a bit smaller, a color that looks more like a shadow and all around, except for the left side, just the top, bottom, and right side. Is this possible?
box-shadow: 10px 10px 5px #000;
The syntax of the box-shadow is like this (ignoring inset and spread):
box-shadow: <offset-x> <offset-y> <size> <color>;
So to have the shadow smaller, decrease the size.
To have the shadow at a different position, change the offsets.
For a more realistic color try a more transparent color.
This for example would give a result like you want it:
box-shadow: 5px 0px 3px rgba(0,0,0,.5);
My container div adds a scroll bar below my div #wrapper.
This is my css for the wrapper
#wrapper {
background:#383434;
width:1000px;
height:auto !important;
min-height:100%;
overflow:hidden;
height: 100%;
-moz-box-shadow: 0 2px 15px 5px #000;
-webkit-box-shadow: 0 2px 15px 5px#000;
box-shadow: 0px 2px 15px 5px #01DF01;
margin-top:20px;
border-radius:5px;
margin-bottom:50px;
}
How can I remove or hide the scrollbar?
Deleting/modifying overflow:auto; solves the problem. I think hidden is what you are looking for.
If you look at the documentation you can find what does the different values actually do:
visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
auto
Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
overflow: auto means to show a scrollbar if the content overflows, which is happening in your case. Perhaps what you want is an overflow: hidden, which will not show any scroll bars. In your site, this seems to work.
The other option is to hunt down what it is that has a size overflowing your container and shrink it.
You can add overflow-x: hidden to the style for #wrapper.
Edit:
I'm finding that the margins for your #middle styling is causing that horizontal scrollbar to appear. Putting margin-top: -55px and clearing the margin property on it fixes the problem.
I am trying to make a HTML page using two column layout.
I have a version in jsfiddle
http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/35/
I am unable to set a top margin for the the inner container.Though I have given a top-margin for the innerContainer its not been reflected in the page.
The reason I am using an inner container for containing the left-sidebar and innerContainer is that in the actual page I have two more divs side by side in the inner-container.I do not prefer to use three column layout for that reason.
Your issue is with margin collapsing. You can prevent the margins from collapsing by using a border or padding. There's a good explanation here: http://reference.sitepoint.com/css/collapsingmargins
http://jsfiddle.net/eFMpJ/46/
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
border-top: 1px solid black;
// or padding-top: 1px;
}
First of all the closing div is missing for the opening .
Then I added padding-top of 10px in outerContainer.
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
padding-top: 10px;
}
I think this will solve your problem.
Please let me know what is the result.
I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample:
http://jsfiddle.net/bcdQQ/
This issue happens if the width is not divisible by the border-width.
This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
could you put it in a smaller container div with overflow hidden?