Getting IE to ignore specific CSS code

[stephenTMS]

Hello,

I am having a problem with IE and CSS working together, surprise surprise.

I was just wondering if there is a way to get IE to ignore certain CSS coding, through a conditional statement such if <!--[If IE]> or some other way.

As an example, lets say I have p.menu and p.menuexplorer

So, I was to use the p.menu properties for all browsers except IE which will be using p.menuexplorer.

Is there a way to accomplish this?


EDIT: The code is 2 posts below and here is a link to the page - Bluedip
Thanks.

[dc dalton]

You could do it by using an embedded style that over writes anything you have coded for those elements in your external style and the us a conditional statement.

My question would be though, why exactly do you want IE to ignore them. Why not just get them working properly in IE?

Some code here might help solve the issues.

[stephenTMS]

Yea, would be better to solve it. Well, my problem is that the main content section for my menu is "breaking away" from the top header section of the menu. It only happened when I added the borders, I could remove the borders but it looks wierd if without them.

HTML Code:

		<div class="main_content">
		
<!--End of Declare Main Content Area,
	Beginning of Menu section-->
	
			<div class="main_menu_all">
				<div class="main_menu_top_all">
					<div class="main_menu_top_left"></div>
						<div class="main_menu_top_textimg_left"></div>
						<div class="main_menu_top_textimg_repeat">
							<h1 class="menu">Menu</h1>
						</div>
						<div class="main_menu_top_textimg_right"></div>
					<div class="main_menu_top_right"></div>
				</div>
				<div class="main_menu_content_bg">
								
					<!--Main Menu Text-->
					<p class="spacer">&nbsp;</p> <!--Stop the menu buttons bunching at top-->
					<p class="menu">- Home</p>
					<p class="menu">- News</p>
					<p class="menu">- Forums</p>
					<p class="menu">- Spotlight</p>
					<p class="menu">- Servers</p>
					<p class="menu">- Competitions</p>
					<p class="menu">- Newsletter</p>
					<p class="menu">- Calender</p>
					<p class="menu">- Contact</p>
					<p class="bottom">- Clans</p> <!--Allows Spacing at bottom of menu-->
					<!--End Main Menu Text-->
					
					
				</div>

And the CSS Code for this section:

/*Main menu*/
.main_menu_all {
	width: 250px;
	height: 100%;
	float: left;
	margin-top: 10px;
}
/*Main menu top section*/
.main_menu_top_all {
	width: 250px;
	height: 23px;
	background-image: url(images/contentbox_top_repeat.jpg);
	background-repeat: repeat-x;
}
.main_menu_top_left {
	width: 8px;
	height: 23px;
	float: left;
	background-image: url(images/contentbox_top_left_end.gif);
	background-color: #FFFFFF;
}
.main_menu_top_right {
	width: 8px;
	height: 23px;
	float: right;
	background-image: url(images/contentbox_top_right_end.gif);
	background-color: #FFFFFF;
}
.main_menu_top_textimg_left {
	width: 19px;
	height: 23px;
	float: left;
	background-image: url(images/contentbox_top_midtext_left.jpg);
	margin-left: 5px;
}
.main_menu_top_textimg_repeat {
	width: 65px;
	height: 23px;
	float:left;
	background-image: url(images/contentbox_top_midtext_repeat.jpg);
	background-repeat: repeat-x;
}
	.main_menu_top_textimg_repeat h1.menu {
	font-family: Tahoma;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: text-bottom;
}
.main_menu_top_textimg_right {
	width: 19px;
	height: 23px;
	float: left;
	background-image: url(images/contentbox_top_midtext_right.jpg);
}
/*End of Main Menu top section*/

/*Main Menu Content Area*/
.main_menu_content_bg {
	width: 247px;
	height: 100%;
	background-image: url(images/content_grad.jpg);
	background-color: #cccccc;
	background-repeat: repeat-x;
	margin-left: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #006699;
	border-left-color: #006699;
}

/*Main Menu Text, Spacer and Bottom Item Text*/
.main_menu_content_bg p.spacer {
	font-family: Tahoma;
	font-size: 12px;
	color: #006699;
	vertical-align: bottom;
	padding-left: 35px;
	font-weight: bold;
	margin-top: 0px;
	padding-top: 0px;
}
.main_menu_content_bg p.menu {
	font-family: Tahoma;
	font-size: 12px;
	color: #006699;
	vertical-align: bottom;
	padding-left: 35px;
	font-weight: bold;
	padding-top: 0px;
	margin-top: 0px;
}
.main_menu_content_bg p.bottom {
	font-family: Tahoma;
	font-size: 12px;
	color: #006699;
	vertical-align: bottom;
	padding-left: 35px;
	font-weight: bold;
	margin-top: 0px;
	padding-bottom: 30px;
}

Thanks for the quick reply

[stephenTMS]

Hi, sorry for the double post but I have tried everything to fix this whilst im waiting on a reply but still no luck.

Does anyone know how to fix it?

If you need visual help, I can upload the website

Thanks

[Centauri]

If you could upload the site it would make things easier - what you have there needs some work semantically as well, so access to the images will enable verification of any changes.

[stephenTMS]

I already edited the first post which now includes the link to the page.

Thanks.

[Kravvitz]

My ad-blocker blocked the images in your header because they contain the word "banner" in their filenames.

To add to what Centauri said, you need to use an unordered list (<ul>) for the navigation [1]. You've got divitis and class-mania.[2]

For the h1.menu, try giving it display:inline to make the top bar for the navigation display correctly in IE6.

[1] These three articles explain how to style lists.
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listutorial/
http://www.webreference.com/programming/css_lists/

[2] I suggest you read these:
What is ’semantic mark-up’?
Semantic code: What? Why? How?
Div Mania

[Dr John]

You need a min width on the outermost div of 908 px, or it breaks on smaller viewports. A max width might help too. This may need a conditional statement for older IEs - there's an example here
http://www.pmob.co.uk/temp/min-max-3col.htm

I could remove the borders but it looks wierd if without them

If you put the borders on the actual menu items and not the menu container, you'd have a lot less divs in that area. Or use the listorial link above and the ideas there.