Menu Button Positions (Internet Exploder Problem)

Forum Moderators: not2easy

Message Too Old, No Replies

Menu Button Positions (Internet Exploder Problem)

AlanHorvath

5:52 pm on Oct 17, 2009 (gmt 0)

My menu buttons (with drop-downs) are working beautifully in Firefox and all the others (of course), but get all messed up in Internet Exploder -- see here:
<snip>

All my buttons are in their own DIVs, inside of the <div id="header"> element (I'm building this in Dreamweaver), and the issue seems to be with the "top" attribute in each button's div element.

Isn't there a way I can use an "If IE" condition and assign IDs to each div in another style sheet to fix this?

You know the deal; this is driving me crazy.

Thanks for any help you can give.

Alan

[edited by: swa66 at 6:13 pm (utc) on Oct. 17, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

D_Blackwell

6:02 pm on Oct 17, 2009 (gmt 0)

Welcome to WebmasterWorld. The personal link is going to get chopped, so I cannot use it as a reference

My recommendation is to strip the HTML and CSS down to the problem itself by commenting out extraneous markup unrelated to the problem. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.

Adding IE conditional statements might be the best solution, but the cause of the issue needs to understood first.

swa66

6:14 pm on Oct 17, 2009 (gmt 0)

Yes what you seek to use are conditional comments [google.com].

AlanHorvath

8:23 pm on Oct 17, 2009 (gmt 0)

THANKS for your kind attention, my friends!

I'm going to look into the link you gave me, swa66 ... in the meantime, here's the source code for the home page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>specifics removed</title>

<div id="header">
<div style="position:relative; left:5px; top:-43px; width:200px; height:0px; z-index:9; visibility: visible"><a href="index.php"><img src="images/menu_home-a.jpg" onmouseover="src='images/menu_home-b.jpg';" onmouseout="src='images/menu_home-a.jpg';" width="200" height="45" border="0" alt="Home Page"></a></div>

<div>
<div>
<div style="display:none;">
<ul id="imenus3" style="width:200px">
<li style="width:200px;"><a href="services.php"> </a>
<div><ul style="width:178px;top:-2px;left:11px;"><div>
<li ><a href="services.php" style="BACKGROUND-IMAGE: url(images/drop-top.jpg)">Our Services</a></li>
<li ><a href="shippers_quote.php" style="BACKGROUND-IMAGE: url(images/drop.jpg)">Free Shipping Quote</a></li>

<li ><a href="credit_app.php" style="BACKGROUND-IMAGE: url(images/drop.jpg)">Online Credit Application</a></li>
</div></ul></div></li>
<div style="clear:left;"></div>
</ul>
</div>
</div>
</div>
<script language="JavaScript">

list7 = true
function imenus_data3(){

this.enable_visual_design_mode = false

this.main_is_horizontal = true
this.menu_showhide_delay = 0

this.sub_pointer_image = 'images/pointer_right.gif'
this.sub_pointer_image_width = '11'
this.sub_pointer_image_height = '10'
this.sub_pointer_image_offx = '-6'
this.sub_pointer_image_offy = '-4'

this.main_container_styles = "background-image:url(images/menu_services-a.jpg); border-style:none; border-color:transparent; border-width:0px; padding-top:0px; padding-right:0px; padding-bottom:1px; padding-left:0px; "

this.main_item_styles = "color:transparent; text-align:left; font-family:Arial; font-size:29px; font-weight:normal; text-decoration:none; padding-top:0px; padding-right:0px; padding-bottom:1px; padding-left:0px; border-style:none; border-color:transparent; border-width:0px; "

this.main_item_hover_styles = "background-image:url(images/menu_services-b.jpg); "
this.main_item_active_styles = ""

this.subs_container_styles = "background-color:transparent; border-style:none; border-color:transparent; border-width:0px; padding-top:2px; padding-right:0px; padding-bottom:0px; padding-left:0px; "

this.subs_item_styles = "color:#0099FF; text-align:left; font-family:arial; font-size:14px; font-weight:normal; text-decoration:none; padding-top:2px; padding-right:0px; padding-bottom:2px; padding-left:8px; border-style:none; border-color:transparent; border-width:0px; "

this.subs_item_hover_styles = "color:#FF0000; "
this.subs_item_active_styles = "color:#FF0000; "
}
</script>

</div>

<div style="position:relative; left:710px; top:-43px; width:200px; height:0px; z-index:9; visibility: visible">
<div>
<div>
<div style="display:none;">
<ul id="imenus4" style="width:200px">
<li style="width:200px;"><a href="contact.php"> </a>
<div><ul style="width:178px;top:-2px;left:11px;"><div>
<li ><a href="contact.php" style="BACKGROUND-IMAGE: url(images/drop-top.jpg)">Contact Us</a></li>

<li ><a href="#" style="BACKGROUND-IMAGE: url(images/drop.jpg)">specifics removed</a></li>
<li ><a href="#" style="BACKGROUND-IMAGE: url(images/drop.jpg)">specifics removed</a></li>
<li ><a href="#" style="BACKGROUND-IMAGE: url(images/drop.jpg)">specifics removed</a></li>
<li ><a href="#" style="BACKGROUND-IMAGE: url(images/drop.jpg)">specifics removed</a></li>
<li ><a href="#" style="BACKGROUND-IMAGE: url(images/drop.jpg)">specifics removed</a></li>
</div></ul></div></li>

list7 = true
function imenus_data4(){

this.enable_visual_design_mode = false

this.main_is_horizontal = true
this.menu_showhide_delay = 0

this.sub_pointer_image = 'images/pointer_right.gif'
this.sub_pointer_image_width = '11'
this.sub_pointer_image_height = '10'
this.sub_pointer_image_offx = '-6'
this.sub_pointer_image_offy = '-4'

this.main_container_styles = "background-image:url(images/menu_contact-a.jpg); border-style:none; border-color:transparent; border-width:0px; padding-top:0px; padding-right:0px; padding-bottom:1px; padding-left:0px; "

this.main_item_hover_styles = "background-image:url(images/menu_contact-b.jpg); "
this.main_item_active_styles = ""

this.subs_container_styles = "background-color:transparent; border-style:none; border-color:transparent; border-width:0px; padding-top:2px; padding-right:0px; padding-bottom:0px; padding-left:0px; "

this.subs_item_hover_styles = "color:#FF0000; "
this.subs_item_active_styles = "color:#FF0000; "
}
</script>
</div>
</div>

</div>
<div id="footer">
<a href="index.php">Home</a> � <a href="about.php">About Us</a> � <a href="services.php">Services</a> � <a href="shippers_quote.php">Shipping Quote</a> � <a href="credit_app.php">Credit Application</a> � <a href="contact.php">Contact Us</a>

<script language="JavaScript" type="text/javascript" src="imenus.js"></script>

</body>
</html>

[edited by: swa66 at 10:12 pm (utc) on Oct. 17, 2009]
[edit reason] specifics removal [/edit]

AlanHorvath

10:58 pm on Oct 17, 2009 (gmt 0)

Okay ... I have a fix! : I have one stylesheet that has all my menu buttons working properly in IE and I have another stylesheet that has all my menu buttons working properly in all the other browsers.

New Problem: I don't know how to make a conditional comment work so that if someone is viewing the page in IE the stylesheet I created for that will be referenced.

I tried putting this in between the head tags but it doesn't do anything:
<![if IE]>
<link rel="StyleSheet" href="style_IE.css" TYPE="text/css">
<![endif]>

What am I doing wrong?

Thanks again!

Alan

swa66

1:06 am on Oct 18, 2009 (gmt 0)

What I use:


 <link rel="stylesheet" type="text/css" href="/css/style.css" />
<!--[if IE 6]>
 <link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
 <link rel="stylesheet" type="text/css" href="/css/ie7.css" />
<![endif]-->

Note:
- style.css goes to all browsers, including all versions of IE
- ie6.css is only loaded over style.css in IE6
- ie7.css is only loaded over style.css in IE7
- IE8 will get the standards stuff (I've not yet had it act up on a real site)

It's best not to target all versions of IE, as you'll also target future versions -which hopefully won't need this at all-.

So you don't need a full CSS that does what IE6 needs, you only need to change what IE6 needs. Sometimes this means knowing the default value of some settings in order to set them back to their default value.

AlanHorvath

2:10 pm on Oct 18, 2009 (gmt 0)

Thanks swa66 ... I really appreciate you guys taking the time to help me out on this.

Alan