rounded corner menus doesnt show up in ie

[nidhins]

hi….please help me out of thie problem…..

the problem is that i created a rounded corner menu.. it works on Firefox but the round corners doesn’t show up in IE
please check http://www.innov8.in for the problem page……

Code:

html
—————–

• home
• computers
• web design
• software solutions
• DELL
• Conact Us

——————–

CSS
——————–
* {margin:0; padding:0;}
ul#menu
{
margin-top:-145px;
padding-left:250px;

}
ul#menu li
{
list-style:none;
display:inline;
}
ul#menu li a
{
color:#FFFFFF;
text-decoration:none;
font-size:14px;
padding:12px;
height:100px;
font-weight:bold;
}
ul#menu li a:hover
{
background-image:url(images/over_gad.jpg);
background-position:top;
background-repeat:no-repeat;
width:100px;
height:12px;

}
ul#menu li a.active
{
background-image:url(images/over/back_middle.png);
background-repeat:repeat-x;
font-style:italic;

}
span.active_right
{
background-image:url(images/over/back_right.png);
background-position:right;
background-repeat:no-repeat;
padding-left:10px;
padding-top:14px;
padding-bottom:10px;

}
span.active_left
{
background-image:url(images/over/back_left.png);
background-repeat:no-repeat;
background-position:left;
padding-left:10px;
padding-top:14px;
padding-bottom:10px;

}

div#footer
{
background-image:url(images/footer_back.jpg);
background-repeat:no-repeat;
width:1000px;
height:121px;
}
div#logo
{
background-image:url(images/logo.jpg);
background-repeat:no-repeat;
width:173px;
height:103px;
position:absolute;
margin-top:-66px;
}
div#content
{
background-image:url(images/main_body.jpg);
background-repeat:no-repeat;
width:1000px;
height:379px;
margin-top:56px;
}
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background-color:#16a2d0;
}
div#wrapper
{
margin:0 auto;
width:1000px;
}
div#top_banner_back
{
background-image:url(images/header_back.jpg);
background-repeat:no-repeat;
width:1000px;
height:250px;

}

——————-

Thakns in advance

Nidhin

[Rob MacKay]

Firstly, thats gonna be a sweet design :)

Ok – dude – your code is destroying itself… I just had a good 10 mins plaiyng with it and you are using margin and padding for positioning – which is always bad, especially in IE.

Ok what I would do is start with your wrapper div, give it a position:relative;

Next move onto your header, give it a height of 182px, thats the height of the image… dont worry about how it looks yet.

remove the div that wraps your UL nav bar, its not doing anything :)

from the #menu remove the padding and margin thats positioning it, just physically delete the margin-top and padding-left values. Now add

Code:

#menu {

height:36px;
position:absolute;
top:94px;
left:245px; /*you can make this to what you need obviously – tweek afterwards*/

}

Now remove the padding and margin from your li and span styling and time to start again :D

for the span, do this:

Code:

background:url(whatyourbgis.jpg) no-repeat;
display:inline-block;
float:left;
width:10px;
height:36px;

now for your li do this

Code:

display:inline-block;
float:left;
height:36px;
line-height:36px; /* this centres your text vertically*/
margin:0 10px; /*spaces out the LIs left and right at 10px*/
padding:0 5px; /*adds internal blue spacing if you want it left and right at 5px… */

next take the width value off your li.active:hover no need for that…

remove the margin from your content div – and you should see it fit back nicely to the header :)

Ok if you can see what I am doing there, you will notice your site start to form back into something more standard. The float:left is for IE who seems to think that display:inline-block means block lol…

If you use positioning for your elements instead of padding/margin you will find it works. The reason I added position:relative to your wrapper is that for all the elements you position inside that wrapper will now work out their position from the wrapper. Example – the #menu is:

position:absolute;
top:94px; <– this means from the top of the wrapper
left:245px; <– this is from the side of the wrapper

If you did not have the wrapper with a pasive position it would get its positioning from the main window – then whenever you resized your website would go mental :)

I hope that has helped – little tricks like setting your line-height to the same height as your nav (36px) is really useful for vertical centre…

Thats it – im sure you can work out the rest :D

[nidhins]

thanks for the reply..surely learned some great tricks…

please take a look @ the page now http://www.innov8.in ….two problems i couldn’t solve,may be because i m new to css…

1. the mouse over is not working fine….i did not use the margin top which i usually used to, as per your guidelines
2. the active background effect is not seen fully …

what do u think….y a beginner makes such mistakes…
please guide as i can avoid the errors in further designs…

and i am so happy that u commented on my design thanksss……

[Rob MacKay]

Firstly well done! its looking much better code wise :) We all have to start somewhere, so don’t worry about being new to CSS… :)

Ok questions:

1. the mouse over is not working fine….i did not use the margin top which i usually used to, as per your guidelines

your <a> tag element by defualt is classed as an "inline" element, you need to display it as a "block" so that you can set a height to it :) So, what you need to do there is add:

Code:

display:inline-block;
height:36px;
float:left;

to your ul#menu li a.active styling.

Now you might see it all go a little wrong when you do that, this is because you need to set some float to your SPAN’s, so add:

Code:

float:left;

to your span.active_left and span.active_right :)

That should sort that problem.

2. the active background effect is not seen fully …

I think you mean the background effect/image of the menu hover? If so again its because the <a> is classed as inline, and you need it to be a block reaching the full height of your menu. So find your ul#menu li a:hover and set:

Code:

display:block;
height:36px;

and I think that should pretty much do it :)

[nidhins]

ok thanks buddy…now the css is working fine…..

please take a look at the site…

i used the "moving boxes" from css- tricks in this page…its ok in ie but doeant show up in firefox…..

[Rob MacKay]

sorry dude – im having serious net connection problems atm lol So im not much help right now, will be ok on friday :D

[sathish]

Thanks for the display: inline-block; thing. I didn’t know that.

[nidhins]

sorryy…..i forgot to update the page..now i have done it…please check now… :)

[Author]

Posts