PDA

View Full Version : padding and aligning in IE issues


jax23
08-21-2009, 02:33 PM
I have the menu almost customised but:

had to put on strange top heavy padding on it so wonder if its in the right place. padding not showing in IE

http://www.magda-stawarska-beavan.com/home.php# (http://www.magda-stawarska-beavan.com/home.php#)

I added new classes so that I could make each item in the top list a set size with a background image and for this to work set the inishal list item to auto so these sizes would take effect. I had to add less to these sizes of the cells to get them to display right in all other browsers and dreamweaver, IE displays the acual size added all others what I want. So asume its a padding thing, and perhaps I have targeted the child text box rather than parent cell?

Also the dropdown isnt linning up in IE .

Ive spent all week on this, I suppose thats what people do when they dont really have a good grasp of css to build it from scratch, trouble is someone else is to update the site so I was trying to make it easy.

any advice on obvious mistakes in this code greatly apreciated.
heres the css:




ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 75%;
cursor: default;
width: 553px;
font-style: normal;
font-weight: bold;
font-variant: normal;
font-family: Corbel, Arial;
}


/* i added these for indiviual sizes & background images */
.backgroundimagehome {
background-image: url(../images/line-home.gif);
background-repeat: no-repeat;
height: 23px;
width: 46px;

}
.backgroundimageselected {
height: 23px;
width: 122px;
background-image: url(../images/line-selected.gif);
background-repeat: no-repeat;

}
.backgroundimagecontact {
height: 23px;
width: 55px;
background-image: url(../images/line-contacts.gif);
background-repeat: no-repeat;

}
.backgroundimageexhibition {
height: 23px;
width: 79px;
background-image: url(../images/line-exhibitions.gif);
background-repeat: no-repeat;
}

.backgroundimagelinks {
height: 23px;
width: 40px;
text-align: right;
background-image: url(../images/line-links.gif);
background-repeat: no-repeat;

}
.backgroundimagepaper {
height: 23px;
width: 102px;
background-image: url(../images/line-paper.gif);
background-repeat: no-repeat;
}


ul.MenuBarActive
{
z-index: 1000;
}

ul.MenuBarHorizontal li
{
margin: 0;
list-style-type: none;
cursor: pointer;
width: auto;
float: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
}


/* i added this */
ul.MenuBarHorizontal li a:active {
text-decoration: none;
color: #999;
}

ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
z-index: 1020;
cursor: default;
width: 11.5em;
position: absolute;
left: -1000em;
text-align: left;
text-indent: 10px;
top: 39px;
border: 0.05em solid #e7e7e7;
background-color: #FFF;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}


ul.MenuBarHorizontal ul li
{
width: 11.5em;
text-align: left;
border-top-width: 0.05em;
border-right-width: 0.05em;
border-bottom-width: 0.1em;
border-left-width: 0.05em;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #e7e7e7;
border-right-color: #e7e7e7;
border-bottom-color: #e7e7e7;
border-left-color: #e7e7e7;
}


ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
color: #FFF;
}
/************************************************** *****************************
DESIGN INFORMATION: describes color scheme, borders, fonts
************************************************** *****************************/

ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
background-repeat: no-repeat;
width: 11.5em;
}

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
color: #666;
padding-top: 10px;
padding-right: 7px;
padding-bottom: 7px;
padding-left: 5px;
text-decoration: none;
}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
color: #000;
}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #000;
font-weight: bold;
}

/************************************************** *****************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
************************************************** *****************************/

ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: none;
background-repeat: no-repeat;
color: #666;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: none;
background-repeat: repeat-x;
background-color: #000;
}

ul.MenuBarHorizontal ul a:hover
{
background-color: #f0f0f0;
color: #000;
}


/* i added this */
ul.MenuBarHorizontal ul a:active {
text-decoration: none;
color: #999;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: none;
background-repeat: repeat-x;
background-color: #CCC;
color: #666;
}

/************************************************** *****************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
************************************************** *****************************/

ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}

@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
}


ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(../images/line-selected.gif);
background-repeat: no-repeat;
color: #000;
}

.NAME
{
font-family: corbel;
font-size: 16px;
font-weight: 600;
color: #666;
width: 247px;
height: 43px;
text-align: left;
}