473,473 Members | 2,134 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

CSS Menu

EA
http://www.doublesix.plus.com/Examples/Test.htm

Can anyone help me out with this menu.

I would like the 'white' active tab to look like it is attached (no thin
blue line) to the content. I cannot work out how to do it.

Many thanks,

EA
Nov 23 '06 #1
8 2108
Els
EA wrote:
http://www.doublesix.plus.com/Examples/Test.htm

Can anyone help me out with this menu.

I would like the 'white' active tab to look like it is attached (no thin
blue line) to the content. I cannot work out how to do it.
#TopNav ul {
position:relative;
top:3px;
}
Only tested in FF.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Nov 23 '06 #2
"EA" <NO****@twelve.me.ukwrote in message
news:45**********************@ptn-nntp-reader02.plus.net...
http://www.doublesix.plus.com/Examples/Test.htm

Can anyone help me out with this menu.

I would like the 'white' active tab to look like it is attached (no thin
blue line) to the content. I cannot work out how to do it.

Many thanks,

EA
Try adding

#TopNav #selected {
padding-bottom: 1px;
margin-bottom: -1px;
}

to your CSS.
Nov 23 '06 #3
EA
I am assuming you mean that I should add the two lines below.

I have done with and with IE 6.0 it makes no difference:

http://www.doublesix.plus.com/Examples/newTest.htm

As Far as I can determine using negative numbers have no effect. I have
tried margin-bottom: -1px as above and also -6px in testing and nothing!

Anyone else got ant ideas?

EA

"Martin Eyles" <ma**********@NOSPAMbytronic.comwrote in message
news:12*************@corp.supernews.com...
"EA" <NO****@twelve.me.ukwrote in message
news:45**********************@ptn-nntp-reader02.plus.net...
>http://www.doublesix.plus.com/Examples/Test.htm

Can anyone help me out with this menu.

I would like the 'white' active tab to look like it is attached (no thin
blue line) to the content. I cannot work out how to do it.

Many thanks,

EA

Try adding

#TopNav #selected {
padding-bottom: 1px;
margin-bottom: -1px;
}

to your CSS.

Nov 24 '06 #4
EA
Thanks for trying, but this does not work.... or at least you have not
provided me with enough instruction on how to implement it.

I am using IE 6.0.

EA

"Els" <el*********@tiscali.nlwrote in message
news:1r*******************************@40tude.net. ..
EA wrote:
>http://www.doublesix.plus.com/Examples/Test.htm

Can anyone help me out with this menu.

I would like the 'white' active tab to look like it is attached (no thin
blue line) to the content. I cannot work out how to do it.

#TopNav ul {
position:relative;
top:3px;
}
Only tested in FF.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Nov 24 '06 #5
Please don't top post; it makes it hard to follow the flow of
discussion. I have moved your reply down for you this time.

EA wrote:
>
"Martin Eyles" <ma**********@NOSPAMbytronic.comwrote in message
news:12*************@corp.supernews.com...
>>"EA" <NO****@twelve.me.ukwrote in message
news:45**********************@ptn-nntp-reader02.plus.net...
>>>http://www.doublesix.plus.com/Examples/Test.htm

Can anyone help me out with this menu.
[snipped]
>>
Try adding

#TopNav #selected {
padding-bottom: 1px;
margin-bottom: -1px;
}

to your CSS.
I am assuming you mean that I should add the two lines below.

I have done with and with IE 6.0 it makes no difference:

http://www.doublesix.plus.com/Examples/newTest.htm

As Far as I can determine using negative numbers have no effect. I have
tried margin-bottom: -1px as above and also -6px in testing and nothing!

Anyone else got ant ideas?

EA
You started with this:
#TopNav #selected {
font-weight: bold;
background-image: url(SelectedMenuTab-Right.gif);
border-bottom : 1px solid white;
}

and you understood you should *add* this:
padding-bottom: 1px;
margin-bottom: -1px;

and somehow you got this:
#TopNav #selected {
background-image: url(SelectedMenuTab-Right.gif);
padding-bottom: 1px;
margin-bottom: -6px;
}

My idea is that you're not being very careful in what you're doing. I
also see the problem with newTest.htm in IE6, but that's a page which
includes neither Els's nor Martin's suggestions. Both their tips helped
when I tried them separately in FF. Did they help *you* when you viewed
them in Firefox?

--
John
Nov 24 '06 #6
EA
You may have been right in that I have 'experimented' myself, trying to use
the advice given to solve my problem.

http://www.doublesix.plus.com/Examples/Test.htm

Using the above version I have tested this in IE 6.0 and Firefox. I
actually have no idea the relevance of whether this words in Firefox because
I said I was working with IE 6.0. However maybe to people more clever than
I, testing in Firefox may mean something.

In Firefox I get something better than IE, but not something I would be
happy with if this was my target browser. yes I lose the line under the
'selected' tab, but there are now small gaps (on the bottom line of TopNav
before the 'Tables' tab and either side of the selected 'History' tab. As
mentioned above I am not targeting the Firefox browser as I cannot tell my
users to us this because it is 'better' the IE.

In IE I do not get the desired effect as the line still appears under the
selected tab. Can anyone help me?

EA

"John Hosking" <Jo**@Hosking.name.DROPTHE.invalidwrote in message
news:45********@news.bluewin.ch...
Please don't top post; it makes it hard to follow the flow of discussion.
I have moved your reply down for you this time.

EA wrote:
>>
"Martin Eyles" <ma**********@NOSPAMbytronic.comwrote in message
news:12*************@corp.supernews.com...
>>>"EA" <NO****@twelve.me.ukwrote in message
news:45**********************@ptn-nntp-reader02.plus.net...

http://www.doublesix.plus.com/Examples/Test.htm

Can anyone help me out with this menu.
[snipped]
>>>
Try adding

#TopNav #selected {
padding-bottom: 1px;
margin-bottom: -1px;
}

to your CSS.
I am assuming you mean that I should add the two lines below.

I have done with and with IE 6.0 it makes no difference:

http://www.doublesix.plus.com/Examples/newTest.htm

As Far as I can determine using negative numbers have no effect. I have
tried margin-bottom: -1px as above and also -6px in testing and nothing!

Anyone else got ant ideas?

EA
You started with this:
#TopNav #selected {
font-weight: bold;
background-image: url(SelectedMenuTab-Right.gif);
border-bottom : 1px solid white;
}

and you understood you should *add* this:
padding-bottom: 1px;
margin-bottom: -1px;

and somehow you got this:
#TopNav #selected {
background-image: url(SelectedMenuTab-Right.gif);
padding-bottom: 1px;
margin-bottom: -6px;
}

My idea is that you're not being very careful in what you're doing. I also
see the problem with newTest.htm in IE6, but that's a page which includes
neither Els's nor Martin's suggestions. Both their tips helped when I
tried them separately in FF. Did they help *you* when you viewed them in
Firefox?

--
John

Nov 24 '06 #7
Top posting is one of the things that keeps people from helping you.
Please look it up or Google it or ask somebody what it means. I have
fixed this for you again.

EA wrote:
>
"John Hosking" <Jo**@Hosking.name.DROPTHE.invalidwrote in message
news:45********@news.bluewin.ch...
>>Please don't top post; it makes it hard to follow the flow of discussion.
I have moved your reply down for you this time.
I *knew* I had said something about this...
>[back-and-forth snipped]

My idea is that you're not being very careful in what you're doing. I also
see the problem with newTest.htm in IE6, but that's a page which includes
neither Els's nor Martin's suggestions. Both their tips helped when I
tried them separately in FF. Did they help *you* when you viewed them in
Firefox?

You may have been right in that I have 'experimented' myself, trying to use
the advice given to solve my problem.

http://www.doublesix.plus.com/Examples/Test.htm

Using the above version I have tested this in IE 6.0 and Firefox. I
actually have no idea the relevance of whether this words in Firefox because
I said I was working with IE 6.0. However maybe to people more clever than
I, testing in Firefox may mean something.
Firstly, the presumption is that, since you are authoring for the WWW,
you can expect visitors using Firefox (and other non-IE browsers) to
show up. You would want to know what /they/ see, is the presumption.

Secondly, IE is *known* to be special, so testing in, say, a second
browser might give you (and us) more info.

