Weird Firefox overflow/float behavior - html

I have a simple layout which works fine in Chrome, Safari even Opera too (OS X). The surprise for me here is Firefox. (IE and Win not tested yet).
The problem is fieldset.ownerbox isn't floating in Firefox. (The two semi-transparent fieldset below the pie-chart)
CSS rules applied here:
#owners {
position: relative;
width: 940px;
left: 0px;
margin-left: 0px;
z-index: 1;
top: -240px;
font-size: 16px;
}
.ownerbox {
width: 310px;
height: 150px;
padding: 10px;
margin-right: 20px;
float: left;
background: rgba(255,255,255,0.5);
color: #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.ownerbox.large {
width: 500px;
padding: 0px 10px 20px 10px;
}
Please help, what's wrong with my approach?

Readjust your widths so it takes padding into account. You can overflow-x:hidden; on #owners to see how it looks "contained".
Alternatively adjust the width on #owners.
Edit: Seems you just need to clear:both on #owners.

Related

issue with how page is appearing on IE11

Please bear with me as I'm new to IE11 debugging.
For the info, this bug is only happening in IE11, browsers like Chrome or FireFox do not have this issue
Currently part of my webpage is displaying that
This is ok.
However, when choosing through a different property, and clicking on one of the property this is what I have
From what I can see, the CSS is not used/read correctly by IE11.
This is my CSS
.floor-details-item {
min-height: 160px;
width: 100%;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
&.opac {
opacity: 0.2;
}
I've tried to add an !important on the width in the css but IE11 refuses to take into account and still gives me the wrong width.
.floor-details-item {
min-height: 160px;
width: 100% !important;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
&.opac {
opacity: 0.2;
}
When going through IE11 console when inspecting the element, this is what I have
Funny part is when I change it manually and typing 100% as you can see below, then the width issue is fixed.
Thank you for any insight you may provide.
update :
I have tried the following on the CSS. As this link is saying that IE 11 is not fond of width with !important, I added in the css the following
.floor-details-item {
min-height: 160px;
/*width: 100% !important;*/
/*adding auto and initial*/
width: auto;
width: initial;
But nothing so far.
Try to add min-width: 1px;. It saved my ass many times;-)
After many wrangles plus the help of my colleague, I found where the issue was located.
It was due to the css.
.floor-details {
width: 44%;
margin-left: 5px;
height: 555px;
float: left;
background-color: #FFFFFF;
border-radius: 5px;
border: 1px solid #eeeeee;
border-left: 20px solid #C2EFDF;
overflow-y: auto;
padding: 5px;
//display: flex;
align-items: center;
flex-direction: column;
.floor-details-item {
min-height: 160px;
width: 100%;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
//display: flex;
min-width: 1px;
IE11 does not like the display: flex; as a child. Removing it from the child also mean removing it from the parent as you can see from the code. Once done, the issue is fixed.

Div won't be at top of page

I have a div on my website that won't be on the top, it's always a little bit below the top so I was looking for a way to make it be at the top without space between the div and the top, but I've had no luck yet.
Here is the CSS code I've tried so far:
.usertopbar {
display: inline-block;
background: url(images/counterbar_bg.jpg) repeat-x #111;
height: 32px;
bottom: 600px;
width: 1100px;
line-height: 30px;
text-align: left;
padding-left: 10px;
box-shadow: 0px 0px 16px #000;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
Your code looks ok (though I tend to avoid explicitly setting a height on things at all costs). I suggest including normalize.css before your own CSS. It will reset several of the browser's defaults, which is what I believe is getting in your way here. It's also the default used in the Bootstrap and Foundation frameworks, so you can bet it's one of the best reset stylesheets out there.
Set the margin and padding or your <html> and <body> to 0. To be specific, I think it is the margin of the <body> that does it, but make it a habit to explicitly set them all to 0 by default.
You forgot to add a dot (or hash) to the element. Be sure to set the margin and padding of html & body to 0. See the answer and cleaned code below. If you want to have the div sticky at the top, add position: fixed; and top: 0; left: 0; to the snippet.
html,body {
margin: 0;
padding: 0;
}
.usertopbar {
display: inline-block;
background: url(images/counterbar_bg.jpg) repeat-x #111;
height: 32px;
width: 1100px;
line-height: 30px;
text-align: left;
padding-left: 10px;
box-shadow: 0px 0px 16px #000;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
<div class="usertopbar"></div>

border-radius and overflow in opera browser

I want to display a part of image in circle div. I have a code, but it doesn't work in Opera.
CSS:
body {
background-color: silver;
}
div {
width: 90px;
height: 90px;
border: 1px solid;
overflow: hidden;
border-radius: 45px;
}
img {
margin-left: -75px;
width: 350px;
height: 90px;
}​
HTML:
<div>
<img src="http://diskuse.jakpsatweb.cz/img/logo.png">
</div>​
http://jsfiddle.net/vpfEY/6/
How can I fix it?
Check border-radius support hear also check this
Looking at you code it seems working i have tested it on chrome, firefox and opera. and its working.
If you are using the older version try using
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
NOTE But this is not required for morden browsers
I am unsure why an image would not respect the border-radius property. However I was able to get it to work using a background image.
HTML
<div></div>
CSS:
body {
background-color: silver;
}
div {
width: 90px;
height: 90px;
border: 1px solid;
overflow: hidden;
border-radius: 45px;
background:url(http://diskuse.jakpsatweb.cz/img/logo.png) -115px 0 no-repeat;
}
http://jsfiddle.net/vpfEY/18/

Google Chrome breaks links with z-index: -1

So recently I've come across an issue with Chrome in which if I set a z-index of -1 to a position: relative; unordered list, the links become unclickable.
See http://jsfiddle.net/raLnx/ in Chrome 20.0.1132.47m for an example.
There is no issue if both ul sections are given a positive z-index, but I figured this is either a bug in chrome or there is a better way than setting something position: relative; when I don't need to.
The css in question:
ul.over {
height: 40px;
line-height: 40px;
border-radius: 5px;
background-color: #DDD;
border-bottom: 2px solid #AAA;
}
ul.under {
height: 35px;
padding: 0 30px;
background-color: #EEE;
line-height: 35px;
font-size: 90%;
position: relative;
bottom: 5px;
z-index: -1;
}
Any ideas?
The reason it happens is because your div #nav is now above your list/links. You will have to remove z-index from your list.

css3 border-radius - inside is square on Chrome + Safari?

It is easiest to describe this problem with pictures. How it is meant to look (works in Firefox):
firefox
In Chrome and Safari the insides of the border are square for some reason:
chrome
Here is my CSS:
.header {
width: 850px;
margin-left: auto;
margin-right: auto;
background-color: #F7F7F7;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px 40px 40px 40px;
border: 20px solid rgba(255,255,255,0.1);
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
margin-top: 20px;
}
Any ideas?
EDIT - here is a jfiddle of it: jsfiddle.net/oliverw92/pJgyu/11262/
It's a known Webkit and Opera bug: https://bugs.webkit.org/show_bug.cgi?id=23166
Until it's fixed, your only way around it is using 2 elements I'm afraid...
If you remove the alpha from the border, it works. Since you probably don't want to do that, you may be able to use two nested elements. Example here.
I think this is normal Webkit behavior when clipping to the box's padding. The padding is square, i.e., not defined by the border's curves, and so the background color overlays portions of the border.
Try this instead (via a SPAN nested inside your DIV):
CSS:
body {
background-color: #999;
}
.header {
width: 400px;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px 40px 40px 40px;
border: 20px solid rgba(255,255,255,0.1);
margin-top: 20px;
height: 85px;
font-weight: 100;
font-size: 70px;
vertical-align: middle;
text-align: center;
}
.header span
{
background-color: #F7F7F7;
display: inline-block;
width:100%;
border-radius: 20px 20px;
}
HTML:
<div class="header">
<span>DataLog</span>
</div>
Side Note: Aside from your code, I didn't bother adding all the vendor prefixes; I'll leave that to you.
Or you can just use a box-shadow and adjust the top margin. My example only includes the -web-kit versions
.header {
width: 400px;
margin-left: auto;
margin-right: auto;
background-color: #F7F7F7;
-webkit-border-radius: 40px;
-webkit-box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.10);
margin-top: 40px;
height: 85px;
font-weight: 100;
font-size: 70px;
vertical-align: middle;
text-align: center;
}
Here is a similar JSFiddle to your first example using only your original div
I have been experiencing a similar issue. It turned out that because the container inside the container that i have added with the border-radius has a background-colour, it covers the inside of the border.
To rectify this i have added a border-radius to the child object as well as it makes it look the same.