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?

Sorry, but I haven't a clue to what you're talking about. Bear in mind I am a struggling newbie. So are you saying that I need to change the extension of my existing .css file to .php? Or do I set up a separate file with just the nav bar style statements in it and give that a .php extension?HOWEVER, before we go down too far on this particular track, I have changed my mind about using graphics for my navigation links and instead want to try using text. Here is where I've got to so far. In my .css file I have this code:#navigation ul { margin: 0; padding: 0; position: static;background-color: #636363;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 */} In my .html file I've got this code: NAVIGATION BAR TEXT --><div id="navigation"><ul><li><a href="index.html">Home <a href="thismonth.html">| This Month <a href="directory.html">| Directory <a href="archives.html">| Archives <a href="about.html">| About </a></li></ul></div The above code gives me the results I want, in that there is a horizontal string of list items overlaid on a horizontal strip of background colour #636363 (dark gray), Only problem is that the blue link colour of the text can't be seen against the dark gray. How do I change the colour of the links from the link colour dark blue to white, so that it will appear as white-on-gray on everyone's browser, regardless of what they have set their link colours to?

My ISP's hosting package description says that it supports PHP, among others. How does that work, then. Do I upload my .css file into a separate part of their webspace and then link with that magic one line of code?

vchris wrote: Hmm, as I feared.I will play around with your suggested code - thanks for that. Gulp. That would turn my steep learning curve into a 90 degree incline. I am having enough trouble getting to grips with HTML and CSS, so I think I will put the nav bar on each page. It is not clear to me what advantage there is in having anything in my external CSS file about this if I can't use the file for an across-all-pages function?

Now you've asked for it! A supplementary question, if I may:The next thing I want to do is to have a navigation bar consisting of a string of button images along a band of colour that is already in the background image. Each button of course will be linked to another page on my website. Is this now getting beyond the definition of a "background-image"? IOW, this is no longer just some passive images, but active links. Can I still do this in an external CSS file, given that it's not just formatting but a bit of content that we're talking about here? I want the same nav bar in all my pages, so logically it should be in a CSS file, should it not?Thanks again for your help.

Hi ChrisThanks very much - works OK now, of course. Not really got my brain around divs yet, but on a steep learning curve.

Now that I've (or, rather, you've) got my external style sheet to link to my .html file, I want all my pages to have both the same tiled background, but also to have overlaid on that background a non-tiled logo image. Can I use two background images for this, or must I use something else?Here is the code in my external CSS file: body {background-image:url('parishmagbackground.gif')}{background-image: url('parishmaglogo.gif');background-repeat: no-repeat;background-position: left top;} </body> The file 'parishmagbackground.gif' is a thin vertical image that tiles across to form the pages' backgrounds.I want to place the image 'parishmaglogo.gif' on top of that and to have it appear like a background on all my pages. The logo and background gifs, as well as the .html and .css files are all in the same directory.How do I do that? What I have so far clearly doesn't work.

jlhaslip: It worked - thanks very much. I knew it must be something pretty basic!

New to HTML/CSS, very impressed by W3Schools tutorials and hoping to free myself from WYSIWYG authoring tool. But, am having a problem getting my external CSS to work. Using Firefox 2.0 in Linux (Ubuntu), if that's relevant.Have set up file parishmagstyle.css, which contains this code: <html><head><style type="text/css">body {background-image:url('parishmagbackground.gif')}{background-color: yellow}</style></head><body></body></html> This CSS file is located in the same directory as my html file, index.html, which contains this code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Whitchurch Parish Magazine</title><link rel="stylesheet" type="text/css" href="parishmagstyle.css" /></head><body></body></html> The background image file parishmagbackground.gif is also in the same directory as the above two files.I have tried putting the background-image statement directly in the index.html file, and it works fine, so I know that the .gif image itself is OK. I have tried inserting a background-color statement in my parishmagstyle.css file and it doesn't take either. It seems clear to me that the link to my external stylesheet isn't working, but I cannot see why. It's probably something obvious, possibly to do with my file addressing, but this newbie has run out of ideas.Can someone tell me what I'm doing wrong?