Jump to content

Background-color Being Ignored B Some Browsers


eidam655
 Share

Recommended Posts

hello,i have a website http://www.gjh.sk/~5ambrus/adifthe issue i am experiencing is that in Firefox, Chrome and Safari the background-color set on the menu items, which show themselves after you hover your mouse on the Archtecture item, is not displayed. in IE6/8 and Opera, the background-color is set. also, the 'hiding' of the backround color makes the menu unusable, as it loses focus after you go on the first or fourth item.are there any ideas how to solve this problem? or, even better, are there any workarounds existing?thanks for answersPS: the CSS itself http://www.gjh.sk/~5ambrus/adif/index_style.css

Link to comment
Share on other sites

You're changing those anchors to block-level items. They may need a height set explicitly. Even a line-height definition might do it, I'm not sure about that. Usually when a background doesn't show up, it's because the browser thinks it has a height of 0.

Link to comment
Share on other sites

hello,if you tried refreshing the page and the CSS file now you would see that even when i set the anchors to inline and set specific height for both <li> and <a> items, the problem remains

Link to comment
Share on other sites

so,i have played around a bit with the issue. the links have been updated again the relevant CSS code which ensured the change is

#navigation ul li#tvorba ul li a {					/*overriting inherited properties from #navigation ul li#tvorba a */					position:relative;					top: 0%;					right: 0%;					overflow:visible; /* this is a must to see the text */					color : black;					font-weight : bold;					text-decoration : none;					border-bottom : 1px solid black;					padding : 0 0.5em;					display:inline;					background-image: none;/**/					background-color: #007e00;				}

now the element's background color IS being shown. the only problem is that it disappears again when set to display:block; OR float:left; width:100%; is applied to this code.any ideas what can be wrong?

Link to comment
Share on other sites

problem solved entirely,final code:

#navigation ul li#tvorba ul li{				overflow:visible;					float:left;/**/					display : block;					position : relative;					margin-top: 0px; /* 1.35em */					border-bottom : 1px solid white;					width: 11em;					height:20px;/**/					background-color: #007e00;/**/				}				#navigation ul li#tvorba ul li a {					/*overriting inherited properties from #navigation ul li#tvorba a */					position:relative;					top: 0%;					right: 0%;					overflow:visible; /* this is a must to see the text */					color : white;					text-decoration : none;					padding : 0 0.5em;					display:inline;					background-image: none;/**/				}

have a nice day :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...