CSS doesn't work the same when moving internal stylesheet to external

Question

I designed a layout, that you can see here, with a fixed header, a fixed menubar, contents inside boxes arranged in two columns, and a footer, plus a border around the whole <body> element. It works exactly as I want (tested with Iceweasel 38.2 and Internet Explorer 11).

The problem is: when I try to move the style sheet to an external css file, it doesn't work any more. The result looks like this.

I can't understand why the appearance of the page changes since the styles and the html are exactly the same. Thje external CSS does not contain the tags.

This is the source css/html for the working page:

<style>

  body    {
      height: 100%;
      color: black;
      background: white;
      border-width: 4px;
      border-style: solid;
      border-color: black;
      padding: 0;
      margin: 0 auto;
      max-width:1024px;
      }

  #left {       
      margin:0;
      margin-right: -4px;
      margin-top: 183px;
      padding:0;
      float:left;
      width:65%;
      background:red; 
      }

  #right {    
      margin:0;
      padding:0;
      margin-top: 183px;
      float:right;
      width:calc(35% + 4px);
      left: -4px;
      background:blue;
      }


  .boxleft { 
      padding-bottom: 10px;
      padding-left:20px;
      padding-right:20px;
      border-style: solid;
      border-color:black;
      border-top-width:0px;
      border-left-width:0px;
      border-right-width:4px;
      border-bottom-width:4px; 
      float:left;
      width:calc(100% - 44px); 
      }

  .title {      
      background-color:blue;   
      color:white;
      } 

  .rating {     
      background-color:red;  
      color:white;
      }

  .boxright {    
      padding:20px;
      border-style: solid;
      border-color:black;
      border-top-width:0px;
      border-left-width:4px;
      border-right-width:0px;
      border-bottom-width:4px; 
      float:right;
      width:calc(100% - 44px); 
      }

  .poster {     
      background-color:green;    
      color:white;
      } 

  #header { 
      background-image:url('Title background03.png');  
      background-repeat: no-repeat;
      position:fixed;
      width: 100%;
      max-width:1024px;
      margin: 0px auto;
      height:119px;
      top: 0;
      } 


  #footer { 
      background:white; 
      position:fixed;
      width:100%; 
      max-width:1024px;
      bottom: 0;
      padding: 0px;
      border-top-style: solid;
      border-bottom-style: solid;
      border-color:black;
      border-top-width:4px;
      border-bottom-width:4px;
      } 

  #menu {       
      background:black; 
      position:fixed;
      color:white;
      width:100%; 
      max-width:calc(1024px - 24px);             
      z-index:200;  
      margin: 0px auto;
      top:115px;
      height:64px;
      padding-top:12px;
      padding-left:24px;
      /* z-index: 1; */
      }

</style>    



<!DOCTYPE html>
<html>
  <head>       
  </head>

  <body>

<div id="header">
</div>

<p id="menu">menu1 - menu2 - menu3</p>
<div id="left">
  <div class="title boxleft">
    <p>title</p>
  </div>
  <div class="rating boxleft">
    <p>rating</p>
  </div>
</div>
<div id="right">
  <div class="poster boxright">
    <p>poster</p>
  </div>
</div>

<div id="footer">
  <P>copyright</P>
</div>  
  </body>

</html>

The CSS is different in each example - eg body in one lists a white border, the other requests black. — RichTea, Aug 17 '15 at 15:40
I have make this demo it work fine in my case ...... with external css.... — Pravin Sharma, Aug 17 '15 at 15:52

Sagar Garg · Accepted Answer · 2015-08-17T16:24:48.593

0

Add this to your head

<link rel="stylesheet" type="text/css" href="style.css">

style.css is the name of your external css file

Edited: For your problem with the border not taking up the entire page try:

html {
    height: 100%;
}

BTW < style> tags usually go in the head and not in front of the < !DOCTYLE html> tag

edited Aug 17 '15 at 16:24

answered Aug 17 '15 at 15:43

Sagar Garg

111
10

Thanks for the tip about – alenis Aug 17 '15 at 16:07
This sounds crazy but if, in the working html file, I put the internal style sheet inside the 'head' section, as it should be done, the border around the 'body' element disappears as in the non-working example I linked to in my original post. On the other hand, if, in the non-working example, I move the before the !DOCTYPE tag, then everything works fine! I don't think this is compliant to CSS specifications. But it works both with Mozilla and IE... – alenis Aug 17 '15 at 16:23
I edited my response. In your external css file add that line of css. – Sagar Garg Aug 17 '15 at 16:25
Thanks, that did the trick. Why it worked, even without the html 100% height rule, when the styles were before the '!DOCTYPE html' tag remains a mistery, but who cares... – alenis Aug 17 '15 at 16:32
Glad it worked for you the proper way. If you can upvote my solution that would be great. – Sagar Garg Aug 17 '15 at 16:34
I did, but due to my low reputation it doesn't show for the moment. – alenis Aug 17 '15 at 16:46

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

Have you considered CSS priority rules or so-called weights?

There is an in-depth explanation here.

Also, Answer to this question might me helpful.

edited May 23 '17 at 11:51

Community

1
1

answered Aug 17 '15 at 16:01

Sida

160
8

Thanks, but I don't think it's a matter of priority. The external CSS doesn't work even with the !important rule. It seems that, when moving styles to the external css, the 'body' element shrinks to 0 height, which doesn't make sense to me. – alenis Aug 17 '15 at 16:12

CSS doesn't work the same when moving internal stylesheet to external

2 Answers2