SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting IE to ignore specific CSS code

    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.
    Last edited by stephenTMS; May 12, 2007 at 06:04.

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    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:

    Code:
    /*Main menu*/
    .main_menu_all {
    	width: 250px;
    	height: 100&#37;;
    	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

  4. #4
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I already edited the first post which now includes the link to the page.

    Thanks.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •