I'm asking you to help me for solving this mysterious issue:
When I visit this web page http://www.legrandclub.net/members using IE8 it's displayed a double border bottom below search field. How is it possible? I've checked a lot of times CSS rules but I haven't found any rules that can be the reason of this issue.
Can you help me?
Thanks
First search the following lines. It's invalid to redefine the same id.
<div id="container">
<div id="content">
<div id="container">
<div id="content">
line 1033 tr is not finished properly
also line 1059 </div> this closing div appear to be not necessary.
I see a couple problems with your markup which could be causing the problem.
Only use an id once. #eric-fortis said it right.
You have a table inside of a div inside of a form. Use tables only when you want to show an actual table, and if you're going to use a table, make sure to close the table! (</table>)
You have a form inside a form, this will never fly.
Your id usage is confusing. If I can't come in and find the problem that means no one on your team can (yourself included).
Once you fix those problems you might be able to find the mistake.
Both Eric Fortis and citizen conn have good answers ... the more general answer is to upload or paste your code to http://validator.w3.org/ or point the validator at your page's URL.
I'm not a nit-picker for 100% correct validation, but your HTML structure needs to be valid or you'll have no end of CSS mysteries.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.legrandclub.net%2Fmembers&charset=%28detect+automatically%29&doctype=Inline&group=0
Validation Output: 7 Errors
Related
Is there any way to prevent me from clicking on an anchor to take me to the top of the page?
this is my code:
<div class="slider">
<div class="slides">
<div id="slide-1">1</div>
<div id="slide-2">2</div>
<div id="slide-3">3</div>
<div id="slide-4">4</div>
<div id="slide-5">5</div>
</div>
1
2
3
4
5
A) If I understood you well, you can do it with pure CSS.
a[href*="#slide"] {
pointer-events: none;
}
B) After reading what you wrote in the comments, you can use what PHPglue suggested.
document.querySelectorAll('a[href*="#slide"]')
.forEach($a => $a.onclick = e => {
e.preventDefault() // don't go
console.log('but do your things')
})
Hope this help :)
As far i know you cannot avoid it its connected to the fact that when you get to page its need to be rendered.
Before that, this id just do not exist.
So no way to remove it.
You can only try to speed this up a bit.
Just try to ensure that your page is loading fast.
You have your syntax confused, but it's easy to understand how that happened... You can do internal page links that will allow you to jump from one spot (or section) to another inside the same page, or even to a specific paragraph inside another page. The problem with your sample code is that you are using HTML syntax to link to CSS.
<div id="slide-1">1</div>
...
1
It's true that you use a # (hash tag) in your <a> tag. So, using 1 should, theoretically, work. And yes, you can use an id of the same name to identify where the link should take you. However - you can not use the name for anything else on the page. It must be unique and specific to avoid any confusion. Since your <div> tag(s) have the same identifier as your anchor tags, and since you are using the CSS selector id, the browser is ignoring your <div id= statement because it cannot find the #slide-1 style in your CSS file.
The easiest way to fix this is to change your code to:
<div id="css_style" name="slide-1">1</div>
...
1
Doing so will allow the <div> to retain the intended styles and connect the link to the anchor on the page. Just don't give your CSS style the same name, use something else.
W3C Links Documentation
In VS Code I am having trouble in formatting HTML.
For example, I write a list of tags inline and I press Shift+Alt+F and nothing happens.
I noticed this:
If I write:
<div><span><p></p></span></div>
nothing happens when I do the auto format.
If I write:
<div><div><div></div></div></div>
then it becomes:
<div>
<div>
<div></div>
</div>
</div>
hope this will help you to help me...
We had the same problem in my dev team. Please check or try the following things:
Are the keyboard bindings correct?
Is selected code language HTML?
Have you restarted VS code?
Begin a small piece of the formatting and then try again (for some reason it
thinks its already correct.
There are a certain list of tags that are ignored when auto formatting - these are defined in the setings.json file under
html.format.unformatted":
So go to settings (Command-Comma on a mac) and search for that setting and remove the tags you do want formatting.
The bad news is that it still doesn't format how I think it should - i.e. the isn't indented inside the but it at least puts it on a new line for you!
This is a VS code bug. I installed the 1.17 and it worked very well https://code.visualstudio.com/updates/v1_17
I've been looking around and I can not find an answer to this.
Suppose I put the cursor right between the number 2 and the greater than sign in the following h2's opening tag.
<h2>Hello world!</h2>
And then I type .text-uppercase which gives me:
<h2.text-uppercase>Hello world!</h2>
After which I expand the abbriviation and I get
<h2 class="text-uppercase">Hello world!</h2>
Is there a way to achieve this by another method?
Maybe this works in your editor, in my personal VS Code installation, its not working, the action is Update Tag
your question is not that clear
i think you want this
var h2 = document.getElementsByTagName("h2");
h2.classList.add('text-uppercase');
now you can do it onClick or using some other trigger
happy coding!!!
hope it helps
I've build a page with a form and for some reason my button for the form and my footer element is not showing up on the page.
I have added a link so you can check out my code. And I know its a HOT MESS! so if you can give me any tips on the css and html please feel free to let me know.
http://jsfiddle.net/jeramiewinchell/j6n0w1tj/
enter code here
Fair point in the edit. I said it was a mess without giving anything positive.
Here are some tips that could improve the HTML (with links for reference):
You should specify a doctype (e.g.: <!doctype html>) instead of having an empty <!DOCTYPE> tag.
http://www.w3.org/TR/html-markup/syntax.html#doctype-syntax
It would be nice to have a <html> wrapping everything, and a <head> wrapping the title and links. I'm not clear if it's technically valid not to have them (the W3C HTML validator will not validate a page without a <head> although it will validate without the <html>), but it's nice and it will help keep things organized.
The links should have a type indicating the mime type (in this case type="text/css").
http://www.w3schools.com/tags/tag_link.asp
Closing empty elements (e.g.: img, link, input) is not mandatory in HTML5, but it is in XHTML. Depending on the doctype that you choose, you should close them accordingly. Using /> at the end is valid for both HTML5 and XHTML, so you may want to consider it.
http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/
Don't nest <p> tags. Paragraphs are block elements that should contain only phrasing content (= not block/paragraph elements). How to fix it: replace <p class="site_section1"> with a <div class="site_section1">.
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
Always close the block tags that you open. For example, you never close the <p class="site_section1"> (altough as I said in the previous point, you should making it a <div>... and then close it). The result in the browser may be unpredictable.
I mentioned in my comment above (sorry, I don't know the name in English), you should avoid crossed tags/nesting of tags. This is incorrect: <label>...<select></label>...</select>, it should be <label>...</label><select>...</select>.
Again, not mandatory but it could be nice to set a value attribute in the <option> tags. If you don't specify a value, the value sent will be the content inside between the <option> tags (that may be what you want in this case).
Don't forget all the code and to close the tags correctly! Things like this: <button type="submit">Save</buttons </div> can have disastrous results (although it looks more of a typo to me).
Don't close tags twice (e.g.: you have </body> twice)
And for the CSS (also with some links for reference):
Avoid unnecessary styling. E.g.: border-radius:0px is unnecessary because 0 is the default value for border-radius (unless you have defined some previous style and you want to overwrite it).
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Specifying units is required for values different than 0. E.g.: margin-left:15 is that 15 in px or em?
http://www.w3.org/TR/CSS21/syndata.html#length-units
The units are optional when the value is 0. Some people find it more readable and better because it is shorter; I personally like them. Your call, but always:
Be consistent: if you omit the units for a zero value, do it in all your definitions. It looks awkward to me to see a padding:0 (without units) next to a margin:0px. It will help you read and maintain the code later.
You could merge many styles together. For example: .zonelist23, .zonelist24, and .zonelist25 are the same, you could define one style only (e.g.: .zonelist_bml30) or set all of them together: .zonelist23, .zonelist24, .zonelist25 { ... }
Not mandatory, but nice: The font-family tag should have several names as a "fallback" system. That way, if the browser does not support the first font, it will go to the next and so on.
http://www.w3schools.com/css/css_font.asp
Just out of curiosity: did you meant to put in the stylesheet .header or is it header? I personally try to avoid classes/ids with the same name as a tag to keep the code easier to understand, but that's a personal choice. As far as I know there's nothing against naming a class like a tag.
One way of having fun and learning (you may now think that I have a strange way of having fun and learning):
Go to the W3C HTML Validator.
Click on the the "validate by direct input" tab.
Copy your code in the box.
Click on the "Validate" button.
View the first error, and read the comments (visit the links for reference).
Fix the code according to what you've read.
Click on the "Revalidate" button.
Repeat steps 5-7 until no errors are found.
(You can do the same with the CSS in the W3C CSS Validator)
Please see this fiddle : http://jsfiddle.net/j6n0w1tj/1/
I have corrected your code.
Kindly follow the steps mentioned by #monty82, who has given an excellent explanation on how to proceed with your code.
Wrong html:
<label>..<select></Label><option></option></select>
Correct html
<label>..</label><select><option></option></select>
Tags like <input>,<br> are self closing tags,close it like <input
type="radio"/> and <br/> not as </br>.
Please make sure whether your opening and closing tags match
I'm trying to create a social widget for my own blog, but I don't know why when I have everything valid, I mean no syntax error and is not displaying it on my blog correctly?
The code is very long, and I don't think I should include it here?
So I did include the code here http://jsfiddle.net/naKEv/
I'm trying to make it similar to this
but mine when it displays on my blog is not showing it right.
I'm also using css sprices to combine the pictures, but that is not a problem I guess because if I'm using a table to create the code it still display but not the way it suppose to be.
You have fixed the height of #share_icons remove that.
Demo
Please check your TAG's check this:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></span></a>
</th>
Your </th>, </span> & </a> are close but not start check.