PDA

View Full Version : CSS drop down menu and IE!!


lynzberry
11-09-2011, 03:10 PM
Hi All

I am relatively new to Dreamweaver and trying desperately to design a website for a friend. I found a tutorial for doing CSS drop down menus which works fine in Chrome except for 1 thing - where the menu item is too long for a single line it goes onto 2 lines, but the background box doesn't change size.

The main problem is that the hover menus don't work in IE 8 or 9! Soooo frustrated as I can't find any way to fix this. Have searched extensively over the web and tried some fixes but nothing seems to work.

Here is the code:

@charset "utf-8";
#navMenu {
margin:0;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;

}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-image:url(../../images/bg_navbar.jpg);
background:repeat;
background-color:#0b3183;
}

#navMenu ul li a {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-stretch:ultra-condensed;
font-size:13px;
text-decoration:none;
height:30px;
width:103px;
display:block;
color:#FFF;
border:1px solid #FFF;

}

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;

}

#navMenu ul li:hover ul {
visibility:visible;
margin:0;
display:inline;
}

/************************************************** ********/

#navMenu li:hover {
background:#3399ff;
margin:0;
}

#navMenu ul li:hover ul li a:hover {
background:#99ccff;
color:#000;
margin:0;
}

#navMenu a:hover {
color:#000;
}

.clearFloat {
clear:both;
margin:0;
padding:0;

The website is www.beechbehaviourcentre.co.uk

If anyone could help it would be much appreciated.

Thanks.

johnMoss
11-09-2011, 04:06 PM
I only see one box where the text bleeds over. Is there another? Why not just reduce the text? The use of the word vet for example in 'vet referral form' is redundant; it's a vet site. Just say 'referral form' .

johnMoss
11-09-2011, 04:23 PM
Unrelated, but move this tag from line 1 to somewhere down below your title in the "head" section.

<meta name="keywords" content="dog, dogs, training, behaviour, behavioural problems, aggression, fears, anxieties, recall, paws, lead, canine, communication, vet, referral, bach flower remedies, rescue remedy, barking, attention seeking" /><meta name="description" content="Has your dog got a behavioural problem? Does your dog need professional training? We use modern methods to help your dog overcome their problem in the gentlest way possible. " />

Then at lines 128 & 129 change the following:

<link href="contact/css/consultForm.css (http://www.beechbehaviourcentre.co.uk/contact/css/consultForm.css)" rel="stylesheet" type="text/css" />
<link href="contact/css/dropdown.css (http://www.beechbehaviourcentre.co.uk/contact/css/dropdown.css)" rel="stylesheet" type="text/css" />




to

<link href="css/consultForm.css (http://www.beechbehaviourcentre.co.uk/contact/css/consultForm.css)" rel="stylesheet" type="text/css" />
<link href="css/dropdown.css (http://www.beechbehaviourcentre.co.uk/contact/css/dropdown.css)" rel="stylesheet" type="text/css" />



The consult line above is an unrelated problem you haven't noticed yet. Fixing these broken links will solve your other browser issues.

johnMoss
11-09-2011, 04:26 PM
And then please forgive my lack of manners...
Welcome to the forum :)

lynzberry
11-09-2011, 04:29 PM
Well thanks John. I've set up that whole website after following a few dvd tutorials and books I've read! Wish I'd never started but am please that I'm finally getting somewhere.

Problem is, when something doesn't do what's expected it's so hard to find out why. I've posted questions elsewhere, but haven't received any replies, so hopefully this forum will be my saviour!!

domedia
11-09-2011, 05:25 PM
Problem is, when something doesn't do what's expected it's so hard to find out why.

It's is really hard, almost impossible to sue Dreamweaver to make a web site if you don't know the basics. HTML, CSS etc.
This is IMHO, I know people disagree about this.

Squarespace is an example of a service that let's you build a web site without the technical skills needed to build a web site in DW.

johnMoss
11-09-2011, 05:33 PM
It's is really hard, almost impossible to use Dreamweaver to make a web site if you don't know the basics. HTML, CSS etc.

The baptism by fire approach is a method used by a lot of people, Coding is not an intuitive game, you have to have at bare minimum a solid basic education. The answer I gave above solves your problem assumedly, but doesn't explain why. It's too much to get into here. Don't knock yourself too hard, all things take time, but if you really want to do it right, read up :)

domedia
11-09-2011, 09:47 PM
uhm.. that was _not_ a reply to me, right John? 8)

johnMoss
11-09-2011, 09:52 PM
I know there's a joke in there somewhere, I'm still trying to figure it out :)

