I have created a website for a guesthouse. www.excelhome.co.in
In it I have 4 hyperlinks in the menu bar and all of them works fine in the home page. But the same hyperlinks don't work in any other pages and this issue is only with Google chrome.
Below is the hyperlink code:
a.one
{
color:#ddd;
text-decoration:none;
}
<td align="center"; style="width:10%;">
<a class="one"; href ="Index.htm">Home</a>
</td>
With all other browsers all pages and links work fine.
You've covered the links up with a massive, positioned element with id="Layer1". The clicks aren't reaching the links because they are being intercepted by it.
Absolute positioning is something that should be used with a very, very light touch.
Remove the semi-colon from within the a (anchor) element, it is invalid and may well be causing problems.
Looking through the source code and validation summary (see http://validator.w3.org/), the majority of errors are related to misplaced semicolons within element declarations. There are also a number of obsolete attributes used which should be replaced by CSS properties (either using an inline style attribute, or external stylesheet).
I only have a tablet with me at the moment, so can't inspect in more detail, but you certainly want to look into how you manage your layout - the twenty-four non-breaking spaces should probably be replaced with margin or padding for example.
Related
I am trying to create a link that goes directly to a certain section of a different page. Here is what I'm doing.
I create an anchor point using the name attribute:
<a name="fish"></a>
<p>some content....</p>
I create a link with the # added to the end
"http://example.com#fish"
***note I have also tried the id method instead of name which still gives me the same issue.
example: <div id="fish"></div>
The functionality works fine and it takes me to the specific part on the page, the only issue is that it looks different on different browsers. What firefox displays is about 5 inches higher than what chrome displays.
It's probably because the a tag is taking up some space.
Easiest solution, use an id instead.
<p id="fish">some content....</p>
Make sure there's enough content below so it can scroll
Most browsers have the same css default value for common html elements, however it is possible that some elements have different attribute values for padding and margin.
One way to avoid these differences is explicitly applying the values in the css statements.
p {margin: 10px 0px}
If you do not want to do this, I recommend you put link exactly in the position where text is located.
<p><a name="fish"></a>some content....</p>
You can locate the link anywhere since the anchor element will not be visible in the viewport
I've been working with contenteditable recently within a HTML5 page and encountering bugs when using it with certain elements, and I'd like to know where and how I can actually safely use it.
I've discovered that making a span element contenteditable results in some buggy behaviour in both Firefox1 and Chrome2. However, making a div or section contenteditable appears completely safe3.
A guideline a couple of people have mentioned is that only block-level elements should be made contenteditable. However, the Mozilla Developer Network lists the heading elements h1 through to h6 as block-level elements, and making a heading element contenteditable is buggy in Firefox4 and can crash the page in Chrome5.
I'd like to be able to use more than just divs and sections, but I'm not clear on what elements I can actually safely make contenteditable. By safely, I mean that using the element under normal conditions, I should be able to perform normal editing tasks without it doing unexpected or buggy things. I should be able to write in it, delete content, cut, copy, paste, and move my text cursor about and highlight text without unexpected or strange behaviour.
So, which elements can I really make contenteditable safely? Is there a specific category? Are there certain criteria the safely-contenteditable element must match?
Bug notes:
Firefox 21 w/ span: Element loses focus if the text cursor is brought to the beginning or end of the element, but not if it got there by deleting content. Highlighting part of the element, cutting and then pasting will split the element in two at that point then insert a blank element between the two parts - without actually putting the text you were trying to paste anywhere.
Chrome 27 w/ span: If the span covers multiple lines e.g. by being wordwrapped, cutting and pasting content will often insert a linebreak after the pasted content.
Unless you make the div display:inline, in which case it can still lose focus as in 1, but apparently only if you bring the text cursor to the end. I don't consider this "normal" usage of the element though.
Firefox 21 w/ heading: Selecting part of the content then cutting and pasting will, similarly to 1, split the heading element in half at that point, and insert a third heading element between the two halves. It will, at least, have your pasted content inside it, but now you have three heading elements where there was originally one.
Chrome 27 w/ heading: Select some content and cut and paste. The page crashes. You get an "Aw snap!" message. That's it.
Demo code
Here's a demo for reproducing the above. It's pretty simple, though at the moment the only thing it isn't reproducing is the lose-focus bug.
[contenteditable=true] {
border: 1px dotted #999;
}
<article style="width: 100px">
<h1 contenteditable="true">Heading</h1>
<p>
<strong>Some adjacent content</strong>
<span contenteditable="true">Span! This is long enough it will spread over multiple lines.</span>
</p>
<div style="display: inline" contenteditable="true">An inline div also with multiple lines.</div>
</article>
In my opinion, I'd say div is the safest bet across the board. Any element you wish to truly edit (be it a span, header, etc), you can place inside the div and edit as if it were just that element. Also, to account for the display:inline issue you mentioned, you could always use float:left or float:right on your editable div to give it an "inline feel" without having it actually be inline.
Hope that helps!
Since this is an evolving feature with, apparent, low priority from the browser vendors support has been sketchy and regressions not uncommon. The current state of affairs is evolving, so check the Googles, CanIUse etc and make sure support is there for your sites visitors, everything else is moot ...
Support in Firefox seems to be solid, at least for some elements, now https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
It works well in Chrome as well as far as my testing goes.
And CanIUse looks good: http://caniuse.com/#feat=contenteditable
There are a number of different bugs related to the feature in the different browsers though, but for simple use cases it should be ok now, as of August 2016.
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.
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 am developing a Google Chrome extension.
Extension shows a dialog box (jquery ui, as a div) inside any webpage, in the dialog box user can add some content [HTML content without body, without styles info].
The problem i am facing is, that the styles specified in the webpage are getting applied to the jquery dialog and the content user is adding.
For ex. when i launch my plugin on stackoverflow webpage, all text become center aligned, etc etc.
What is the best way to get rid of parent styles inside a div?
you should look into the reset stylesheets almost every CSS framework comes with. You can take that reset stylesheet and apply all of the reset styles to your specific DIV:
div.YourDiv, div.YourDiv * {
margin:0;
padding:0;
border:0;
...
}
which should reset both YourDiv and all elements below. After that, you can get started w/ styling the sub elements as you see fit.
I've done that using an IFRAME, which basically creates a whole new html document inside a box, without the styles from the "parent" page. The other option is to redefine all the styles in your div, but that's very tedious and ugly.