15 replies [Last post]
mrRoberts
Offline
Enthusiast
London
Last seen: 14 years 20 weeks ago
London
Joined: 2005-05-08
Posts: 61
Points: 0

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.

http://www.clippergems.com/range.html

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

mrRoberts
Offline
Enthusiast
London
Last seen: 14 years 20 weeks ago
London
Joined: 2005-05-08
Posts: 61
Points: 0

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 ?

Anonymous
Anonymous's picture
Guru

Issue with Top Nav padding in Firefox

mrRoberts wrote:
Do you have any idea why i'm getting slight issues with the top nav in FF ?
It would really help to know what those "slight issues" actually are. Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Issue with Top Nav padding in Firefox

Triumph, there's discrepancies between IE and Firefox Laughing out loud

<!--<?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 Laughing out loud

And it's "wear", not "where" as in "where should I wear them")

Very nice looking site by the way Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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 Smile

larmyia

mrRoberts
Offline
Enthusiast
London
Last seen: 14 years 20 weeks ago
London
Joined: 2005-05-08
Posts: 61
Points: 0

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 Shock
http://www.clippergems.com/range.html

I've gone and adjusted 'Where' to 'wear' Smile

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 Smile

all the best!

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

mrRoberts
Offline
Enthusiast
London
Last seen: 14 years 20 weeks ago
London
Joined: 2005-05-08
Posts: 61
Points: 0

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 Innocent 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.. Smile

thanks

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 18 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mrRoberts
Offline
Enthusiast
London
Last seen: 14 years 20 weeks ago
London
Joined: 2005-05-08
Posts: 61
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 18 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mrRoberts
Offline
Enthusiast
London
Last seen: 14 years 20 weeks ago
London
Joined: 2005-05-08
Posts: 61
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

mrRoberts
Offline
Enthusiast
London
Last seen: 14 years 20 weeks ago
London
Joined: 2005-05-08
Posts: 61
Points: 0

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 Laughing out loud

take care mate,
Elliot