Css Problems

[ejh]

At the suggestion of TCH members, I spent some time trying to learn CSS to solve a problem with borders. Despite my efforts, no solution has been reached. Can someone look at this for me? ...

 

When viewing www.gale2006.com/new2.htm in Internet Explorer, everything is just how I want it. Open the same page in Mozilla Firefox and the borders and links are not correct. TCH members suggest CSS, on the page www.Gale2006.com/wrong.htm you will find my CSS changes, but not changes in Firefox. I think I may have gotten confused with CSS IDs/Classes. Can anyone show me how I'm supposed to be doing this??

 

Thanks for your help!

 

Eric

[owatagal]

The two pages (new2.htm and wrong.htm) appear to have the exact same code to me.

 

Anyway -- the border is black and should be red, right? It's not a class/ID problem, because I don't see you using classes or IDs anywhere -- the code I'm seeing is declaring the CSS right in the HTML tags, like:

 

><td width="50%" bgcolor="#FF0000" style="border-style: solid; border-width: 3px; padding-left: 4px; padding-right: 4px" bordercolor="#FF0000" valign="top">

 

The problem here is that you're using a combination of old HTML (width="", "bgcolor="", bordercolor="", and valign="") and CSS style declarations (everything else). And you're missing a semi-colon in the style declaration; there should be one at the very end, for padding-right:

 

padding-right: 4px;"

 

Adding the semi-colon might be enough to fix your problems, but if it isn't, try changing everythign to a CSS style declaration rather than using the HTML, like:

 

><td style="width: 50%; background: #f00; border: 3px solid #f00; padding-left: 4px; padding-right: 4px; vertical-align: top;">

 

Using CSS classes and IDs is a whole different story, and you'd need to set up an external style sheet (linked in the page header) or else include all the style information at the top of your HTML page (rather than in each tag, which is where you have it now). But I don't know if you want to get into that or if you're just trying to get what you have working?

 

Edited to add:

 

Semi-colons are tricky, so don't feel bad about missing one; it happens to me all the time. Also, when you're first getting the hang of CSS, it does take time to figure out how to change all the old, familiar HTML codes into the CSS syntax, so if something I'm saying here isn't clear, just let me know and I'll try to be more clear.

Edited August 2, 2006 by owatagal

[carbonize]

Just to clarify you do not need the closing semi colon for the final declaration. it's good practise to use it but you don't need it.

[owatagal]

Interesting. Do you know if it's optional because it's built into the specs to be optional, or are browsers compensating because it's a common error?

[TCH-JimE]

Hello,

 

This is reasonable easy to sort out and is one of the many problems that users have with IE/Firefox.

 

First off, a class is set of rules (css rules) that can be applied to many areas. An ID can only ever be applied once (or at least, it should only ever be applied once. Now I may be wrong on this, but thats how I have always played it when designing CSS). Also you are using "inline" CSS rather then sheet CSS which can lead to confusions (just my opinion there though)

 

As Owatagal says, in Firefox, the borders are black, in IE, they are the same color.

 

This happens, because rightly so, in this line of code:

 

><td width="50%" bgcolor="#FF0000" style="border-style: solid; border-width: 3px; padding-left: 4px; padding-right: 4px" bordercolor="#FF0000" valign="top">
			<i><b><font face="Arial" size="4" color="#FFFFFF">

you have not defined the border color of the cell. IE being M$ product and not following proper rules, defines it from the style you have originated. Firefox displays it correctley as the border is not colored (although is 3 px big) and hence is black.

 

You could follow Owatagals suggestion but I would also do it like this.

 

Put in your head the following, (this is a class)

><style>
.tableheader {
width: 50%; 
background: #f00; 
border: 3px solid #f00; 
padding-left: 4px; 
padding-right: 4px; 
vertical-align: top;
}
</style>

and then for your html all you need to put is:

><td class="tableheader">

As you can see it leaves the main coding much cleaner and the best bit is, you can use it again on the next columns header. In the style area, you can even define fonts.

 

Keep it up, its brillaint that you are learning this and I am very impressed!

 

With regards to the missing semicolon, you should always put it in. In the above style sheet example, if you forget the semi colon, it won't work at all, hence I always put it in.

 

JimE

[ejh]

Wow! That did the trick!! Thanks guys- problem solved.

[ejh]

Two new problems have surfaced...

 

1) The hyperlinks in the navigation bars and "Action Center" are not supposed to be underlined. How do I fix this?

 

2) Before I got fixed up with CSS for my border color issues, I did not have a space between "Action Center" and the links. How do I get rid of this space?

 

You can see what I'm talking about at: www.gale2006.com/indexnew.htm

 

Thanks in advance for your help!

Edited August 7, 2006 by EricHamilton

[TCH-Bruce]

1. Add this to your CSS

 

>a {text-decoration: none;}

[ejh]

Thanks for the reply Bruce, where should I put the code? ... I'm still very new to this CSS stuff.

[TCH-Bruce]

Well, you could insert style into your web page or you can use an external style sheet.

 

To include it into your page stick it into the head section of your page. Example of HTML skeleton page.

 

><html>
<head>
<title>your page title</title>
<style type="text/css">
a { text-decoration: none; }
</style>
</head>
<body>
...
...
...
</body>
</html>

 

Check out W3Schools for more information

[stevevan]

When your ready, you can use this page to validate CSS pages.

[TCH-JimE]

Eric,

 

Do you mean the large yellow area around the word "action center". If so, this is mostly defined by your border being 3px. Since I am not sure what your trying to acheieve, I can't comment on a solution

 

JimE