problem with over-riding a style decalration

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
garry27
Forum Commoner
Posts: 90
Joined: Sat Oct 14, 2006 1:50 pm

problem with over-riding a style decalration

Post by garry27 »

i've got this page which displays the login box properly in firefox but not in ie.
the right column is referenced by an id as are the child elements contained within this div.

when i try to override the styles that are inheritted, as in the case of the box for the login dive, IE ignores these styles and uses the #index-right-coln div styles instead of the new id i've declared for thelogin box.

here's the link: http://www.nl-webspace.co.uk/~unn_p921847/s2/

is this some sort of bug with IE and is there a work around?

TIA
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post by califdon »

It would help if you would describe what you are trying to do. I do see some difference in IE and FF, primarily a horizontal line and a copyright 2007 statement.
garry27
Forum Commoner
Posts: 90
Joined: Sat Oct 14, 2006 1:50 pm

Post by garry27 »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


i want to give #login-box1 its own styles. separate from the ones that are been cascaded by #index-right-coln. unfortunately the login div (#login-box1) is inheriting the div styles from #index-right-coln:

[syntax="css"]#index-right-coln div {	  /* bordered box */
  margin: 0 10px 10px 10px;
  color: #000000;
  background-color: #FFE6CC;
  border: 1px solid #FF4C29;
  font-family: arial, Helvetica, sans-serif;
  	
}
instead of over-ruling them with it's own styles:

Code: Select all

#login-box1{  /*box*/
  font-family: Verdana, Helvetica, sans-serif; 
  margin: 0 10px 10px 10px;
  color: #000000;
  background-color: #ffffff;	
  border: 1px solid #000099;		
}
incidently, all tags that cascade down from #login-box1 adopt their own styles and over rule old ones, which is a bit odd.

in my firefox browser, the login box shows up with the same styles as the other boxes in the right hand column:

http://www.nl-webspace.co.uk/~unn_p921847/s2/


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Sounds like the result of a typo. You might have typed the id incorrectly, closed the div tage too early, or not at all. But it sounds like a typo to me.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

It's not a typo.. it's the specificity rules... i won't get into detail other than to suggest the reading of this link: http://www.htmldog.com/guides/cssadvanced/specificity/
garry27
Forum Commoner
Posts: 90
Joined: Sat Oct 14, 2006 1:50 pm

Post by garry27 »

thanks, guys.

i'll give that specifics rule another read.
Post Reply