I've got a couple stacked divs. My css is set to put a 10px margin between the two divs.
In Firefox, everything looks great.
In IE 11, it appears that the margins are replaced with padding inside the div and the margin between the divs is gone.
Here is my css for the divs:
.home_news {
width:453px;
margin-left:0;
margin-top:10px;
padding:5px;
border:1px solid black;
webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
behavior: url(/scripts/PIE.htc);
}
.home_facebook {
width:453px;
height: 505px;
overflow:hidden;
padding:5px;
margin-top:10px;
border:1px solid black;
webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
behavior: url(/scripts/PIE.htc);
margin-left:0;
}
Anyone have any ideas for me?
Thanks!
EDIT: added some html
This is how the two divs are set-up:
<div class="home_news">
<div class="block_title">Current News</div>
<table>Each row has different news item</table>
</div>
<div class="home_facebook">
<div class="block_title">Follow us on Facebook</div>
FACEBOOK MODULE GOES HERE
</div>
Pretty basic setup. The data for the news block is pulled from a database.
I pulled the PIE out of the mix and while it did seem to fix the margin between the divs, it also removed the corner radius from the divs. The padding issue is still present. You might not be able to see it in the graphic posted, but the grey shading in the title block in the IE divs is pushed down about 10px.
Related
I want to create a fine border around my text hyperlinks. However the box I have created seems to be pushing the text underneath it to the right. See the following image:
This is the CSS I have used:
div.box {
border: solid 1px #333333;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
transition: 0.2s ease;
box-sizing: border-box;
white-space: nowrap;
float:left;
}
I thought it might relate to the line spacing, but the box seems to follow the height of the line space.
Any help would be appreciated!
The border sits on the outside of the element, making that element slightly larger than the surrounding text, and the float:left causes the floating of the text, but under the end of the box due to the height issue. If you remove the float - it will layout correctly. Note that I just created a long chunk of text and swapped the box class onto a span. You don't even need the box class to be added - you could do it all with CSS selector specificity - in this case ... p span{...} ...would target the correct elements.
.box {
border: solid 1px #333333;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
transition: 0.2s ease;
box-sizing: border-box;
white-space: nowrap;
}
<p>This is a long line of <span class="box">text</span> that will break to two lines and will allow the demonstration of the box around the text within each of the spans. Each <span class="box">span</span> will have a border around the text to show the desired effect.</p>
You can try wrapping your text inside a span tag, and adding the following CSS:
span.box {
display: inline-block;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
}
So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders the whole exercise moot.
This is the code:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
Could someone help me figure out what's causing this?
See the following questions:
Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?
According to the box-shadow spec:
An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only
So if you don't want overlap, you'll have to add the margin youself
#header {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
#slider {
position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>
Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.
Anyway, thank you all for your time and help!
If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
This will make the box-shadow appear only at the bottom.
Working example:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible.
If you want to display your box shadow inside the header, just add the keyword inset to your declaration.
I am having a problem with getting multiple spans to lay on top of a few divs within a WordPress post of mine correctly.
I created my own dummy webpage within Notepad++ with all the styling and things to make sure it looked how I wanted, and it looks fine. However, when I then go and put all of the HTML structure and the CSS into my WordPress site, then it doesn't look quite right.
The HTML content is the following:
<div class="member-status">MEMBER
<span class="level-dot">•</span>
</div>
<br /><br />
<div class="silver-status">
<span class="big-checkmark">✔</span>SILVER<span class="level-dot">••</span>
</div>
<br /><br />
<div class="gold-status">GOLD
<span class="level-dot">•••</span>
</div>
And the CSS to back it is this:
.member-status {
position:relative;
width:200px;
color:#fff;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #5cadff;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #5cadff;
padding:20px 30px;
background:#1874cd;
background-image: -webkit-linear-gradient(#4f9eea, #1874cd);
background-image: -moz-linear-gradient(#4f9eea, #1874cd);
background-image: linear-gradient(#4f9eea, #1874cd);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.silver-status {
position:relative;
width:200px;
color:#555;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #bbb;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #bbb;
padding:20px 30px;
background:#c0c0c0;
background-image: -webkit-linear-gradient(#eaeaea, #c0c0c0);
background-image: -moz-linear-gradient(#eaeaea, #c0c0c0);
background-image: linear-gradient(#eaeaea, #c0c0c0);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.gold-status {
position:relative;
width:200px;
color:#e68a00;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #ffff80;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #ffff80;
padding:20px 30px;
background:#ffd700;
background-image: -webkit-linear-gradient(#fff2aa, #ffd700);
background-image: -moz-linear-gradient(#fff2aa, #ffd700);
background-image: linear-gradient(#fff2aa, #ffd700);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.big-checkmark {
position:absolute;
top:7px;
left:12px;
color:#3c3;
font-size:2.5em;
}
.level-dot {
position:absolute;
top:7px;
right:15px;
font-size:2.5em;
}
You can see the end result on JSFiddle here: http://jsfiddle.net/WcQbL/1/
Here's the thing... on Chrome this looks perfect to me. The big-checkmark and level-dot spans look perfectly placed where I want them.
In Firefox and IE11, the level-dots look like they are positioned well, but the big-checkmark is positioned way down from the center on Firefox, and slightly down from center on IE11. I am pushing both the spans down the exact same way using top:7px;
Now... I went and plugged in this same HTML structure into a test post of mine on WordPress, and I added all the appropriate CSS to my child theme's style.css file.
However, when I go to the post, both the level-dots and the big-checkmark are positioned way up high on all 3 of the divs and it looks really bad.
So, my question is... is there a better way I can go about positioning these spans on top of these divs so that it is consistent among all browsers? And is there maybe some CSS in my parent style.css that would be affecting the spans being way up high once I plug the SAME exact code into my WordPress post?
Any help would be greatly appreciated. This is my first time working with spans on top of divs, so I apologize if the CSS code is not-so-great.
One more note, I originally had posted this on the "WordPress Development" Stack Exchange, but they told me to come here. I feel like it may just be purely a markup issue that will get it to work on all browsers including my Wordpress site, but maybe it is WordPress specific.
Thanks!
I figured out the solution to my problem. In the old code, I was letting the padding on my divs more or less do the "sizing" of the div for me and give it the look that I wanted. In the old code, I had only specified a width on my divs, no height.
In the fix, I specified my own height and width (width:275px and height:70px). Then, in order to get text or other things to center correctly within a div you should specify the "line-height" property as well so I set line-height:70px to match my regular height. Then, took all of the padding out (padding:0).
As a specific example, the "member-status" class now looks like this:
.member-status {
position:relative;
height:70px;
line-height:70px;
width:275px;
color:#fff;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #5cadff;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #5cadff;
padding: 0;
background:#1874cd;
background-image: -webkit-linear-gradient(#4f9eea, #1874cd);
background-image: -moz-linear-gradient(#4f9eea, #1874cd);
background-image: linear-gradient(#4f9eea, #1874cd);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
Lastly, I was forcing the "big checkmark" and "level-dot" to be in a specific position. I took the "top:7px" property out because that was pushing it down too far now with my changes, but left the "left" and "right" properties on there to get them spaced away from the left and right borders where I wanted them.
You can see the new code at: New fixed way
And the old code at: Old wrong way
If you look at the new code in all the different browsers, it looks the exact same now and exactly how I want it -- no differences between each browser.
Hope this helps someone!
<div id="specials">
<h2>We have HOT DEALS with unbelievable prices! | We have Pre-Owned boats!</h2>
<style>
#specials {
width:695px;
float:left;
padding: 0 10px;
height:38px;
margin:7px auto 10px 13px;
background:#BAD6E3;
border:2px solid #005C8A;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 0px 0px 4px #dbdbdb; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 4px #dbdbdb; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 4px #dbdbdb; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
#specials:hover {
width:695px;
float:left;
padding:0 10px;
height:40px;
margin:5px auto 10px 13px;
background:#005C8A;
border:2px solid #005C8A;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 0px 0px 4px #dbdbdb; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 4px #dbdbdb; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 4px #dbdbdb; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
#specials h2 {float:left; margin-top:8px; color:#005C8A; padding-left: 10px;}
#specials h2 span {text-decoration:underline;}
#specials h2 a {color:#005C8A; text-decoration:none; font-size:20px;}
#specials h2 a span {color:#005C8A;}
#specials h2 a:hover {color:#fff;}
</style>
</div>
Well, the :hover is applied to the containing <div> element, not the individual <a> elements, which is what you'll need to do in order to show the hover effect on only that portion of the button.
I've created a fiddle to show how you might do it: http://jsfiddle.net/TJG8G/
EDIT
What I did...
Best bet would be to diff your original CSS and mine but the main points are:
No :hover styles on the container. Apply the :hover CSS from the container to the <a> elements instead.
Set the <a> elements to display: inline-block
Muck about with the padding and line-height <a> elements and remove the padding on the h2.
Adjust the border radius rules on the individual A elements (so that the left A only has a curve on the left and the right A has the curve on the right.) This also required adding a class to the second a.
If I understand your issue correctly, you want the blue background to only show up on the link you're hovering over.
In that case, a simple solution that may work for you is to move the background color from the container hover to the link hover.
Example Fiddle
CSS:
#specials:hover {
// existing styles
// background:#005C8A; <- remove this
}
#specials h2 a:hover {
color:#fff;
background:#005C8A; // <- add it back here.
}
i have a div which has a ribbon background image to it. I'm wanting to position my div with the ribbon backgrounnd over another div (div 2) so it looks like the ribbon is wrapped around the 2nd div.
Now this works fine in Chrome and safari and i have had to use assitional css settings for firefox but IE and Opera both display my ribbon div about 25px higher than in chrome or safari.
Im not sure why this is and i cant seem to get it not to do positon right ( i need to move it down about 25px somehow only in these two browsers)
(div 1)
<div class="side-ribbon4"><img src="assets/img/sidebar/1.png" width="118" height="118" /></div>
div 1 css:
.side-ribbon4 {
width:28px;
height:21px;
margin-left:111px;
padding-right:0px;
float:right;
text-align:center;
margin-top:2273px;
position:absolute;
z-index:30;
}
im placing it on top of this div (div 2)
div 2 css:
.categories-box2 {
width: 200px;
float: left;
border:solid;
border: 1px solid #cccccc;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
margin-bottom: 30px;
margin-top:10px;
margin-left: 20px;
text-align: center;
background-color: #FFF;
/* [disabled]margin-left: 30px; */
overflow: hidden;
padding-top: 20px;
padding-bottom: 20px;
position:relative;
}
http://jsfiddle.net/ZnRSm/3/
.side-ribbon4 {position: relative;}
.categories-box2 {position: absolute;}
<div class="side-ribbon4">
<img src="http://placehold.it/118x118" width="118" height="118" />
<div class="categories-box2"> </div>
</div>
You'll want to do some study of CSS positioning and why it usually shouldn't be combined with floats. For one thing, absolutely-positioned elements are typically placed inside (and therefore relative to) relatively-positioned elements.
One other hint is that if you're having this type of problem, where browsers are rendering your layout differently, it probably means you have a bad layout. IE9+, Firefox, Chrome, and Safari are all quite standards-compliant and should show you nearly identical results.
Since you're new to SO I'll remind you to kindly select an answer, if one is provided, by clicking the checkmark.