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
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.
I've created a tab menu using Divs and CSS, and I'm wondering how I can make the selected tab change color? I assumed it would be by making .tab's background color different, but for some reason it only works for half of the tab... See here: http://www.sunporchhomes.com/features-3
Does anyone know why that is? See code below.
Features.html
<div class="tabcontent">
<div class="left_lane float">
<div class="tab blu" id="t1">INTERIORS</div><br>
<div class="tab" id="t2">BATHROOMS</div><br>
<div class="tab" id="t3">KITCHEN</div><br>
<div class="tab" id="t4">EXTRAS</div><br>
</div>
.CSS
.tabcontent {
position: absolute;
padding-top:35px;
padding-left:485px;
width: 600px; !important /*HOLD TABS AND CONTENT*/
z-index:205;
height:300px;
}
.left_lane {
border-right: 2px #ffffff solid;
padding-right: 0px;
width:100px;
font-family: Trebuchet MS;
color:#ffffff;
background-color:#6cc7df;
height:176px;
font-size:14px;
}
.right {
background-color:#0ba8cb;
width:410;
height:500;
}
.float {
float: left;
padding-left:0px;
padding-top:10px;
}
.tab {
height:20px;
padding-left:8px;
border-bottom: 2px #FFF solid;
}
.tab #active {
}
.cnt {
display: none;
font-family: Trebuchet MS;
font-size:14px;
color:#ffffff;
padding-left: 10px;
padding-right:10px;
}
#c1 {
display: block;
}
.clear {
clear: left;
}
.blu {
color: #ffffff;
background-color:#0ba8cb;
}
The height of the tabs divs are only 20px, which is what gets filled with that darker blue. The lighter blue appears to be coming from another element rendering behind that winds up showing when the front div changes color, probably b/c of padding or margin settings.
For example, the padding of the container element is affecting the first tab, as it's being pushed down by the padding-top of the parent div.
I suggest using Chrome devtools or FireFox/IE devtools to hover over your html elements and look at what styles are affecting them, and what the actual geometries of their boxes are. Makes debugging this stuff much easier.
You can play around with CSS's:
padding-top
margin-top
for the tab and left_lane classes.
I got some almost-satisfactory results, but I am not a fan of hard-coding pixel dimensions. So I'll leave it up to you.
Add an "active" class to the "li" as given bellow. Also add an simple css. The css code also added bellow.
HTML code
<ul>
<li>HOME</li>
<li class="active">FEATURES</li>
<li>FLOORPLAN </li>
<li>NEIGHBOURHOOD</li>
<li>WARRANTY</li>
<li>ROWHOME FAQ </li>
<li>ABOUT US</li>
CSS code,
ul li.active { bacground: #ff0000; }
So on my website I have css role over buttons, and everything displays as it should in Chrom but in IE and Firefox the height is larger so you can see too much of the image.
Here's the website its happening on http://www.dillonbrannick.com/ I'm just focusing on one of the buttons, but it is happening with all 4 of them.
Here's the code that effects the home button.
Inside the body and nav tags
<nav class="body">
<div class="links nav" id="home-nav">
<a href="#"
onclick=" toggle_visibility_1('illustrations'); toggle_visibility_1('illustration-sub'); toggle_visibility_1('painting-sub'); toggle_visibility_1('paintings'); toggle_visibility_1('animation'); toggle_visibility_1('contact'); toggle_visibility_1('box'); toggle_visibility_2('homeimage'); toggle_visibility_2('homebio'); toggle_visibility_2('facebook'); toggle_visibility_2('google');">
</a>
</div>
</nav>
I'd imagine the Javascript doesn't effect it as all it does is diplay on/off elements so it has nothing to do with dimensions.
here's the css:
.body{
position:absolute;
left:50%;
top:50%;
}
nav{
margin: -125px 0 0 -44.5px;
}
.nav{
position:absolute;
width: 89px;
}
.nav a{
height: 107.5px;
}
.links a{
display: block;
margin: auto auto auto auto;
cursor: pointer;
outline: transparent solid 0px;
}
#home-nav {
margin: -60px 0px 0px -140px;
}
#home-nav a{
background: url('http://dl.dropbox.com/u/70582811/home.link.png') no-repeat left top;
}
#home-nav a:hover{
background-position: left -107.5px;
}
I know the body class probably doesn't make any difference to the problem, but I just wanted to show everything that effects the button.
As you can see in these two images(left:Chrome, right: IE and Firefox). There is blue appearing just underneath the grey bar that shouldn't be there, that is part of the other half of the image that is then shifted up onrollover. As you can see on my website.
Thanks in advance,
Dillon Brannick.
I think your problem is the use of .5
.nav a{
height: 107.5px;
}
Browsers probably handle that differently. I don't think there exists something like half a pixel.
Edit : just try 107px, and then 108px. I think one of them should give u the desired result. 107px probably. Firefox takes 107.5px as 108px.
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.
My current project involves setting up a bunch of sidebar links, such that the finished design looks like this:
The envelopes are supposed to move and overlap (i.e., change z-index), depending upon which icon/text is currently has :hover state.
I thought each would be a separate PNG file, but I've been given a sprite that looks like this:
Any suggestions how I could achieve this? Normally I'd just change the background position of the list elements each piece of text is in, but I don't think this is possible given the overlapping nature of these. Does he just need to export it differently?
Many thanks...
To me it looks like that sprite would work perfectly. The left most image is for when book is hovered, second image for twitter, third for facebook, forth for email. I'm guessing the last one is just the default state. Its tricky to make this work with pure css and :hover (but possible!), however, it would be extremely easy with javascript.
For the pure css solution, the div with the sprite would have to be the child of all the text elements, so you could change the background based on :hover on the parent (the text). If this isn't clear, I can make you some example code.
Edit:
Its not perfect, but its a proof of concept.
JsFiddle: http://jsfiddle.net/jp6fy/
CSS:
#side{
position:relitive;
height:341px;
width:250px;
}
#link1{
top:0;
}
.link{
position:absolute;
left:0;
top:85px;
height:85px;
padding-left:160px;
width:90px;
}
#image{
position:absolute;
top:-255px;
left:0;
z-index:-1;
background:url(http://i.stack.imgur.com/I2Y4k.png) -720px 0;
height:341px;
width:150px;
}
#link1:hover #image{
background-position:-540px 0;
}
#link2:hover #image{
background-position:-360px 0;
}
#link3:hover #image{
background-position:-180px 0;
}
#link4:hover #image{
background-position:-0px 0;
}
HTML:
<div id='side'>
<div class='link' id='link1'>
email
<div class='link' id='link2'>
facebook
<div class='link' id='link3'>
twitter
<div class='link' id='link4'>
book
<div id='image'></div>
</div>
</div>
</div>
</div>
</div>
It is possible. (But ugly.)
As a :hover selector can only affect elements inside (or directly adjacent) to the triggering element, the solution is to nest the trigger elements: (jsFiddle)
<style>
div {
width: 100px;
height: 100px;
position: absolute;
left: 100px;
}
#image { background: black; }
#trigger1, #trigger1:hover #image { background: red; }
#trigger2, #trigger2:hover #image { background: green; }
#trigger3, #trigger3:hover #image { background: blue; }
</style>
<div id="trigger1">
<div id="trigger2">
<div id="trigger3">
<div id="image"></div>
</div>
</div>
</div>
But preferably, you'd get the envelope sprites exported separately (you can of course still use CSS sprites). That should give you simpler HTML and CSS, a smaller image, and you'll avoid having to muck around with nested absolutely positioned elements, each having its own coordinate system.
I tried an approach which keeps the markup fairly simple, with only one extra non-semantic div per item:
<ul>
<li id="email">
<div class="background"></div>
<em>Email</em> chris
</li>
<li id="facebook">
<div class="background"></div>
<em>Facebook</em> follow us
</li>
<li id="twitter">
<div class="background"></div>
<em>Twitter</em> your life away
</li>
<li id="book">
<div class="background">
</div><em>Book</em> a project
</li>
</ul>
I positioned all the different copies of the background div at the same place, then varied the background position based on the hover states:
/* First, just style the document and the list text in general.
skip on for the important bit */
body {
background-color: black;
color: white;
}
ul {
width: 350px;
margin-top: 40px;
position: relative;
}
li {
margin-right: 40px;
font-family: "Century Gothic", Helvetica, sans-serif;
text-align: right;
margin-bottom: 0px;
padding: 15px 4px 25px 0;
}
li em {
text-transform: uppercase;
display: block;
}
li:hover {
color: red;
}
/* From here down is the important bit */
/* Set up the sprite in all the .background divs */
div.background {
background-image: url(http://i.stack.imgur.com/I2Y4k.png);
position: absolute;
top: 0;
left: 0;
height: 341px;
width: 160px;
}
/* By default, turn off the background in all the divs */
div.background {
display: none;
}
/* Just picking an arbitrary item to show the default, non-hover background */
#email div.background {
display: block;
background-position-x: -737px;
}
/* If we're hovering over the list as a whole, disable the default background,
so it doesn't show up underneath the background we want to display */
ul:hover #email div.background {
display: none;
}
/* For the email item, which shows our arbitrary default background, override
to the email background on hover with more specificity than the default rule */
ul:hover #email:hover div.background {
display: block;
background-position-x: 0px;
}
/* For all other items, override to their background on hover */
#facebook:hover div.background {
display: block;
background-position-x: -375px;
}
#twitter:hover div.background {
display: block;
background-position-x: -189px;
}
#book:hover div.background {
display: block;
background-position-x: -556px;
}
Working, though slightly rough example, in this jsFiddle.
Note that it's okay to have multiple copies of the sprite in multiple different divs; the browser will just grab one copy for its cache and use that for all instances of the image.
Could you create an image map and then hover swaps the image to the one with the correct envelope in front. See this link on an interesting link
google search link on idea
My method with clean HTML.
.nav { position: relative; }
.nav li {
margin-left: 179.8px;
list-style-type: none;
}
.nav li:before {
position: absolute;
left: 0; top: 0;
content: url(http://i.stack.imgur.com/I2Y4k.png);
clip: rect(0 899px 341px 719.2px);
margin-left: -719.2px;
z-index: 1;
}
.nav li:hover:before { z-index: 2; }
.email:hover:before {
clip: rect(0 179.8px 341px 0);
margin-left: 0;
}
.facebook:hover:before {
clip: rect(0 359.6px 341px 179.8px);
margin-left: -179.8px;
}
.twitter:hover:before {
clip: rect(0 539.4px 341px 359.6px);
margin-left: -359.6px;
}
.book:hover:before {
clip: rect(0 719.2px 341px 539.4px);
margin-left: -539.4px;
}
<ul class="nav">
<li class="email">Email</li>
<li class="facebook">Facebook</li>
<li class="twitter">Twitter</li>
<li class="book">Book</li>
</ul>