Jump to content

It works but then again it doesn't

crmamx

By crmamx
in CSS Help

 Share

Recommended Posts

crmamx Advanced Member

crmamx

Posted
Posted

This program works perfect.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <style type="text/css">
h1{
    font-size: 135%;
    color: #ff8e00;
    font-weight: bold;
}
h2{
    font-size: 120%;
    color: #ff8e00;
    font-weight: bold;
}
h3{
    padding-left: 0.5em;
}
.hdr1{
    color: #ff0000; /*red*/
    padding-left: 1.5em;
}
.hdr2{
    color: #00ff00; /*lime*/
    padding-left: 1.5em;
}
.hdr3{
    font-size: 120%;
    color: #808000;/*olive*/
    font-weight: bold;
}
  </style>
  
</head>

<body>
<h1>h1 Club History</h1><br />
<h2>h2 Club History</h2><br />
<h3>h3 Club History</h3><br />
<p class="hdr1">hdr1 paragraph</p> <br />
<p class="hdr2">hdr2 paragraph</p><br />
<p class="hdr3">hdr3 paragraph</p><br />
</body>
</html>

 

The css is copied from this file:

 

custom.css

/* 
#####This the custom sheet########

Here you can add aditional style to the frame and to all html elements
*/
/* STRUCTURE ------------------------------------------------- */
/* here you style the framework (div's) remember not to change the width only the height*/
#wrapper{
    overflow:hidden;
    margin-top: 30px; /* some air to breath */
}
#header{
    height:160px;
    background: #000080; /* dark blue */
    margin-bottom: 10px; /* some air to breath */
}
#left-header{
    height:120px; /* without a height the newsflash will seem to overlap it. */
}
#newsflash{
    height:120px;
    overflow:hidden; /* anycontent that overlaps it we be hidden */
}
#leftmenu{
    background: url(../images/transparent.png) repeat;
    min-height: 300px;
}
#maincontent{
    background: #fff; /* white */
    min-height: 300px;
}
#footer{
    height:120px;
    background: #d9d9ff; /* light purplish */
    margin-top: 10px; /* some air to breath */
}
/* STYLE HTML ELEMENTS ------------------------------------------------- */

/* !!! important to wrap a div with class content around your content so it gets a proper padding !!! */
div.content{ /* this div is a special class to give all content a consistent padding */
    padding: 10px;
    margin-bottom: 10px;
}
body{
    background:#ececec; /* very light grey */
    font-family: arial, sans-serif;
    font-size: 85%;
    line-height: 130%;
    background: url(../images/background.jpg) fixed no-repeat 50% 50%;
    color:#333;
}
/* STYLE HEADER NEWSFLASH ------------------------------------------------- */

#newsflash{
    color:#fff; /* white */
}
#newsflash h2{
    text-transform: uppercase;
    font-size: 125%;
    font-weight: bold;
    color: #ff8e00; /* brownish orange */
}
/* STYLE HEADER LEFT-HEADER------------------------------------------------- */

/* STYLE LEFTMENU ------------------------------------------------- */

#menu li{
    background: #012A80; /* dark blue */
}
#menu a{ /* the look of the links */
   font-size: 120%;
   color:#fff; /* white */
   font-weight: bold;
   display:block;
   text-decoration: none;
   padding:5px;
}
#menu a:hover{ /* on mouse over */
    color:#ff8e00; /* dark blue */
    background:#fff; /* white */
}

/* STYLE MAINCONTENT ----------------------------------------------- */

#maincontent{
    color:black; /* fff=white, 333=gray */
}

#maincontent h2{
    text-transform: uppercase;
    font-size: 115%;
    font-weight: bold;
    color: #ff8e00; /* dark blue */
}
/* STTLE FOOTER ------------------------------------------------- */

/* ---------------Moving boxes and images-------------------------*/
.floatimagel{ /* remember to uses classes instead of id's if something is not unique */
float:left;
width:300px;
padding:10px;
border:5px #00bbff;
margin:0px;
background-color:#87cdfa;
}

.floatimager{ /* remember to uses classes instead of id's if something is not unique */
float:right;
width:300px;
padding:10px;
border:5px #00bbff;
margin:0px;
background-color:#87cdfa;
}

.clearline{ /* remember to uses classes instead of #id's if something is not unique */
clear:both;
margin-bottom:2px;
}
/* ========================= NOTHING ABOVE THIS ============================ */

/* ----------- Displaying Images -------------------------------------- */

/*Portret of employees, and all images needed to have some space around it.
So i made a class  All I had to do was add an image and add the class portret.
<img src="filename.jpg" alt=" " class="portret" /> 

.portret{
margin: 10px; /* ginving 10px of margin around it 
display:inline;  this is for IE 6 and lower 
} */

