6 replies [Last post]
mitcho
Offline
Enthusiast
Last seen: 12 years 37 weeks ago
Joined: 2006-04-01
Posts: 93
Points: 0

i have uploaded my menu to this url www.mitchellpage.com.au/temp/pent/ Using IE - you will see my only problem...

in firefox, when your rollover the button, the entire background of the button changes colour. In IE, only the background behind the text changes - how can i get the whole background of the button to work - i tried adding a height value but it didnt work, help?

jlhaslip
Offline
Enthusiast
Last seen: 12 years 5 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

*not tsted* (I don't have an

*not tsted* (I don't have an IE Browser that works, go figure...)

#navcontainer ul li a
{
padding: 7px 22px 7px 22px;
color: #ffffff;
text-decoration: none;
display: block; // try this ???

}

I'm having a good day...so far.

mitcho
Offline
Enthusiast
Last seen: 12 years 37 weeks ago
Joined: 2006-04-01
Posts: 93
Points: 0

did not work

it chucked everything out of wack - so yeh, it didnt work!

thanks neway

vynsane
vynsane's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2005-05-15
Posts: 45
Points: 0

you need to use

you need to use display:block and float:left so the links don't jump underneath the previous one... i don't have the time to go though it now, but that should be the crux of your solution. you'll need to change a lot of stuff to get there, though. i don't particularly like to use lists for a horizontal menu for just such a reason - you have to negate so much stuff. a columnal list turned into a columnal navigation is fine by me, but the horizontal nav is a gray area for me.

but have a look at this: http://cssplay.co.uk/menus/centered.html

he's like, the css yoda... and this solution is close to what you're looking for.

okay, so i took a look at it, and i've got it looking the way you want it...

#navcontainer { background-color:#333399; color:#fffff; width:760px; text-align:center; margin:auto; }

#navcontainer ul
{
font-family: Arial, Helvetica, sans-serif;
font-size:9pt;
color: #ffffff;
margin:0px;
}

#navcontainer ul li
{
list-style-type:none;
margin:0px;
float:left;
color: #ffffff;
}

#navcontainer ul li.divider
{
margin-top:7px;
}

#navcontainer ul li a
{
display:block;
padding: 7px 22px 7px 22px;
color: #ffffff;
text-decoration: none;
margin:0px;
}

#navcontainer ul li a:hover
{
background-color: #16008D;
margin:0px;
color: #ffffff;
}

i created a new list item for each "|" divider, and called it ".divider", and gave it a top margin of 7px to match the spacing you have for the links.

but still, check out what's going on... i've got it uploaded on my site

www.vynsane.com/mitcho/mitcho.htm

i have a border around the floated links (and a
under the list, so the border will go around the links...) and the links are centered in firefox, but not in IE... they float all the way to the left in IE - but that was happening on your initial layout, anyway. the weirdness is that there's nothing i can do to make the space to the left appear in IE, nor disappear in FF... i'll keep looking at it when i can... but i think i got you closer to where you want to be.

if you want, you can use a hack for IE that will push it over approximately the amount it has in FF...

*html #navcontainer { padding-left:40px; }

that should work to make it look similar...

The technology is three months old. Only suckers buy out of date machines. You're not a sucker, are you sir? Because if you were I'd have to ask you to leave the store.

www.vynsane.com

mitcho
Offline
Enthusiast
Last seen: 12 years 37 weeks ago
Joined: 2006-04-01
Posts: 93
Points: 0

Thankyou

Sorry for the late reply.

and thank you a great deal. you have been very very insightful and offered a great explanation.

its currently working great, thanks to your help. thanks for all your time.

mitcho
Offline
Enthusiast
Last seen: 12 years 37 weeks ago
Joined: 2006-04-01
Posts: 93
Points: 0

and thanks for posting it

and thanks for posting it online to for me to check it out! great help!

vynsane
vynsane's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2005-05-15
Posts: 45
Points: 0

not a problem, glad i could

not a problem, glad i could be of help! and that site above is a godsend... cssplay - most of what i know about css i learned from him. but the biggest thing is just playing around yourself. nothing teaches you more than messing up!

The technology is three months old. Only suckers buy out of date machines. You're not a sucker, are you sir? Because if you were I'd have to ask you to leave the store.

www.vynsane.com