PDA

View Full Version : IE and Mozilla in Windows



rwyliedesign
12-10-2008, 04:58 PM
1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem: I am trying to modify the CSS of the #dropmenudiv a{ attribute. I would like to change the links' color from the default blue to orange so I added a color (#FF6633). This color change looks perfect in Safari and Firefox on a Mac but on a Windows machine only the default blue is shown.

I've changed other CSS attributes as well to customize the menu's look. I've pasted it here for your convenience:

#dropmenudiv{
position:absolute;
border:1px solid #CCCCCC;
border-bottom-width: 0;
font:normal 12px Georgia;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid gray;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color:#FF6633
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #CCCCCC;
}

Here is the site I am having this problem with: http://www.heshimakenya.org/

Your help is much appreciated,
Rebecca

Schmoopy
12-10-2008, 05:00 PM
Just looked on my PC (Windows Vista) and the colour was orange, maybe it's something to do with the PC you viewed it on?

Edit: In IE there is a blue border around the menu links, try adding this to the images:



#dropmenudiv img{
border:none;
}

rwyliedesign
12-10-2008, 05:42 PM
Why is there a blue box around each menu when viewed in IE? How can I get rid of that?

There is a black box on mouseover when viewed in Firefox on a Mac. How can I get rid of that?

Thanks,
Rebecca

jscheuer1
12-10-2008, 05:43 PM
#dropmenudiv img{
border:none;
}


That won't do anything for the triggers. In FF at least this will:


a:link img {
border-color: #FF6633;
}

Or even (more specific):


#navigation a:link img {
border-color: #FF6633;
}


Either should work in IE as well, but IE can be tricky with link styles. IE 7's developer extension suggests this will work in IE though.

rwyliedesign
12-10-2008, 08:51 PM
thanks for such a quick response... now i'm wanting to do something a little different.

using the navigation bar at this site: http://www.heshimakenya.org

I am wanting to only have a drop-down menu on buttons: About Us, Programs, News & Media, and Contribute

I want to make Voices and Contact Us just regular buttons. How is this best achieved using this script?

Thanks again,
Rebecca

jscheuer1
12-11-2008, 05:25 AM
The way you have it now is already like that.

rwyliedesign
12-11-2008, 02:35 PM
yeah, i figured it out...thanks.

rwyliedesign
12-11-2008, 09:29 PM
how come there is a double menu that pops up only on Internet Explorer? (see attachment of the screen shot)

How do I get rid of the little programs box?

Rebecca

jscheuer1
12-11-2008, 11:11 PM
Here (for example):


<img src="images/nav_programs.jpg" alt="programs" />

First, since you are using HTML, which you should be, you shouldn't use the self closing tag, make it:


<img src="images/nav_programs.jpg" alt="programs">

Next, since IE mistakenly uses the alt attribute as a title attribute if no title is provided, you have two valid choices:


<img src="images/nav_programs.jpg" alt="">

or the preferred:


<img src="images/nav_programs.jpg" alt="programs" title="">

rwyliedesign
12-12-2008, 11:16 PM
how i get rid of the blue border around Voices and Contact Us when viewed in IE? it only occurs on these buttons because i removed the drop-down menu on them as they were no longer needed.

the website in question is this : http://www.heshimakenya.org/

i think i'll be all set for a while after this!

jscheuer1
12-12-2008, 11:29 PM
Looks like another case where you have already solved it. If you are still seeing the blue border, clear your cache. If after that you are still having a problem, what version of IE are you using? Looks OK here in IE 7.

Sorry, spoke too soon. Once the link becomes visited, the blue color returns. I can't see what's causing it. Try changing:


#navigation a:link img {
border-color: #FF6633;
}

to:


#navigation img {
border-color: #FF6633!important;
}

rwyliedesign
12-12-2008, 11:39 PM
it still occurs on mouseover

even in Firefox on my Mac, but the box is black

jscheuer1
12-13-2008, 03:27 AM
I'm not seeing that you made the change I recommended to the live page. But if you change:


#navigation a:link img {
border-color: #FF6633;
}


to:


#navigation a:link img, #navigation a:hover img, #navigation a:visited img {
border-color: #FF6633;
}

It will take care of it. This must be done to all pages, or be placed in the 648.css file.

rwyliedesign
01-08-2009, 07:01 PM
Hi,

I'm having a new problem (see below URL). I've gotten rid of the border that changes to black on rollover on the navigation. However, now this border shows up on the header image. I want to make the header into a link that connects to the homepage but this orange border shows up and changes to black on rollover.

http://www.heshimakenya.org/new/contact.html

Thanks,
Rebecca

jscheuer1
01-08-2009, 07:35 PM
Just to be on the safe side, not knowing what other conflicting style you may have, use:


#header a img, #header a:hover img, #header a:visited img, #header a:active img {
border: none!important;
}