Thirdly, I edited your CSS on your site using the suggestions from Els
and Martin using Firefox, because Firefox has a Web Developer Toolbar
addon which lets me do this easily. (IE has a similar addon, too; you
ought to get it.) Now, when I tried the suggestions *in my Firefox*, it
worked, so if we see that it works for *you in Firefox*, then we can say
that we are talking about the same thing. Since I only see the code on
your site *without* the suggested changes, I can't know what you're
looking at.
>
In Firefox I get something better than IE, but not something I would be
happy with if this was my target browser.
There is no "target browser" on the World Wide Web, is there?
yes I lose the line under the
'selected' tab, but there are now small gaps (on the bottom line of TopNav
before the 'Tables' tab
Here's why: You have an #Outer div containing two other divs, #TopNav
and #Content. All three are assigned a width of 800px. But div#Outer has
a border of 3px (making it 806px wide) and the other two divs have 2px
borders (making then 804px wide). Change the border for #Outer to 2px,
and your problem goes away.
and either side of the selected 'History' tab. As
mentioned above I am not targeting the Firefox browser as I cannot tell my
users to us this because it is 'better' the IE.
I cannot fathom this statement. It's true you can't require your users
to use Firefox; they will tell *you* what they want to use (well
actually, they will just use it). And "IE is better"
(paraphrased/translated to English)? Global experience does not agree,
and besides, that's in conflict with your statement "In Firefox I get
something better than IE" above. Whatever are you talking about?
>
In IE I do not get the desired effect as the line still appears under the
selected tab. Can anyone help me?
I'm *trying*.

--
John
Nov 24 '06 #8
EA
>yes I lose the line under the 'selected' tab, but there are now small
>gaps (on the bottom line of TopNav before the 'Tables' tab

Here's why: You have an #Outer div containing two other divs, #TopNav and
#Content. All three are assigned a width of 800px. But div#Outer has a
border of 3px (making it 806px wide) and the other two divs have 2px
borders (making then 804px wide). Change the border for #Outer to 2px, and
your problem goes away.
If I understand correctly, your paragragh above advises me that if I change
the #Outer div border from 3px to 2px the problem disappears. I have done
that to:

http://www.doublesix.plus.com/Examples/Test.htm

When I view it in Firefox there are still small three gaps along the top of
the #context div, the first is before the Tables tab, the second is before
the 'selected' History tab, and the third after this tab. Do you see these?
Am I trying for perfection which cannot be obtained?
>and either side of the selected 'History' tab. As mentioned above I am
not targeting the Firefox browser as I cannot tell my users to us this
because it is 'better' the IE.

I cannot fathom this statement. It's true you can't require your users to
use Firefox; they will tell *you* what they want to use (well actually,
they will just use it). And "IE is better" (paraphrased/translated to
English)? Global experience does not agree, and besides, that's in
conflict with your statement "In Firefox I get something better than IE"
above. Whatever are you talking about?
>>
In IE I do not get the desired effect as the line still appears under the
selected tab. Can anyone help me?

I'm *trying*.
Am I to conclude that you are not or cannot assist with this issue in IE.
All you assistance is in Firefox, which while from ytour comments assists
yoiu, is of little actual use to me because I want my page to work in IE. I
am not clever enough to understand all the hacks that appear to be needed to
make web pages work in all browsers so I am making the decision that I would
like to have mine work in IE, if they work in others too that is a bonus for
me.

I do apologise for not bottom posting in my last message.

All I want is my issue solved in IE - can you assist?
Nov 25 '06 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Macamba | last post by:
Hi all, I am currently developing a website for a voluntary organisation. It is my first step in website development. The dynamic menu I developed has some bugs, which I addressed in another...
1
by: ajay | last post by:
I have following code for a slide menu but i twiked it to work for a single level menu. Open it in a Browser to get a clear picture. I have 2 Qs 1) How to make first entry as non-link. i.e i...
2
by: Jackson Yap | last post by:
can someone kind enough to help me look at the attached html and js file? Why is it that the javascript menu could not work at www.apchosting.net but could work at...
8
by: Dennis C. Drumm | last post by:
Is there a way to modify the standard context menu shown when someone right clicks in a windows text box and that would work for all open windows applications? The standard context menu for...
1
by: Anthony | last post by:
Below is a script I found at http://javascript.internet.com/ for a cascading menu. The script works great but there is one thing that I would like modified. BecauseI am just learning javascript,...
4
by: TycoonUK | last post by:
Hi, As I do not have IE7 on my computer, I was wondering if there is a fault in my CSS Menu when using IE7. Please can someone look at my site - http://www.worldofmonopoly.co.uk and tell me...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.