|
|
| web designing |
Expert:dexter
Hello, i have made one web page using html and css. i have also used gradient colors in my web page. the problem is that when i open my web page with IE it looks great. but when i open my web page with Mozilla Firefox and other browsers ,the gradient color disappears and menu(Home ,login etc.)looks ugly because they lose the space between them. i am sending html and css code:
please help me.
html code:
<html>
<head>
<title>About Us</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
</head>
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#005678', startColorstr='white', gradientType='0');">
<!-- Start of Page Header -->
<img src="Images/mainbg.png" height="144" width="1024"></img>
<div id="page_header"></br>
<font size="7" color="#857860">Aics</font></br>
<font face="Arial" size="3" color="black">Brings you the Latest</font>
</div>
<!-- End of Page Header -->
</br>
<!-- Start of Navigational Menu -->
<div id="search" style="width: 246px">
Search <input type="text" NAME ="text">
<input type="image" name="searchimg" src="Images/arrow.gif" id="searchimg"/>
</div>
<div id="nav_menu">
<li id="menu1"><a href="D:\Aics2\Home Page\Home Page.html"><span>Home</span></a></li>
<li id="menu2"><a href="#"><span>About Us</span></a></li>
<li id="menu3"><a href="https://email.secureserver.net/login.php"><span>Login</span></a></li>
<li id="menu4"><a href="D:\Aics2\Contacts\ContactPage.html"><span>Contacts</span></a></li>
<li id="menu5"><a href="D:\Aics2\Products\Aics Products page.html"><span>Products</span></a></li>
<li id="menu6"><a href="#"><span>Offers</span></a></li>
<li id="menu7"><a href="#"><span>Site Map</span></a></li>
</div>
<!-- End of Mavigational Menu -->
</body>
</html>
css code:
body
{
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:50px;
}
#search
{
color:lightblue;
margin-left:770px;
margin-top:-42px;
}
#page_header
{
margin-left:60px;
margin-top:-150px;
margin-right:0px;
}
#nav_menu
{
margin-left:430px;
margin-top: 18px;
padding-left: 0px;
float: center;
color: #b3a386;
text-align: center;/*Home login alignment in blocks*/
font-family:sans-serif;
}
#nav_menu a
{
color: black;/*Home Login text color #b3a386 Always*/
background: inherit;/*Home Login background color Always*/
}
#mav_menu a:hover
{
color: #857860;
background: inherit;
}
#nav_menu ul
{
width: 560px;
height: 20px;
overflow:hidden;
}
#nav_menu li
{
float: left;
border-width: 0px 0px 0px 0px;
border-color: #c1b7a5; /*Home Login border color*/
border-style: solid;
font-size: 15px;
}
#nav_menu li#menu3, #nav_menu li#menu6
{
border-right: none;
}
<!--Menu Style -->
#nav_menu li a
{
display: block;
width: 80px;/*Home Login Width*/
height:0px;/*Home Login background color height from bottom former --50*/
text-decoration: none;
}
#nav_menu li a:hover
{
color: #857860;/*On Mouse over Home Login Text color*/
background-color: #f4eee2;/*On Mouse over Home Login Background color*/
}
#nav_menu li a span
{
padding-top:0px;/*Home login top -space in blocks former --17*/
display: block;
}
|
| Answers |
| More Questions |
|
|
Post Answers
Ask Question
Facing Programming Problem?
|
|
|
|
|
