SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Location
    mw.sn.de
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1) doctype 2) div-background in firefox

    hi there,

    i've got some problems with this site. it's just a template site, yet. so, no link will work.

    1) doctype:

    i've coded it first with tables. after reading about the advantages of div over tables i recoded it with css. everything seems to work, but i've failed the w3c-validation because i've not inserted any doctype.

    so i've tested some and the only doctype working is the one for HTML 3.2 but there still are 45 errors the validator displays.

    with every other doctype inserted the only content it displays is the div id=geu_content and i dont know why (never used doctypes before). shown here:



    2) div-background in firefox

    on the left side i have the sidebar and i got some trouble with the right border. in firefox he added the border-pixels to the div itself and so it doesn't fit right to the register border above.

    so i removed the sidebar-borders and added a background into the container div with repeat-y. it works fine in IE v6.0 and OPERA v8.54 but it doesnt in firefox v1.5.0.4.

    Opera:


    Firefox:


    the main problems were to fit it right below the right register border and to have it straight to the bottom of the page.

    Opera:


    Firefox:


    so, if you have any ideas dont hesitate to answer

    css:
    Code:
    #geu_container {
    	position: relative;
    	width: 1000px;
    	background: url(../gfx/back_container.png) repeat-y;
    	border: 0px solid #000000;
    	border-top-width: 1px;
    	text-align: left;
    	z-index: 3;
    }
    
    #geu_sidebar {
    	position: relative;
    	float: left;
    	left: 1px;
    	width: 170px;
    	background: #ccccaa url(../gfx/back_bar.png) repeat;
    	text-align: left;
    }
    thanks in advance
    - Annuit . Coeptis /.
    http://www.pro-lamer.de

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,369
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The reasons things are not showing is because you have multiple comments in the html comments declaration as indicated by the validator here.

    Line 164 column 21: multiple comments in comment declaration.
    <!-- HEADER END ------------------------------------------------------>
    Change all those to the proper format of:
    Code:
    <!-- comments -->
    Do not add extra dashes as it confuses some browers and they will hide the rest of the page or until it reaches another comment tag. Although you could add extra dashes if you wanted then would need to always be multiples of 4.

    More information here:

    http://www.htmlhelp.com/reference/wi...c/comment.html

    Safest to say is just don't add any extra dashes apart form the 2 at the front and 2 at the end as in my example. The above changes will make the elements re-appear.

    You should be using either an html4.01 doctype (strict or transititional (preferably strict)) or use an xhtml 1.0 doctype (strict or transitional etc.).

    These are the doctypes you should be using:

    4.01 transitional:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>
    <body>
    </body>
    </html>

    4.01 strict:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>
    <body>
    </body>
    </html>
    xhtml 1.0 transtional.:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>
    <body>
    </body>
    </html>
    xhtml 1.0 strict:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>
    <body>
    </body>
    </html>
    There is no real benefit to using xhtml over html at this level so html 4.01 strict is fine.

    However you have mixed xhtml tags althroughout your page and so you will need to decide which way you are going and remove or add the correct tags. Xhtml requires all tags to be closed and elements like breaks, img and meta have self closing tags e.g. <br />

    There are of course other doctypes (for framesets etc) so the above is not an ehaustive list but is probably all you will ever need at this level.

    I couldn't see the border issues you were talking about but I would guess that it was a box mode issue and with the incorrect doctype you were using which would throw ie into quirks mode and use the broken box model (and probably opera also) but firefox uses the correct box model.

    See the faq on the broken box model for more information.

    Firstly though fix the doctype and fix all the comments in your page and then fix all the errors and then we can look again at any problems as its pointless bug hunting invalid pages.

    Hope that helps.

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Location
    mw.sn.de
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you, paul. i've fixed the doctype errors and set it to HTML 4.01 transitional.

    the border/background still doesn't work. now it also displays no div-background in opera and IE, which should mean that all browsers are using the correct box model, aren't they?

    what bugs me, is that IE 6 still displays it as it should be if i open the site localy. i dont understand exactly what i should do now, because there seems not to be any broken box, because all browsers display the same.

    i want that the left sidebar background OR the sidebar with borders should go straight to the bottom of the page.

    HTML:
    Code:
    	<div id="geu_container">
    
    <!-- SIDEBAR START -->
    
    		<div id="geu_sidebar">
    			...
    		</div><!-- geu_sidebar -->
    
    <!-- SIDEBAR END -->
    
    		<div id="geu_content">
    
    <!-- CONTENT START -->
    
    			...
    
    <!-- CONTENT END -->
    
    <!-- FOOTER START -->
    
    			<div id="geu_footer">
    				...
    			</div><!-- geu_footer -->
    
    <!-- FOOTER END -->
    
    		</div><!-- geu_content -->
    
    	</div><!-- geu_container -->
    CSS:
    Code:
    #geu_container {
    	position: relative;
    	width: 1000px;
    	background: url(../gfx/back_container.png) repeat-y;
    	border: 0px solid #000000;
    	border-top-width: 1px;
    	text-align: left;
    	z-index: 3;
    }
    Last edited by tarbos; Jun 25, 2006 at 07:23.
    - Annuit . Coeptis /.
    http://www.pro-lamer.de

  4. #4
    SitePoint Member
    Join Date
    Apr 2006
    Location
    mw.sn.de
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    fixed it.
    Last edited by tarbos; Jun 25, 2006 at 10:18.
    - Annuit . Coeptis /.
    http://www.pro-lamer.de

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,369
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    fixed it.

    Sorry I missed your post (watching football) but sounds like you needed to clear the floated content.

  6. #6
    SitePoint Member
    Join Date
    Apr 2006
    Location
    mw.sn.de
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    indeed. i ripped the code from here: http://www.positioniseverything.net/...ut/equalheight and now all seems to work.

    can you tell me more about this border-box-model? i can activate that in firefox with the http://chrispederick.com/work/webdeveloper/ and i see some slight changes.

    it looks better with the border-box-model. ofc i have to change some widths here and there but how can i "activate" that model first for every browser and every user? and what are the advantages of xhtml 1.0 to html 4.01? should i change to xhtml if i want dynamic content (asp.net)?

    thanks again.

    p.s.: what a shame for ecuador
    - Annuit . Coeptis /.
    http://www.pro-lamer.de

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,369
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    but how can i "activate" that model first for every browser and every user?
    You can't

    At present ie5, ie5.5. and (ie6 in quirks mode only and opera in quirks mode only) use the broken box model and all other browsers use the correct box model.

    Ie6 in standards mode uses the correct box model and so do all other browsers. Standards mode in ie6 is achieved by using a correct full doctype.

    http://www.ericmeyeroncss.com/bonus/render-mode.html

    ie5 and ie5.5. always use the broken box model regardless of doctype.

    You really should be using the correct box model and just use the box model hacks for ie5 and 5.5. (see the faq on the broken box model for more information on this.) and then all browsers will be the same. This is the way most designers do it.

    CSS3 will allow switching between box models but this will be years before you can use it effectively. Mozilla/firefox has proprietary moz code already that will let you choose the box model also.

    http://webfx.eae.net/dhtml/boxsizing/boxsizing.html

    However I would recommend that you stick with the corrcet box model for a few years to come until css3 is commonplace and then you can choose as you wish.

    and what are the advantages of xhtml 1.0 to html 4.01?
    Apart from encouraging proper coding places there's nothing much to be gained at this level but see the 2 sticky threads in the html/xhtml forum here as its quite a complicated subject and there are some expert opinions in that thread.

    http://www.sitepoint.com/forums/foru...aysprune=&f=52

    I think that should keep you busy for a while

    p.s.: what a shame for ecuador
    I feel so sorry for them


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •