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.
Related
When I use the border-radius property on modal divs (divs that pop up over my normal content), the four corners do not all round themselves. One or two corners will round, but not all four.
Here is a link to the image, I can't yet post images on Stack Overflow (Note the top left corner in the image) https://raw.githubusercontent.com/Randall-Coding/misc/master/border_round_err.png
I have tried using all the different cross-browser attributes for border rounding
-moz-border-radius: 20px; /* Also tried 20px 20px */
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
Here is my CSS code using the mixin (note it looks the same with or without the mixin).
div.contact_window{
background-color: white;
/*border-radius: 20px 20px; */ /*other way I have tried it */
-moz-border-radius: 20px; /* Also tried 20px 20px */
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
border: 3px solid black;
position:absolute;
width: 60%;
min-width:700px;
max-width:800px;
height: 520px;
overflow:scroll;
left:20%;
top: 130px;
z-index:10;
display: none;
display: block; /*DEBUG */
}
div.mask{
background-color: black;
opacity: 0.6;
position:fixed;
height:100%;
width: 100%;
z-index: 1;
top: 0px;
left: 0px;
display:none;
display:block; /*DEBUG */
}
And HTML code is as follows
<div class="contact_window" id='#contact_window'>
<%= render 'contact' %>
</div> <!-- end div.contact_form -->
<div class="mask">
I am rounding the corners of my other divs without any issue.
So I'm wondering if anyone has encountered this issue and/or has some idea what is going on here?
*I'm using Firefox, but this also holds true on my Chromium browser. My operating system is Ubuntu Linux 18.04.
*Here are the links to the SCSS and HTML files.
HTML https://github.com/Randall-Coding/misc/raw/master/index.html
CSS (SCSS) https://github.com/Randall-Coding/misc/raw/master/main.scss
edit* When I inspect the element it still shows border-radius:20px
Have you tried to achieve the rounding without the mixin by simply passing the border radius directly?
Unless you intend on changing the radius of each corner individually, it's probably best that you just pass one value to border-radius that will be applied to each corner. This can be done by doing:
border-radius: 20px;
instead of:
border-radius: 20px 20px;
Try this as your mixin instead (clearer naming):
#mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
and pass one value
#include border-radius(20px);
Ok I broke this down attribute by attribute and it turns out the issue is with the setting
overflow:scroll
Which forces the window to have sharp corners where the scrollbars would be located be.
So the answer is to remove overflow:scroll from the CSS
Try border-radius in % like
border-radius:100%;
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.
<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.
}
Good day.
I'm using plenty of CSS3 effects and I'm having problems rendering the same effects in IE 7 and 8 with the help of CSS3 Pie.
It works very well for some of the effects I require, however one of the known issues of CSS3 Pie is layout, more specifically CSS3 Pie makes top margins disappear in the element where it is applied, I only had such problem in IE 7 so far, IE 8 doesn't show the same issue.
I ask if someone knows how to solve this problem, I would like to keep it simple only using CSS to solve such issue, I think a different approach not restrained to CSS might be needed thats why I ask for help.
<style type="text/css" media="screen,projection">
#centerContainer {
width:940px;
margin-top:76px; /* without effect in the layout when CSS3 Pie is applyed */
min-height:200px;
margin-left:auto;
margin-right:auto;
margin-bottom:60px;
background-color:#FF6;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.css3pie {
behavior: url(http://localhost:999/css/PIE.htc)\9;
}
/*Note the "\9" is to limit this CSS property to IE 8 and lower since I didn't noticed the need for CSS3 Pie in IE 9 and above */
</style>
<div id="centerContainer" class="css3pie">
</div>
Solutions and suggestions are appreciated. Thank you.
I've used a wrapper div around the centerContainer div, and set the wrapper div to a padding-top equal to the same value of the margin-top centerContainer div.
<style type="text/css" media="screen,projection">
#wrapper {
paddin-top:76px;
/* same effect as the margin-top:76px; in the centerContainer */
}
#centerContainer {
width:940px;
min-height:200px;
margin-left:auto;
margin-right:auto;
margin-bottom:60px;
background-color:#FF6;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.css3pie {
behavior: url(http://localhost:999/css/PIE.htc)\9;
}
/*Note the "\9" is to limit this CSS property to IE 8 and lower since I didn't noticed the need for CSS3 Pie in IE 9 and above */
</style>
<div id="wrapper">
<div id="centerContainer" class="css3pie">
</div>
</div>
I got a problem rendering box-shadows over floating divs!
Ive tested in chrome and firefox with the same result.
<html>
<head>
</head>
<body>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
</body>
</html>
Edit: The div on top doesn't render its shadow on the div below, is there any fix for this problem or do I have to try a different solution?
regards
/Joel
Works for me in Firefox 4, but that code will never work on chrome or safari, the -moz is a vendor tag indicating mozilla.
You need add all of the following
-moz-box-shadow: 0px 8px 8px #000; width: 200px;
-webkit-box-shadow: 0px 8px 8px #000; width: 200px;
box-shadow: 0px 8px 8px #000; width: 200px;
-webkit is the vendor tag for Chrome/Safari, the following will add in drop shadows for the vendors that support it and then when it's universally supported the last rule will cover all browsers.
Edit: To get the top div's dropshadow over the other element you must position:relative and then give it a z-index higher than the bottom one.
What's wrong with them? If you're worried about not seeing the bottom shadow of the top div it's because you need a little separation. If you're having trouble seeing the box-shadow it's because you need to use vendor-specific prefixes at this stage, like so.
Demo: jsfiddle.net/q5yf3
If you want them to be stuck together, just give the first div a z-index with position:relative and it will look how you want it to.
HTML:
<div class="bs up"></div>
<div class="bs"></div>
CSS:
div.bs {
float:left;
clear:left;
margin:1em;
width:200px;
height:200px;
background:#aaa;
box-shadow:0 8px 8px #000;
-moz-box-shadow:0 8px 8px #000;
-webkit-box-shadow:0 8px 8px #000;
}
div.up { z-index:10; position:relative; }
Demo: jsfiddle.net/VaVhy
That said, I'd also recommend looking into using rgba() instead of hex values for box-shadow color as it renders the shadow a lot more naturally on non flat-colored backgrounds.
looks fine in firefox because you are using -moz-box-shadow, for webkit browsers you will have to use -webkit-box-shadow