4 Replies - 660 Views - Last Post: 19 April 2009 - 10:27 AM

#1 3xil3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 18-April 09

Web Design and Graphics

Posted 18 April 2009 - 11:25 PM

Hey everyone, This question has been running through my mind for a few weeks. I searched google and here to see if you guys/girls had it.
I just need to know, What script is used for making a Web Design and its Graphics look the same in multiple browsers, and How it's done.


Thanks in advance,
3xil3
Is This A Good Question/Topic? 0
  • +

Replies To: Web Design and Graphics

#2 Core  Icon User is offline

  • using System.Linq;
  • member icon

Reputation: 774
  • View blog
  • Posts: 5,097
  • Joined: 08-December 08

Re: Web Design and Graphics

Posted 18 April 2009 - 11:41 PM

Well, the graphics actually look the same in every browser. Another talk starts when it comes to the layout of the web page. To make sure your web page will look the same in the majority of web browsers, you will have to follow a set of standards when coding the layout.

These standards are established by the World Wide Web Consortium (W3C). For more information you can visit their web site:
http://www.w3.org/
Was This Post Helpful? 1
  • +
  • -

#3 3xil3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 18-April 09

Re: Web Design and Graphics

Posted 19 April 2009 - 12:31 AM

So, Basically, All I would have to do is use Valid HTML, CSS, and Any other code that I am going to use for my web design?
On another note, While we are still on this topic... Can you please explain what this code means?

<!--[if gte IE 7]>
<style type="text/css">.clearfix { display: inline-block; }
				div#todayPeople { display: inline-block; } 
				div.artistRank { float: left; margin-left: 1em; width: 70%; }
				ol.topTensList li { display: inline-block; }
				div#todayNews div#topNews,
				div#todayNews div#otherNews { margin-bottom: 0; } 
				div#todayPeople div#findUserWrap { margin-top: 1.5em; }
				div#account input#genderF,
				div#account input#genderM,
				div#account input#agree { background: none; border: none; }
				div.leftLgn { padding: 0; }
				div#today  { display: inline-block; }
				div#today div.tb { display: inline-block; }</style>
<![endif]-->



<!--[if lte IE 6]>
<style type="text/css">
				.clearfix { display: inline-block; }
				div.artistRank { margin-top: -1em; }

				div.b div div,
				div.tb div div, 
				div.bb div div{ height: 6px; margin: 0; font-size: 0; line-height: 0; border-left: solid 1px #A8A8A8; border-right: solid 1px #A8A8A8; }
				div.mb { padding:0.1em 0.5em; }
				div.tb { margin-bottom: -2px; }
				div.tb,
				div.tb div,
				div.bb,
				div.bb div,
				div.b, 
				div.b div { background: none;}
				div#account ul#loginTabs li a { display: block; padding: 0.5em 2em; margin: 0; }

				div#account input#genderF,
				div#account input#genderM,
				div#account input#agree { background: none; border: none; }
				div#todayPeople div#findUserWrap { margin-top: 1.5em; }
				div#todayPeople ul#peopleList li a img { width: 80px; }
				div#todayPeople ul#peopleList li h3 { padding-bottom: 0.4em; overflow:hidden; white-space: nowrap; height: 1em; }

				div#todayVideos div#otherVideos { margin-right: 0.5em; }
				div#todayVideos div#currentVideo { margin: 0 0.5em; }
				div#todayVideos div.rate { margin-right: 2px; }
				div#videoPlayerOverlay { background: url('http://cms.myspacecdn.com/cms/Splash_Assets/FeaturedVideoOverlay.gif'); }
					
				div#todayMusic { padding: 1em 0.5em 0.5em; }
				div#todayMusic div#otherArtists li img { width: 100px; height: 51px; }

				div#todayNews div#topNews,
				div#todayNews div#otherNews { margin-bottom: 0; }

				div.tb div div { margin: 0; }
				div.b div div { border: none; }
div#logIn input { width: 63%; }div.middle, div.mb, .afterTab { display: inline-block; }

				div.googleafc li,
				div#newMyspace div.description { display: inline; }
			

				div#today  { display: inline-block; }
				div#today div.tb { display: inline-block; }</style>
<![endif]-->



I was roaming through the Homepage source code on MySpace, and Found that. I wasn't sure what the whole reason for developer adding two different codes for IE 6/7. That source code is the whole reasoning behind my question.

Thanks for the help,
3xil3
Was This Post Helpful? 0
  • +
  • -

#4 dsherohman  Icon User is offline

  • Perl Parson
  • member icon

Reputation: 226
  • View blog
  • Posts: 654
  • Joined: 29-March 09

Re: Web Design and Graphics

Posted 19 April 2009 - 07:17 AM

View Post3xil3, on 19 Apr, 2009 - 07:31 AM, said:

So, Basically, All I would have to do is use Valid HTML, CSS, and Any other code that I am going to use for my web design?

In theory, yes.

In practice, as always, the world isn't quite that simple. Browsers have varying levels of compliance with the standards. There are also a few grey areas in the standards where it's not 100% clear what they mean and different browsers may interpret that ambiguity in different ways.

MSIE6 is particularly notorious for its "creative" interpretation of how things should be rendered and is old enough that it doesn't even claim to be standards-compliant by default - you have to assign a strict doctype to force it into "standards-compliant mode". Even then, it tends to require a bit of IE6-specific styling to get it to behave itself, which is the reason for the chunks of CSS you were asking about.
Was This Post Helpful? 1
  • +
  • -

#5 3xil3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 18-April 09

Re: Web Design and Graphics

Posted 19 April 2009 - 10:27 AM

Thank-you, The both of you. That really helped me understand, a lot more than other sites.

Thanks again,
3xil3
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1