By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,074 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

CSS Problem !!!

100+
P: 150
I'm tired from this page any one can see what is wrong in this page please i test it in ie and mozila firefox work's fine except Opera why !!!!!!!!!!!!!!!!!!

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #333;
}
#border {
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
width: 990px;
}

#banner {
background-color: #3e3e3e;
border: solid 1px #333;
}
#banner #user {
color: #FFF;
background-color: #1f1f1f;
font-size: 10px;
padding: 8px;
margin: 50px 20px 0px 0px;
float:right;
display:inline;
}
#menus {
background-color: #3B3B3B;
font-size: 12px;
cursor: default;
}
.Categories {
background-color: #353535;
color: #FFF;
display: inline;
position: relative;
height: 20px;
width: 150px;
top: 0px;
right: 0px;
margin: 5px;
padding: 9px;
}
.Categories:hover{
color: #333;
background-color: #FFCC00;
}
.Categories .sub_categories {
position: absolute;
top: 100%;
left: 0px;
background-color: #FFCC00;
display:none;
width: 600px;
padding: 18px;
}
.Categories:hover .sub_categories{
display: inline;
}
.Categories .sub_categories a {
color: #FFF;
text-decoration: none;
padding: 7px;
}
.Categories .sub_categories a:hover {
background-color: #FF9900;
}
#border #main {
background-color: #FFF;
padding: 20px;
color: #666;
}
</style>
</head>
<body>
<div id="border">
<div id="banner">
<div id="user">Welcome Smartic, Logout Inbox(52)</div>
<img src="Logo.png" alt="Smartic" width="180" height="121" /></div>
<div id="menus">
<div class="Categories">Categories
<div class="sub_categories"><a href="#">Computers</a><a href="#">Montiers</a><a href="#">Mobiles</a><a href="#">Camers</a><a href="#">Books</a><a href="#">Electronics</a><a href="#">Video Games</a></div>
</div>
<div class="Categories">My Profile</div>
<div class="Categories">My Friends</div>
<div class="Categories">Sellers</div>
<div class="Categories">Buyers</div>
</div>
<div id="main"></div>
</div>
</body>
</html>
[/HTML]
Feb 21 '08 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
What doesn't work? They look the same to me.
Feb 21 '08 #2

100+
P: 150
the "sub_categories" taking right by 5px in opera
Feb 21 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
I don't see any difference between Opera, Firefox and IE.
Feb 21 '08 #4

100+
P: 150
ok thank you for your help
Apr 7 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.