Font Size altering why

Jacky Kenna · June 9th, 2005, 03:34 PM

Hi All

I am creating my own site in parallel to the book and am currently working on the CSS as shown on Page 135 and later in the book.
I have two problems.

I have created link hover active and visited styles and set all their characteristics the same. All looks well in DM but when viewed in IE the font size alters to a larger size, the same size as the default font and takes on a mauve colour. When I move the mouse over it, it reduces to the Link size which it stays at whether I click or not, Clicking will give me that same the way I have set it up to isolate the issue. Once I move my mouse away the font reverts to the original larger size. Below I have copied the page code and the style code.

My second issue is that I have created a style and I am sure the answer is in the book but I can not find out hot attach it. Again I have examined the directions on page 135 several times.

I hope that it is OK to upload so much code particularly that it is not directly code from the book.

All the Best
Jacky Kenna

My page code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

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

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#B7E8FF" >
    <td width="24"> </td>
    <td width="80%"> </td>
    <td width="10"> </td>
    <td width="13"> </td>
    <td width="248"><a href="logOn">Log on</a></td>
    <td width="24"> </td>
  </tr>
  <tr bgcolor="#B7E8FF" >
    <td width="24"> </td>
    <td rowspan="3"><img src="images/logo.png" width="241" height="85"></td>
    <td> </td>
    <td> </td>
    <td width="248">Your Account </td>
    <td width="24"> </td>
  </tr>
  <tr bgcolor="#B7E8FF" >
    <td width="24"> </td>
    <td> </td>
    <td> </td>
    <td width="248"><h5>Logged on : </h5></td>
    <td width="24"> </td>
  </tr>
  <tr bgcolor="#B7E8FF">
    <td width="24"> </td>
    <td> </td>
    <td> </td>
    <td width="248"> </td>
    <td width="24"> </td>
  </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#C1CBD7">
  <tr>
    <td width="24"> </td>
    <td><a href="Indexmrnswebsite2.php">Home</a>
     Project Selector <a href="Indexmrnswebsite2.php">
     Recrutment</a>
     Management Reports
     Controler
     Contact us<a href="help">
     Help</a> </td>
    <td width="24"> </td>
  </tr>
</table>

</body>
</html>

My style sheet code:

label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    text-align: right;
    border: thin;
}
a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    text-transform: capitalize;
    color: #000000;
    text-decoration: underline;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
}
a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    text-transform: capitalize;
    color: #000000;
    text-decoration: underline;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
}
a:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    text-transform: capitalize;
    color: #000000;
    text-decoration: underline;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    }

a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    text-transform: capitalize;
    color: #000000;
    text-decoration: underline;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
}

h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #000000;
    text-align: left;
    text-transform: capitalize;
    text-decoration: none;
}

button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-weight: normal;
    text-transform: capitalize;
    color: #000000;
}

Imar · June 9th, 2005, 04:07 PM

Few things:

1. To add a style sheet to your page, open the Css panel (Shift+F11) right-click it and choose Attach Style sheet

2. The a selectors need to be in a specific order. I use LoVe HAte as a way to remember it (Link, Visited, Hover and Active). Or actually LoVe For HAte to accommodate for :Focus as well..

Also, your code for the links is a bit overdone; use the cascade wisely to minimize the amount of code. In your code, each of the four pseudo classes have the same code which isn't necessary.

I can't seem to reproduce your problem though. Can it be that your style sheet is cached by the browser? Press Ctrl+F5 to force a reload of it.....

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Jacky Kenna · June 10th, 2005, 02:37 AM

Hi Imar
Again thanks for your time!!!!!!!!!!

I started by hitting Ctrl F5 and so far all seems OK.

Mind you I am not convinced that a good night's rest for the machine has not have sorted it.

I made the styles all the same so as to isolate the larger issue. I know you're analysis is correct but I do not have the whole subject in my blood stream yet.

I will now attempt to get back to the varying colours for "LoVe HAte".

If the order had been done incorrectly is it possible to move them using cut and past in the code of the file itself? I have attempted doing this and all seems OK. I have also added the colours for the (Link, Visited, Hover and Active) as I required. Initially the changes did not take effect when I hit Ctrl F12 for IE. I âputâ the whole project up using the facility in the files panel and now all is excellent.

Also regarding your earlier comment re the margins and ensuring that they were handled in a CSS sheet I have simply cut that from the actual html sheet and pasted it into my style sheet. I changed them in their new location to see if they were controlling the HTML page and they are.

I have anther issue but will put it under another posting.

Again thanks a lot.

All the best
Jacky Kenna

Imar · June 11th, 2005, 06:32 AM

Yeah, you can cut and paste them and move them around in the .Css file. For many selectors, the order doesn't matter much. However, for some complex cascading stuff and selectors like "a" the order *is* important.

Once you save a file, it's not necessarily uploaded to the remote server as well. This all depends on your setup. SO, using Put may very well be required to see the file in the browser. Even then, the browser may not request a new version of the Css file every now and then because it caches a local copy for performance reasons. Whenever you don't see changes in static files like .js or .css appear in your page, use Ctrl+F5 in IE to force the browser to get a new copy of the file from the server.

HtH,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.