I have an annoying problem, it works fine in chrome but in firefox there is a gap for no reason between two divs.
<div class="body-right">
<!-- VERTICAL GAP IS HERE -->
<div class="body-right-container">
<div class="body-right-pad">
</div>
</div>
Chrome: http://gyazo.com/d5464f5fe791c3958d28816dfd03803c
Firefox: http://gyazo.com/f5f25eeab19622a2696e2d2510e1ea07
Nothing in my css has any kind of margin that would be causing this gap. Any ideas?
.body-right {
float: left;
width: 767px;
background-color:#ebebeb;
border-left: #c7c7c7 1px solid;
padding-left: 1px;
min-height: inherit;
}
.body-right-container {
display:block;
background-color:#ebebeb;
position: relative;
padding: 0 0 49px 49px;
min-height: inherit;
}
.body-right-pad {
width: 300%;
background-color:#ebebeb;
position: absolute;
left: 765px;
height: 100%;
}
I see a large gray rectangle on the far right, that element could be potentially the one that's creating your "gap". I see it on the Firefox screenshot, but not in the Chrome.
You should investigate that element and see why it's appearing there in Firefox. This could possibly be due to a width:100% applied to the container holding that gray rectangle.
Related
Here's a simple setup with two divs next to each other in a parent container which has a border while the two children have different background colors. There's also a codepen here:
.tag {
/* Also happens with .1rem */
border: 1px solid black;
display: inline-block;
height: 50px;
}
.key {
background: black;
color: white;
display: inline-block;
height: 100%;
width: 50px;
}
.value {
display: inline-block;
height: 100%;
width: 50px;
}
<div class="tag">
<div class="key"></div>
<div class="value"></div>
</div>
On Google Chrome when zooming in I get rendering issues like this (note the white line between the border and black div on the top/left edges):
I've tried various things like flexbox, using rem for the border width etc., but at best it changes at which zoom level and on which edge the issue appears. I assume this is some kind of sub-pixel rounding issue, but I wonder if there's any way to fix this.
I'm using float to align 3 div ( left, center, right ). the first picture show how it looks on
on Google Chrome. the second picture show how
it looks on Microsoft Edge . a float works fine on Google Chrome, when using Microsoft Edge the last div(right) moved to a left-bottom container. why this is happens
* body,
p,
img {
margin: 0;
}
.container {
width: 900px;
border: 5px solid green;
padding: 3px;
margin: auto;
}
.left {
background-color: blueviolet;
width: 150px;
height: 300px;
line-height: 100px;
text-align: center;
float: left;
}
.center {
width: 600px;
height: 300px;
background-color: burlywood;
float: left;
}
.right {
width: 150px;
height: 300px;
background-color: coral;
float: left;
}
.clear {
clear: left;
}
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
The CSS you wrote make the output appear as in the picture. In your container you used border and padding. The two will cause the actual width of the container to be less than 900px on some browser. So the width is 900 - (5 + 5) - (3 + 3) = 884px.
Possibly, chrome tried to understand what you want, but Edge give you actual output. This is expected as border and padding affect the final width of div containers. Though, setting margin does not affect it.
To resolve the issue and cause the three dogs to appear on same line on all browser, i.e the coral div to appear on the right, you will add the following CSS to your container (or preferably body tag):
box-sizing: border-box;
You can read more at https://css-tricks.com/box-sizing/
Don't forget to add all the Vendor Prefixes
The styling I wanted to be is in Chrome but it looks different in Firefox and IE. All my fields are float to the right except the field "name". Is it about the floating?
My Chrome:
My Firefox and IE:
There is a huge spaces besides "Status" and the header looks bigger in height too.
===CSS====
.column-name { margin: 2px; width: 40%; }
.column-priority { float: right; margin: 2px 12px; text-align: center; width: 100px;}
.column-severity { float: right; margin: 2px 12px; text-align: center; width: 100px;}
.column-status { float: right; margin: 2px; width: 100px;}
===HTML====
<div class="results-header ">
<div class="column-status" value="status">Status<span class="sort jive-icon-sml"></span></div>
<div class="column-severity" value="severity">Severity<span class="sort jive-icon-sml"></span></div>
<div class="column-priority" value="priority">Priority<span class="sort jive-icon-sml jive-icon-arrow-generic-down"></span></div>
<div class="column-name" value="name" >Name</div>
</div>
I'm 99% sure it's because you need to tell which padding it has because that has higher priority in those browsers.
You might make a star rule
*{margin:0; padding:0;}
but again you need to post more code before I can tell you 100% what to do. btw if your uncertain about anything, related to browser compabtility see: http://www.quirksmode.org/css/contents.html
always use css resets {margin: 0; padding: 0; border: 0; outline: 0;}
beacuse every browser has it's own margin, padding...
EDIT: you can view the page here: http://websitem.gazi.edu.tr/test/index.html
I'm trying to do the effect in the screenshot below:
The first one is from Chrome. Firefox show the same. But Internet Explorer from version 7 up to 9 shows the second picture.
My html structure is this:
<div class="header-menu">
<div class="container">
<div class="header-curve"></div>
<div class="header-building"></div>
</div>
</div>
And my css is this (dont bother with LESS specific syntax)
.header-menu {
#gradient > .vertical(#baseColor, #baseColorDark);
height: 82px;
margin-top: 82px;
.header-curve {
background: #baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
height: 82px;
margin-top: -82px;
width: 1020px;
}
.header-building {
background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
height: 214px;
margin-top: -82px;
width: 1000px;
}
}
how can i solve the problem with IE? i already tried position: relative and zoom:1 fixes.
Thanks.
It looks like the filter style on your .header-menu class is causing it to be hidden in IE, is this necessary?
I think you were on the right track with the position: relative;, but also add a z-index value in there (play with the value until it appears correctly).
I might be missing something, but I still don't understand why you're bothering with the negative margin. The following CSS would do exactly the same, no?
.header-menu {
#gradient > .vertical(#baseColor, #baseColorDark);
.header-curve {
background: #baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
height: 82px;
width: 1020px;
}
.header-building {
background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
height: 214px;
width: 1000px;
}
}
I have a div which contains another div with a background image:
<div class="icePnlGrp graMyTasksHomePanelDiv">
<div class="icePnlGrp graMyTasksHomePanelTitleDiv" id="j_id157:j_id165">
<label class="iceOutLbl graMyTasksHomePanelTitle" id="j_id157:j_id166">PLAN</label>
<!--rest of the code--!>
</div>
</div>
This looks fine on Chrome and Firefox:
But on IE it looks strange:
The CSS classes for those two divs:
.gramytaskshomepaneldiv {
background-color: whiteSmoke;
width: 156px;
height: 150px;
margin-right: 50px;
border-right: 3px #EEE9E9 ridge;
border-bottom: 3px #EEE9E9 ridge;
display: inline;
float: left;
margin-bottom: 15px;
}
.gramytaskshomepaneltitlediv {
background: url('/resources/images/external/navigation_arrow.png');
height: 40px;
margin-top: -30px;
width: 185px;
position: relative;
margin-left: -4px;
}
Can you please give a helping hand? Most of the IE 8 issues I had I've solved using position relative, but here this simply does not work...
Thanks...
Ps: If I do hover on a link on IE, on the same page, on that main div (because the rest of the code contains those links), the image AUTOMATICALLY RENDERS fine... Or if I disable any css property from IE developer tools the page is re-render and the image appears fine...which is really strange, ineded...