Fri, 2005-08-26 19:50
Hi there,
I've set up a top nav for my site though i'm having a few issues with FF.
I'm guessing it's some sort of padding problem though I can't figure it out, or is it the due to the containing div being positioned absolute.
hope you can help, heres a link to my site in progress.
Fri, 2005-08-26 20:04
#1
Issue with Top Nav padding in Firefox
Hi mrRoberts...
firstly what is going on here?
<!-- saved from url=(0022)http://internet.e-mail --> <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
you need to get rid of everything before the doctype.
and your code doesn't validate.
larmyia
Sat, 2005-08-27 11:27
#2
Issue with Top Nav padding in Firefox
Hello larmyia,
In answer to your question? I didn't even notice the DOC TYPE .......
I'm a designer at heart, trying to get my head around css for site layouts. This site is a steep learning curve for me,
so i thought my best bet was to get stuck in and join somewhere like here to get some useful answers to probably easy question, though not to me..!
So.. thanks for picking that out, and the fact my page doesn't validate. I intend to get to this once i'm happy with the page design.
Do you have any idea why i'm getting slight issues with the top nav in FF ?
Sat, 2005-08-27 12:00
#3
Issue with Top Nav padding in Firefox
mrRoberts wrote:
It would really help to know what those "slight issues" actually are. Do you have any idea why i'm getting slight issues with the top nav in FF ?
Sat, 2005-08-27 12:53
#4
Issue with Top Nav padding in Firefox
Triumph, there's discrepancies between IE and Firefox 
<!--<?xml version="1.0" encoding="iso-8859-1"?> <!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"> <BASE HREF="http://www.clippergems.com/">-->
is still there. Remove it. It's throwing IE into Quirks Mode. There should be nothing before the doctype.
However, I like the strange hover effect in Firefox. It's quirky and different, and I like it. If you can replicate it across browsers, I'd suggest keeping it
And it's "wear", not "where" as in "where should I wear them")
Very nice looking site by the way
Sat, 2005-08-27 15:16
#5
Issue with Top Nav padding in Firefox
and don't forget to remove the space before the doctype too. I just noticed it. you only need the xml prologue for XHTML 1.1.
btw why are you using the shading on the "contact" button? I don't think it works. but I agree with tph that the hover technique is cool.
with regards to validation...do it as you go. it's easier to see and sort out errors (2 instead of 45 for instance), and things may not be working because it's not validating! so you could spend hours on something that the validator will find in seconds. furthermore it's good practice for newbies. once you start being more comfortable with the code you'll need to validate less often as you'll make less mistakes.
try adding {padding: 10px 0 0;} on #topNav (you have 0 atm which may be causing the prob?) with regards to the active page...not sure atm. needs further investigation. just remember it is probably working in IE because you've thrown IE into quirks mode (due to doctype probs) and FF is showing you exactly what you're asking it to!
hth for now.
so, sort out the xml prologue, validation etc and get back to us and we'll take it from there
larmyia
Sat, 2005-08-27 20:21
#6
thanks guys
thepineapplehead
I've gone and removed the old DOC TYPE code which I commented out. I kept it there as I freaked out abit when I saw what happened to the layout when I removed it to what it should be....
here's the result 
http://www.clippergems.com/range.html
I've gone and adjusted 'Where' to 'wear'
lastly thanks for your comment on the overall design
larmyia
I agree with you on the shade difference 'contact button' I was getting a little lost for inspiration on the topnav, wanted it to stand out? uhmm
Thanks very much for your TopNav suggestions. I'll go and get to work on the other points and post the link in a better state
all the best!
Sat, 2005-08-27 22:23
#7
Issue with Top Nav padding in Firefox
contact button looks much better! just looked weird before. I'm not a big fan of your current page state tho. is that the look you're going for? if it is you really need some padding or margin or something because when you hover it butts up right agains the current page and does'nt look right. know what I mean?
larmyia
Sat, 2005-08-27 22:24
#8
Issue with Top Nav padding in Firefox
Hi there,
From adjusting the DOC TYPE it threw the css a bit mainly in IE.
I've shuffled a few lines here and there and all looks ok now in both IE, and FF.
http://www.clippergems.com/range.html
I put the page through the w3c validators and adjusted what I understood, though there's still a few issues.....
1)markup validator
no attribute name, target, src, width, height, frameborder, marginHeight, scrolling, allowtransparency,
This is to do with the iframe i think???
2) css validator,
doesn't seem to like the underscore hack i'm using for IE adjsutments
Both browsers look the same with the topNav now, which i've been trying to fix with no luck so far.
The overall containing div has a height set, and i've put the padding to (10px 0 
the links have padding left and right.
I'm going to keep trying, if i don't get anywhere, hope you don't mind me coming back for a solution..
thanks
Sat, 2005-08-27 22:46
#9
Issue with Top Nav padding in Firefox
some of the errors are caused by your doctype. you are using strict. you may need to use transitional or frameset if you wish to keep on using these tags/elements.
on w3c you can see what can be used where.
http://www.w3schools.com/tags/default.asp
as for the hacks you refer to, I will leave that to someone else as I'm not well versed in hacks (avoid them whenever I can).
and you are always welcome to come back!
good luck and let us know how you get on!
larmyia
Sun, 2005-08-28 08:17
#10
Issue with Top Nav padding in Firefox
If you just must use frames, a bad idea, use this DTD;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-frameset.dtd">
Change marginHeight to marginheight and delete the allowtransparency attribute, both in your iframe tag, and you should be OK.
cheers,
gary
Sun, 2005-08-28 17:03
#11
Issue with Top Nav padding in Firefox
Hi Gary,
Thanks for your reply.
Couple of questions if I may.
1) You mentioned frames as a bad idea, what would you recommend as an alternative to get the same result?
2) I added the allowtransparency attribute because IE wasn't picking up the background graphic below the iframe. This fixed the problem. Is there an alternative for this??
all the best,
Elliot
Sun, 2005-08-28 21:41
#12
Issue with Top Nav padding in Firefox
mrRoberts wrote:
1) You mentioned frames as a bad idea, what would you recommend as an alternative to get the same result?
Load each as a complete page. The common bits, like the logo, navigation tabs and the side column of links can be merged in using server side includes. SSI are integral to the server or you may use server side scripting language such as PHP. Your user will only be reloading text. Images will have been cached and add no overhead.
(i)frames are allowed in html4 and xhtml1.0 using a special DTD. They will not be allowed at all in future versions. The object element and javascript will be the future. Support (read IE) is limited.
Quote:
2) I added the allowtransparency attribute because IE wasn't picking up the background graphic below the iframe. This fixed the problem. Is there an alternative for this??
If you need a proprietary attribute, that's fine. You should be explicitly aware that the attribute is not a part of (x)html and it is a good idea to add comments to the html explaining the what and whys of an invalid attribute.
cheers,
gary
Sun, 2005-08-28 22:07
#13
Issue with Top Nav padding in Firefox
Thanks Gary,
SSI are a little daunting to me, though I must get my head around the concept at some stage.
Your points about iframes and proprietary attribute are very usefull and good to know,
thanks for the advice!
all the best,
Elliot
Mon, 2005-08-29 08:49
#14
Issue with Top Nav padding in Firefox
If your server supports PHP includes, then PHP includes are the easiest thing in the world to learn.
You separate the bits you want on each page into separate files, eg header.inc, navigation.inc (they can be inc - includes, php files or html, it doesn't matter).
Then you rename your HTML pages to PHP (eg index.php) and in the place you want the menu you use this:
<?php include('navigation.html' ?>
That's it
Mon, 2005-08-29 18:42
#15
Issue with Top Nav padding in Firefox
That's good of you to add this to the post.
I look forward to being able to come along to the forum with a different question to a site i've created using SS includes!! cool
take care mate,
Elliot