Why html links to css work in dreamweaver but not on live browser?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Trevor Mills
    New Member
    • Jan 2011
    • 4
    #1

    Why html links to css work in dreamweaver but not on live browser?

    My html file links to my external style sheet when im working in dreamweaver, but when I preview in browser, no styles. When I view in dreamweaver live mode i see the body background-color and the divs are in place. but no borders. When I preview in firefox, no styles at all. I will provide the code. Thanks, please help.

    html code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Talk Tampa Sports</title>

</head>

<body>

<div id="wrapper">
    
    <div id="header">
    </div>
    
    <div id="navbar">
    </div>
    
    <div id="leftsidebar">
    </div>
    
    <div id="rightsidebar">
    </div>
    
    <div id="maincontent">
    </div>
    
    <div id="footer">
    </div>
    
</div>

</body>

</html>
    css code:

    Code:
    body {
	background-color: #060;
}

#wrapper {
	width: 960px;
	height: inherit;
	margin: auto;
	background-color: white;
	border: solid, 1px, black;
	}
	
#header {
	width: 960px;
	height: 100px;
	border-bottom: solid, 1px, black;
}

#navbar {
	height: 10px;
	width: 960px;
	border-bottom: solid, 1px, black;
}

#maincontent {
	width: 608px;
	height: 500px;
	border-bottom: solid, 1px, black;
	border-right: solid, 1px, black;
	padding: 2px;
	margin-left: 176px;
	font: Verdana, Geneva, sans-serif, 1em, black;
}

#leftsidebar {
	width: 174px;
	height: 500px;
	float: left;
	border-bottom: solid, 1px, black;
	border-right: solid, 1px, black;
	padding: 2px;
}

#rightsidebar {
	width: 174px;
	height: 500px;
	float: right;
	border-bottom: solid, 1px, black;
	padding: 2px;
}

#footer {
	width: 960px;
	height: 100px;
}
    Tags: None
    • JKing
      Recognized Expert Top Contributor
      • Jun 2007
      • 1206
      #2
      You need to get rid of the commas in some of your rules, specifically the border and font rules.

      Should be like the following:
      Code:
      #header{
border: 1px solid black;
font: 1em black Verdana, Geneva, sans-serif;
}

        Comment

        • Trevor Mills
          New Member
          • Jan 2011
          • 4
          #3
          thanks that helps a lot but I still get no style in my browser. everything looks perfect on dreamweaver, borders show in live mode now. I still get a blank white screen in my browser.

            Comment

            • JKing
              Recognized Expert Top Contributor
              • Jun 2007
              • 1206
              #4
              Try using an absolute path to your css file.

              Where is your html file stored and where is your css file stored?

                Comment

                • Trevor Mills
                  New Member
                  • Jan 2011
                  • 4
                  #5
                  The html file is in a folder called html and the css file is in a folder called css. Both of those folders are contained in the same folder. I tried the absolute path and it is still not working.

                    Comment

                    • JKing
                      Recognized Expert Top Contributor
                      • Jun 2007
                      • 1206
                      #6
                      Try this
                      Code:
                      <link href="../css/main_layout.css" rel="stylesheet" type="text/css" />

                        Comment

                        • Trevor Mills
                          New Member
                          • Jan 2011
                          • 4
                          #7
                          thanks, that was the one. so what do those dots mean? andapparently they are required? Thanks for all your help.

                            Comment

                            • JKing
                              Recognized Expert Top Contributor
                              • Jun 2007
                              • 1206
                              #8
                              The dots are there for going up a level in your directories. Because your html file is stored in its own folder you need to tell it to get out of that folder then into the css folder to the css file.

                                Comment

                                Previous template Next
                                Working...