4 replies [Last post]
komjj
Offline
newbie
Last seen: 5 years 46 weeks ago
Joined: 2008-11-09
Posts: 2
Points: 0

Everything was working right with the overflow auto until I put in the xhtml 1 doctype. Then the overflow auto stopped working, and I took the doctype out and it worked agian. I put the doctype back in and put it in the validator, there were no errors. Same with the css... what is wrong?

Test Page

Left Section

Right Section

Chggj hgjh gjghj gjhgjh gjhgjhgj hgjhgfgfgd fgdfgfggf gdfgdgfg kjldjflk djglk djglk dfjglfg jlfdjgl kdgdlfjglfkdjkg
joirj ortjyoy jiotiyor iyjojry oijtori yjooij yoirjy oijroh yjorht yoitoiy twhohgo dhsoih giuhgi uhriug hiuodhg iuhisug heurhgu iehrigu hius ehguih eurhgui ehgerghe rg
gej r hgehsgueshg is heig u h r uigh uerh gue shg usheru hgursh gushgu hoshghr ugheuoi rhgoihe sghesug huesk highe usgheu shguer hges
gesrgh eurhg uihr eigu rehuigh euhge hsguhe urishg uierh guoes hgush geushgdsthhrthrt
g shghe usihg iuesh giues hgue sirghiue rshguieydgfdg yfgygd yldlkgl djl kgdidfg oh!

body {
margin: 0px;
padding: 0px;
background-color: black;
color: white;
}
#header {
background: black;
width: 100%;
text-align: center;
}
#leftcol {
background: red;
color: black;
float: left;
width: 20%;
text-align: right;
}
#rightcol {
background: red;
color: black;
float: right;
width: 20%;
}
#content {
background: black;
float: left;
width: 59%;
height: 75%;
margin-left: 20.5%;
margin-top: 5%;
margin-bottom: 5%;
overflow: auto;
}
#footer {
background: red;
color: black;
clear: both;
width: 100%;
text-align: center;
}

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 3 years 30 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

You're missing the meta tag

You're missing the meta tag try putting this in the top after the head open tag:

/* your head tag would be here <head> */
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Try this if not get back to me.

Also do you mind if I use you as an example on correct doctype tutorial video?

komjj
Offline
newbie
Last seen: 5 years 46 weeks ago
Joined: 2008-11-09
Posts: 2
Points: 0

didn't work

No it didn't work, but thanks for noticing I forgot the meta tag
Yes you can use it in your tutorial
Thanks for your help Smile

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 3 years 30 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok I'm guessing you still

Ok I'm guessing you still have the problem so If the auto isn't working then what do you want to happen with the overflow?

If you want say scrolls then just change it to that auto only really tends to do scrolls anyway.

scope1000
Offline
Regular
Last seen: 5 years 44 weeks ago
Joined: 2008-10-30
Posts: 33
Points: 0

Change your content height

Change your content height for a definitive height i.e. 450px not 75%. That appears to be why the overflow auto is not working with a valid doctype.

I don't know if this is documented on the W3C site or not but it seems a combination of percentage height/overflow auto and valid doctype doesn't work. I'm not big on percentages in construction, so I don't know enough about them to provide why its not working when a valid doctype is used.