Lately I've noticed a very weird thing in http://www.lua.org/docs.html – when I hover over the links beside the cover images, the layout changes!
I see this in Safari but not in Firefox. Some people have reported that it happens in Chrome too.
The page passes the validator at http://validator.w3.org/ .
The relevant CSS is at http://www.lua.org/lua.css.
It seems to be a Webkit bug. Has anyone seen that as well? Any suggested fix?
It looks like this
hspace="12"
within each img tag might be causing it.
<img src="images/pil2.jpg" alt="" title="buy from Amazon" border="1" align="left" hspace="12">
When I remove it, the jumpiness goes away.
hspace is deprecated. Perhaps webkit only partially supports?
You're right #lhf.
However, I think I found it now. It's the blockquote that is surrounding the images and links.
When I remove it from the HTML, all fixed.
Related
I know that I can do the following if I want to turn an image into a click-able link:
<img src="icons/twitter.png" />
But I would prefer to use a CSS background image so that I can have a hover state:
<a class="twitter" href="http://twitter.com/username"></a>
# css
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")}
This works fine except I'm not sure it's entirely valid to have an anchor link that contains nothing. Chrome renders it fine, as does FF, but I'm not sure if others are the same.
I realise I could just put some text inside the link, and hide it with text-indent: -9999px, but I've never liked that approach, for various reasons. Is my code above cross-browser compatible?
It's valid, but it's best if you did put something in there and used something like
font-size: 0;
to hide it away. This way, if someone does not have CSS (screen readers for example), he would still be able to tell approximately what the link is about.
Here's a great article on the subject
It is not OK at all, since it breaks fundamental accessibility principles. There is no way to specify alternative text for a background image, the same way you can and should specify it using an alt attribute in an img tag for a content image. See WCAG 2.0 Guideline 1.1.
If you wish to change an image on mouseover, there are CSS and JavaScript techniques for that.
It is perfectly valid, but if you want, you can put a blank space inside:
Use as the text, and you are good.
Over at Markup.tips we recently did some accessibility testing in iOS 8 and discovered that VoiceOver will not navigation to empty links. There must at least be a non-breaking space. Whether this should be considered an iOS bug or not we are not sure.
Has something was changed in the way IE9 treats the title attribute in an anchor tag?
I try to use a regular anchor, such as -
This is a link
A tooltip should be with the title is expected to appear, and it does appear in previous versions of IE and also in other browsers, but not on IE9.
Is there a know issue with that? I tried to search the web for that, but found nothing about this.
Any ideas?
Thanks
I have encountered this problem in a few applications I've worked on.
I've found it doesn't work if you have nested elements within the element with the title.
The example below doesn't show its title in IE9 for me:
<span>test link</span>
However, this example does work:
test link
That is with an XHTML 1.0 Transitional doctype and Browser Mode: IE9 and Document Mode: IE9 Standards.
Obviously your example doesn't have a nested element but thought it might be relevant to some people who find this post based on the title.
You can overcome this limitation in IE by specifying the nested element to be an inline-block:
a span {
display: inline-block;
}
The code for the href link above works fine in IE9. Which leads me to believe something else on the page is causing the issue. Have you tried validating your html? http://validator.w3.org/
It could be that there's something else broken that the other browsers are just looking past. Perhaps it's nested in such a way that's causing IE9 to overlook the tag.
I have found a good work-around, Place your title in an abbr tag. I've tested this in Safari, Chrome, IE9, and Firefox. It works in all of them.
A workaround is to put at least one character outside the inner tags:
<font color="blue">This does not work</font>
<font color="blue">This</font> <font color="blue">does work</font>
I had a typical scenario wherein we had to show a image with tooltip. The image was inside a Iframe and tooltips were not being displayed, when opened in a Browser with IE 10 Compat Mode.
The alt tag helped me out. The solution was to set the images alt tag.
<A onclick=navigate() title="Did not work" href="javascript:void(0);" height="" width="">
<IMG alt="This worked" src="http://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/icons/imageviewer_back_button.gif">
</A>
Ok so there's a site i've been asked to look at and I can't seem to figure out why it only looks bad in safari. It looks fine in every other browser so far and I can't figure it out. The problem takes place in the footer of the document. Here's the link... www.palettekids.com (I SWEAR IT'S NOT MY DESIGN :-))!!! Thanks!
It looks like you have an extra </div> somewhere if you look at the source in safari it is outside of the #container. But in Chrome it is inside. The container is what is holding everything else in. Double check all your closing div's and remove the extra one.
Fix your code errors, like the missing ending tags, like </div>, </body> and </html> among other errors; probably all missing from footer.php. See [Invalid] Markup Validation of palettekids.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.
I don't think coords are supported in Safari:
http://www.w3schools.com/tags/att_a_coords.asp
try using another method (margin perhaps)?
Check out http://campbellcustomcoatings.com/ in something other than IE7, then in IE7. You can see that in IE7, the facebook like button is more to the right and up. I'd like to push it down in IE7 as it is in any other browser. I've tried for over an hour and I can't get it to budge.
I changed the following for IE7 and it seemed to place the button in a similar position to how it looks in Chrome.
#fblike {
margin-left:57px;
margin-top:10px;
}
I think the problem is coming from the floated <li> items. If you highlight the elements using Chrome DOM browser (F12 then select the Elements tab) you can see that because floats exist, the "nav", "container" and "fblike" <div>s do not strictly contain all the child elements. You could create a horizontal navigation without using floats. A list apart has a nice article on lists which may help cross-browser rendering issues (which I am always getting with floats!)
Just add some left and top margin to the iframe. to do this for just IE7, do:
*margin-top:20px; /*20 looked good for me */
*margin-left:20px;
Keep in mind that this won't validate as legit CSS (at least, i don't think it does) but other browsers will ignore it and it works fine.
I know exactly what you're talking about as I have the same issue. The button looks different (size and position) in various versions of IE than in other browsers.
However, you cannot modify or apply CSS to a Facebook Like Box plugin because its content is contained within an <iframe> element coming from the Facebook server.
The only styling options you have are the ones given to you by Facebook.
https://developers.facebook.com/docs/reference/plugins/like-box/
More info:
Embedded Facebook Like-Box won't let me style it. Why?
Adding CSS to Facebook Like Box
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.