October 30, 201411 yr So i'm trying to create a site and i've tested my code on scratchpad and works how I thought it should, however when I view it in either firefox or chrome I still get a white border above my header, see below for details HTML Code: http://pastebin.com/DAjfVrQs CSS Code: http://pastebin.com/1q2dJFEi I don't understand why its working in scratchpad but not in normal browsers, please someone help.
October 30, 201411 yr That's not normal behavior, can you post up a live link or a jsFiddle for us to look at. We need access to the developer tools in chrome to find where the offending space is coming from. By the way I recommend you don't be developing in scratchpad. Just use an editor like sublime and a browser of your choice to develop in. Edited October 30, 201411 yr by rbrtsmith
October 30, 201411 yr Author I'm currently using sublime, scratchpad was just to show that the code works in a real time editor
October 30, 201411 yr Author Here's the code on jsfiddle, nothing seems to display in the results panel. http://jsfiddle.net/uzexw7nk/
October 30, 201411 yr Author Okay so I have taken a look using inspect element in chrome and for some reason its applying an 8px margin to the body even though I've declared the body to have 0 margin, any ideas as to why this is?
October 31, 201411 yr I don't get any margin on the body when I use the file. a few things of note though: You don't need the <style type = "text/css"> inside of your style.css There should be no html tags in your css file, maybe this could be the cause as in mine I just put it inline rather than external to save me some time. you need a <!DOCTYPE html> if you're to use HTML5 which you should now be doing. You should use more semantic tags rather than a load of divs. use <header> rather than <div id="header"> this will greatly enhance your SEO Don't use ID's for styling, use classes instead. ID's are for JavaScript hooks and screw with your css specificity so don't use them. There's no need to further indent styles on nested elements, just keep them inline. If you want to indicate that something is a child of a parent then google the BEM syntax, this makes it easier to read the code. On a block element like a div there's no need to specify a width of 100%, this is it's default width setting. As it stands your container is serving no purpose, it's in exactly the same position as your html and body wrappers. Typically the site container will wrap all the contents of the side, but have a max-width and positioned centrally on the X axis using margin: 0 auto; If you want the header and so on to be the full width of the window then you can lose this container element. If you are using a build tool such as grunt and a chrome plugin called LiveReload your browser will refresh everytime you save a file inside of that project which gives you a real time view of things -- in something that is a real browser rather than a simulation which, as it stands none are very representative of the real thing. Edited October 31, 201411 yr by rbrtsmith
October 31, 201411 yr The extra style tag is the cause of the issue. It causes the browser to ignore the html and body declarations and jump straight to the #container declarations. In effect all the browser sees is: <style type = "text/css"> #container{ margin: 0; padding: 0; border: none; width: 100%; min-height: 100%; background-color: #515151; } #header{ width: 100%; height: 15.555555555555555%; min-height:7.77777777778%; position: relative; top: 0; background-color: #737373; } </style> It ignores: <style type = "text/css"> html, body { margin: 0px; padding: 0px; border: 0px; } Firefox instead applies it's default of body { display: block; margin: 8px; } Which can be found on line 117 of html.css if you're really interested or anally pedantic. Regarding semantic tags only use semantic tags if the object has semantic meaning. If it is a meaningless container for something meaningless call it a <div>. The <div> is then actually semantic when used like that. Think of the <div> as being the Tupperware of web design. It may be bland and uninspiring but it's an excellent utility container.
October 31, 201411 yr I thought rogue tag could have been the cause of the issue. nice find. A div is fine to use, but with the OP giving it an id of header it's safe to assume that it will infact be a header so in this case a header tag should be used. Correct use of markup makes a big difference in SEO and a screen-readers ability to relay an accurate description of the webpage to a user. I use divs extensively, but only when there isn't a more meaningful tag available, it has zero semantic meaning so it won't harm your seo, but overuse in areas better suited to more descriptive will harm it. I agree with you that it is an excelent utillity container. Sometimes the archtectural structure dictates that you need to nest a load of divs within one another, I don't have a problem with that. Edited October 31, 201411 yr by rbrtsmith
Create an account or sign in to comment