styles not working properly

kwdrysdale · 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

phpQuestioner · 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>

kwdrysdale · 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?

phpQuestioner · 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.

Sign In

styles not working properly

Recommended Posts

kwdrysdale

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

kwdrysdale

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information