|
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
|
|
You eat, breathe and sleep innovation. Build your mobile intelligence with BlackBerry® experts this July. Register Today! |
|
#1
|
||||
|
||||
|
Problems with two CSS divs
I'm having issues with two menus that appear at the top of my web site.
In IE6 Everything is fine. But in Mozilla the bottom menu won't fill the whole width of the page and won't display at the correct height etc. It's fairly straight forward but I just can't nut it out. I use navcontainer to hold the user menu and then membermenu to hold the member menu. Can anyone help with this. The code is here: Code:
#membermenu
{
position:static;
margin: 0px 0px 0px 0px;
padding: 1px 1px 1px 1px;
text-align: right;
background-color: #5A76A5;
font-size: 10px;
width: 100%;
text-decoration: none;
border-bottom: 1px solid #CCC;
height: 20px; } /*** must be set so the following absolutely positioned divs are
placed correctly on initial load of the page***/
#membermenu #head
{
color: #000;
font-weight: bold;
font-style: italic;
font-size: 110%;
}
#membermenu ul, li
{
text_indent:80%;
list-style-type: none;
text-align: right;
display: inline;
background: #5A76A5;
text-decoration: none;
height: 20px; } /*** must be set so the following absolutely positioned divs are
placed correctly on initial load of the page***/
#membermenu a:link, #membermenu a:visited
{
align: right;
line-height: 14px;
text-align: right;
font-weight: bold;
margin: 0 10px 2px 10px;
text-decoration: none;
color: #fff;
}
#membermenu a:link#current, #membermenu a:visited#current, #membermenu a:hover
{
padding-bottom: 2px;
text-align: right;
background: transparent;
color: #fff;
}
#membermenu a:hover
{
color: #000; }
#navcontainer ul
{
background-color: #036;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
color: White;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
font-family: arial, helvetica, sans-serif;
}
#navcontainer #right
{
color: #fff;
font-weight: bold;
font-style: italic;
float: right;
text-align: right;
font-size: 110%;
}
#navcontainer ul li
{
display: inline;
}
#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #ccc;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}
Thanks |
|
#2
|
||||
|
||||
|
RE: Problems with two CSS divs
Will you post the relevant HTML too?
|
|
#3
|
||||
|
||||
|
RE: Problems with two CSS divs
Might be an idea.
This is cut and pasted from a couple of functions. Code:
<div id="navcontainer" >
<ul>
<li><a href="<?=INDEX_PAGE?>">Home</a></li>
<li id="current"><a href="<?=SELL_PAGE?>">Sellers</a></li>
<li><a href="<?=BIZ_CENTER?>">Links</a></li>
<li><a href="<?=MEMBERS_PAGE?>">Members Area</a></li>
<li><a href="<?=ABOUT_PAGE?>">About Us</a></li>
<li id="right"><a href="<?=REGISTER_PAGE?>">Register HERE! It's FREE</a></li>
</ul>
</div>
<div id="membermenu">
<ul>
<li id="head">Welcome: <?=ucwords($username)?></li>
<li><a href="<?=BOOKMARK_PAGE?>">Bookmarks</a></li>
<li><a href="<?=PASSWORD_FORM?>">Change Password</a></li>
<li><a href="<?=LOGOUT_PAGE?>">Logout</a> </li>
</ul>
</div>
I've got it displaying to be the correct width using padding: 1em 2em; in #membermenu but on IE the height of it is double what it should be - on Mozilla it's good. I don't know how to hide things from IE only. |
|
#4
|
||||
|
||||
|
RE: Problems with two CSS divs
Some more info.
The problem with width can be fixed by using padding: 0em 2em; But that means on Mozilla the two div's appear on top of each other. In IE it's fine. I'm using position:static; - should I be doing this a different way? |
![]() |
| Viewing: Codewalkers Forums > Other Technologies > Client Side Things > Problems with two CSS divs |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
|