SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    browser and DOCTYPE influence on CSS

    Please check out these two URLS :

    First url, HTML 4.0
    Second url, XHTML 1.0

    When I open the first one in IE6, i get what i want, which is the 4 words take a certain percentage of the page.

    When i open the second one in IE6, which is exactly the same except for the doctype which is this time set to XHTML 1.0 transitional, it doesn't work anymore, the 4 words are centered and it seems not to take into account percentages anymore.

    When i open either of them in netscape 6 / opera 6, i get every time the same result (the bad one with no percentages).

    I can't find out what's going on, the code is VERY simple using only divs and spans... Especially the fact it doesn't work anymore on IE when doctype set to xhtml upsets me since i was trying to move my html code to xhtml, so now if this makes everything not working anymore i'm not that sure i want that...
    Both pages validate in w3c validator respectively as html 4.0 and xhtml 1.0.
    By the way what does the "transitional" part of the doctype mean ?

    Thanks for any help
    Quentin

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2001
    Location
    North Wales, UK
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't provide a doctype, IE uses what is known as 'quirks mode', where if it finds any invalid HTML or CSS it'll second guess what you mean and adjust the page accordingly. This can produce unpredictable results. When you give it a doctype, anything invalid should be ignored.

    Spans are not block level elements so you cannot give them a width. Either change them to divs (better) or apply the style "display: block;".

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

    The reason thet your html 4.01 doctype doesn't display the same as the xhmtl one is that you have omitted the URI on the html 4.01:

    The full doctype should be:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

    When you omit the URI at the end IE goes into non standard (quirks) mode and gets everything wrong. If you add this URI you will see that your page now looks the same in all browsers.

    Your CSS is behaving as it should i.e. it's centred and has 8px margins. If you want to move the links further apart you could use bigger margins etc.

    To be strictly correct you should also add this to your xhtml declaration instead of the normal html tag:

    <html xmlns="http://www.w3.org/1999/xhtml">

    The transitional part of the doctype declarations means that the version is transitional and allows certain presentational elements that are deprecated in a strict doctype. This is to help with compatability with older browsers etc. The strict doctype is ultimately what you should be aiming at to conform to W3C expectations etc. If you visit the W3C site they can explain it all a lot better than me.

    Hope this helps.

    Paul

  4. #4
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks you guys are quick and great help.
    Now i'd like to use divs instead of spans, but divs insert brs and i want the 4 words on the same line.
    I tried using div + display: inline, but it doesn't work either, as shown here :
    spans and div html 4.01 complete doctype

    Also, I have another problem related to this. I am trying to use css only for layout.
    What i want to do is shown here :
    top banner + 2 float frames + dynamic width center
    The idea is that i don't want text to shrink under a certain width limit and i don't want the two frames to pass over the center or over each other either.
    On the url above everything works pretty fine, the "min-width property makes it work under netscape, but as it is not recognized by IE, I used a trick (a transparent image of the min width wanted) which makes it work under IE as well.

    Now, if i had the doctype on top of the document, see what happens :
    same with doctype
    Everything is still find in netscape, but the trick doesn't work anymore in IE, where everything i don't want to happen happens...
    So do i have to not make my page valid to achieve this ? Or is there some other way i can make it work in IE still validating HTML 4.01 (not even xhtml sic) ?

    Anyway thanks for your help guys
    Quentin

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

    In answer to your first question try this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>Yo man</title>
    <style type="text/css">
    <!--
    .toolLink a:link{ font: bold 12px verdana,arial,helvetica; color: #888888; text-decoration: none }
    .toolLink a:visited { color: #888888; text-decoration: none }
    .toolLink a:hover {  color: #000000; text-decoration: none }
    .centre {
    	text-align: center;
    	margin-right: auto;
    	margin-left: auto;
    }
    -->
    </style>
    </head>
    <body>
    <div class="centre">
    <div class="toolLink"> 
    <a href="#">first</a>
    <span style="margin-left: 10%"><a href=".">second</a></span> 
    <span style="margin-left: 10%"><a href=".">third</a></span> 
    <span style="margin-left: 10%"><a href=".">fourth</a></span> 
    </div>
    </div>
    </body>
    </html>
    I don't know the answer to the second question....yet.

    Paul

  6. #6
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cool :-)

    You got the first one :-).
    Thanks again !

    The second one is somehow tough...
    I had been struggling a long time before i could find a layout that made exxactly what i wanted, and now this doctype thing ruins it...

    I found a nice layout kinda similar :
    another one

    This one validates xhtml (!). In netscape it works like i'd like it to work, but in IE6 the text keeps shrinking (the workaround using images (or here HRs) allows to avoid the overleap between the different frames). Without the doctype this image/hr trick prevents paragraphs from shrinking to one-word width but the xhtml doctype seems to stop that.

    Plus, i'd like my side frames to have fixed width, and another problem with their layout is a nasty text-selection bug which prevents from selecting the paragraphs you want.

    Quentin

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

    Glad the first one was ok.

    The second one was awkward. I'm sure there's a way to achieve it and validate.

    If you want some other layouts theres a good selection here:
    http://www.thenoodleincident.com/tut...son/boxes.html

    Paul

  8. #8
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    YES

    i got it to work, using a little piece of javascript.
    see it here
    This validates as XHTML and on my machine it worked exactly as expected with IE6, NS6, and Opera6.
    Only a little margin problem left under IE, but should be easy to solve.
    The idea is pretty simple, use javascript to set the style properties to the floating ones when screen size is bigger than 770px and to the absolute fixed ones under 770px, thus acting as a static page for 800*600 and under, and as a min-width liquid page for 1024 and above.

    here's the javascript code itself.
    Code:
    <!--[if IE]>
    // only if IE, opera and netscape handle min-width
    <script type="text/javascript">
    var dynamic = true;
    window.attachEvent('onresize',layout);
    function layout() {
    	width = document.body.clientWidth;
    	if(dynamic==true && width < 771) {
    		dynamic=false;
    		document.getElementById("top").style.width='770px';
    		l = document.getElementById("leftframe");
    		r = document.getElementById("rightframe");
    		c = document.getElementById("center");
    		c.style.width="440px";
    		l.style.float="none";
    		l.style.position="absolute";
    		r.style.float="none";
    		r.style.position="absolute";
    		r.style.left="625px";
    	} else if (dynamic==false && width > 770) {
    		dynamic=true;
    		document.getElementById("top").style.width='100%';
    		l = document.getElementById("leftframe");
    		r = document.getElementById("rightframe");
    		c = document.getElementById("center");
    		c.style.width="auto";
    		l.style.float="left";
    		l.style.position="relative";
    		r.style.float="right";
    		r.style.position="relative";
    		r.style.left="";
    	}
    }
    </script>
    <![endif]-->
    Quentin

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

    It works well.

    It should have been straight forward. One day the browsers will interpret the markup correctly!!

    What happens just in case javascript is turned off does it default ok. (I know most people use javascript but I think about 15% have it turned off.)

    Paul


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
  •