...

View Full Version : FF & IE Compatibility Help, PLEASE@



johnosbourn
05-15-2008, 07:05 AM
Hey guys, so I am having some trouble with my drop down menu working in IE and FF, I am trying to repeat that three time throughout the page, and the drop down menu only works on one of the 3 times I'm trying to use it. Please help. Thanks! Below is the html and the css

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#" rel="dropmenu1">What We Have to Offer</a></li>
<li><a href="#" rel="dropmenu2">About L.H.S.</a></li>
<li><a href="#">Coaches</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Upcoming Events</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>


<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="parents.html">Parents</a>
<a href="coachesteams.html">Coaches/Teams</a>
<a href="athletes.html">Athletes</a>
<a href="signup.html">Signup</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="phil.html">Philosophy</a>
<a href="aim.html">Aim</a>
<a href="programdesign.html">Program Design</a>
<a href="signup.html">Sign-Up</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="#">Post Play</a>
<a href="#">Put Back</a>
<a href="#">Mikan Drill</a>
<a href="#">Resistance Training</a>
<a href="#">Plyometrics</a>
<a href="#">Verticle Jump</a>
<a href="#">Strength and Agility Training</a>
<a href="#">Endurance</a>
</div>



<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>






.chromestyle{
width: 99%;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
width: 100%;

padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #FFFFFF;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover{

}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv2{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

FWDrew
05-15-2008, 07:17 AM
Hi,

First, your code needs to be wrapped in code tags, its annoying and hard to read without them.


<div class="chromestyle" id="chromemenu">
Your declaring all your divs as both a class and id...

Your calling div id's (and classes) when your CSS is full of only classes....

Use ID's for things that will be used once in a page, classes for multiple use (in a nutshell).

I think it would be best if you read up on some basic CSS tutorials, start here: http://www.w3schools.com/css/default.asp

For now, it will be a lot easier to give us a link to your site to help you so we can see everything.

Regards,

Drew

johnosbourn
05-15-2008, 07:40 AM
The ID's, are just to link the main link name and the drop down menus. Is there another way to do it? The link is: http://osbournwebdesign.com/lhs/

I've never done a drop down menu before....

johnosbourn
05-15-2008, 07:41 AM
Forgot to mention, the whole things works perfectly in FF, but ONLY the first row works in IE

FWDrew
05-15-2008, 08:05 AM
The ID's, are just to link the main link name and the drop down menus.
Sorry, I missed the javascript in your code so I assumed something else.

First, your page needs a proper doctype: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Second, these need to be fixed:http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fosbournwebdesign.com%2Flhs%2F

thirdly, your CSS: http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fosbournwebdesign.com%2Flhs%2F

Fix your errors, and then take it from there :thumbsup:

Drew



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum