SitePoint Sponsor

User Tag List

Results 1 to 25 of 30

Hybrid View

  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,564
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  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,564
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  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,564
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  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
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    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
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    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
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 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).

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    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...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  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)
    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!

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 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.

  17. #17
    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.

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    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?

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by team1504 View Post
    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?
    Review requests go into a moderation queue to be vetted by Advisors so that they meet the requirements. Once approved they will appear in the forum but may take a couple of days depending on what else is there . (I've approved it now anyway so you should be able to see it.)

  21. #21
    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. Well I find this trade for me giving reviews and getting reviews interesting. Im more than happy to give more indepth reviews

    Thank you Paul for approving it for me.

    Now, if either of you have any comments or suggestions on the layout you've helped me with, Please feel free to do so here: http://www.sitepoint.com/forums/show...lio&highlight=

    I would really appreciate any and all feedback I
    and of course, thank you for the help

    Regards,
    Team 1504

  22. #22
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by team
    oh okay. fixed fixes the object in the same place on the screen while absolute fixes in the sample place in the layout?
    Fixed relates to the viewport. Your coordinates are based off the corners of the screen itself, not the web page or content inside. Scrolling doesn't change where the viewport is, so the element doesn't move.

    Absolute relates to whoever the nearest positioned ancestor is; if there isn't one, the viewport (the specs say "otherwise the viewport" but really, it's the top of the document. Which is why the abso-po'd element can scroll offscreen).

    A positioned ancestor is any parent element (or grandparent or great-grandparent) who has either position: relative or position: absolute set on them.

    So sometimes you see an element with position: relative on it, but no coordinates like left or top. Likely, they either wanted to absolutely position a child (the top left corner of the position: relative element is 0,0 to the abso-po child)... or they wanted to set a z-index. Otherwise, they were probably just wasting code for no reason :)

  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)
    seriously thank you for that in-depth explanation. Thats one of the many things that I love about SPF, that I can get help and learn from it.

  24. #24
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes you got it right .

    I was reading some reviews you did, and it's possible they fell short of the length. Moderators have to approve the thread first by checking that you did 3 reviews that met the criteria. I'd possibly PM a moderator in that section of the forum and see what's up.

    To be honest, I'd guess the reviews were too short (I believe it's 2 PARAGRAPHS minimum), but I could be wrong.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •