• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

CSS Not Working With IE7

Shiny Grimer

Active member
Pronoun
she/her, they/them
www.crittercryptics.com/noahate_earthbound.shtml

In IE7, the text that says 'Diamond/Pearl/Platinum' spills outside the box - rather than going to a new line, it keeps on going and passes the menu. Should I put a line break there to force it to a new line, or is there a better solution?

I've been trying to get Duplighost style to get a Drop-Down menu that uses only CSS but I've only succeeded in partly messing up the rest of my layout and getting a headache. I did something like this: http://www.alistapart.com/articles/dropdowns but the text ends vertical and not horizontal (I copy/pasted it from the source and it ended up like that. Maybe I'm missing something overly obvious) . I want something like on that pretty example page where the categories are horizontal and when you hover over them, the first level shows up. I might even have a second level, but I don't care much about that right now.
Interestingly enough, in IE7, the drop down drops to the right of the text instead of the left. Is this going to be an annoyance?

Also, I added the ul id="nav" and changed the doctrine to XHTML since the drop-down wasn't working with HTML 4.01. Now the other styles are freaky. That is the only thing I've done to the HTML other than the script - the other two styles are untouched.

(By the way, I'm aware that in Duplighost style, I got the CSS straight from the source and it still has the comments. I'll get rid of that later when I figure out how to non-screwify my layout.)

Oh yeah, code and HTML and stuff.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Critter Cryptics</title>
<link rel="stylesheet" type="text/css" href="http://www.crittercryptics.com/shadow.css">

<link rel="alternate stylesheet" 
type="text/css" href="http://www.crittercryptics.com/shadow.css"
title="shadow" />

<link rel="alternate stylesheet" 
type="text/css" href="http://www.crittercryptics.com/duplighost.css"
title="duplighost" />

<link rel="alternate stylesheet" 
type="text/css" href="http://www.crittercryptics.com/giygas.css"
title="giygas" />

<script type="text/javascript" 
src="http://www.crittercryptics.com/styleswitcher.js"></script>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

//--><!]]></script>
</head>
<body>

<div id="container">

<div id="header" align="center">
</div>

<div id="leftmenu">
<ul id="leftmenu">
    <li><strong>Sitely</strong>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
</li>

<br>

<li><strong>General</strong>
  <ul>
    <li><a href="http://www.crittercryptics.com/collector's coins.shtml">Collector's Coins</a></li>
    <li><a href="http://www.crittercryptics.com/accesories_nintendo.shtml">Nintendo Stuff</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</li>

<br>

<li><strong>Pokemon (General and other games)</strong>
  <ul>
    <li><a href="http://www.crittercryptics.com/stadiums_pokemon.shtml">Stadium 1 and 2</a></li>
    <li><a href="http://www.crittercryptics.com/class_pokemon.shtml">Pokemon Classifications</a></li>
    <li><a href="http://www.crittercryptics.com/extras_pokemon.shtml">The Third Games</a></li>
    <li><a href="http://www.crittercryptics.com/events_pokemon.shtml">Pokemon Events</a></li>
  </ul>
</li>

<br>

<li><strong>Red/Blue/Yellow</strong>
  <ul>
    <li><a href="http://www.crittercryptics.com/glitches_pokemon.shtml">Glitches</a></li>
  </ul>
</li>

<br>

<li><strong>Gold/Silver/Crystal</strong>
  <ul>
    <li><a href="http://www.crittercryptics.com/free_pokemon.shtml">*Free* Pokemon</a></li>
    <li><a href="http://www.crittercryptics.com/radio_pokemon.shtml">Radio Ga-ga</a></li>
  </ul>
</li>

<br>

<li><strong>Ruby/Sapphire/Emerald</strong>
  <ul>
    <li><a href="http://www.crittercryptics.com/soot_pokemon.shtml">Soot and Glass</a></li>
  </ul>
</li>

<br>

<li><strong>Diamond/Pearl/Platinum</strong>
  <ul>
    <li><a href="http://www.crittercryptics.com/honey_pokemon.shtml">Surviving Sweet Honey</a></li>
  </ul>
</li>


