CSS help in menu navigation. - Page 1
I am still trying to get to grips with CSS instead of using tables. I think I am slowly getting there I have 2 questions:
1: If you could check out dev.motormadness.net you will find that my nav blocks have spaces in between them. I cannot see how it is doing this and
2: Been using text-indent: -9999px; to hide the text menu and when you click the item you get a rectangle highlight that goes off the page. I have checked other sites and they do not get this bar.
I am clearly missing something and your help would be much appreciated.
Thank you for your time.
Thierry
1: If you could check out dev.motormadness.net you will find that my nav blocks have spaces in between them. I cannot see how it is doing this and
2: Been using text-indent: -9999px; to hide the text menu and when you click the item you get a rectangle highlight that goes off the page. I have checked other sites and they do not get this bar.
I am clearly missing something and your help would be much appreciated.
Thank you for your time.
Thierry
Thierry Seal wrote:
1: If you could check out dev.motormadness.net you will find that my nav blocks have spaces in between them. I cannot see how it is doing this and
1: If you could check out dev.motormadness.net you will find that my nav blocks have spaces in between them. I cannot see how it is doing this and
This code fixes it. Notice the added float.
#menu ul li {
display:inline-block;
float: left;
}
display:inline-block;
float: left;
}
Thierry Seal wrote:
2: ... when you click the item you get a rectangle highlight that goes off the page.
2: ... when you click the item you get a rectangle highlight that goes off the page.
Sorry, I can't reproduce this with any of my browsers.
I'm attaching an image of what I assume must be this rectangle. I had something similar once and found out that I had some nested code in a wrong sequence. I haven't found the same to be the case here, though.
You will also see, that on my screen the last menu button drops down to the next line.
You will also see, that on my screen the last menu button drops down to the next line.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Have to add that the screen shot I posted above is showing what I see when using FF latest version. When I use IE, also latest, I don't see the rectangle, but the last button is still on the next line.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Cary wrote:
This code fixes it. Notice the added float.
Sorry, I can't reproduce this with any of my browsers.
Thierry Seal wrote:
1: If you could check out dev.motormadness.net you will find that my nav blocks have spaces in between them. I cannot see how it is doing this and
1: If you could check out dev.motormadness.net you will find that my nav blocks have spaces in between them. I cannot see how it is doing this and
This code fixes it. Notice the added float.
#menu ul li {
display:inline-block;
float: left;
}
display:inline-block;
float: left;
}
Thierry Seal wrote:
2: ... when you click the item you get a rectangle highlight that goes off the page.
2: ... when you click the item you get a rectangle highlight that goes off the page.
Sorry, I can't reproduce this with any of my browsers.
Cary,
Many thanks the float worked a treat for my menu
Inger Eik wrote:
I'm attaching an image of what I assume must be this rectangle. I had something similar once and found out that I had some nested code in a wrong sequence. I haven't found the same to be the case here, though.
You will also see, that on my screen the last menu button drops down to the next line.
I'm attaching an image of what I assume must be this rectangle. I had something similar once and found out that I had some nested code in a wrong sequence. I haven't found the same to be the case here, though.
You will also see, that on my screen the last menu button drops down to the next line.
The image showing the rectangle is what I have when testing with Safari, IE8, FF3 and Opera - puzzling?
Thank you all for taking the time to help.
Ah, my windows weren't wide enough to show that when I was checking. Now that I've seen it I can only say I don't know how you can fix the outline without removing it altogether.
#menu ul li a {
display:block;
text-indent:-9999px;
outline: none;
}
display:block;
text-indent:-9999px;
outline: none;
}
Cary wrote:
Ah, my windows weren't wide enough to show that when I was checking. Now that I've seen it I can only say I don't know how you can fix the outline without removing it altogether.
Ah, my windows weren't wide enough to show that when I was checking. Now that I've seen it I can only say I don't know how you can fix the outline without removing it altogether.
#menu ul li a {
display:block;
text-indent:-9999px;
outline: none;
}
display:block;
text-indent:-9999px;
outline: none;
}
Cary, you are a genius. This has solved the issue and I am very much grateful for your time and effort in helping me out.
Kind regards
Thierry
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.