The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Website not rendering properly in google chrome
arachan
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 31 2012, 07:01 PM
Post #2


.
********

Group: WDG Moderators
Posts: 6,155
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/


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
arachan
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 31 2012, 08:34 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,567
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. wink.gif


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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th October 2014 - 10:16 AM