CSS Menu List

assgar

My menu list displays correctly for Internet explorer.
I am having problems with my menu list display properly in firefox.
The row height should be 15px, but in firefox the row display twice as height than in IE.

Note:
The menue display a link, mouse over should change the colour of the link and it background

OS:Win server 2003
Language: PHP

How can I resolve this issue?

[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>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="author" content="mazuki" />
  <link href="../config/pulse_config.css" rel="stylesheet" type="text/css"/>


<style type="text/css">
<!--
.default
{
  margin-left:0;
  margin-right:0;
  text-align:center;
  font-family: Arial, Helvetica, sans-serif; 
  font-size:14px; 
  font-weight:600;
  vertical-align:top;
}
.default ul
{
  margin-left:0;
  padding-left:0;
  white-space:nowrap;
}
.default li
{
  display:inline;
  list-style-type:none;
}
.default a
{
   padding:3px 10px;
}
.default a:link
{
   color:#ffffff;
   background-color:#036;
   text-decoration:none;
}
.default a:visited
{
  color:#ffffff;
  background-color: #000000;
  text-decoration:none;
}
.default a:hover
{
   color:blue;
   background-color:#55ae3a;
   text-decoration:none;
}
-->
</style>

<title>Home Page</title>
</head>

<body bgcolor="#e0e0e0">
<!--      processor      -->
<form  action="process.php" method="post">

<div id="pat-dash-first-layer">


   <table height="30" width="100%" border="1">
     <tr height="15">
        <td height="39" align="right"><div class="default"><ul><li><a href ="../change_form.php">Change Password</a></ul></li></div></td>
     </tr>
     <tr height="15" align="center">
        <td width = "100%"colspn ="2"><div id="location-bar" >Home Page</div></td>
     </tr>
    </table>

</form>
</body>
</html>

[/code]

Piranha

I don't know if this is what you want, but it at least change the position of the link. If this does not solve it please post a screenshot of how it should look like.

.default ul
{
  margin:0px;
  padding:0px;
  white-space:nowrap;
}

Weedpacket

It may also be more consistent to use CSS to specify stylistic features like height, width, border, and text alignment, rather than relying on deprecated HTML attributes; mixing the two approaches to styling can lead to all sorts of compatibility hassles with different rendering engines having different ideas about what takes priority.

nrg_alpha

I would also try to avoid using embedded CSS (CSS built into the <head> tag). I would make a separate .css file instead, which is used via <link href='...' rel='stylesheet' type='text/css' />.

Reason being if you have this CSS embedded in every page, and you need to make changes to this css, you have to go through every page and make those changes.. if you use a linked (external) style sheet instead, you just make changes to that one stylesheet and presto! Changes are done site-wide (assuming all your pages link to this stylesheet of course).

Additionally, what I do is give version numbers to my linked style sheets, and when I make a change, I adjust the file version number in the file name, and replace the older css file on the server with this new one. By using glob() to find a keyword in my .css file and plug that into the <link> tag, the newest one is used automatically.

glob example:
glob($dirCSS."master.css") where $dirCSS is the location of my css files. In this case, it finds any .css file that has the word 'master' in it (and there is only one file with this key word in it of course). If I make changes to say master_stylesheet2-0.css for example and rename it as master_stylesheet2-1.css and replace the older version with this newer one, glob finds this as the current one and uses it.

The reason for this song and dance is that .css files get cached by the browser. Had I simply over-written the orginial file (keeping the file name the same) and overwrite that file on the server, your browser will not re-download the newest .css file if it is already cached (translation, my site's css changes will not be reflected on your browser unless you empty the cache or hit Ctrl + F5). (I also apply this kind of versioning thing to images as well for the same reason).

Sure, there can be debates about adding short term expires headers and such on the server side.. but you may not have that access (depending on your hosting services).

This is all a little off topic, I know.

Cheers,

NRG

Piranha

I don't agree with you nrg_alpha. I see your point, but I think you should place css in a separate file, in the header and in the html elements. But to use the right way for every occation:

In a separate css file should be everything that is on more than one page.

In the header you should have all css that is used commonly on that page.

And in the html-tags you should have the css that is only used in that tag. Of course it should be css (with the style-attribute) and not the old html-attributes.

nrg_alpha

Piranha;10888454 wrote:
I don't agree with you nrg_alpha. I see your point, but I think you should place css in a separate file, in the header and in the html elements. But to use the right way for every occation:

In a separate css file should be everything that is on more than one page.

In the header you should have all css that is used commonly on that page.

And in the html-tags you should have the css that is only used in that tag. Of course it should be css (with the style-attribute) and not the old html-attributes.

Ah, but... you are missing the benefits of external linked style sheets over all the others.. these benefits include:

separate external style sheets are cache-able by the browser.. this means lighter [X]HTML files (as there is no embedded css). If the separate css files are cached already, this translates to lighter downloads (and if you are operating a site with HUGE traffic, any amount of shaved off downloading can really add up in bandwidth savings. If you have the css elements commonly used on that page as embedded, it is part of the [X]HTML file, and thus is not cache-able.
since separate external style sheets results in lighter [X]HTML files, this is more 'search engine friendly', as the content of your site is made a little easier for search engine content crawling, and thus could have some impact on your search engine rankings.
because of all my css being in one folder in the root with appropriate names, I know where to find it (where as if I have to modify an embedded css element on some page in some nested sub folder of another sub folder, I may have to dig around to find the actual [X]HTML file and make changes from there.. one location is much nicer IMO.

This is not to say there isn't any good uses for the other css formats (although I find embedded very hard to justify). I from time to time find myself using inline to say change the colour of a portion of text in a paragraph for instance. But on the whole, to reduce markup, increase cache-ability (is that even a word?) and for easy fast access (all .css files in one folder), I think the benefits of external out weight embedded. Again, I see the benefit of (and occasionally use) inline styling for stuff not worth making css IDs or classes for. But on whole... boo and hiss on embedded.

Cheers,

NRG

Piranha

I am not missing it at all. What I wrote in my previous post is the theory. When it comes to real life it is a little different. Because how many things do you really have in one page only? With 2 pages it is probably a lot, but with a larger site I would say that it is nothing at all. Maybe, as you say, a color in some field, but defenetley not more than that.

I have one point to add. I work a lot with creating portals for mobile phones, and because you pay for the traffic on mobile phones it is important to minimize the download size. And, as you say, with external css you cache it in the phone. There are other things to this however, as an example some older phones have a limit of about 2 kb for the css. Because of that we sometimes have to remove spaces and returns in the css making it virtually impossible for humans to read 😉

Btw, thank you for the second point, didn't know that search engines worried about css in the html-file.

nrg_alpha

Piranha;10888463 wrote:
I have one point to add. I work a lot with creating portals for mobile phones, and because you pay for the traffic on mobile phones it is important to minimize the download size. And, as you say, with external css you cache it in the phone. There are other things to this however, as an example some older phones have a limit of about 2 kb for the css. Because of that we sometimes have to remove spaces and returns in the css making it virtually impossible for humans to read 😉

Ah, well mobile sites (and as you noted, dealing with older phones with a 2kb capacity) is a whole new bag of cats and dogs.

While I have never developed for mobile (yet), I understand that sites geared towards mobility are supposed to be much smaller in file sizes (in other words, completely different graphics, css and source code) to better benefit the phones.

I'm speaking in the context of full blown desktop browsing. So since you have this experience in phones, yes, it seems to make better sense to make use of embedded (especially with this 2kb limit on older phones.. [ side not: god, I'm glad iPhone isn't restricted like that.. my website actually loaded perfectly fine on that baby... but I still need to make a mobile version eventually] and my external style sheets are bigger than 2kb lol).

Piranha;10888463 wrote:
Btw, thank you for the second point, didn't know that search engines worried about css in the html-file.

My understanding that it is not so much that search engines 'worry' about css embedded within [X]HTML files.. its just that the more content that it has to crawl through, apparently you risk worse search engine ranking performances.

As for me, I don't use external style sheets for this reason.. my main reason is caching and easy file location for modifications... but the search engine thing could be more important to say a massive sports website that needs optimal search results (as well as optimal bandwidth savings) due to millions of visitors / month by example.

Cheers,

NRG

Piranha

nrg_alpha;10888473 wrote:
Ah, well mobile sites (and as you noted, dealing with older phones with a 2kb capacity) is a whole new bag of cats and dogs.

While I have never developed for mobile (yet), I understand that sites geared towards mobility are supposed to be much smaller in file sizes (in other words, completely different graphics, css and source code) to better benefit the phones.

It is a whole different thing yes. With desktop sites you have to worry about maybe 5 different browsers, and that is including versions. And all of them more or less supports the css standards. Sure, there are differences, but it is mostly small changes and how it handles java.

Mobile phones doesn't support the whole css standard. The problem is that they doesn't support the same standard, you have to use the ones that is supported by all phones. And when it comes to javascript it is hell tbh. That is one reason why I like backend development better 😉