• 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?

SOMEONE PLEASE HELP!

Kabigon

Yes We Can!! Obama Wins!
http://kabicorp.com

Can anyone tell me why this layout looks great everywhere but refuses to work in Internet Explorer? THis wouldn't be a problem but almost all my friends use IE and I don't want them to visit this site seeing that. Please.

Can you tell me what I can do to fix this layout?
 
You'll have to start by being more specific about how it "refuses to work" in Internet Explorer. I don't have Internet Explorer on this computer, for example, and therefore can't see for myself; beyond that, you didn't specify what version of Internet Explorer causes problems, and different issues may occur depending on what version your friends are using.

So, what about the layout is breaking down, specifically (a screenshot might be nice), and what browser version(s) is it occurring in?
 
It works?

If you want to you can read the rest.


This sounds suspiciously like an advertisement...

Can anyone tell me why this layout looks great everywhere but refuses to work in Internet Explorer?

No.

This wouldn't be a problem but almost all my friends use IE and I don't want them to visit this site seeing that. Please.

Seeing what.

Can you tell me what I can do to fix this layout?

No.
 
The grey backgrounds on some of the images are IE6 failing at alpha transparency. Nothing you can do to fix that.

Can anyone tell me why this layout looks great everywhere but refuses to work in Internet Explorer?

Because IE sucks.

Can you tell me what I can do to fix this layout?

Nothing, it isn't broken.
 
Oh sorry. well here are some pictures taken in IE 6.

http://i134.photobucket.com/albums/q106/html_html/problem1.jpg

This problem has that normally transparent image have a gray background and secondly, the dropdown menu doesn't work.

http://i134.photobucket.com/albums/q106/html_html/problem2.jpg

At the end of all the updates, where the disclaimer should be and stuff, al lof the updates seem to reappear. After the second portion does the disclaimer actually appear.

http://i134.photobucket.com/albums/q106/html_html/problem3.jpg

Thirdly, the Munchlax <hr> tag seems to not want to work.

Again, all these problems aren't there in Firefox, Safari, and Google Chrome. It seems to only want to appear in IE, the gayest browser alive.

Is there a way I can fix this since the majority of the population of the world only IE and nothing else. Damn Microsoft.
 
As opal said, the transparency is just the fact that older versions of IE fail at .pngs. Either ignore it and tell people to at least have the decency to update to a newer version of IE or switch to using .gifs if it bothers you that much.

I'm not sure what the other problems are and it would probably be easier to tell if we could see your CSS and stuff, although someone else might have a better idea than I do.
 
Code:
body, html 
{
	font: 0.9em Arial, Verdana, Helvetica, sans-serif;
	color: black;
	background: #53879E	url('images/background.png') repeat-x;
	padding: 0 1.5% 5px 1.5%;
	margin: 0;
}

img 
{
	border: 0;
	background: none;
}

a
{
	color: #000;
	text-decoration: underline;
}

a:hover
{
	text-decoration: none;
}

#ad 
{
	margin-bottom:10px ;
	text-align:center;
}

#header 
{
	height: 210px;
	background: url(images/header.png) repeat-x left;
	text-align:right;
}

#header a 
{
	font-size: 0;
	overflow: hidden;
	line-height: 0;
	width: 371px;
	height: 210px;
	right: 2.5%;
	background: url(images/banner.png) no-repeat left top;
	position: absolute;
}


#nav
{
	background: #103f57;
	border-left: 1px solid black;
	border-top: 1px solid black ;
	border-right: 1px solid black;
	border-bottom: 1px solid white;
	height: 40px;
	min-width: 875px;
	margin: 0;
	text-align: center;
}

#nav li
{
	list-style: none;
}

#nav li a
{
	display: block;
	height: 100%;
	margin: 0;
	overflow: hidden;
	padding: 0pt;
	text-decoration: none;
	text-indent: -500px;
	width: 100%;
}

#nav li ul li a
{
	text-indent: 0pt;
}

#nav-home 
{
	background:transparent url(images/nav-home.png) no-repeat;
	width: 140px;
	height: 40px;
}

#nav-pokemon 
{
	background:transparent url(images/nav-pokemon.png) no-repeat;
	width: 140px;
	height: 40px;
}

#nav-network 
{
	background:transparent url(images/nav-network.png) no-repeat;
	width: 140px;
	height: 40px;
}

#nav-games 
{
	background:transparent url(images/nav-games.png) no-repeat;
	width: 140px;
	height: 40px;
}

#nav-misc 
{
	background:transparent url(images/nav-misc.png) no-repeat;
	width: 140px;
	height: 40px;
}

#nav a 
{
	height: 40px;
	color: white;
	display: block;
	line-height:35px;
}

#nav a:hover
{
	/*background: white;*/
	color: black;
}

#nav li li a 
{
	line-height: 30px;
	height: 30px;
	color: black;
	text-decoration: none;
	display: block;
	font-weight: normal;
	/*padding: 0.2em 10px;*/
}

#nav li li a:hover 
{
	background: #EFEFEF;
	/*padding: 0.2em 5px;*/
	border-width: 0px 5px;
}

#nav li 
{
	float: left;
	position: relative;
	width: 175px;
	text-align: center;
	cursor: default;
}

#nav li ul {

	display: none;
	position: absolute;
	top: 100%;
	left: -999em;
	font-weight: normal;
	padding: 0;
	border: 3px solid #103F57;
}

#nav li > ul {
	top: auto;
	left: auto;
}

#nav li li 
{
	display: block;
	float: none;
	background-color: #FFF;
}

#nav li ul 
{
	position: absolute;
	left: -999em
}

#nav li ul ul 
{
	z-index: 20px;
	margin: -2.3em 0 0 13.7em;
}

#nav li:hover ul ul, #nav li.sfhover ul ul 
{
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul 
{
	left: -2px;
	display: block;
}

#subnav
{
	background: #103f57;
	padding: 7px;
	margin: 0;
	border-right: 1px solid black;
	border-left: 1px solid black;
	line-height: 1.5em;
}

#subnav li 
{
	display: inline;
	margin: 0;
	padding: 0;
}

#subnav li + li 
{
	border-left: 1px solid #FFF;
}

#subnav a 
{
	color: white;
	background: none;
	text-decoration: none;
	padding: 0 10px 0 10px;
}

* html #subnav
{
	padding-left: 19px;
}

* html #subnav li
{
	border-left: 1px solid #FFF;
	padding: 2px 10px 0 10px;
	margin: 0 10px 0 -10px;
}

* html #subnav li
{
	display: block;
	float: left;
}

* html #subnav a:link
{	
	padding:0 ;
	position:relative;
	top:-1px;
}

#subnav a:hover 
{
	text-decoration: underline;
}

#footer 
{
	padding: 10px 5px 0 5px;
	font-size: 0.8em;
	text-align: center;
	color: white;
}

#content 
{
	padding: 20px;
	background-color: white;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
}

/* Hides from IE5-mac \*/
* html div {height: 1%;}
* html h1 {height: 1%;}
* html ul {height: 1%;}
* html dl {height: 1%;}
/* End hide from IE5-mac */


hr
{
	background: url('images/hr.png') no-repeat;
	border: none;
	margin: 0;
	height: 30px;
	width: 80%
}

dt 
{
 	font-weight: bold ;
 	margin: .3em 0;
}

h1
{
	font-family: Verdana, Trebuchet, Arial, Sans-serif;
	font-size: 1.4em;
	letter-spacing: 1px;
	font-variant: small-caps;
	font-weight: bold;
	height: 59px;
	line-height: normal;
	margin: 0pt 0pt 1em;
	white-space: nowrap;
}

h1 span
{
	display: block;
	height: 59px;
	top: 7px;
}

h1 span span 
{
	background: transparent url('images/h1bg.png') repeat-x center;
	color: white;
	height: 59px;
	line-height: 75px;
	padding-left: 10px;
}

h2 
{
	 font: bold 1.30em Verdana;
	 padding: 7px;
	 color: #FFF;
	 border: 1px solid #11455E;
	 background: #54889F url('images/h2.png') no-repeat top left;
	 text-indent: 3em;
}

h3 
{
	color: black;
	font-family: Verdana;
	font-size: 1.20em;
	border-bottom: 1px dotted #000;
}

h4 
{
	font-family: Verdana;
	font-size: 1em;
	text-decoration: underline;
}
 
Well, the dropdowns don't work in IE6 because you don't have the JavaScript that makes it work in IE pre-7. The Suckerfish Dropdowns information provides the necessary code:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

You can throw it in the <head> or an external file.

I don't have the time to try and figure out the other problems, but I was wondering--why are you commenting out some of your coding CSS (e.g. /*padding: 0.2em 5px;*/)?
 
Well, the dropdowns don't work in IE6 because you don't have the JavaScript that makes it work in IE pre-7. The Suckerfish Dropdowns information provides the necessary code:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

You can throw it in the <head> or an external file.

I don't have the time to try and figure out the other problems, but I was wondering--why are you commenting out some of your coding CSS (e.g. /*padding: 0.2em 5px;*/)?

What do you mean?

Also the code provided didn't seem to do the trick. All it did was add part of the code above the banner in IE for some reason. Or is it only supposed to work IE 6?
 
Last edited:
That's because you need to tell the browser that it's Javascript. Read the article about the dropdowns; don't just copy and paste the code expecting it to work.
 
What do you mean?

Also the code provided didn't seem to do the trick. All it did was add part of the code above the banner in IE for some reason. Or is it only supposed to work IE 6?
Butterfree got the second part; as for the first, do you mean what did I mean by:

I don't have the time to try and figure out the other problems, but I was wondering--why are you commenting out some of your coding CSS (e.g. /*padding: 0.2em 5px;*/)?

If so, I was talking about the way that some of the statements in your CSS are surrounded by comment indicators, /*like this*/. Unless you're doing something fancy that I don't know about, all that means is that the browser is ignoring some of the sections of the code that you have because they're marked like comments. Thus, I was wondering why you had those commented-out statements in there at all--what they were for.
 
Back
Top Bottom