SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Which parts of the css need to change for IE?

    Hi everyone,

    I have built a website and have just tried to view it in Internet Explorer 6. The whole thing is stuffed up! There are a lot of things that are out of place so I can't just focus on fixing one thing.

    I am thinking about making a seperate stylesheet for IE and using a conditional comment to get IE to use this new stylesheet. My question is: Which parts of my css I do I need to change for the IE stylesheet?

    Here is the index page and css if anyone wants to see.

    Thanks,
    Paul

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it the DTD? Your DTD isn't on this list here: http://www.w3.org/QA/2002/04/valid-dtd-list.html
    Using an invalid DTD puts IE in quirks mode, which is bad.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Which parts of my css I do I need to change for the IE stylesheet?
    Virtually nothing apart from one hack. You just have to do it right in the first place

    Don't use the child selector as IE doesn't understand it.

    Don't put margins on the body and then use elements with 100% width as this will cause a scrollbar in some browsers and messes up the start positions for absolute elements.

    Give your button a width as it is pushing ie wide.

    Get rid of the voice family hacks as they are just breaking ie5 and you have them all wrong anyway (see faq on the broken box model).

    The only hack you need is to force "layout" on 'content (see faq on haslayout).

    Use margin-top instead of relative positioning as relative positioning will leave gaps where the elemnt was.

    Put your footer image in the background of the body as it is decoration only.

    Here is the updated code which works just as well in ie6 as it does in other browsers.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Language" content="en-gb" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <link rel="stylesheet" type="text/css" media="print" href="css/style.css" />
    <title>Metal Sculpture, Metal Art Sculpture, Model, Junk Art, Sci Fi Models, Fantasy Art :: weldArt</title>
    <meta name="description" content="weldArt is a retailer of metal sculptures referred to as junk art. weldArt has sci fi models of star war, alien, stargate, terminator, predator characters"/>
    <meta name="keywords" content="metal sculpture, metal art sculpture, model, junk art, sci fi, science fiction, sci fi models, fantasy art, star wars, alien, stargate, terminator, predator, weldArt"/>
    <link rel="icon" href="favicon.ico" />
    <link rel="SHORTCUT ICON" href="favicon.ico" />
    <style type="text/css">
    /*General Styles for body, headings, paragraphs and links*/
    html,body{margin:0;padding:0}
    body {
    	color:#333;
    	background: #76827B url(http://www.weldart.net.au/images/Gas_Mask_by_meatsmeier360px30trans.jpg) no-repeat left bottom; 
    	margin:0px;
    	padding:0px;
    	font: 11px verdana, arial, helvetica, sans-serif;
    }
    
    h1 {
    	margin:0px 0px 15px 0px;
    	padding:0px;
    	font-size: 28px;
    	font-weight:900;
     background-color: #D7E5E2;
    	color:#414D4C; /*ccc*/
    }
    
    h2 {
    	font:bold 12px/14px verdana, arial, helvetica, sans-serif;
    	margin:0px 0px 5px 0px;
    	padding:0px;
     color:#414D4C;
    }
    
    p {
    	font: 11px/20px verdana, arial, helvetica, sans-serif;
    	margin:0px 0px 16px 0px;
    	padding:0px;
    }
    a {
    	color:#09c;
    	font-size:11px;
    	font-family:verdana, arial, helvetica, sans-serif;
    	font-weight:600;
    	text-decoration:none;
    }
    a:link {color:#3E8EB7;}
    a:visited {color:#3E8EB7;}
    a:hover {color:#3B4A4A; text-decoration:underline;}
      
    
    /* content - the central area in each page */
    /* All the content boxes belong to the content class. */
    
    .content {
    	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    	width:auto;
    	min-width:368px; /*380*/	   
    	margin:154px 210px 20px 190px; /*margin values are: top right bottom left*/
    	background-color: #EAF2EE; /*white*/
    	z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    }
    /* mac hide force layout \*/
    * html .content{height:1%}
    /* end hide */
    
    .content h1,
    .content h2,
    .content h3,
    .content h4,
    .content p,
    .content table,
    .content form {
    		margin: 10px 10px 10px 10px;	   
    }
    .content h4 {
    		color: red;
    }
    
    /* Left Column */
    
    #navAlpha {
    	position:absolute;
     top: 174px;
    	left:20px;
    	background-color:#D4E2DE; /*eee*/
    	z-index:2;
    	width:150px;
    }
    #navAlpha ul {
    		list-style-type: none;
    		padding: 0px;
    								margin:0;
    }
    #navAlpha h1 {
     font:bold 12px/14px verdana, arial, helvetica, sans-serif;
     margin:0px 0px 5px 0px;
    	padding:2px;
     background-color: #546663;
     color: #FFFFFF;
    }
    #navAlpha h1,
    #navAlpha h2,
    #navAlpha h3,
    #navAlpha h4,
    #navAlpha p,
    #navAlpha ul,
    #navAlpha table {
    	margin: 10px 10px 10px 10px;
    }
    
    
    
    /* Right Column */
    		
    #navBeta {
    	position:absolute;
     top: 174px;
     right:20px;
    	background-color:#D4E2DE;
    	z-index:1;
    	width:168px;
    }
    #navBeta ul {
     list-style-type: none;
     padding: 0px;
    	margin:0;
    }
    #navBeta h1 {
     font:bold 12px/14px verdana, arial, helvetica, sans-serif;
    	margin:0px 0px 5px 0px;
    	padding:2px;
     background-color: #546663;
     color: #FFFFFF;
    }
    #navBeta h1,
    #navBeta h2,
    #navBeta h3,
    #navBeta h4,
    #navBeta p,
    #navBeta ul,
    #navBeta table {
    		margin: 10px 10px 10px 10px;	   
    }
    
    /* Header Navigation Bar */
    
    #navGamma {
    		position: absolute;
    		top: 120px;
    		left: 0px;
    		min-width: 800px;
    		width: 100%;
    		background-color: #374341;
    		color: #FFFFFF;
    		z-index: 1;
    }
    #navGamma ul {
    		list-style-type: none;
    		padding: 2px;
    		margin: 0px;
    } 
    #navGamma  ul li {
    		float: right;
    		margin-left: 10px;
    								display:inline;
    }
    #navGamma a:hover {
    		color: #FFFFFF;  
    }
    
    
    /* Header Title Images */
    
    #header {
    		position: absolute;
    		top: 0px;
    		left: 0px;
    		min-width: 800px;
    		width: 100%;
    		background-image: url(http://www.weldart.net.au/images/weldArtTitleCentre.jpg);
    		background-repeat: repeat-x;
    		z-index: 1;
    }
    #header .left, #footer .left { float:left; }
    #header .right, #footer .right { float:right; }
    
    
    /* Footer Images */
    
    #footer {
    		position: relative;
    		bottom: 0px;
    		left: 0px;
    		min-width: 800px;
    		width: 100%;
    		z-index: 0;
    }
    
    
    /* This is for rounded corners. */
    
    .rtop, .rbottom {
    	display: block;
    	background-color: #76827B; /*The colour behind the container*/
    }
    
    .rtop *, .rbottom * {
    	display: block;
    	height: 1px;
    	overflow: hidden;
    	background-color: #EAF2EE; /*The colour inside the container*/
    }
    
    .r1{margin: 0 5px}
    .r2{margin: 0 3px}
    .r3{margin: 0 2px}
    .r4{margin: 0 1px; height: 2px}
    
    /*For the navigational elements*/
    
    .rtopnav, .rbottomnav {
    	display: block;
    	background-color: #76827B; /*The colour behind the container*/
    }
    
    .rtopnav *, .rbottomnav * {		
    	display: block;
    	height: 1px;
    	overflow: hidden;
    	background-color: #D4E2DE; /*The colour inside the container*/
    }
    
    .r1nav{margin: 0 5px}
    .r2nav{margin: 0 3px}
    .r3nav{margin: 0 2px}
    .r4nav{margin: 0 1px; height: 2px}
    .r5nav{height: 100px} /*Extra padding for underneath the headings in the navigational elements*/
    
    button{width:120px;}
    </style>
    </head>
    <body>
    <div class="content">
    	<!-- Rounded corners -->
    	<b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b>
    	<!-- End rounded corners -->
    	<!--[if IE]>
    <h1>This site will not display correctly in Internet Explorer 6.x or lower</h1>
    <p>We are currently working on this problem. Sorry for the inconvenience. In the meantime you might want to try <a href="http://www.mozilla.com/firefox/">Firefox</a> or <a href="http://www.opera.com/download/">Opera</a></p>
    <![endif]-->
    	<h1>Welcome to weldArt</h1>
    	<p>weldArt is an Australian retailer of handmade metal sculptures. We have a wide range of metal sculptures to suit all tastes and budgets. We specialise in sci-fi models, including famous characters from Star Wars, Alien, Predator, Stargate and Terminator. We also have a wide range of other metal sculptures, such as vehicles, musical instruments,
    		animals and various sports activities. Through innovation and creativity, weldArt is giving life back to what was thought to be useless junk. <br/>
    		<br/>
    		Often referred to as "Junk art", these unusual and rare pieces of metal art are guaranteed to be the talking point wherever they are displayed. What exactly is Junk art? Junk art is the creation of a sculpture from both new and used pieces of scrap metal. All pieces are handmade and display an array of stunning detail. Because of the infinite variety
    		of materials that are available for use, every metal sculpture will look slightly different. Each piece is truly unique.<br/>
    		<br/>
    		The models are extremely well built and have a very solid, strong feel about them. They are constructed mainly from new and used automobile parts. Nuts, bolts and chains are other materials used to make these fine works of art. The statues range in height from 100 mm up to 600 mm. The models are welded; they will not break. Furthermore, each model
    		has been coated with clear lacquer after polishing to prevent rusting.<br/>
    		<br/>
    		These metal sculptures have been engineered to a degree never seen before in Junk art. With the Sci-Fi models you'll feel like you're standing smack bang in the middle of a Sci-Fi movie.<br/>
    		<br/>
    		These exquisite metal sculptures are ideal for both home and office.<br/>
    		<br/>
    		Be different! Stand out from the crowd!<br/>
    		<br/>
    		Take a closer look at these extraordinary pieces of modern metal art.</p>
    	<!-- Rounded corners -->
    	<b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b>
    	<!-- End rounded corners -->
    </div>
    <div id="header">
    	<!-- <a href="index.php"> -->
    	<img class="left" src="http://www.weldart.net.au/images/weldArtTitleLeft.jpg" alt="weldArt logo left" />
    	<!-- </a> -->
    	<img class="right" src="http://www.weldart.net.au/images/weldArtTitleRight.jpg" alt="weldArt logo right" /> </div>
    <div id="navAlpha">
    	<!-- Rounded corners -->
    	<b class="rtopnav"> <b class="r1nav"></b> <b class="r2nav"></b> <b class="r3nav"></b> <b class="r4nav"></b> </b>
    	<!-- End rounded corners -->
    	<h1>Categories</h1>
    	<ul>
    		<li><a href="products.php?cat=all">View all</a></li>
    		<li><a href="music.php">Music</a></li>
    		<li><a href="sport.php">Sport</a></li>
    		<li><a href="animals.php">Animals</a></li>
    		<li><a href="vehicles.php">Vehicles</a></li>
    		<li><a href="alienVSPredator.php">Alien vs Predator</a></li>
    		<li><a href="starwars.php">Starwars</a></li>
    		<li><a href="stargate.php">Stargate</a></li>
    		<li><a href="terminator.php">The Terminator</a></li>
    		<li><a href="other.php">Other</a></li>
    	</ul>
    	<h1>What's New</h1>
    	<ul>
    		<li>news 1</li>
    		<li></li>
    		<li></li>
    	</ul>
    	<h1>Search</h1>
    	<form action="checkIfSearchBoxIsEmpty.php">
    		<table>
    			<tr>
    				<td><input type="text" name="searchTerms" size="14"/></td>
    			</tr>
    			<tr>
    				<td><button type="submit">Search Products</button></td>
    			</tr>
    		</table>
    	</form>
    	<h1>Information</h1>
    	<ul>
    		<li><a href="about.php">About weldArt</a></li>
    		<li><a href="contactUs.php">Contact Us</a></li>
    		<li><a href="faq.php">FAQ</a></li>
    		<li><a href="postageAndPayment.php">Postage and Payment</a></li>
    		<li><a href="postage.php">Postage Calculator</a></li>
    	</ul>
    	<!-- Rounded corners -->
    	<b class="rbottomnav"> <b class="r4nav"></b> <b class="r3nav"></b> <b class="r2nav"></b> <b class="r1nav"></b> </b>
    	<!-- End rounded corners -->
    </div>
    <div id="navBeta">
    	<!-- Rounded corners -->
    	<b class="rtopnav"> <b class="r1nav"></b> <b class="r2nav"></b> <b class="r3nav"></b> <b class="r4nav"></b> </b>
    	<!-- End rounded corners -->
    	<h1>Shopping Cart</h1>
    	<p>0 Items</p>
    	<h1>Best Sellers</h1>
    	<ul>
    		<li>seller1</li>
    		<li></li>
    		<li></li>
    	</ul>
    	<!-- Rounded corners -->
    	<b class="rbottomnav"> <b class="r4nav"></b> <b class="r3nav"></b> <b class="r2nav"></b> <b class="r1nav"></b> </b>
    	<!-- End rounded corners -->
    </div>
    <div id="navGamma">
    	<ul>
    		<li><a href="checkIfCartIsEmpty.php">Checkout</a></li>
    		<li>|</li>
    		<li><a href="cart.php">Cart Contents</a></li>
    		<li>|</li>
    		<li><a href="index.php">Home</a></li>
    	</ul>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    Thanks for the replies. Paul O'B, I'll go through your code and make the changes tonight, It should be very helpfull. Thanks a lot I'll check out the doc type as well.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •