SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    HTML5 Doctype causing styling to be ignored?!

    Hello,
    I am trying to design a new layout and then when I viewed it in chrome it was just a blank page. By chance i commented out the Doctype and it is displays fine in chrome now.

    Here is an online copy

    Does anyone have any idea why this is happening? Meaning, I want have a Doctype, but I want the page to look like it should too.

    Thanks in Advance!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The doctype isn't hte issue. When you have no doctype the browser incorrectly bases percentage heights. Percentage heights should base their height off a parent. In your example, you don't have a parent height set thus BOTH boxes height should be 0. Now, if you have no doctype the browser gets that wrong.

    However, if you do hav a doctype, in order for it to work you need to, first of all, DECLARE a height for the parent . The html/body need it set.

    html,body{height:100%;}

    The doctype is not to blame here.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    oh okay. i knew the doctype couldn't be the problem because that didn't make sense. Thank you for explaining it to me.

    So, in review, am I correct to say that in using percentage values for height and width, the parent element (if there is one) must have some declaration of a height and width?

    I declared a 100% height and width and it works just as i hoped! Thank you!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Every element has SOME sort of parent.

    The only exception to the rule is AP elements. They get their percent heights shown no matter what.

    You're welcome .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ah okay.
    Unfortunately, i am now having one more issue i was hoping you could help me with.

    I am trying to add some placeholder content, but, as it should, its appearing on top when I want all of it to be over / in front of the two divs. The two divs were just to split the body's background into two colours.

    Do you have any suggestions on how to get the content on over of a 2-colour-split bg?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well the problem is is that the top/bottom divs you have there are part of the main flow..which means other content will run on top of it.

    I'd honestly not make a page with a 2 colour split, however if you were going to do like...a fading from one color to then next (gradient)..I'd place that on a wrapper div.

    Can you show me what overall you'd like your page to look like? A quick mockup in photoshop or paint will suffice. I'd not go for a straight 2 different color design...I imagine it'd look bad.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I didn't do a psd for this idea. The colour split idea however was inspired by bam.com.au and I think it looks nice there

  8. #8
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here is a quick sketch of what i am thinking about in my head, would you be willing to help me to bring this layout to reality?
    30IgG.jpg

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The bam site... open your favourite browser's developer toolbar/whatever. Find "container" and you'll see everyone is sitting centered inside that container.

    The divide is made by an image: http://www.bam.com.au/art/homeglow.jpg which sits in #glow, who's just a parent wrapping #container. When the page is taller than that image, the rest of the dark grey comes from the body's background. They also have a green repeated 1px thing so you keep getting the same amount of green if your screen is really really wide, on #wrap. I suppose they did that with an image so that #wrap could grow with its content without covering up the grey of the body. So in your case you'd have a purple/indigo image doing the same thing, but be aware your image will be limited in px (not % as you were hoping to use). The other option might be complicated: a box with a set height and forcibly allowing the content inside to spill out, and have that content have its own bg image/colour or something. Because of how IE deals with floats, you can't take advantage of how floats who are unenclosed to have a float hanging out.

    BTW don't use their retarded push div technology, that was silly when it was new, and it's sillier now. They're doing a sticky footer. You've prolly seen Paul's floating around here somewhere before.

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thank you for explaining that.

    the bam site...
    I'm assuming this means that you have some strong dislike for it?


    The limit of the px in the indigo/purple image's height is the reason why i didn't try that what bam did at first. So are you saying that what I am trying to achieve without using images for the bg is impossible?

    Also what is push div technology? And, yes, i have seen paul's sticky footer example.

    Speaking of @Paul O'B maybe he can verify if my idea for this layout is possible with %'s and bg colours? instead of images like bam did.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by team
    I'm assuming this means that you have some strong dislike for it?
    Hm, no? That's the url, bam. I didn't actually read the site, just looked at the code and the colours : )

    Quote Originally Posted by team
    The limit of the px in the indigo/purple image's height is the reason why i didn't try that what bam did at first.
    I wondered. Earlier I saw this thread and thought, an image is stuck in px...
    Quote Originally Posted by team
    So are you saying that what I am trying to achieve without using images for the bg is impossible?
    I don't want to say that. I keep thinking it probably can be done, but it shouldn't be brittle.

    There's some CSS3 stuff coming out like background-position which can do more than the old background-position, and the gradients have start and stop properties which can be set in %s. In fact, now that I think of it, I've seen Lea Verou do % background colours by taking CSS gradients and stopping them in a severe way, so that it's not really a gradient but a line. I forget now what exactly she did, but I can dig it up. She uses it to make the CSS patterns on her site. Of course, this is CSS3 so we'll need to think of something else too. What's cool about the gradients is, they are applied onto "background-image" so you can start with a real image for non-supporting browsers and then override with the gradients. Browsers who support the gradients won't use the image.

    *Edit I was thinking of stuff like this http://lea.verou.me/css3patterns/ but I notice they're making px-sized gradients and repeating them like images


    Quote Originally Posted by team
    Also what is push div technology? And, yes, i have seen paul's sticky footer example.
    The bam site is using a div called "push" which is a popular sticky-footer solution floating around on the web. I forget already what the div does, but Paul's various sticky footers don't require the extra element. I also notice they had a clearing div too. Tsk tsk.

  12. #12
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Hm, no? That's the url, bam. I didn't actually read the site, just looked at the code and the colours : )
    Oh, okay. I just thought by ... you were somehow representing, never-mind i was over-thinking


    Quote Originally Posted by Stomme poes View Post
    I don't want to say that. I keep thinking it probably can be done, but it shouldn't be brittle.

    There's some CSS3 stuff coming out like background-position which can do more than the old background-position, and the gradients have start and stop properties which can be set in %s. In fact, now that I think of it, I've seen Lea Verou do % background colours by taking CSS gradients and stopping them in a severe way, so that it's not really a gradient but a line. I forget now what exactly she did, but I can dig it up. She uses it to make the CSS patterns on her site. Of course, this is CSS3 so we'll need to think of something else too. What's cool about the gradients is, they are applied onto "background-image" so you can start with a real image for non-supporting browsers and then override with the gradients. Browsers who support the gradients won't use the image.

    *Edit I was thinking of stuff like this http://lea.verou.me/css3patterns/ but I notice they're making px-sized gradients and repeating them like images
    Ah, yes I have seen her patterns. I am excited to try this way if there isn't another way, but the only issue, as you said i believe, is support. I'll tweet her asking about % stopping points.

    Quote Originally Posted by Stomme poes View Post
    The bam site is using a div called "push" which is a popular sticky-footer solution floating around on the web. I forget already what the div does, but Paul's various sticky footers don't require the extra element. I also notice they had a clearing div too. Tsk tsk.
    So much for building a better web

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I'll tweet her asking about % stopping points.
    My terminology isn't very good :) there are things called colour stops but it's some graphics term I'm using incorrectly. I've always sucked at math

  14. #14
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    My terminology isn't very good there are things called colour stops but it's some graphics term I'm using incorrectly. I've always sucked at math
    i'm sure she'll at least somewhat understand what were talking about

  15. #15
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @Stomme poes : I spoke with Lea on twitter and she said the best way to do that in CSS would be:
    Code:
    body{
        background:-webkit-gradient(linear, left top, left bottom, from(#444444 55%), to(#999999 45%)); /* Saf4+, Chrome */
        background:-webkit-linear-gradient(top, #444444 55%, #999999 45%); /* Chrome 10+, Saf5.1+, iOS 5+ */
        background:-moz-linear-gradient(top, #444444 55%, #999999 45%); /* FF3.6 */
        background:-ms-linear-gradient(top, #444444 55%, #999999 45%); /* IE10 */
        background:-o-linear-gradient(top, #444444 55%, #999999 45%); /* Opera 11.10+ */
        background:linear-gradient(to bottom, #444444 55%, #999999 45%);
    }
    Those aren't the right colours, but that would be the syntax.

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Aha, the numbers overlap because you start with the start (55%) and then end with higher up the page (45%). Cool.

    If you set it as background-image: you can first use an image for non-supporting browsers, then let the gradients override in newer ones.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by team1504 View Post
    Speaking of @Paul O'B maybe he can verify if my idea for this layout is possible with %'s and bg colours? instead of images like bam did.
    If you just want a 50/50 split of the background then position:fix the top half and let the body do the rest.

    e.g.
    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=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height:100%;
    	margin:0;
    	padding:0;
    }
    body { background:#333; }
    #outer {
    	width:960px;
    	margin:20px auto;
    	background:#fff;
    	border:5px solid #f0f0f0;
    	position:relative;
    	z-index:2;
    }
    .bg {
    	position:fixed;
    	left:0;
    	top:0;
    	width:100%;
    	height:50%;
    	background:#9faecd;
    	z-index:1;
    }
    </style>
    </head>
    
    <body>
    <div class="bg"></div>
    <div id="outer">
    		<h1>Test</h1>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    		<p>Lorem impsum text</p>
    </div>
    </body>
    </html>
    It needs the one empty div but you can even lose that if you don't want ie8 and under support and instead use body:after rules to supply the fixed positioned background at the top (IE8 actually supports :after and :before but won't apply position fixed to the element).

  18. #18
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    oh okay. wow that is not at all as complicated as I thought it would be. Thank you. Especially for posting this so late, I appreciate you dedication

    I would do the second option, but I have just dropped / am starting to drop IE6 support and I think it may be too soon to do it for ie8.

    Anyway one can get rid of the vertical scroll bar without just setting overflow-y / overflow to hidden?
    Meaning, eventually if there is enough content a scrollbar would be needed, but I was wondering if there was a way to hide the scrollbar while its not needed.

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Are you talking about the browser scroll bar or just a regular elements scrollbars?

    If you have it set to overflow:auto, as apposed to overflow:scroll, the "auto" will only have scrollbars once the elements dimensions are reached, and "scroll" will show it anyway.

    If it's browser scrollbars, at least in IE8 for IETester, no scrollbars appear to begin with...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  20. #20
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I thought i saw a browser-scrollbar in chrome, but the second time i opened it wasn't there O_o

    Anyway here is a link to it, what do you guys think? http://dl.dropbox.com/u/270523/help/layout.html

    Do you like it? The design, the colours, the logo? Would you make any changes?

    Also, one more question, I tried to get the red-box to be in the bottom-right-hand corner of #container. Any ideas on how to put it there?


    Thank you all again!

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by team1504 View Post
    I thought i saw a browser-scrollbar in chrome, but the second time i opened it wasn't there O_o

    Anyway here is a link to it, what do you guys think? http://dl.dropbox.com/u/270523/help/layout.html

    Do you like it? The design, the colours, the logo? Would you make any changes?

    Also, one more question, I tried to get the red-box to be in the bottom-right-hand corner of #container. Any ideas on how to put it there?


    Thank you all again!
    You should go to the web critique section of this website. It would be wrong for us to critique it here. We aren't supposed to .

    Head on over there and follow the guidelines (3 reviews must be done in order for you to post a thread there)

    As for the red box, it depends on whhat is going to be there. You could set the parent to position:relative, and have the red box be position:absolute and position it down there .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    [QUOTE=team1504;5079713

    Also, one more question, I tried to get the red-box to be in the bottom-right-hand corner of #container. Any ideas on how to put it there?


    Thank you all again! [/QUOTE]

    Ryan answered that above and you set a stacking context on #container using position:relative (which you already have) and then you can just position the red box with absolute positioning at bottom:0;right:0;. You will of course need to make content avoid it though by either adding some padding to the bottom of the container or by adding padding-bottom to the last static element in that section.

  23. #23
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh okay. I was using position:fixed; I always co fuse fixed and absolute and don't know when to tell the difference.

    Thank you.

    I dont think ive ever used the critique forum before. Thank you for pointing that out Ryan.

    Ill make a post and get back to you guys with url in case you have any comments, suggestions, or critique.

  24. #24
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Tjhe only difference between fixed/absolute is tht fixed will hold it in place on hte screen, even when you scroll. Absolute won't .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  25. #25
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    oh okay. fixed fixes the object in the same place on the screen while absolute fixes in the sample place in the layout? I don't know if I said that correctly, but I got it now.

    Also, I don't know if any of you are familiar with the review forums, but I tried posting there twice, after doing 3 reviews, and after submitting the new thread, it went to the forum again. My thread was not there and when I checked my latest threads, the thread wasn't it that list either. Any idea why this is occurring?


Tags for this Thread

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
  •