Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need help making headers format correctly

Status
Not open for further replies.

4myinfo

Technical User
Nov 3, 2008
20
US
Hello! I have designed a home page with .xhtml and an external linked style sheet. For some reason, unknown to me, the styles I have indicated for the headers (h1, h2, h3) in my .css stylesheet aren't showing correctly. The .xhtml and .css pass validation. Any guidance would be GREATLY appreciated!

The link is:
 
The page is The strange thing is, when I pull the page up on the web the .css is different than what I uploaded! The .css that I uploaded is:
@charset "UTF-8";

/*
* Main Structure, wrap the whole layout in a div to keep it narrow and centered
*/

#wrapper {
position: relative;
width: 900px;
margin: 0 auto;
text-align: left;
z-index: 10;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.4;
background-image: url("images/bkgbrfrx.jpg");
background-repeat:repeat-x;
text-align: center;
display: block;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
background-position: center top;
width:100%;
}

#nav {
margin: 0;
padding: 0;
clear: both;
list-style: none inside;
}

/* Navigation, a styled list */

#nav {
list-style-type: none;
margin-left: -10px;
margin-right: 2px;
width: 900px;
padding: 10px;
overflow: auto;
}

#nav li {
float: left;
}

a:link,a:visited #nav li:first-child {
border: none;
padding-left: 0px;
}

#nav li a {
display: block;
width: auto;
padding: 7px;
border: 7px #D00000;
margin: 0 auto;
font-weight: bold;
color: #ffffff;
text-align: center;
text-decoration: none;
}

#logo {
background: none;
text-align: left;
border: 0px solid;
}

h1 {
font-family: Helvetica,Arial,sans-serif;
font-size: 2em;
padding-top: 20px;
padding-bottom: 1px;
color:#D00000;
}

h2 {
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
font-style: italic;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
color: #000000;
}

h3 {
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
font-style: italic;
font-size: 1em;
line-height: 1.2;
text-align: center;
color: #D00000;
}

p {
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 1.2;
}

#foot {
margin: 0;
padding: 0;
clear: both;
list-style: none inside;
}

/* Foot, a styled list */

#foot {
list-style-type: none;
margin-left: -10px;
margin-right: 2px;
width: 900px;
padding: 10px;
overflow: auto;
}

#foot li {
float:left;
width:800px;
margin:0;
padding:1em;}

a:link,a:visited #nav li:first-child {
border: none;
padding-left: 0px;
}

#foot li a {
display: block;
width: 100%;
padding: 7px;
border: 7px #ffffff;
margin: 0 auto;
font-weight: bold;
color: #ffffff;
text-align: center;
}
The .css that pulls up on the web is totally different. I have cleared any other style sheets off of the server in that folder. Strange???
 
Hi

4myinfo said:
The .css that pulls up on the web is totally different.
Interesting. How did you uploaded the CSS file ? Are you sure the upload was successful ? If you download it the same way you uploaded, which file version you get ? Are you sure the names are all lowercase in the file name and path ?


Feherke.
 
There is no style.css file in the synergy_html folder. Trying to access it returns a "Not Found error". Make sure you uploaded the style.css file to the correct folder or change the path in your rel link to point to the file.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
YOU'RE GREAT!!! That was it! I had the .css file in a folder labeled .css in the home folder and somehow the link got changed. Thank you soooooo much!!!
 
BTW just to be pedantinc

H1 to H6 elements are headings, headers are client/server HTTP messages.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Incidentally, using a .xhtml extension confuses the heck out of IE6 - it downloads the page instead of displaying it. Dunno what other browsers might do.

I suggest you use a .htm or .html extension instead - it's still appropriate for XHTML and won't mess up older browsers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Hi

Chris said:
Incidentally, using a .xhtml extension confuses the heck out of IE6 - it downloads the page instead of displaying it.
Not the extension is the problem, but the [tt]Content-Type: application/xhtml+xml[/tt] HTTP response header :
Wikipedia said:
Most web browsers have mature support for all of the possible XHTML media types. The notable exception is Internet Explorer versions 8 and earlier by Microsoft; rather than rendering application/xhtml+xml content, a dialog box invites the user to save the content to disk instead.
( See the XHTML | Adoption article on Wikipedia. )

Feherke.
 
Thanks Chris and Feherke! That would definitely be a problem. So, why are people using .xhtml? If I change the doc type to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
and change the extension to .html will this solve the problem on all browsers? Will my .xhtml coding still be ok? I'm just learning hand coding and obviously still have a lot to learn! Thanks for the pointers!
 
Hi

4myinfo said:
So, why are people using .xhtml?
Personally I can not remember that I saw other pages then your with .xhtml extension. So I would say, people are not using .xhtml extension.
4myinfo said:
If I change the doc type to:
There is absolutely no relation between DOCTYPE and file extension. As you document is valid XHTML, there is no reason to touch the DOCTYPE.
4myinfo said:
and change the extension to .html will this solve the problem on all browsers?
Directly not. The problem is with the [tt]Content-type[/tt] HTTP response header sent by the web server together with the page.

But is possible to solve it indirectly. Is possible that your server sends [tt]application/xhtml+xml[/tt] because of the file extension. In that case if you change the file extension to .html is possible that the server will change the [tt]content-type[/tt] to [tt]text/html[/tt], and that will solve the problem.

Feherke.
 
Thanks for the detailed info! I will change it immediately. God bless you and yours!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top