Gladly!
Initially my menu was set up using embedded CSS (I'm a beginner with CSS) as shown here:
Code:
<head>
<style type="text/css" media="screen">
/**************** menu coding *****************/
#menu {
width: 12em;
background: #eee;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
So, my layout is a vertical pop-out menu using the li and ul tags. After doing more research about CSS I decided that I wanted to link a separate CSS document to each HTML document, so that browsers would cache the CSS and I wouldn't have to scroll through so much code to get to things I wanted to edit on each page (since the website is a work in progress). I guess I should mention that I'm a self-taught beginner with CSS through the W3C website and other various resources. I have been testing how the website displayed on IE, Firefox, and Google Chrome (my default browser).
Anyway, I thought it would be as simple as taking out the CSS code and pasting it into another document but I ran into one problem - I had three style tags in my head section! One was the main style tag with all of the code for the menu, the other two were IE specific tags for the menu because some versions of IE didnt support some of the code I had embedded. I had read somewhere that you can link multiple CSS files to an HTML document, and I tried breaking up the main style tag and both IE tags into separate .css files, but when I saved the changes and viewed the updated page (with the three .css files linked), the text on the menu got incredibly small and the menu boxes got way too big. I thought there was something wrong with the code.
Here is the way I thought it should have looked:
Code:
<head>
<link rel=stylesheet href="style.css" title="HotSun" type="text/css" media="screen">
<link rel=stylesheet href="ie.css" title="HotSun" type="text/css" media="screen">
<link rel=stylesheet href="ie7.css" title="HotSun" type="text/css" media="screen">
</head>
So I did more research on it, found this site and posted my question, then tried a different search query on this site. THEN I had a conversation with my dad who is somewhat of a "techie" but all of this code I am doing was way over his head. He offered the suggestion, "Well, can you link AND embed the CSS code?" GENIUS! I came back and looked up whether I could do both (it is possible) and lo and behold, my menu works now! I embedded the IE specific CSS code into the page and linked to the main menu code.
Here is the head section that now works just as it should:
Code:
<head>
<link rel=stylesheet href="style.css" title="HotSun" type="text/css" media="screen">
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
I'm still not sure how to correctly link multiple CSS files to one HTML document, but my problem is solved for now. The entire site has a lot of work that needs to be done to it, I'm just glad to have gotten that out of the way.
By the way, for anyone else who's teaching themselves CSS, the W3C website is
completely invaluable!
Dev Shed Forums Sponsor:
June 30th, 2009, 05:50 PM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
