I am using a CSS style hover on some image links on my page.
When a user hovers over an image, it's background position changes, providing a highlight effect.
When I hover over the image in i.e.6 my page gets pushed down by 40px.
Why is this?
IE6 is a dog. Try:
a{zoom:1}
Which version of IE are you using? You should provide example code here. However, you may try to add following dirty css trick to the image which is hovered upon.
<style type="text/css">
img:hover
{
_margin-top:-40px;
}
</style>
Above style will only target IE, other browsers will ignore it.
Using hover with Internet Explorer can cause strange style issues.
you can avoid Browser Issues by using Conditional Comments.
Stackoverflow Question regarding browser characteristics
Stackoverflow Question regarding why Conditional Comments always will be needed
Edit:
Internet Explorer 6 support the CSS ":hover" attribute only on "a" elements
ReEdit:
Just for documentation...if you really want or have to use "hover".
Try this example:
Hover in Internet Explorer 6
But that is a really rough solution.
The ole' Box Model snafu! IE6 presents a different box model than what the W3C presents. The width of an IE6 Box (hope I get this right) is a total, including the padding and border. The W3C box model is width declared, period. The margin, padding, and border are in addition to the width of the object.
Examples of how the different box models work:
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
Related
I am using a custom scrollbar for webkit browsers. The thing is that when the browser supports webkit. I want it to remove the border I have around the entire body.
I got it to work by using -webkit-box-sizing on the right div and a negative margin value as you can see in the fiddle: http://jsfiddle.net/Yfw49/1/
And it works really great except for browsers that supports box-sizing but not webkit scrollbars. For example mobile browsers that don't have scrollbars at all.
Is there a way to make it work? I tried a jQuery method that asked if the browser supported webkit, and if so, remove the div. But that made the div appear for a short while and then removed it. It looked bad.
Please have a look at the jsfiddle http://jsfiddle.net/Yfw49/1/
(I know I could make the markup cleaner without all the elements. But let's focus on the other problem)
In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using
* {
border:1px solid #FFF;
}
to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.
Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca
Thanks!
Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.
Edit: the site is for a legitimate massage business but some may consider the picture NSFW
Devin,
Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.
One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.
Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?
There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...
Good Luck,
Matt
Edit
I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.
Try this:
body { overflow-x: hidden; }
Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.
can you please warn us when it's nsfw :s
use this css:
#content { overflow: hidden }
not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too
css3 box-sizing:border-box solved this one.
I have a div that on hover will change positioning on an image and toggle a div via css. The list uses upper-alpha for styling. This CSS works fine in every browser except IE. The issue that I'm having is that in IE, after hovering over the div, it changes to 0. from A, B, C, etc..
Here's an example in jfiddle:
http://jsfiddle.net/YALdD/
if this works for you, just put the letters in the lists and get rid of the upper-alpha style, like this: http://jsfiddle.net/mjgasner/6J6Nf/3
Here's the workaround that is mentioned from the link in the comment above:
http://jsfiddle.net/mjgasner/94tu4/1/
It clearly doesn't work.
AND
IE won't render those as animations, as they are not supported.
http://www.w3schools.com/css3/css3_animations.asp
You can animate the color change in all browsers (even IE6!) with jQuery UI:
http://jqueryui.com/demos/animate/
Here is the link to W3Schools: http://www.w3schools.com/cssref/pr_list-style-type.asp
You can see all browsers supported for certain element.
If you need something else let us know.
What version of IE are you using?
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills
On our website http://www.dimagi.com, the items in the jQuery menu near the top of the screen gain a background-color on hover. The hover background-color of the rightmost list item ("About Us") is cut off at the very right edge of the text, seemingly only in WebKit (tested Safari and Chrome in Windows XP).
Can anybody see what I might be doing wrong in the CSS? Or is this some obscure WebKit bug?
The background is getting clipped because you have a block element inside an inline element and the box model works quite differently for the two. If you set the display property of #dropmenu > li to inline-block instead of inline it will work, but I don't know how IE handles that. The other option is to set it to display: block and float the lis. Either way, you'll have to do a little reworking for the menu CSS.
I figured it out by playing around with Chrome's Developer Tools until I got it to look right-ish. If you're not familiar with it, it's a very similar tool to FireBug in Firefox. Invaluable for debugging your CSS.