kwdrysdale Posted November 24, 2007 Share Posted November 24, 2007 Something strange is happening in my current attempt to use CSS pop out menus. I can make the simple design work when it is just by itself, but as soon as I take the CSS file and the html and place it in the webpage, it doesn't display everything properly. The big issues are the standard h2/ul/li tags. They don't act properly while inside the "menu" div. Is there a simple way to ensure that the menu style sheet will take priority over any other style sheets? I am using external files. I define the menu h2 tag like this: #menu h2{...style info...} Kind of lost trying to figure out why it won't work on my site. It is only inside the body tag, and one other div tag (which doesn't define h2/ul/li tags). Hopefully I am making sense - I'm a bit new to CSS terms. Any ideas?? Thanks Kevin Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted November 24, 2007 Share Posted November 24, 2007 CSS will only define the style of content that is in the body of your html/xhtml page. You can set the media type of the external style sheet; that may help with your issue. Like This: <link rel="stylesheet" type="text/css" media="screen"/> or <style" type="text/css" media="screen"/> </style> Quote Link to comment Share on other sites More sharing options...
kwdrysdale Posted November 24, 2007 Author Share Posted November 24, 2007 The styles are inside the body tag, and I was already calling the external stylesheet in that format. My head is a little clearer now, so I'll post with a bit more detail. It kind of seems like these "common" tags have been defined somewhere else, but I can not find them, or how they would be effecting anything since I have specific styles defined for them inside the menu id. Here is the code I am using up until the flaws start: <!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=iso-8859-1" /> <title>SRM Church Page</title> <meta name="description" content="PageDescription:1_Here" /> <meta name="keywords" content="PageKeywords:1_Here" /> <link rel="stylesheet" href="../includes/menuv.css" type="text/css" media="screen"/> <link rel="stylesheet" href="../includes/styles.css" type="text/css" media="all" /> <link rel="stylesheet" href="../includes/login.css" type="text/css" media="all" /> <link rel="stylesheet" href="../includes/sIFR-screen.css" type="text/css" media="screen" /> <link rel="stylesheet" href="../includes/sIFR-print.css" type="text/css" media="print" /> <script src="../includes/sifr.js" type="text/javascript"></script> <script src="../includes/sifr-addons.js" type="text/javascript"></script> <? /* <script src="../includes/jscript.js" type="text/javascript"></script> */ ?> <style type="text/css"> <!-- .style3 { font-size: 12px} .style4 { font-family: Amery; font-size: 14px; color: #0000FF; } body,td,th { color: #FFFFFF; } body { background-color: #FF3300; background-image: url(../images/background.jpg); background-repeat: repeat; } .style5 { color: #FF6600; font-weight: bold; font-style: italic; font-family: Amery; font-size: larger; text-align: center; } .style10 { font-size: 24px; font-family: "Times New Roman", Times, serif; font-weight: bold; } .style16 { font-family: Amery; font-size: larger; } .style28 { font-family: Amery; font-size: 36px; color: #FF6600; } --> </style> <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> <div id="Page"> <img src="../images/flashBackground.jpg" width="710" height="97" /> <span class="style5">The Transformation of Christ's Glorious Church has Begun ... Enter in and Enjoy the Journey!</span> <div id="Date"> <p> <script type="text/javascript">document.write(getDate()); </script> </p> </div> <div id="menu"> <ul> <li><h2><a href="../index.html">SRM Home Page</a></h2></li> </ul> ....more menu options... if I copy the #menu h2 style info and make it .menu_title I can succesfully use: <li><span class="menu_title"><a href="../index.html">SRM Home Page</a></span></li> and it displays properly. body is defined as: html, body { margin: 0; padding: 0; width: 100%; text-align: center; background: #a18753 url(../images/pageBackground.gif) repeat-x; font: 12px Arial, Helvetica, sans-serif; page is defined as: margin: 0 auto; width: 710px; background-color: White; border-top: 20px #000000 solid; So...no defining of h2/ul/li tags before my menu div which has all that stuff defined within the css file. Any guesses why these tags seem to be ignored? Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted November 24, 2007 Share Posted November 24, 2007 you might want to start here: <link rel="stylesheet" href="../includes/menuv.css" type="text/css" media="screen"/> <link rel="stylesheet" href="../includes/styles.css" type="text/css" media="all" /> <link rel="stylesheet" href="../includes/login.css" type="text/css" media="all" /> <link rel="stylesheet" href="../includes/sIFR-screen.css" type="text/css" media="screen" /> you have two stylesheet's media set to "screen" and two set to "all"; you probably should look through them to see if you have the style set to something else. also, I would just create one stylesheet for each media type. if you have a style defined twice; with different style variations; the browser probably is getting confused (figuratively speaking) with the style discrepancies. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.