XHTML & CSS

mariachi · **Joined:** Mon Sep 19, 2005 5:42 pm **Posts:** 7

I'm developing a css/xhtml template to investigate how we should develop web pages to be completely compliant with these standards.

My positioned content layout example is completely XHTML1.1 compliant. Unfortunately there are a number of unresolved problems which make this code unusable:

1. Internet Explorer 6 does not obey the min-width CSS on the BODY and BodyContent (I can live with that).
2. Firefox obeys the min-widths but does not display a horizontal scrollbar when the browser is too narrow (this is a problem).
3. No browsers obey the overfolw:scroll CSS on the BodyContent (the body text disapears off the bottm of the DIV when the page is browser is too small) - a big problem.
4. The body text is flowing outside the right-margin in Firefox (thus being hidden by column 3) - no idea why, an annoying problem.

Can anybody offer any solutions to these problems (should all be in the CSS), or offer any better way of accomplising this (without using tables which should not be used in XHTML 1.1 for creating layout, only for tabular data display)?

Thanks in advance - Julian

Code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>XHTML Postioned Content 2</title>
        <style type="text/css">
            html,body        {height:100%; width:100%; margin:0; padding:0; overflow:hidden; min-width:780px}
            body,td            {font-family:Arial; font-size:13px}
            h1                {font-size:20px; font-weight:bold; margin-top:0}
            p                {text-align:justify}
            /* HEADER */
            #siteLogo        {position:absolute; top:0; left:0; z-index:4; width:200px; line-height:50px; background:yellow; display:table-cell; vertical-align:middle}
            #strapline        {position:absolute; top:0; left:0; z-index:3; width:100%; line-height:50px; background:red; padding:0 100px 0 200px; vertical-align:middle}
            #langauges        {position:absolute; top:0; right:0; z-index:4; width:100px; line-height:50px; background:gray; text-align:center; vertical-align:middle}
            /* BODY */
            #navigation        {position:absolute; top:0; left:0; z-index:2; width:200px; height:100%; background:gray; padding:50px 0 25px 0}
            #bodyContent    {position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:yellow; padding:60px 110px 35px 210px; overflow:scroll; min-width:480px}
            #advertising    {position:absolute; top:0; right:0; z-index:2; width:100px; height:100%; background:red; padding:50px 0 25px 0; text-align:center}
            /* FOOTER */
            #tradeLogo        {position:absolute; bottom:0; left:0; z-index:4; width:200px; line-height:25px; background:yellow; vertical-align:middle}
            #copyright        {position:absolute; bottom:0; left:0; z-index:3; width:100%; line-height:25px; background:red; padding:0 100px 0 200px; vertical-align:middle}
            #pageTopLink    {position:absolute; bottom:0; right:0; z-index:4; width:100px; line-height:25px; background:gray; text-align:center; vertical-align:middle}
        </style>
    </head>
    <body>
        <!-- HEADER -->
        <div id="siteLogo">Site Logo</div>
        <div id="strapline">Strapline</div>
        <div id="langauges">Langauges</div>
        <!-- BODY -->
        <div id="navigation">Navigation</div>
        <div id="bodyContent">
            <h1>Body Content</h1>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
            <p>Accumsan et iusto dignissuim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Eros Et Accumsan dignissim qui blandit prasent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <p>Nam tempor cum soluta nobis eleifend option congue hihil imperdiet doming id quod mazim placerat facer possim assum. Accumsan et iusto osio dignissim qui blandit. Vendrerit In Vulputate Duis autem ver eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel ilum dolore eu feugait nulla facilisi at vero eros et accumsan et iusto odio. Occumsan Aliquam dignissim qui blandit prasent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifen option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
        </div>
        <div id="advertising">Advertising</div>
        <!-- FOOTER -->
        <div id="tradeLogo">Trade Logo</div>
        <div id="copyright">Copyright</div>
        <div id="pageTopLink">Page Top Link</div>
    </body>
</html>

ReFredzRate · **Posted:** Mon Sep 19, 2005 5:58 pm

Hey Julian, quite some nasty problems you found there.

I'm not sure if this will help you in any way, but I was wondering; would it help if you used an external style sheet for this job? Would it make any difference?

webmaster · **Posted:** Tue Sep 20, 2005 12:17 am

First of all, I want to welcome you to DEVPPL.

ReFredzRate: That doesn't matter for the layout, only for the loading time.

And the answers:

2. In the body-style use: overflow:auto

1,3,4. Change from position:absolute; to float:left; on all the divs, remove all the z-indexes, top, left. And work it from there, it's a bit more tricky to get a perfect layout with a floated design, but I will probably solve your problems for the different browsers. Don't use width or height for the body-tag neither.

It will probably take a few hours for you to figure out how to work with a floated design. But it will surly be worth it. Get back if you have any questions about a floated layout.

mariachi · **Joined:** Mon Sep 19, 2005 5:42 pm **Posts:** 7

Thanks for the advice - I will try the float method (I did try this early in the development but found I was having more success without floating).

ReFredzRate: the CSS will ultimately become an external file, but for initial developement I find it more useful inline (as I only have to edit one file). When I have a multi-page site using this technique, I obviously don't want the same CSS inline in every page: this would not only make for longer load times, but also make site maintainance a nightmare.

mariachi · **Joined:** Mon Sep 19, 2005 5:42 pm **Posts:** 7

Out of interest, I realised that my code was adding a scrollbar for the body content - it was just hidden behind the right-hand panels. Weird, I didn't know you could overlay content on top of the scrollbars (in Internet Explorer).

webmaster · **Posted:** Tue Sep 20, 2005 10:34 am

mariachi wrote:

Out of interest, I realised that my code was adding a scrollbar for the body content - it was just hidden behind the right-hand panels. Weird, I didn't know you could overlay content on top of the scrollbars (in Internet Explorer).

I guess that's because you use height and width in the body-style.

It's more simple to make a design with position:absolute; but when you go float, you'll never go back =)

Good luck with the new layout.

mariachi · **Joined:** Mon Sep 19, 2005 5:42 pm **Posts:** 7

Been having fun with floats, have a perfect (simple) layout in IE but completely fails in Firefox. Any ideas?

Code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>XHTML Postioned Content 1</title>
      <style type="text/css">
         body         {margin:0; overflow:auto}
         #container      {width:100%; height:100%}
         #navigation      {float:left; background:gray; width:150px; height:100%}
         #advertising   {float:right; background:red; width:100px; height:100%}
         #bodyContent   {float:left; background:yellow; height:100%}
         #bodyContent p   {width:100%}
      </style>
   </head>
   <body>
      <div id="container">
         <div id="navigation">Navigation</div>
         <div id="advertising">Advertising</div>
         <div id="bodyContent">
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
            <p>Accumsan et iusto dignissuim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Eros Et Accumsan dignissim qui blandit prasent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
      </div>
   </body>
</html>

silentb · **Joined:** Wed Aug 18, 2004 3:52 pm **Posts:** 24

Code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>XHTML Postioned Content 1</title>
      <style type="text/css">
        /* commented backslash hack \*/ 
      html, body{height:100%;} 
      /* end hack */
      html,body {margin:0;padding:0}
      * html #navigation{height:100%;}
      * html #advertising{height:100%;}
      * html #bodyContent{height:100%;}
         body         {margin:0; overflow:auto}
         #container      {width:100%; height:100%}
         #navigation     {min-height:100%;height:auto; position:absolute; background:gray; width:150px;}
         #advertising   {min-height:100%;height:auto;float:right; background:red; width:100px;}
         #bodyContent   {min-height:100%;height:auto;margin-left:150px; margin-right:98px; background:yellow; }
      </style>
   </head>
   <body>
      <div id="advertising">Advertising</div>
         <div id="navigation">Navigation</div> 
         <div id="bodyContent">
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
            <p>Accumsan et iusto dignissuim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Eros Et Accumsan dignissim qui blandit prasent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
       

   </body>
</html>

mariachi · **Joined:** Mon Sep 19, 2005 5:42 pm **Posts:** 7

Very interesting silentb, thanks for your effort: I have alway avoided conditional CSS tricks (as you never know how the next release of a browser will handle them), it is impressive to see them in use.

Your changes do solve some of the problems (three cols reaching to the base of the page); but when the window height is less that the center column text height, the first and third column do not reach the bottom.

The other thing is that webmaster suggested using floats and I really would like to find a solution using only floated content. I now have a positioned solution although I did have to resort to JavaScript for IE content width and height calculation (works in everything but Mac IE5.2 and NN4).

mariachi · **Joined:** Mon Sep 19, 2005 5:42 pm **Posts:** 7

Anybody that is interested can see my final example (using positioned content) at http://webdesign.future-shock.net/html/PositionedComplex.html

I have placed it on our website as the code is getting a bit long for what i like to read in forums.

webmaster · **Posted:** Tue Sep 20, 2005 5:49 pm

It turned out really good =)

I checked the code and thought that you maybe didn't know that you can add a class on a DIV.

So you can replace:

Code:

<div id="strapline"><span class="content">Strapline</span></div>

To this:

Code:

<div id="strapline" class="content">Strapline</div>

mariachi · **Joined:** Mon Sep 19, 2005 5:42 pm **Posts:** 7

Cheers... I was very pleased with the final result. I liked the floating method (much more elegant that absolute positioning) but I just could get it to work with the layout I wanted. I was also disappointed with having to resort to JavaScript for setting some widths and height in Internet Explorer, but at least it works!

I was aware of classing divs, but I needed another element inside the divs to force them out wider than their content (if you remove the #strapline .content css entry you will find that the background colour confines itself to the word "Strapline"). Putting a width direct on the divs completely screws the layout.

Thanks for all you help and advice, I think our company can now finally move away from table driven HTML layouts (a remnant from the dark ages of web development)!

XHTML & CSS

Who is online