CSS browser compatibility and Menu appearance ???

j4mes_bond25 · #1 Apr 8th, 2006, 10:23

Presently, after sorting my previous problem of menu, I'm only struggling with browser compatibility. Thought of it scares me since the reason I'm making this website is to show it to different employers (who often asks for the proof of applicant's previous work within CSS before considering their application) & since around 90% of browser are Internet Explorer, I rather prefer my website being able to work perfect for MAJORITY of the viewers.

Presently whatever I've done works perfectly well in Firefox & wonder if anyone around can help me or point me in right direction in getting it work well in Internet Explorer as well.

Now in Internet Explorer, every time I hover the mouse over Beer/Wine/Whiskey/Spirit link, the sub-menu either appears on the right side of it rather than straight underneat it (horizontal drop-down menu) & some not only appears on right side but also splits up into two different menu that appears at two different position.

Additionally, ONLY in Internet Explorer the left menu (#leftMenu in my code) is appearing SEPARATE from the "Content" rather than floating on left of the "Content". I can't even click on the link that's associated with Home/History/Law/Effect/Effect/Contact.

I've been checking browser compatibility for all the elements I've used & it all supports the latest Internte Explorer & Firefox browser, as well.

Can anyone around PLEASEEEEEEEEEEEEEEEEEEE help, since I've been working on it for the past 5 days quite unsuccessfully. For readers' convenience, I indented the code so as to make it more easily readable.

Attached here are 2 files one shows the result in Firefox (as I wish to see in Internet Explorer as well) & other showing result in Internet Explorer.

FOLLOWING ARE MY CODES SO FAR

CSS STYLE

Code: Select all

/* CSS Document */

body {background:url(background_champagne.gif) repeat}

/* ........................................ Banner ........................................ */

div.banner
{
    background:url(glass_row.jpg);
    width:100%;
    height:4em;
}

/* ......................................... Top Menu .................................... */

#topMenu
{
    background-color:transparent;
    cursor:default;
    text-align:center;
    width:90%;
    float:right;
}

#topMenu ul
{
    list-style: none;
    text-align:center;
    font-size:medium;
    float:left;
    position:relative;
    margin: 0;
    padding: 0;
}

#topMenu ul li 
{
    display: inline;
    text-align:center;
    color:#FF00FF;
    float:left;
    position: relative;
    margin-left:150px;
    height:20px; 
    line-height:20px; 
    font-size:large;
}

#topMenu ul li:hover
{
    color:white;
    background-color:black;
}

#topMenu ul li ul 
{
    position:absolute;
    display: none;
    margin-left:-11em;
}

#topMenu a
{
    display:block;
    text-decoration:none; 
    background-color:white;
    width:120px; 
    height:20px; 
    line-height:20px; 
    font-size:large;
    color:blue; 
    border:1px solid red;

}

#topMenu a:hover
{
    color:red;
    background-color:yellow;
}

#topMenu ul li:hover ul {display:none}
#topMenu ul li:hover ul {display:block;}

body {behavior: url(csshover.htc);}


/* ....................................... Left Menu .......................................... */

#leftMenu
{
    background-color:transparent;
    cursor:default;
    text-align:center;
    width:10%;
    float:left;
}

#leftMenu ul
{
    padding:0;
    list-style:none;
    width:12ex;
}

#leftMenu ul li 
{
    background-color:black;
    border-width:thick;
    border-style:outset;
    color:white;
    display:block;
    position: relative;
    margin-top:2px;
    padding: 12px 6px;
}

#leftMenu a
{
    color: white;
    font-weight:bold;
    display: block;
    text-align:center;
    text-decoration: none;
}

#leftMenu a:hover {color:yellow;}

#leftMenu a:active {color:red;}

#leftMenu ul li:hover
{
    border-width:thick;
    border-style:inset;
}

/* This Code is for Microsoft Internet Explorer Browser 
to it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }

/* Fix IE. Hide from IE Mac \*/
* html #leftMenu ul li {float:left; height:1%;}
* html #leftMenu ul li a {height:1%;}
/* End */

/* ................................... Content ................................................ */

div.content
{
    background-color:yellow; 
    width:90%; 
    height:30em; 
    float:right;
}

/* ................................... Bottom Menu ......................................... */


div.bottomMenu
{
    background-color:green; 
    width:100%; 
    float:left;
    height:5%; 
}

HOME.HTML

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Alcohol - Main Page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body background="background_champagne.gif">

<div class="banner">
</div>

<div id="topMenu">
  <ul>
        <li><strong>Beer</strong>
            <ul>
              <li><a href="">History</a></li>
              <li><a href="">Ingredients</a></li>
              <li><a href="">Brewing Process</a></li>
              <li><a href="">Bottling</a></li>
              <li><a href="">Home Brewing</a></li>
              </ul>
        </li>
        
        <li><strong>Wine</strong>
            <ul>
              <li><a href="">Preparation</a></li>
              <li><a href="">Serving</a></li>
              <li><a href="">Storing</a></li>
                <li><a href="">Aging</a></li>
              <li><a href="">Choosing</a></li>
              <li><a href="">Grapes</a></li>
              <li><a href="">Taste</a></li>
              <li><a href="">Label</a></li>
              <li><a href="">Terms</a></li>
              <li><a href="">Glossary</a></li>              
              </ul>
        </li>
        
        <li><strong>Whiskey</strong>
            <ul>
              <li><a href="">History</a></li>
              <li><a href="">Preparation</a></li>
              <li><a href="">Variety</a></li>
              <li><a href="">Whiskies</a></li>
              <li><a href="">Glossary</a></li>
              </ul>
        </li>
        
        <li><strong>Spirit</strong>
            <ul>
              <li><a href="">Brandy</a></li>
              <li><a href="">Rum</a></li>
              <li><a href="">Gin</a></li>
              <li><a href="">Vodka</a></li>
              <li><a href="">Absinthe</a></li>
              </ul>
        </li>
    </ul>
</div>

<div id="leftMenu">
    <ul>
        <li><a href"">Home</a></li>
        <li><a href"">History</a></li>
        <li><a href"">Law</a></li>
        <li><a href"">Effect</a></li>
        <li><a href"">Contact</a></li>
    </ul>
</div>

<div class="content">
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
</div>

<div class="bottomMenu">
Bottom Menu
</div>



</html>

craig · #2 Apr 8th, 2006, 12:52

I.E doesnt support the hover function well, if at all so you will always have problems with it. My advice, dont rely on the dropdown menu, and keep it simple. Sorry i cant be of more specific help.

Craig

j4mes_bond25 · #3 Apr 8th, 2006, 13:17

Quote:

Originally Posted by craig

I.E doesnt support the hover function well, if at all so you will always have problems with it. My advice, dont rely on the dropdown menu, and keep it simple. Sorry i cant be of more specific help.

Craig

Hey Craig, thanks for your reply. Basically, I've inserted a code which makes it possible for Internet Explorer able to play the hover effect.

However, having hoover effect issue aside, any idea why does the links on left menu is not being shown as floating to left side of content, since content presently is pushed downwards, in Explorer.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Browser compatibility issues	Craigj1303	Web Page Design	3	Feb 4th, 2008 09:28
PC browser compatibility	aaronh	Starting Out	2	Sep 21st, 2007 01:10
CSS Browser Appearance	Exodus	Web Page Design	3	Jun 18th, 2007 14:16
AOL Browser Compatibility	hortondr	Web Page Design	6	Apr 4th, 2007 22:25
Browser compatibility	Alsilver	Web Page Design	11	Oct 19th, 2006 20:18

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS browser compatibility and Menu appearance ???