/* ----------------- Club Info -------------------------------------------*/
/* I added some default style for elements like h1 h2 strong */
h1{
    font-size: 135%;
    color: #ff8e00;
    font-weight: bold;
}
h2{
    font-size: 120%;
    color: #ff8e00;
    font-weight: bold;
}
h3{
    padding-left: 0.5em;
}
.hdr1{
    color: #ff0000; /*red*/
    padding-left: 1.5em;
}
.hdr2{
    color: #00ff00; /*lime*/
    padding-left: 1.5em;
}
.hdr3{
    font-size: 120%;
    color: #808000;/*olive*/
    font-weight: bold;
}

strong{
    font-weight: bold;
}
p{
    margin: 8px 0;  /* this will give all p-elements 8 pixles of padding at the top and the bottom */
}
ul.list{/* add this class to a ul */
    list-style: circle;
    padding-left:20px;
    font-weight: bold;
    line-height: 150%;
}
/* REMEBER TO USE CLASSES INSTEAD OF #id's IF SOMETHING IS NOT UNIQUE' */
/* PREVENT THE USE OF the non-breaking space */

/*some general stuff here */
.float-left{
    float:left;
    display:inline; /* all floats need this for IE 6 */
}
.float-right{
    float:right;
    display:inline; /* all floats need this for IE 6 */
}

.float-right1{
    display:inline; /* all floats need this for IE 6 */
    position:absolute;
    left:100px;
    top:150px;
}

.space{ /* a class to give some space to the element used ie. on address */
   padding: 10px; /* i used badding so you can apply a nice background to the element if needed */
   margin-bottom: 10px;
}
.boxcolor{ 
    background:#FF0000; /*#C0D4FE;*/
}

.center
{
text-align:center;
}

a.center
{
  text-align:center;
  display:block;
}

span.center {
    display: block; /* make it a block elements */
    float: left; /* use float to remove the effect of pushing other to a next line */
    margin-left: 70px; /* some margin from left to center it. */
}

/* ------------------------------ Tables ------------------------------------ */
#box-table-b
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: center;
border-collapse: collapse;
border-top: 7px solid #9baff1;
border-bottom: 7px solid #9baff1;
}
#box-table-b th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: #e8edff;
border-right: 1px solid #9baff1;
border-left: 1px solid #9baff1;
color: #039;
}
#box-table-b td
{
padding: 8px;
background: #e8edff; 
border-right: 1px solid #aabcfe;
border-left: 1px solid #aabcfe;
color: #669;
}

/* --------- End Tables --------------------------------------- */

The exact same program using the exact same css code will not work when using custom.css.

 

h1 is a different size.

 

h2 changes to all caps.

 

h3 is not bold

 

hdr1 indentation is  wrong and is wrong color

 

hdr2 and hdr3 are wrong color

 

It's got me!

 

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

Hi crmamx i just looked at the source of your site and you are making alittle mess again.

 

It now declares 2 doctypes 2 head 2 titles etc.  IF you just use what you did before and stop using style in the head this all should work fine.

only include the stuff between the body tag and don't get sloppy (for instance using a table to  centre something (magnolia fields) while a paragraph with text-align:center; could do the same. )

 

 

press view source and notice the sudden duplicate doctype

Link to comment
Share on other sites
crmamx Advanced Member

crmamx

Posted
  • Author
Posted

You are right.

 

I set up menu as a standalone html file with the css included, to try and get it to work. After I got it working, I changed it to php and forgot to delete the up front  stuff.

 

I am using the table to center something because I couldn't get the damn css to work and I am tired of fu**** with it.

 

I will take your suggestion and fix the docs and clean it up, but if no one can figure out why the same code doesn't work in custom.css, I "ain't fu**** with it any more." I will just put the css that does work in the head of every program.

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

well in fact the answer was already in my response above so no need to look any further. It's named css because it's an abbreviation of cascading style sheets. styles can be overwritten. This again shows why it's best to read a book instead of jumping in. Not going to elaborate on this. I recommend it all before and you just ignore it.

 

Also since it worked perfectly before, should be a big hint what is causing the problem.

Link to comment
Share on other sites
crmamx Advanced Member

crmamx

Posted
  • Author
Posted

Yep, that fixed it tho I don't understand why it was screwing it up.

 

I fought and fought and fought the damn css code thinking somewhere I was messing up. So then I quit and started using inline and tables because at least I could get it to work.

 

I never knew you could use view/source as a troubleshooting tool. You are a repository of brilliant ideas.  ;)

 

Back to work on it.

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

Firebug would have probaly told  (right-click, inspect element) on exactly which line in css

and that's around line 89, of custom.css it does:

 

#maincontent h2 {
    color: #FF8E00;
    font-size: 115%;
    font-weight: bold;
    text-transform: uppercase;
}

 

just use firebug. You said you tried it before, but didn't work, that doesn't say 1 bit. just right click and inspect when you installed it, or use google chrome it's already build in. designing without firebug is madness, I think i told that before.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.