Here an example http://jsbin.com/oqisuv/
CSS
body {
background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y;
}
.menu {
width:989px;
margin:auto;
height:100px;
background:#666666;
line-height:100px;
text-align:center;
color:#fff;
}
HTML
<body>
<div class="menu">Hello</div>
</body>
If you view an example above on Google Chrome you will see the .menu looks like have a margin-left:-1px or margin-right:1px.
On Firefox & IE it's look great. How do I fix this one?
#media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
}
Background center with chrome (bug)
body {
background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) 50% 0 repeat-y;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-position: 50.001% 0;
}
}
http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/
Similar to rudsy's answer, but this one seems to work better:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-position: 49.999% 0;
}
}
Set the body margin to 0 ...Try this css:
body {
background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y;
margin: 0;
}
.menu {
width:990px;
height:100px;
margin: 0 auto;
background:#666666;
line-height:100px;
text-align:center;
color:#fff;
}
Chrome & firefox rendered differently it's better if you want result same in all browser the always give width in EVEN values not in ODD. So, write like this:
.menu {
width:990px;
}
Check this http://jsbin.com/oqisuv/2
UPDATED
If you want it's work perfect in chrome the you can use this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.menu {
width:990px;
}
Check this http://jsbin.com/oqisuv/5/
Most cross-browser and future-proof solution is to attach background to centered block itself (or to its centered parent that has horizontal padding for background to be visible on the outside of its child).
Attempts to achieve pixel-perfect matching of background and block centered independently (especially with hacks for specific browsers) is dead-end road.
Related
I have a shift calendar for a local fire department that I built using foundation5 responsive css framework. Everything works great when viewing in my browser and resizing the window.
example:
However, when I view this on an iPhone the calendar days are moved one block up.
Here is my css:
.calRow {
max-width:100%;
}
.calMonth, .calPrev, .calNext {
text-transform:uppercase;
font-weight:bold;
color:gray;
font-size:1.7em;
margin:15px 0;
text-align:center;
}
.calMonth {
text-align:center;
}
.calPrev {
text-align:left;
}
.calNext {
text-align:right;
}
.pCal ul li {
text-align:center;
height:0;
padding:0 0 14.28571%;
border-left:solid 1px gray;
border-top:solid 1px gray;
position: relative;
}
.pCal ul li:after {
content:'';
display: block;
margin-top: 100%;
}
.pCal ul li dl {
position:relative;
padding:0;
margin:0;
top:0;
height:100%;
}
.pCal ul li dl dt {
padding:0;
margin:0;
}
.pCal ul li.calHead {
font-size:0.8em;
border:none;
color:gray;
height:25px;
margin-bottom:-20px;
}
.calToday {
border-bottom:0.5em solid lightGrey;
}
.calDay {
position:relative;
padding:15%;
margin:0;
top:-100%;
}
.calLayer2, .calLayer3, .calLayer4 {
position:relative;
padding:0;
}
.calLayer2 {
top:-200%;
}
.calLayer3 {
top:-300%;
}
.calLayer4 {
top:-400%;
}
/* SHIFT HEIGHT / SIZE STYLES */
.shift2 {
height:50%
}
.shift3 {
height:33.33%
}
.shift4 {
height:25%
}
/* OVERLAY STYLES */
.calX img{
width:100%;
padding-top:2%;
}
.calCircle img{
width:100%;
padding:9% 7%;
}
.calSquare img {
width:100%;
padding:7%;
}
.pCal .calDayParts {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.pCal .calDayOverlay {
position: absolute;
top: 0;
bottom: 0;
height: auto;
width:100%;
}
.calLayer1, .calLayer2, .calLayer3 {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
Can someone help me figure out why this is or at least suggest a way to debug it.
Thanks
EDIT 1 JS FIDDLE LINK
GO HERE for jsfiddle example - same issue is present when viewed on phone
side note, this answer has instructions on how to use iPhone over local network to connect to localhost of IIS on windows PC
It's difficult to debug without being able to inspect the site first hand. From first glance though, I would try adding a float and clear to the .calRow class, provided it is what it sounds like (the rows that make up the calendar).
.calRow {
float: left;
clear: both;
width: 100%;
}
Keep in mind by floating the calendar rows you will most likely need to also float the calendar container.
If that doesn't solve the problem it's most likely related to your absolute positioned elements not being positioned relatively to their parent element.
EDIT: I should add, if you have access to safari, an iPhone and a cord to plug the iPhone into your desktop. You can inspect the site using safari on your desktop by going to 'Develop' > 'iPhone'. More info on remote debugging here.
Okay,
so the problem was not with the css exactly. There were other styles bleeding into my styles. I placed this css inside an angular2 component and "encapsulated" the css, then it worked without the positioning error. It wraps the code in a shadow dom
I never did find out what style was bleeding into mine but the problem is now solved.
We have been working on a new calendar interface which includes a printable "classic" calendar view. There was much working going into the #media print stylesheet, and while everything is looking great in Safari, the event times are overlapping the event name in Chrome. Cannot figure out why.
#media print {
body{
-webkit-print-color-adjust:exact;
}
img,
.calendar-nav button,
.calendar-date-picker,
.event .btn-group {
display: none;
}
.calendar-nav {
text-align: center;
padding-top:20px;
}
.calendar-nav .date-title {
font-size: 50px;
font-weight: normal;
}
a:link:after,
a:visited:after {
content: "";
}
#calendarTable div.event {
padding: 0;
margin-left:0;
text-indent: 0;
}
.events.active {
width: 100%
}
}
EDIT: I fixed the overlap issue by adding .event-location {float: none; margin-top: 0px;} into the print media query.
Also, in Firefox there is a huge margin to the left of the content:
It is pretty hard debugging these print style sheet to figure out what is going on. Even Chrome developer tools will show the correct print preview, but doing a real print shows it incorrect.
Any ideas on what to do to fix these issues? Is using an #media print inside of our main style sheet an issue?
http://www.puc.edu/calendar?state=full
Looks like adding a few styles to overwrite the Bootstrap defaults was all I needed:
.event-location {
float: none !important;
margin-top: 0px !important;
}
.event-time {
float: none !important;
}
body .container {
width:100% !important;
margin:0 !important;
}
I don't have iPad, so i can't test properly, online simulators aren't reliable enough, it seems.
Problem: (client's words)
The site loads perfectly in both portrait and landscape. But, if I view in landscape, and then rotate the screen, the portrait view is off to the left as before, but not quite as bad.
Image: CENSORED NSFW IMAGE
Link: http://bybyweb.com/london (Warning: NSFW content)
Note: it happens in all browsers, except mercury.
I have used media queries for 'portrait' view, since iPad in landscape mode (1024px) should show desktop version properly.
CSS:
#media screen and (min-width : 767px) and (max-width: 1023px) {
#date h1 {
font-size:48px;
line-height:88px;
margin:-3px 0 0 340px;
padding:0;
color:#fff;
letter-spacing:0px;
word-spacing:0px;
font-weight:bold;
}
#joinform {
float: right;
width: 525px;
height: 500px;
left: 300px;
position: absolute;
z-index: 7;
padding-left: 5px;
padding-top: 6px;
overflow:hidden;
}
#member-login {
position:absolute;
left:470px;
top:15px;
}
#members-signup {
width:180px;
}
#members-area h2 {
line-height:30px;
font-size:30px;
margin:0 0 0 15px;
padding:65px 0 0 0;
font-weight:bold;
color: #454545;
}
#members-list {
width:500px;
height:220px;
float:left;
overflow:hidden;
}
#members-list h3 {
line-height:20px;
font-size:20px;
margin:0px;
padding:25px 0 5px 0px;
font-weight:400;
}
#content {
width:100%;
}
#about-area {
width:100%;
}
#about-area p{
width:90%;
}
#about-area h3 br{
display:none;
}
#about-area p br {
display:none;
}
#join-img-holder {
width:100%;
}
#members-area {
width:100%;
}
#logo-area {
width:100%;
}
#footer-content {
width:100%;
}
}
Complete page css link: http://bybyweb.com/london/css/style.css
What i am doing wrong?
P.S. Fix with position:relative didn't solved my problem, there is still a lot of empty space in 'portrait' view?! I would appreciate help. It is strange that issue occurs after orientation change.
And answer is: problem was width of one element - #joinform.
I have decreased width to 463px, and now all works fine.
It seems that overflow: hidden didn't work: iPad tend to 'show' hidden content, and to 'push' elements on page, if needed.
So, sum of widths shouldn't be more than 100% in any case, iPad doesn't tolerate it.
Also, i got good advice related to iPad testing - Google Chrome emulator (included in latest version) is very reliable (errors was visible in emulation).
I hope this will help to someone.
I'm having some issues with parts of the footer on my website getting cut of on different browsers.
On my website here http://reportalert.info/index-test.php, the twitter, rss and share icons get cut off and move around slightly when on different browsers. I've tried changing the background position and padding of each of the icons but I can't seem to get it to work across different browsers. Any suggestions on how to fix this?
Here is the code that I have for the footer:
#footer
{
clear: both;
font-family: "Droid Serif";
margin:10px 0;
padding-bottom:60px;
width:100%;
height:10px;
text-align:left;
font-size:80%;
color:#444;
}
a.ftwitter
{
background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-twitter.png) left no-repeat;
background-position:0 -22.5px;
padding:3px 55px;
}
a.ftwitter:hover
{
background-position:0 0;
padding:4px 55px;
}
a.frssfeed
{
background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-feed.png) left no-repeat;
background-position:0 -26.5px;
padding:5px 55px;
}
a.frssfeed:hover
{
background-position:0 0;
padding:6px 55px;
}
a.fshare
{
background:url(http://reportalert.info/images/nra/ra-share.png) left no-repeat;
background-position:0 -22.5px;
padding:3px 60px;
}
a.fshare:hover
{
background-position:0 0;
padding:4px 60px;
}
Thanks in advance for your help
Padding works differently in every browser, that's why your icons gets cut off in Chrome.
I would use a specific width and height instead.
Instead of padding, try using width and height. And add a display: inline-block. Here for example:
a.ftwitter
{
display: inline-block;
background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-twitter.png) left no-repeat;
background-position:0 -22.5px;
width: 110px;
height: 22px;
}
I think this might help. Apply this to your icons:
position:relative;
z-index:99;
The icons that get cut off are all empty a elements. Because it's an inline flow element, that means it collapses to default text height - 20 pixels in the font you use, while the Twitter icon is 22, hence causing 2 pixels to be cut off.
Set the anchors to display:inline-block, or another block layout style fitting in your layout, and the correct height which is then allowed, and it's solved.
I have a menu with hover-over effects created with an unordered list, css, and an image. The menu appears correctly when viewed in IE9, FF v15, and Chome v22. However, the menu does not appear correctly in compatibility mode in IE9, or when setting Document Mode to IE8 standards or below. It has some cascarding effect where the list elements each appear slightly lower than the last.
The correct appearance is:
The appearance in compatibility mode or Document Mode IE8 or below is:
The HTML is:
<div class="Menu2">
<ul>
<li>Home</li>
<li>CoolRooms</li>
<li>OnlineBookings</li>
<li>Terms&Conditions</li>
<li>Madigan'sMilk</li>
</ul>
</div>
The CSS is:
.Menu2 {
z-index:100px;
}
.Menu2 ul {
width:850px;
padding:0;
margin:0;
/*margin-left:98px;*/
list-style-type:none;
}
.Menu2 li a {
display: block;
float: left;
height:65px;
background-image: url(../images/Menu.png);
text-indent:-9999px;
}
.MenuHome {
width:99px;
background-position:0 0;
}
.MenuCoolRooms {
width:149px;
background-position:-99px 0;
}
.MenuOnlineBookings {
width:195px;
background-position:-249px 0;
}
.MenuTermsAndConditions {
width:221px;
background-position:-444px 0;
}
.MenuMadigansMilk {
width:186px;
background-position:-665px 0;
}
.MenuHome:hover {
background-position:0 -65px;
}
.MenuCoolRooms:hover {
background-position:-99px -65px;
}
.MenuOnlineBookings:hover {
background-position:-249px -65px;
}
.MenuTermsAndConditions:hover {
background-position:-444px -65px;
}
.MenuMadigansMilk:hover {
background-position:-665px -65px;
}
The raw menu image is:
The left and right edges of the menu (that exist above the blue background) can be ignored for the sake of this question.
Any ideas how to correct the flow of the list elements so they remain horizontally aligned in the other IE versions/modes?
Have a look at
http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/
2. Staircase Effect
You could try modernizerjs plugin for fixing css and html for older browsers