<br>
<li><strong>EarthBound</strong>
  <ul>
     <li><a href="http://www.crittercryptics.com/darkside earthbound.shtml">Mother's Dark Side</a></li>
     <li><a href="http://www.crittercryptics.com/popculture_earthbound.shtml">Pop Culture Refs</a></li>
     <li><a href="http://www.crittercryptics.com/noahate_earthbound.shtml">Does NOA hate Mother?</a></li>
     <li><a href="http://www.crittercryptics.com/musicquiz_earthbound.shtml">Music Quiz</a></li>
     <li><a href="http://www.crittercryptics.com/motherost_earthbound.shtml">Mother OST</a></li>
     <li><a href="http://www.crittercryptics.com/challenges_earthbound.shtml">Challenges</a></li>
  </ul>
</li>



</ul>
</div>


<div id="content">
<p><script type="text/javascript" 
src="styleswitcher.js"></script>
<a href="#" 
onclick="setActiveStyleSheet('shadow'); 
return false;">Shadow Queen Style</a>

<a href="#" 
onclick="setActiveStyleSheet('duplighost'); 
return false;">Duplighost Style</a>

<a href="#" 
onclick="setActiveStyleSheet('giygas'); 
return false;">Giygas Style</a>
<br><br>

Code:
body {
color:#000000;
font-family:verdana, sans-serif;
font-size:8pt;
background:#FFFFFF;
margin:5;
padding:5;
}

a:link, a:visited {
text-decoration:underline;
color:#8866C0;
}

a:active {
text-decoration:underline;
color:#8C70BA;
}

img {
border:0px;
}

#header {
text-align:center;
height:150px;
width:700px;
background-image:url(http://img231.imageshack.us/img231/4121/shadowqueenbannercopy1js.png);
margin:auto;
}

#header img {
margin:auto;
}

#container {
position:relative;
width:100%;
}

#content {
margin-left:145px;
margin-right:145px;
padding:6px;
border:1px solid #6e1593;
clear: left;
}

#leftmenu {
position:absolute;
left:0;
top:0;
width:130px;
padding:5px;
border:1px solid #6e1593;
text-align:left;
background-image:url(http://www.dragonflycave.com/forums/imagehosting/3544778953393ed.png);
background-repeat:repeat-y
}

#leftmenu a:hover {
text-decoration:underline overline;
background-color:#342252;
color:#b087cd;
width:130px;
}

.quote {
border:1px solid #6e1593;
background-color:#b087cd;
color:#742ea4;
padding:5px;
}

h3 {
color:#d1a2e4;
}

ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
}

li { /* all list items */
	float: left;
	position: relative;
	width: 10em;
}

li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
}

#rightmenu ul {
list-style-type:none;
margin:0;
padding:0 5px;
}

#rightmenu a {
display:block !important;
width:180px;
}

#rightmenu {
padding:10;
padding-top:31px;
list-style-type:none;
position:absolute;
right:0;
top:0;
border:1px solid #6e1593;
width:130px;
background-image:url(http://www.dragonflycave.com/forums/imagehosting/3544778953393ed.png);
}

#rightmenu li {
margin:0;
padding:0;
}

#rightmenu li a img {
height:4;
width:0;
position:absolute;
top:0px;
right:18px;
}

#rightmenu li a:hover img {
height:31px;
width:88px;
}

#center {
text-align:center;
}

Help would really be appreciated. I know I'm just bothering people, but messing around with code has never been something that I appreciated/was good at doing and I'm bothered.
 
Re: My first browser problem! :D

<ul id="rightmenu">
<li><div id="center">Affiliates</div></li>
<br>
<br>
<li><a href="http://www.moonlightcaverns.com"><img src="http://i9.photobucket.com/albums/a69/Pocketmouse563/mc.jpg" alt="Moonlight Caverns">Moonlight Caverns</a></li>

<li><a href="http://www.salazardsden.co.uk"><img src="http://img.photobucket.com/albums/v367/mousemat12/Album2/SalsDenaff.jpg" alt="Salazard's Den">Salazard's Den</a></li>
<li><a href="http://www.eonlightvalley.net.tc"><img src="http://i7.photobucket.com/albums/y282/mewkat/eonlighttenraeon3.png" alt="Eonlight Valley">Eonlight Valley</a></li>
<li><a href="purplev.stick-figure.net"><img src="http://purplev.stick-figure.net/Pictures/pebutton.gif" alt="Purple Eevee">Purple Eevee</a></li>
<li><a href="http://www.suta-raito.com"><img src="http://img103.imageshack.us/img103/7056/srbuttontv9.png" alt="Suta-Raito">Suta-Raito</a></li>
<li><a href="http://kantonetwork.com/news.shtml"><img src="http://tinypic.com/ic309w.jpg" alt="Button made by Eon of http://www.freewebs.com/eonmaster.">Kanto Network</a>
<li><A href="http://www.pokeuniverse.amidal.com">~PokeUniverse~</A></li>
<li><a href="http://www.abpikachu.tripod.com"><img src="http://img64.imageshack.us/img64/8753/vfbutton2rv.jpg" alt="Viridian Forest">Viridian Forest</a></li>
<li><a href="http://www.trhq.co.nr"><img src=http://img71.imageshack.us/img71/1112/trbutton27fr0xi.jpg>Team Rocket's HQ</a></li>
<br>

<br>
<li><A href="http://www.crittercryptics.com/dnn/Sitely/AffiliatewithCritterCryptics/tabid/74/Default.aspx">Affiliate!</A></li></ul>

Are you sure it isn't that part?

Look at what it says.
 
Re: My first browser problem! :D

Oh, sorry, I forgot that it does not come with Dragonfree's layout (Even though I swore I saw that there..).

But upon further inspection, I believe the #container DIV should surround your #content DIV and not the entire layout as you have it set up currently. I'm not sure about your menu text popping out like that though. Firebug neglects any changes to your #leftmenu DIV.

As for your dropdowns, I'm not too sure. I didn't have much time to inspect most of your layout. But you may want to try looking through Dragonfree's Spectrum Style CSS for the drop-down menu basic CSS concept. I'd fetch this for you, but I'm too lazy to snatch from her stylesheet.
 
Re: My first browser problem! :D

@Forgotten: No, that part was always working fine. I left #rightmenu untouched (I haven't even editted right.txt in weeks).
Excuse my ignorance, but what do you mean by 'look at what is says'? I'm really off it today.

@Faltzer: #container just surrounding #content caused the other two menus to rise up and that's not fun. In the old forums, Butterfree said that #container was meant to surround the whole layout. I think I've fixed the menus now, or at least now they don't look as messed up as they did before.

Anyways, I got the drop-down to work on a test page, but IE7 still makes it be a fly-right. D< This wouldn't be much of a problem if it weren't for the fact that the link appears right over the category and is impossible to get to without making it disappear. Whatever. I'll mess around it and make something that works. Hopefully, it won't be much of a problem now.

The text is still spilling over in IE7 and I don't know how I made the text horizontal. I'm just going to try and change the test layout that's working so that it works with my current styles and stuff.

While I'm at it, is there a problem with my layout in FireFox/Mozilla? Other than messing up my drop-downs and making text go outside the boxes, it looks fine in IE7, and was always good in Opera.
 
Re: My first browser problem! :D

ARGH I HATE OTHER BROWSERS

If I had absolute power I'd make browsers other than Opera non-existant so that my layout wouldn't suck so much in other browsers. Oh, and so we don't have to worry about IE anymore. I guess I'll have to download FireFox after all. :/ It's been a hard day's night.
 
Re: My first browser problem! :D

Uh. For the most part, anything done in Opera/Firefox/Safari should work in the other two. You are doing something hardcore wrong if this does not hold.
 
Re: My first browser problem! :D

To me it looks like you did create a fixed border for the Content. Remember, if you're working on a 4:3 screen, keep in mind those who have 16:9 and vise-versa. Fixing the width of the content should fix your problem. I'd do it myself, but I'm far to lazy to interpret someone else's coding. :3
 
Re: My first browser problem! :D

How rare. My code works fine in Opera and Internet Explorer and yet it explodes in Firefox.

Code:
<link rel="stylesheet" type="text/css" href="http://www.crittercryptics.com/shadow.css">

This has been the source of my problems. First of all, my site loads extraordinarily slow in Firefox while IE and Opera load it relatively fast. When it does load, most of the styles work. Except for Togepi style (forget Duplighost style completely; it's a failed experiment), which for some reason has white text despite the CSS reading that it has black text. Also, the background is the same purple as in Shadow style. Why? Shouldn't it be grey? The links are the same light purple as Shadow style. Everything else works fine or can be fixed.

There's some fiddling I need to do for Internet Explorer and Firefox with the drop-down (and for Opera too I guess), but that's just messing around. I don't want one of the style I was seriously thinking about using to have half of another style's colors.
 
Last edited:
Back
Top Bottom