 Website not rendering properly in google chrome |
| arachan |
 Jan 31 2012, 06:35 PM
Post
#1
|
|
Group: Members Posts: 2 Joined: 31-January 12 Member No.: 16,365  |
Hello,
I wrote a quick website by request but it only looks normal in firefox, not chrome. The offending code is: CODE b1 { font:18px "Times New Roman"; color: white; position: absolute; top: 300px; text-align: left; margin: auto auto auto -500px; width: 700px; } The negative margin makes some of the page's text way off the screen. The website can be viewed at 203.96.57.19. I am very new to html and css so any help would be much appreciated. Thanks, arachan. |
  |
 
|
  |
Replies(1 - 3)
| Christian J |
Jan 31 2012, 07:01 PM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
I don't see the problem you describe. In any case absolute positioning and a negative left margin is not necessary for this layout.
Some other issues: -For correct/consistent CSS you need a Doctype: http://htmlhelp.com/faq/html/basics.html#doctype -Don't mix elements that belong in the HEAD section with those that belong in BODY. -You are not allowed to invent your own elements (like "B1") in the HTML/XHTML specs, also some browsers (like MSIE?) may not support the styling of such unknown elements. Here's a list of valid HTML4 elements: http://www.htmlhelp.com/reference/html40/alist.html -You also mix HTML and XHTML syntax, which is only allowed in HTML5. -There are also a number of HTML errors, especially related to the HTML comments. After fixing the above problems, use the validator: http://htmlhelp.com/tools/validator/ |
|
|
|
| arachan |
Jan 31 2012, 07:49 PM
Post
#3
|
|
Group: Members Posts: 2 Joined: 31-January 12 Member No.: 16,365 |
Thanks for the reply. I am very new to html, so I am glad that someone with more experience can help clear up some of my issues. I fixed the issues I understood in the validator, and also fixed my problem with chrome, but there are still some errors. Could you please explain what they mean or give me a link to help me understand?
Thanks a lot, arachan. |
|
|
|
| pandy |
Jan 31 2012, 08:34 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Here goes.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes CODE Line 10, character 7: </head> ^Error: end tag for element HEAD which is not open; try removing the end tag or check for improper nesting of elements A HTML document has two distinct parts. HEAD and BODY. Some elements belong in HEAD and some in BODY. With few exceptions they can be in only one of them. The elements that go in HEAD contain meta information, not content. For example links to style sheets and scripts, Meta tags with information about the document and the TITLE element. You have placed two start tags for DIV inside HEAD. When the validator encounters them it considers HEAD to be closed before them. Both start and and tags for HEAD as well as for BODY are actually optional in HTML (but please use them, it's sloppy not to). That's why the validator reports the error as it does. It sees HEAD as closed when it must be closed. Even if DIV was allowed in HEAD you have nested the tags wrong.  CODE Line 11, character 63: ... "head" alt="Header goes here"/> ^Warning: net-enabling start-tag; possibly missing required quotes around an attribute value That closing slash is a hack used in XHTML but not in HTML. Remove it. CODE Line 12, character 6: <body> ^Error: element BODY not allowed here; check which elements this element may be contained within Basically the same problem as the first error. You have placed an IMG tag between the closig tag for HEAD and the start tag for BODY. Nothing can go there. In pseudo code this is the order of things. CODE <!DOCTYPE... > <head> <!-- TITLE and other meta information goes here --> </head> <body> <!-- Everything that will be visible on the page itself goes here. --> </body> Apart from that you need to know that of the elements in BODY some are considered to be block level elements and some are called inline elements, text level elements one could say. Block level elements form blocks, break the line. For example paragraphs, headings or DIV. Inline elements don't form blocks. They can be used in the flow of the text, for example EM, STRONG, A, IMG... Some block level elements can contain some other block level elements and they can always contain inline elements. Inline elements can never ever contain block level elements. http://htmlhelp.com/reference/html40/structure.html http://htmlhelp.com/reference/html40/block.html Read up on that until you've got it down pat and most of the work is done. You also need to know which elements can contain which, it isn't enough to know if they are block or inline, but that you can look up in the spec or the reference at this site. For example P is block, but it still can't contain any other block lever elements. In contrast DIV can contain any other block level element including other DIVs. http://htmlhelp.com/reference/html40/block/p.html http://htmlhelp.com/reference/html40/block/div.html |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 04:48 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC