By Kato on

I have a site that I am playing around with and it looks great in FireFox, but IE displays it as complete and total garbage. Take a look at the site and you will see it...it's pretty obvious.

Any ideas of what I can do to correct this so that it displays correctly in both browsers? I'm using the Blue_Bars theme for 4.7 and modified some of the css, but not too much. Any help would be appreciated.

Site in question.... http://ngl.gamersides.com

⋅ Categories: Drupal 4.7.x

Comments

Steve Viscido’s picture

Steve Viscido commented

How's the base theme look in IE before your CSS mods? In other words... can we figure out if this problem was there before you made changes, or if your changes caused the problem?

S

Kato’s picture

Kato commented

I never looked at the base theme before the css changes so I honestly can't say if they did or not. I imagine so though. Before I made the changes, the right sidebar and the center content had a HUGE gap in there. Changed the margins around a bit and specified some sizes and it worked. I have an idea to try though and see if it works, but I'm not sure if it will or not.

I can post up the css file if needed or if it would help.

Tried a few more changes and none of them worked. I've left the css file where it's at for right now to see if someone can come up with something that will correct it.
--
http://nglofsalina.com

cklester’s picture

cklester commented

can you show the css? i was having problems myself recently and when i removed some width=100% items IE started behaving properly.

Kato’s picture

Kato commented

But this is the current style.css I am using.


/* Global Formatting */

body {	
	background: #000000;
	height: 100%;
	text-align: center;
	font-family: Verdana;
	font-size: 10px;
	color: #E6E6DA;
}

a:link {
	color: #E3EDEC;
}

a:visited {
	color: #E3EDEC;
}

a:hover {
	color: #cd6600;
}

a:active {
	color: #cd6600;
}

/* This bit makes the content be centered in both IE and FF */

#container {
	background-color: #3E4883;
	width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* Misc Formatting */

.code {
	color: #000000;
	background-color: #F0F0F0;
	border-left: medium double #154ead;
	font-size: 10pt;
	font-family: "Courier New", Courier, mono;
	margin: 10px;
	padding-left: 1em;
}
blockquote {
	border-top: 1px solid #154ead;
	border-bottom: 1px solid #154ead;
	font-size: 10pt;
	margin: 10px;
	padding-left: 1em;
}
/* Header Formatting */

#header {
	padding: 0px;
	margin-bottom: 0px;
}
#header h1 {
	font-weight: bold;
	font-size: 30px;
	padding: 0px;
	margin: 0px;
}
p#subtext {
	border-bottom: 3px solid #154ead;
	padding: 0px;
	margin: 0px;
}

/* Content Formatting */

#content {
	background-color: #333C59;
	padding: 0px 5px 0px 5px;
	margin: 0px 5px 0 5px;
    float: left;
	width: 525px;
	overflow: hidden;
}

.links {
	text-align: right;
	border-top: 1px solid #154ead;
}
#content .node h2 {
	background-color: #1C2234;
	width: 525px;
	margin: 0px 0px 0px -5px;
	padding: 5px;
}
#mission {
	padding: 12px;
	background-color: #f9f9f9;
}
#content .node h2 a {
	font-size: 14px;
	border-bottom: 0px;
	font-weight: normal;
	text-decoration: none;
}
.title {
	background-color: #1C2234;
	width: 100%;
	font-weight: normal;
	margin: 0px 0px 0px -5px;
	padding: 5px;
}

div.dashboard-panel-head {
	background-color: #154ead;
	color: #FFFFFF;
	font-weight: bold;
}

/* Right Sidebar Formatting */
#right {
	background-color: #333C59;
	float: right;
	width: 200px;
	padding: 0px 5px 5px 5px;
	margin: 0px 5px 0px 0px;
}

/* Menu Formatting */
#right ul {
	margin: 0px;
	padding: 0px;
}
#right ul li {
	margin: 0px;
	padding: 0px;
	list-style-image: none;
	list-style-type: none;
}
#right ul li a {
	margin: 0px;
	padding: 0px;
	text-transform: capitalize;
	display: block;
}
#right ul li a:hover {
	color: #cd6600;
}
#right ul li a:link, #right ul li a:visited {
	margin: 0px;
	padding: 3px 3px 3px 10px;
}
#right ul li li a:link, #right ul li li a:visited {
	margin: 0px;
	padding-left: 25px;
}
#right ul li li li a:link, #right ul li li li a:visited {
	margin: 0px;
	padding-left: 40px;
}
/* Footer Formatting */

#footer {
	clear: both;
	padding: 5px 0px 0px 0px;
	margin-top: 0px;
	border-top: 0px solid #154ead;
	text-align: center;
}



tr.even, tr.odd {
  background-color: #eee;
  border-bottom: 1px solid #000000;
  }
  
td.active {
  background-color: #000000;
}

.breadcrumb {display: none;}

.calendar td.day-link {
  border: 0;
  background-color: #1C2234;
}

--
http://nglofsalina.com

Marc Bijl’s picture

Marc Bijl commented

Firefox and Internet Explorer handle the combination of width, margin and padding in a different way. This is often called the Box Model Problem. Didn't study your code extensively, but I guess that's where it all goes wrong.

So how to solve then? There's a hack called, indeed, the Box Model Hack. Do some googling and you'll defintely find some interesting pages. This is just one of them:
- http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41

Hope it will solve the issue.

___________________
discover new oceans
lose sight of the shore

Kato’s picture

Kato commented

That does seem to be what the issue is when looking at it and it makes perfectly good sense. IE is displaying those boxes at the fullest max width and they are colliding with each other. Interesting. I will try to look a little further in to this and see if I can get it to work. Otherwise, I've already made a box telling people to use FireFox or Opera and avoid IE. This part of the site doesn't get much traffic, so it won't matter much.

--
http://nglofsalina.com

patrickharris’s picture

patrickharris commented

And you could try and avoid the problem altogether by not adding padding to an element with a defined width ... instead add it to the element's parent or children if possible.