johnMoss
11-09-2011, 09:55 PM
If a legit question though, referring to the premise that many who first start using dreamweaver are expecting it might walk them through the process, which of course it doesn't...

domedia
11-09-2011, 11:11 PM
You quoted me, and then said 'Don't knock yourself too hard', so I thought I'd throw in a funny comment ;-)

johnMoss
11-10-2011, 05:00 AM
Problem is, when something doesn't do what's expected it's so hard to find out why. I've posted questions elsewhere, but haven't received any replies, so hopefully this forum will be my saviour!!
Oh it is... no really.. See Domedia there? Take a hard look at that face... He was in that movie... City of Angels... As an advisor... :-D

edbr
11-10-2011, 05:59 AM
advisor on falling?

lynzberry
11-10-2011, 04:04 PM
Unrelated, but move this tag from line 1 to somewhere down below your title in the "head" section.

<meta name="keywords" content="dog, dogs, training, behaviour, behavioural problems, aggression, fears, anxieties, recall, paws, lead, canine, communication, vet, referral, bach flower remedies, rescue remedy, barking, attention seeking" /><meta name="description" content="Has your dog got a behavioural problem? Does your dog need professional training? We use modern methods to help your dog overcome their problem in the gentlest way possible. " />

Then at lines 128 & 129 change the following:

<link href="contact/css/consultForm.css (http://www.beechbehaviourcentre.co.uk/contact/css/consultForm.css)" rel="stylesheet" type="text/css" />
<link href="contact/css/dropdown.css (http://www.beechbehaviourcentre.co.uk/contact/css/dropdown.css)" rel="stylesheet" type="text/css" />




to

<link href="css/consultForm.css (http://www.beechbehaviourcentre.co.uk/contact/css/consultForm.css)" rel="stylesheet" type="text/css" />
<link href="css/dropdown.css (http://www.beechbehaviourcentre.co.uk/contact/css/dropdown.css)" rel="stylesheet" type="text/css" />



The consult line above is an unrelated problem you haven't noticed yet. Fixing these broken links will solve your other browser issues.

Unfortunately I tried to change these lines but they took away all the CSS menu styling so I've changed them back. Any other ideas would be welcome?

johnMoss
11-10-2011, 04:31 PM
OK, my bad. But I looked at your directory structure and didn't see the consult folder, so odd... Lemme dig a bit more...

johnMoss
11-10-2011, 04:36 PM
OK I see you kept the css links original but did move the keyword tag down.
Your menu is working fine for me in IE and firefox so maybe the improperly placed meta-tag may have been the culprit.

johnMoss
11-10-2011, 04:38 PM
advisor on falling?
I didn't see any runes in that picture... Just a bunch of angels swigging beer & chillin' at the beach. 8-)

lynzberry
11-10-2011, 04:41 PM
OK I see you kept the css links original but did move the keyword tag down.
Your menu is working fine for me in IE and firefox so maybe the improperly placed meta-tag may have been the culprit.

Hi John

So weird! I changed 2 things and it's now working!! But i need to know which one! I changed the meta position as you suggested, but I also found a previous forum query that you had actually replied on to a lady that was having difficulty with compatibility mode. She found that changing the font family from arial, helvetica etc to verdana did it for her. So I did this too! But only on the index.html page. I'll try the about page with just the meta position and see if that works...

johnMoss
11-10-2011, 04:53 PM
There are two things going on here:
1) Changing the font simply reduced the space needed to render the text, so no extra line was needed, hence problem disappear. Changing the wording, or reducing the font size, would have effect the same remedy.

2) The very first thing a browser does in rendering a page is examine the document type declaration. That's the first I've seen of someone placing a meta-tag where you did, so one has to assume it confused the browser. Only one read through it. You absolutely MUST move that meta-tag down into the head section on all pages.

lynzberry
11-10-2011, 04:55 PM
Yes, I've done that now on the index.html and about.html pages.

I've also removed all reference to Arial, Helvetica etc in the font-family and on those pages it seems to have worked!

So pleased... I will now do all the others :grin:

lynzberry
11-10-2011, 04:57 PM
Meant to say... Thanks John. I've spent hours and hours trying to solve this... so relieved now. Onto the next glitches...

johnMoss
11-10-2011, 05:03 PM
You're welcome, and thank you for tolerating my 12 year old sense of humor entwined in your posts; we don't normally do this... :)

Corrosive
11-11-2011, 08:36 AM
we don't normally do this... :)

Errrrmmm.... We don't? Speak for yourself! :mrgreen: