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......
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
#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
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...
thanks for the reply..surely learned some great tricks...
please take a look @ the page now 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......
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:
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:
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:
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......
Thakns in advance
Nidhin
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
#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:
now for your li do this
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
please take a look @ the page now 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......
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:
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:
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:
and I think that should pretty much do it :)
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.....