Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8

Thread: IE workaround?

  1. #1
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    I think the problem is with this. Container surrounds all of the html

    #container {
    position:relative;
    min-width:800px;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
    background-color:#9BAAE6;
    display:block;;
    }

    My site displays perfectly in firefox, but in IE... lets just say its a bit messed up.

    Here are the pics
    http://img.photobucket.com/albums/v2...ish/IEcrap.jpg
    http://photobucket.com/albums/v240/1...efoxlovely.jpg

    Has anyone got any ideas on what is causing this?

    Also any suggestions on site improvement would be cool, its my first site and i am not sure which direction to take it. :dead:

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    well... can we have the link to this site? It's hard to help with only images... We need the HTML and CSS
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    I don't actually have any hosting for my site yet.

    OK heres the html

    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" lang="en" xml:lang="eng">
    
    	<head>
    
    		<title> title </title>
    		<meta http-equiv="content-type" content="text/html";
    		charset="iso-8859-1" />
    		<meta http-equiv="Content language" content="en-us" />
    		<link href="Page_styles.css" rel="stylesheet" type="text/css" />
    
    	</head>
    
    
    <body>
    
    	<div id="container">
    		<div id="title">
    
    		<h1> header </h1>
    		<h3> A fansite for me </h3>
    	
    		</div>	
    		
    		<div id="content">
    	
    		<p><strong>First and foremost welcome!</strong> I am Jason and this is my spot on the internet. I am wannabie webdesigner and here
    			you will be able to find several things. First and foremost will be my portfolio. As i get better that will grow and grow. You		 		will also be able to find a blog, a bit about me, some tutorials and a tracker on how i am going on the web design front.</p>
    	
    		</div>
    		
    		<div id="news">
    
    		<p><span>News</span> This page has only just gone live, it will continuously be changing and being updated as time goes on and  	 		learn more so keep visiting</p>
    		</div>
    
    		<div id="links">
    			
    			<ul>
    				
    				<li><a href="home.html">Home</a></li>
    				<li><a href="whoami.html">About Me</a></li>
    				<li><a href="education.html">Education</a></li>
    				<li><a href="portfolio.html">Portfolio</a></li>
    				<li><a href="tutorials.html">Tutorials</a></li>
    				<li><a href="contact.html">Contact</a></li>
    			</ul>
    		</div>
    		
    		<div id="firefox">
    			 <a href="http://getfirefox.com/" title="Get Firefox - Take Back the Web">
    			 <img src="http://www.mozilla.org/products/firefox/buttons/takebacktheweb_small.png"
    				 alt="Get Firefox"></a> 
    		</div>
    		
    		<div id="gua">
    			<a href="http://www.giveupalready.com/" title="GiveUpAlready Forum">
    			<img src="http://www.giveupalready.com/images/affiliates/gua.gif"
    				alt="Join GUA"></a>
    				
    		</div>
    	</div>
    </body>
    
    </html>
    And the CSS is here

    Code:
    /* CSS Document */
    body {margin:0; 
    padding:0; 
    font: 1.0em verdana, arial, sans-serif; 
    }
    
    #container {
    position:relative; 
    min-width:800px; 
    max-width:800px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:#9BAAE6; 
    display:block;;
    }
    
    div#title h1 {
    font-size:1.5em; 
    font-style:italic; 
    font-variant:small-caps; 
    text-align:center;
    }
    
    div#title h3 {
    font-size:1.0em; 
    font-style:italic; 
    font-variant:small-caps; 
    text-align:center; 
    margin-top:-20px
    }
    
    div#content {
    position:absolute; 
    left:120px; 
    top:70px;  
    padding:0px; width:500px;
    }
    
    div#content p {
    font-size:0.8em; 
    text-align:center;
    }	
    
    div#content p strong {
    font-variant:small-caps; 
    font-size:0.9em;
    }
    
    #news {
    position:absolute; 
    left:630px; 
    top:70px; 
    width:165px;
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
    padding:3px;
    background-color:#006699;
    }
    
    #news p {
    font-size:0.8em;
    text-align:center;
    margin:0px;
    padding-top:0;
    }
    
    #news p span {font-variant:small-caps; font-size:0.9em; font-style:normal}
    
    
    #links {
    position:absolute; 
    left:0px; 
    top:70px; 
    width:170px;
    margin:0;}
    
    #links ul {
    padding:0px;
    list-style-type: none;
    background-color:#336699;
    width: 110px;
    border-top: 1px solid #000;
    font-size: 1em;
    }
    
    #links {
    position:absolute; 
    left:0px; 
    top:70px; 
    width:140px;
    padding:0; 
    margin:0px;
    }
    			
    #links li {
    border-bottom:1px solid; 
    font-size:.75em; 
    margin:0; 
    font-weight:bold;
    text-indent:.5em;
    }
    
    #links a {
    text-decoration:none; 
    color:black; 
    margin:0; 
    font-weight:bold;
    padding:.3em 0; 
    text-indent:.5em; 
    display:block;
    }
    
    #links li:first-child {
    border-top:1px solid;
    }
    
    #links li a:hover {
    background-color:#000033;
    color: #fff;
    }
    
    * html div#links ul {float:left; border-top:1px solid black;}
    
    
    
    #firefox {position:absolute; left:0px; top:250px}
    #firefox img {width:125; height:50; border:0; margin:0}
    
    #gua {position:absolute; left:10px; top:310px}
    #gua img {width:88; height:31; border:0; margin:0}
    All help given is much apprieciated

  5. #4
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    did you try using other doc types?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

  6. #5
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    I believe the problem is a CSS problem as there is no html code which defines positioning. My html contains only content and divs.

  7. #6
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    ya, i think your right about that.. sorry.
    maybe try using some floats to position the news and navigation inside the main div.

    also.. i usually start my coding in IE and then debug in Mozilla not the other way around..but thats just my preference..

  8. #7
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Quote Originally Posted by igeek
    also.. i usually start my coding in IE and then debug in Mozilla not the other way around..but thats just my preference..
    the other way around (code for FF, hack IE) is the way you should be doing it
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  9. #8
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    karinne,
    the other way around (code for FF, hack IE) is the way you should be doing it
    like i said its all preference on how you like to code and which box model you prefer..

    the final outcome is all that matters..
    debugging CSS does NOT always mean to use a hack..
    the best way to write CSS is with no hacks!

    IE 7 breaks common css hacks:
    http://www.killersites.com/blog/2005...mon-css-hacks/

    here are some specs on both browsers..
    MOZILLA:
    http://www.quirksmode.org/browsers/mozilla.html
    IE:
    http://www.quirksmode.org/browsers/explorer5win.html


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:43 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com