SteveHoffmanUK

Well, I don't know whether the coding is still messy, but I have redone the .css and .html files and now the nav bar works in both FF and IE.Thanks again.

Thanks for the suggestions. I'm a newbie at this HTML stuff, so am not surprised that you say the coding's messy. I will have a go at trying to clean it up = will change the pt to px and play around with the positioning of the div770 container and see if I can get the nav to work without making everything else look strange.Thanks again for your help!

Using both IE and FF, please go to this page and hover your mouse over the navigation bar near the top of the page. You will see that it works in Internet Explorer but not in Firefox. The relevant code in my .css file is: #navigation ul {position: absolute; top: 92pt;margin: 0px; /* Removes all margins */padding: 0px; /* Adjusts all padding */} #navigation ul li { display: inline;padding: 0px 20px 0px 20px;color: #FFFFFF;text-decoration: none;font-size: 83%;font-family: verdana,arial,helvetica,sans-serif; }#navigation ul li a {color: #FFFFFF;text-decoration: none;}#navigation ul li a:hover { /* on hover */color: #000000;} Can anyone explain why this should work in one browser and not the other?

ON EDIT: Oops, sorry: discovered the answer. For some reason the permissions in the file were not set correctly.MODERATOR: Please delete the message. Sorry to have bothered you about this!HELP! I am getting this FF message (similar message in IE) when I click on a link to a .pdf file stored on my website: This has not happened before, and I am mystified as to why I am now getting it. It's not that the browser can't find the file (I think), but I am denied permission to access it. What causes such a message to be generated?Details: Click here for the home page.In the right-hand column under "Stop Press" is the text: I have checked and rechecked my webspace, and the file "magcurrent.pdf" is definitely in the folder "homeimages", which folder is at the same level as my "index.html" homepage file. The relevant bit of code for this in my homepage is:<p>Click <a href="homeimages/magcurrent.pdf">here</a> for the news pages of the current issue.</p> Can anyone suggest what's causing this message to be generated?

Thanks. Did it - as you can see, it works fine. There may be better solutions, but I'm happy with this one because it works and is easy! I'll do something about the vertical spacing so I get a bit of white between the photos and then everything will look fine. Thanks - that would be great if you could. I used some WYSIWYG web page authoring program that "improves" pix; it often does, but sometimes it goes overboard and you get this kind of crap. I'll PM you with my email address.

I have defined a caption class in my CSS file thus: .caption{font-size: 11px;font-family: verdana, arial, helvetica, sans-serif; color: #000000;font-style: italic;} I want to use this style for all the captions of photos and drawings on my website but I need to vary the width depending on the width of the photo.For example, right now a have a page of old photos at:Bell Street (1)You can see that the captions run the full width of the "container" in which the column of photos and captions sit. They don't look right for the narrower photographs.In my HTML file, the code for the first photo is: <img src="archivesimages/bellstreet1a.jpg" width="600" height="346" border="0" alt=Bell Street at the Square></a><div class="caption">Bell Street begins at The Square and heads north-west towards Andover. On the left above is Long's shop selling a wide range of food and provisions. This building is the one that burnt down in 1895, so we know that this photo is at more than 100 years old.</div> How do I vary the coding for each photo so that the captions are the same width as the photos?

Got it.For #logo, #navigation and the three "containers" (whatever you call them) that hold the three columns of content on the page I set absolute positions, that is: 'position: absolute; top: nn pt;'. Absolute positioning means that both browsers position these elements exactly where you tell them to. Well, in the wonderful world of browser (in)compatibility, nothing's ever quite perfect: there is just a slight (maybe 1 pixel) difference, at least on my screens, so I gave myself some latitude by slightly reducing the text size so that it looks vertically OK on the gray nav background strip. Thanks for your help - in this case encouraging me to "play around".

Played around with the padding settings as you suggested, and that doesn't seem to help. Setting them to zero leaves them as they are without the "padding" defined. Increasing them does of course increase the white space, but I want to decrease it. Minus values don't work, I see.Back to my other problem: this is driving me nuts. If I set the padding in body to zero, that does raise the logo enough so that in IE it no longer overlaps the gray nav bar below it, and it looks just about OK in both IE and FF. But then my nav bar is too high in IE , so I play around with padding in the ul part and if I pad at the top so that it looks OK in IE, then it's too far down in FF. The challenge is trying to get two items (logo and nav bar) to keep the same vertical relationship in the two browsers. Should I be playing around with something other than padding?Is there any way of setting an absolute value for the two vertical placements?

Thanks, Chris. Yes, it looks like I did. Your suggestion solved that problem.HOWEVER, the nav line below it is also "depressed" in IE but fine in FF. The code in my .css file for that is:#navigation ul {margin: 0; /* Removes all margins */padding: 0; /* Removes all padding */} #navigation ul li{ display: inline;padding: 0px 20px 0px 20px;color: #FFFFFF;text-decoration: none;font-size: 14px;font-family: verdana, arial, helvetica, sans-serif; }#navigation ul li a {color: #FFFFFF;text-decoration: none;}#navigation ul li a:hover { /* on hover */color: #000000; Finally, while I'm (you're) on, my headings all seem to be too much vertically spaced against the paragraph text that follows them. Taking H1 as an example, (H2 thru H6 are all the same), the coding is: h1 {font-family: verdana, arial, helvetica, sans-serif;font-size: 26px;font-weight: normal;color: #3366CC;} Any way of reducing the white space on all the headings?

I am close to getting my first non-WYSIWYG-produced website ready to make live, but have a problem with how my logo graphic is viewed in IE vs. FF/Opera. The logo is defined in my .css file thus: body {background-image:url('parishmagbackground.gif')}#logo {background-image: url('parishmaglogo.gif');background-repeat: no-repeat;background-position: left top;height: 110px;width: 500px;} In my .html files, here is the code for the logo: <body><!-- LOGO PLACEMENT --><div align="left" name="Logo " id="logo"></div> If you look at the webpage in FF or Opera, the logo is placed correctly over the blue horizontal banner background, but in IE (7, 6, 5.5), the logo drops down over the gray navigation bar below.Can anyone suggest a fix to make it OK in IE?

Ah, the KISS approach. Why didn't I think of that? I agree: it looks fine without the vertical bar separators.Next I must get my brain around:1. PHP for the website-wide stuff, but that's for a different thread 2. Cross-browser incompatibilities. This looks fine in Firefox, but not in either IE or Opera. Sigh.Meanwhile, thanks again for your help.

Thanks, Chris. That seems to have sorted out most of my problems (other than cross-browser incompatibility, but that's a separate issue to be faced). Have a look at it now here. Yes, I think so. I'm starting to understand the css code structure a bit more from doing this. OK. I've done that (can you check the source and see whether I've done it correctly?), and I can see that the "|"s are no longer a part of the link. However, regarding this: The right padding (2nd digit) works fine, and I can see that change as I change the value, but the left padding (4th digit) doesn't seem to have any effect. As you can see, all the link names show up as left-justified, when I am trying to center them equidistantly between the "|"s.

Yes, I thought the use of ' ' was a bit crude, but it did work. I did all that and tidied (mucked up?) my code a bit. The result is that the link names are now spread out horizontally OK but:1. are one line below where they should be2. have no padding3. are in the blue link color rather than the white that I want.4. have underscores, when I don't want them toHere is what my coding looks like now:My .css file:#navigation ul li{ display: inline;padding: 0px 5px 0px 5px;color: #FFFFFF;text-decoration: none;font-size: 14px;font-family: verdana, arial, helvetica, sans-serif; } My .html file: <!-- NAVIGATION BAR TEXT --><div id="navigation"><ul><li><a href="index.html">Home</a></li><li><a href="thismonth.html">|This Month</a></li><li><a href="directory.html">|Directory</a></li><li><a href="archives.html">|Archives</a></li><li><a href="about.html">|About</a></li></ul></div> While you're suggesting the remedy, could you also tell me now to make the text change to black on hover?ON EDIT: I have now uploaded this into my webspace, so you can look at it at http://www.hoffman.vispa.com/xindex.html. I am developing and checking it using Linux Firefox 2.0; judging from what I can now see on my Win XP machine (IE7), I see that I shall have some additional cross-browser, erm, "challenges". What fun.Many, many thanks for your patience and help.

Thanks for spotting the HTML errors. I tried your suggestion, but it isn't working correctly (or, more likely, I didn't do exactly what you suggested). Here is my code:<!-- NAVIGATION BAR TEXT --><div id="navigation"><ul><li><a href="index.html">Home </a></li><li><a href="thismonth.html">| This Month </a></li><li><a href="directory.html">| Directory </a></li><li><a href="archives.html">| Archives </a></li><li><a href="about.html">| About </a></li></ul></div> What shows on the screen are the five descriptions in a vertical list, rather than strung out horizontally along the nav bar. My .css file code for this is: #navigation ul li a { color: #FFFFFF; text-decoration:none;}#navigation ul { a:link { color: #ffffff; text-decoration: none; }a:active { color: #ffffff; text-decoration: none; }a:visited { color: #ffffff; text-decoration: none; }a:hover { color: #000000; text-decoration: none; }margin: 0; padding: 0; position: static;background-color: #FFFFCC;color: white;margin-top: 2px;font-size: 14px;font-family: verdana, arial, helvetica, sans-serif; /* ul with no margin or padding */display: inline; /* list is inline */} I've mucked about with this since you gave me the original pristine stuff, and have probably screwed up the "list in line" action. Can you spot the problem?Thanks for all your help; I really appreciate it.

Thanks, Chris. Just one more little detail, and I think I'm there: how do I get rid of the underscores in that link line?