On one of my websites, I am using a drop-down menu that works perfectly in Internet Explorer and Mozilla FireFox. Although it functions without any problems in both browsers, it doesn't display properly in Mozilla FireFox.
The problem, however, doesn't appear to be an issue with the menu itself, but perhaps it's a CSS issue? I'm not entirely sure.
If you go to the website, RickKelly.com.au (<!-- m --><a class="postlink" href="http://www.rickkelly.com.au/">http://www.rickkelly.com.au/</a><!-- m -->), and view the website in Mozilla FireFox, you will see what I mean. The menu is activated when you run your mouse over the main buttons.
It's just a padding and width problem. There are also problems with other areas of the website that do not seem to contain the padding, margin, or width settings that I have included in the style-sheet.
It all works and displays perfectly in Internet Explorer, but not in Mozilla FireFox.
If anyone knows how to fix this, I would really appreciate it!Add to:
A.Index_NavigationMenu:Link,
A.Index_NavigationMenu:Active,
A.Index_NavigationMenu:Visited
{
display:block;
} and remove the <br> from the menu strings:Home[0]='<a href=http://www.webdeveloper.com/forum/archive/index.php/"/Website/News/News.php?Location=LatestNews" class="Index_NavigationMenu">Latest News</a><br>'That worked brilliantly! Thankyou for that!
I have one more question, though.
If you go to the same website, and view it in Mozilla FireFox, you can see that the "Latest News" and "Archived News" boxes/links are all scrunched up. In Internet Explorer, these boxes/links are displayed with more padding and a set width.
How can that be corrected for Mozilla FireFox?Actually Firefox was displaying that correctly. Inline elements should not be able to have set dimensions. This is one of many areas that IE6 blatantly violates the CSS2 specs. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width">http://www.w3.org/TR/REC-CSS2/visudet.h ... pdef-width</a><!-- m -->)
Please fix your HTML (<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.rickkelly.com.au/Website/News/News.php%3FLocation%3DLatestNews">http://validator.w3.org/check?verbose=1 ... LatestNews</a><!-- m -->) and CSS (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.rickkelly.com.au/Website/News/News.php%3FLocation%3DLatestNews">http://jigsaw.w3.org/css-validator/vali ... LatestNews</a><!-- m -->) errors.So, there is no way to have those blocks a particular width in Mozilla FireFox?Remove the span<td id="Location"><a class="Location" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www. ...Remove the span<td id="Location"><a class="Location" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www. ...
Thanks for that, it fixed it the outer box, but the link that sits inside that cell still doesn't have the same width. Is a link impossible to edit (width wise) in Mozilla FireFox?Add display:block; to
A.Location:Link,
A.Location:Active,
A.Location:Visited { ...
btw you can not use #Location twice; id must be uniqueRemember that the problem is with IE, not Firefox. Get it working right in Firefox then adjust for IEs quirks and bugs.So, there is no way to have those blocks a particular width in Mozilla FireFox?
That's not what I said. What I said was in response to your first question.
There is a lot of code and frankly I did not feel like sifting through it to figure out what's causing the second problem.Add display:block; to
A.Location:Link,
A.Location:Active,
A.Location:Visited { ...
btw you can not use #Location twice; id must be unique
I've changed the "#Location" problem, so thanks for that.
Now, when I add "display:block" to the link styles, does fix the width problem, but messes around with the height of the box.
Would it be at all possible for you to have a look at the style I have for that property, and for you to make some adjustements to get it how I'd want it?
I'd really appreciate it if you have a spare moment.
The problem, however, doesn't appear to be an issue with the menu itself, but perhaps it's a CSS issue? I'm not entirely sure.
If you go to the website, RickKelly.com.au (<!-- m --><a class="postlink" href="http://www.rickkelly.com.au/">http://www.rickkelly.com.au/</a><!-- m -->), and view the website in Mozilla FireFox, you will see what I mean. The menu is activated when you run your mouse over the main buttons.
It's just a padding and width problem. There are also problems with other areas of the website that do not seem to contain the padding, margin, or width settings that I have included in the style-sheet.
It all works and displays perfectly in Internet Explorer, but not in Mozilla FireFox.
If anyone knows how to fix this, I would really appreciate it!Add to:
A.Index_NavigationMenu:Link,
A.Index_NavigationMenu:Active,
A.Index_NavigationMenu:Visited
{
display:block;
} and remove the <br> from the menu strings:Home[0]='<a href=http://www.webdeveloper.com/forum/archive/index.php/"/Website/News/News.php?Location=LatestNews" class="Index_NavigationMenu">Latest News</a><br>'That worked brilliantly! Thankyou for that!
I have one more question, though.
If you go to the same website, and view it in Mozilla FireFox, you can see that the "Latest News" and "Archived News" boxes/links are all scrunched up. In Internet Explorer, these boxes/links are displayed with more padding and a set width.
How can that be corrected for Mozilla FireFox?Actually Firefox was displaying that correctly. Inline elements should not be able to have set dimensions. This is one of many areas that IE6 blatantly violates the CSS2 specs. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width">http://www.w3.org/TR/REC-CSS2/visudet.h ... pdef-width</a><!-- m -->)
Please fix your HTML (<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.rickkelly.com.au/Website/News/News.php%3FLocation%3DLatestNews">http://validator.w3.org/check?verbose=1 ... LatestNews</a><!-- m -->) and CSS (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.rickkelly.com.au/Website/News/News.php%3FLocation%3DLatestNews">http://jigsaw.w3.org/css-validator/vali ... LatestNews</a><!-- m -->) errors.So, there is no way to have those blocks a particular width in Mozilla FireFox?Remove the span<td id="Location"><a class="Location" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www. ...Remove the span<td id="Location"><a class="Location" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www. ...
Thanks for that, it fixed it the outer box, but the link that sits inside that cell still doesn't have the same width. Is a link impossible to edit (width wise) in Mozilla FireFox?Add display:block; to
A.Location:Link,
A.Location:Active,
A.Location:Visited { ...
btw you can not use #Location twice; id must be uniqueRemember that the problem is with IE, not Firefox. Get it working right in Firefox then adjust for IEs quirks and bugs.So, there is no way to have those blocks a particular width in Mozilla FireFox?
That's not what I said. What I said was in response to your first question.
There is a lot of code and frankly I did not feel like sifting through it to figure out what's causing the second problem.Add display:block; to
A.Location:Link,
A.Location:Active,
A.Location:Visited { ...
btw you can not use #Location twice; id must be unique
I've changed the "#Location" problem, so thanks for that.
Now, when I add "display:block" to the link styles, does fix the width problem, but messes around with the height of the box.
Would it be at all possible for you to have a look at the style I have for that property, and for you to make some adjustements to get it how I'd want it?
I'd really appreciate it if you have a spare moment.