[BetaWar]

Okay, I am in the process of making a skin for a site I am planning on starting up. The only problem is that I can't get the skin to look the same between the browser (positioning problems).

IE 6 and 7 display correctly (well, IE 6 displays as correctly as possible given the .png transparency issues it had, but other than that is it right).

Mozilla 1.5
Firefox .5
Firefox 3
Chrome
and probably most of the others have issues with the skin though.

Here is the current code I am using:

<style>
body{
  text-align: center;
  margin: 0px;
  background: url(skin/bg_01.png) center center #eee;
}


div.outerContainer{
  width: 100%;
  min-height: 100%;
  padding: 0px;
  margin: 0px;
  background: url(skin/bg_bottom_01.png) bottom center repeat-x transparent;
}
div.innerContainer{
  width: 100%;
  min-height: 100%;
  padding: 0px;
  margin: 0px;
  background: url(skin/bg_bar_01.png) center 60 repeat-x transparent;
}
div.mainContainer{
  margin: 0px auto;
  text-align: left;
  width: 760px;
}


div.topBar{
  margin: 0px;
}
div.topBar span.topLeftCorner{
  padding: 0px;
  margin: 0px;
  float: left;
  width: 32px;
  height: 60px;
  background: url(skin/bg_top_left_corner_01.png) top right no-repeat transparent;
}
div.topBar span.topRightCorner{
  padding: 0px;
  margin: 0px;
  float: left;
  width: 32px;
  height: 60px;
  background: url(skin/bg_top_right_corner_01.png) top left no-repeat transparent;
}
div.topBar span.top{
  padding: 30px 0px 5px 0px;
  margin: 0px;
  float: left;
  text-align: right;
  height: 60px;
  width: 696px;
  background: url(skin/bg_top_wall_01.png) top center repeat-x transparent;
}


div.content{
  margin: 0px;
  padding: 0px 15px 0px 15px;
  background: url(skin/bg_content_01.png) top left repeat-y transparent;
}


div.banner{
  width: 100%;
  height: 200px;
  max-height: 35px;
  background: url(skin/bg_banner_01.png) center left no-repeat transparent;
  padding: 160px 10px 5px 10px;
  margin: 0px;
}
div.banner a{
  font-weight: bold;
  text-decoration: none;
  color: #666;
}
div.banner a span.left{
  float: left;
  height: 30px;
  width: 5px;
  background: transparent;
}
div.banner a span.right{
  float: left;
  height: 30px;
  width: 5px;
  background:  transparent;
}
div.banner a span.center{
  float: left;
  height: 30px;
  padding-top: 5px;
  background:  transparent;
}
div.banner a:hover{
  text-decoration: none;
  font-weight: bold;
  color: #000;
}
div.banner a:hover span.left{
  float: left;
  height: 30px;
  width: 5px;
  background: url(skin/bg_navbar_left_01.png) center right no-repeat transparent;
}
div.banner a:hover span.right{
  float: left;
  height: 30px;
  width: 5px;
  background: url(skin/bg_navbar_right_01.png) center left no-repeat transparent;
}
div.banner a:hover span.center{
  float: left;
  padding-top: 5px;
  height: 30px;
  background: url(skin/bg_navbar_center_01.png) top center repeat-x transparent;
}


div.article{
  border: 1px solid #ccc;
  margin: 10px;
}
h1.title{
  margin: 0px;
  padding: 0px;
  font-size: 24px;
  color: #0099ff;
}
.postInfo{
  font-size: 16px;
  color: #666;
}
.date, .poster{
  color: #ff6600;
}


div.copyrightBar{
  margin: 0px;
  padding: 0px;
}
div.copyrightBar span.bottomLeftCorner{
  padding: 0px;
  margin: 0px;
  float: left;
  width: 32px;
  height: 60px;
  background: url(skin/bg_bottom_left_corner_01.png) top right no-repeat transparent;
}
div.copyrightBar span.bottomRightCorner{
  padding: 0px;
  margin: 0px;
  float: left;
  width: 32px;
  height: 60px;
  background: url(skin/bg_bottom_right_corner_01.png) top left no-repeat transparent;
}
div.copyrightBar span.bottom{
  padding: 10px 0px 0px 0px;
  font-weight: bold;
  margin: 0px;
  float: left;
  height: 60px;
  width: 696px;
  background: url(skin/bg_bottom_wall_01.png) top center repeat-x transparent;
}
</style>

<div class="outerContainer">
  <div class="innerContainer">
	<div class="mainContainer">

	  <div class="topBar">
		<span class="topLeftCorner">
		</span>
		<span class="top">
		  You are currenly logged in as: UserName
		</span>
		<span class="topRightCorner">
		</span>
	  </div>


	  <div class="content">
		<div class="banner">
		  <a href="#">
			<span class="left">
			</span>
			<span class="center">
			  Home
			</span>
			<span class="right">
			</span>
		  </a>
		  <a href="#">
			<span class="left">
			</span>
			<span class="center">
			  Forums
			</span>
			<span class="right">
			</span>
		  </a>
		  <a href="#">
			<span class="left">
			</span>
			<span class="center">
			  Galleries
			</span>
			<span class="right">
			</span>
		  </a>
		  <a href="#">
			<span class="left">
			</span>
			<span class="center">
			  About Us
			</span>
			<span class="right">
			</span>
		  </a>
		  <a href="#">
			<span class="left">
			</span>
			<span class="center">
			  Terms of Service
			</span>
			<span class="right">
			</span>
		  </a>
		</div>

		<div class="article">
		  <h1 class="title">
			Title Here...
		  </h1>
		  <span class="postInfo">
			Posted on 
			<span class="date">
			  01-27-2009</span>, by 
			<span class="poster">
			  BetaWar</span>.
			 (0) Comments
		  </span>
		  <br/>
		  Some content<br/>Some contentSome content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>
		</div>

		<div class="article">
		  <h1 class="title">
			Title Here...
		  </h1>
		  <span class="postInfo">
			Posted on 
			<span class="date">
			  01-27-2009</span>, by 
			<span class="poster">
			  BetaWar</span>.
			 (0) Comments
		  </span>
		  <br/>
		  Some content<br/>Some contentSome content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>
		</div>

		<div class="article">
		  <h1 class="title">
			Title Here...
		  </h1>
		  <span class="postInfo">
			Posted on 
			<span class="date">
			  01-27-2009</span>, by 
			<span class="poster">
			  BetaWar</span>.
			 (0) Comments
		  </span>
		  <br/>
		  Some content<br/>Some contentSome content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>
		</div>

		<div class="article">
		  <h1 class="title">
			Title Here...
		  </h1>
		  <span class="postInfo">
			Posted on 
			<span class="date">
			  01-27-2009</span>, by 
			<span class="poster">
			  BetaWar</span>.
			 (0) Comments
		  </span>
		  <br/>
		  Some content<br/>Some contentSome content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>
		</div>



		<br/>
	  </div>

	  <div class="copyrightBar">
		  <span class="bottomLeftCorner">
		  </span>
		  <span class="bottom">
			Copyright (©) ReigningStudios.com 2008, All Rights Reserved
		  </span>
		  <span class="bottomRightCorner">
		  </span>
	  </div>

	</div>
  </div>
</div>

Here is a link to the site for anyone who wants a live preview:
http://www.reigningg...s/rs/index.html

And here is an image (or series of them at lest) displaying the problems along with what I want it to look like (IE vs the other browsers). Each portion is labeled with the browse name that the shot was taken in in a red/black bold text.



And, finally here is an image of what the whole thing is supposed to look like (not taken from any browser, it is what I made originally as the entire skin and color stuff):


Thanks in advance for any and all help,
BetaWar

[fuzzylunkinz]

You designed your site around Internet Exploder (a version less than 8), which does not use correct CSS.

Solution: Use correct CSS and you should be fine.

I believe Windows XP has Internet Explorer 8 as an official upgrade now, too, which is CSS2 compliant.

I'd give you a more in-depth answer, but I don't have the time to plunge into your code right now.

[BetaWar]

Well, thanks for the response, but I am not going to just up and leave behind the IE 6 and 7 world. After all I want the site to be accessable to most people. IE 8 may be out, but that doesn't by any means mean that everyone will upgrade or even wants to. On my current computer I am using IE 6 (I also have Chrome and Mozilla 1.5), on my laptop IE 7, on my linux machine FF 3. The whole idea I am trying to get at is having something that most of the world can look at, not something that is browser specific.

[b.ihde]

Hi!!

As we know, this is a never ending question..

I would suggest to use different stylesheets for the different browsers..

What do you think about that?

regards

B.Ihde

[Wrighty52]

b.ihde, on 2 Feb, 2009 - 12:28 AM, said:

Hi!!

As we know, this is a never ending question..

I would suggest to use different stylesheets for the different browsers..

What do you think about that?

regards

B.Ihde

Yes & No. As far as possible stick it all within one StyleSheet, then simply use a conditional for Internet Explorer. I'd also recommend building with FireFox in mind, then adapt to Internet Explorer.

[gregwhitworth]

I design and develop every day and you ALWAYS develop with the browsers that adhere to the standards (Firefox, Opera, Safari), and then you use conditional comments <!--[if gte IE 5]>Something<![endif]--> only correcting the elements that need to be corrected (so, you don't copy an entire sheet - just the elements that need to be changed).

For more info and syntax:
http://msdn.microsof...512(VS.85).aspx

Hope that helps.

--

Greg

[fuzzylunkinz]

Yes, the way to go about it is to develop to the standards and then apply "hacks" to your code for browsers like IE. I don't suggest multiple stylesheets for different browsers - imagine changing them all for one thing!

As time goes on, you can remove the hacks as necessary.

[gregwhitworth]

NO! Never use hacks!! The difference is monumental between hacks and conditionals, conditionals are created by IE for this very reason - where as hacks are not supported by Microsoft and continue to be removed (I used to use hacks until IE fixed one of the hacks I was using and my site fell apart).

And you don't have to edit any more than if you were using hacks. If you do it the way that I said, you edit 1 style sheet to update all standard's compliant browsers, and you edit the style sheet for IE. The same as if you were using hacks. - Just one is supported by IE and the other isn't.

--

Greg

[fuzzylunkinz]

It's all the same to me, where not different from what it should be.

Another thing; if you're like me, you don't design things that don't work on different websites anyway (maybe I just lucked out?).

This post has been edited by fuzzylunkinz: 02 February 2009 - 01:53 PM

[gregwhitworth]

Well over time you should get the hang of the things that make IE wig out and design around them, but until you get there you should design and develop the proper way. It is the same thing that IE started off doing by not adhering to standards.

Also - 9 times out of 10 the issue lies with margins and padding since IE treats them differently from the gecko browsers. That is usually the only thing that I have to deal with from time to time.

This post has been edited by gregwhitworth: 02 February 2009 - 02:21 PM