Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Problems with FF, Works in IE [Live Preview][HTML & CSS]

    Hey guys, I've coded my site, and it works perfectly in IE, but not at all in FF. I'm not very experienced when it comes to knowing the problems, I've posted the live preview, sources below. I was hoping you guys could point me in the right direction? Any help much appreciated!

    I think it's mainly the structure issues?

    Thanks

    Live Preview:
    http://aboutchris.co.uk/madeeasy/index.html

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Design Made Easy</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
    
    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    
    <script type="text/javascript" src="stepcarousel.js">
    
    /***********************************************
    * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    
    <style type="text/css">
    
    .stepcarousel{
    position: relative; /*leave this value alone*/
    overflow: scroll; /*leave this value alone*/
    width: 477px; /*Width of Carousel Viewer itself*/
    height: 206px; /*Height should enough to fit largest content's height*/
    }
    
    .stepcarousel .belt{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
    }
    
    .stepcarousel .panel{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 10px; /*margin around each panel*/
    width: 477px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="header">
    
    <div id="header_list">
    <ul>
    <li><h1>web design</h1></li>
    <li><h1>advertising</h1></li>
    <li><h1>graphic design</h1></li>
    </ul>
    </div><!-- end header list -->
    
    </div><!-- end header -->
    
    <div id="leftBar"></div>
    
    <div id="navigation">
    
    <a href="#" class="start">&nbsp;</a>
    <a href="#" class="about">&nbsp;</a>
    <a href="#" class="portfolio">&nbsp;</a>
    <a href="#" class="contact">&nbsp;</a>
    <img src="images/image_09.jpg" 
    />
    
    <div id="blackbar">
    
    <div id="ourmost"><h2>our most recent work</h2></div>
    
    </div>
    
    <div id="main">
    <div id="position_slider">
    
    <script type="text/javascript">
    
    stepcarousel.setup({
    	galleryid: 'mygallery', //id of carousel DIV
    	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    	panelclass: 'panel', //class of panel DIVs each holding content
    	autostep: {enable:true, moveby:1, pause:3000},
    	panelbehavior: {speed:500, wraparound:false, persist:true},
    	defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/arrowleft.jpg', 10, 215], rightnav: ['images/arrowright.jpg', -20, 215]},
    	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    	contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
    })
    
    </script>
    
    <div id="mygallery" class="stepcarousel">
    <div class="belt">
    
    <div class="panel">
    <img src="images/epic.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i29.tinypic.com/xp3hns.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i26.tinypic.com/11l7ls0.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i31.tinypic.com/119w28m.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i27.tinypic.com/34fcrxz.jpg" />
    </div>
    
    </div>
    </div>
    
    <p>
    <b>Current Panel:</b> <span id="statusA"></span><br />
    
    </p>
    </div>
    
    <div id="title_ribbon"><h4>Graphic Design</h4></div>
    
    <div id="mainText">
    <h5>We are made up of a group of talented young designers. Who have a passion for
    fresh design and can bring your designs right upto the latest trends.
    <p><br />
    Why should design be so complex? That's why at design made easy we, Make it easy.
    <p><br />
    We believe that websites should be as user friendly as possible to give your visitors
    the best viewing experience possible.</h5>
    </div>
    
    
    
    
    </div>
    
    <div id="steps">
    
    <a href="#" class="one">&nbsp;</a>
    <a href="#" class="two">&nbsp;</a>
    <a href="#" class="three">&nbsp;</a>
    <img src="images/image_16.jpg"
    />
    
    </div><!-- end steps -->
    
    <div id="contact">
    
    
    <div id="quickContact"><h2>quick contact form</h2></div>
    	
        	<div id="contact-area">
    
    <form method="post" action="contactengine.php">
    				<label for="Name" id="Name">Name:</label>
    				<input type="text" name="Name" />
    	
    				<label for="Email" id="Email">Email:</label>
    				<input type="text" name="Email" />
    				
    				<label for="Message" id="Message">Message:</label><br />
    				<textarea name="Message" rows="20" cols="20"></textarea>
    
    				<input type="submit" name="submit" value="Submit" class="submit-button" />
    </form>
    
    </div>
    </div>
    
    </div>
    
    </div>
    
    
    </body>
    </html>
    Code:
    @charset "utf-8";
    
    /*This is where we Reset for good practice*/
    
    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,   
    pre, form, fieldset, table, th, td { margin: 0; padding: 0; }  
    
    body {
    	background-image:url(images/image_03.jpg);
    	background-repeat:repeat-x;
    	font-family:Helvetica, Arial, Sans-serif;
    	color:#FFF;
    
    }
    
    
    h1 { font-size:0.9em; color:#969696; }
    h2 { font-size:0.7em; color:#969696; }
    h3 { font-size:0.8em; color:#969696; }
    h4 { font-size:0.9em; color:#0c0e0e; }
    h5 { font-size:0.75em; }
    
    
    #mainText {
    
    	width:400px;
    	margin-top:50px;
    	margin-left:80px;
    
    }
    
    
    
    
    #container {
    	/* header image is in here */
    	background-image:url(images/image_02.jpg); background-repeat:no-repeat;
    	height:1024px;
    	width:1150px;
    	margin: 0 auto;
    	
    }
    /* Header */
    
    #header {
    	
    	margin-left:80px;
    	
    		
    }
    
    #header_list { 	margin-top:68px; }
    
    #header li { margin-left:150px; list-style:none; font-family:Arial, Helvetica, sans-serif; font-size:0.8em; line-height:1.2em;}
    
    #leftBar { 
    
    	background-image:url(images/image_04.jpg); 
    	height:898px;
    	width:70px;
    	margin-top:13px;
    	float:left;
    }
    
    #rightBar {
    	
    	background-image:url(images/image_09.jpg);
    	height:898px;
    	width:93px;
    	float:right;
    }
    
    #blackbar {
    	
    	background-image:url(images/image_10.jpg);
    	height:58px;
    	width:1051px;
    	float:left;
    	margin-top:-4px;
    }
    
    #main {
    	
    	background-image:url(images/image_12.jpg);
    	height:765px;
    	width:561px;
    	float:left;
    	
    }
    
    #position_slider {
    	
    	margin-left:33px;
    	margin-top:-10px;
    	
    }
    
    #steps {
    	
    	height:210px;
    	width:490px;
    	float:left;
    }
    
    
    #contact {
    	
    	background-image:url(images/image_17.jpg);
    	height:554px;
    	width:490px;
    	margin-top:2px;
    	
    }
    
    #ourmost {
    	
    	margin-left:390px;
    	margin-top:30px;
    	
    }
    
    
    #title_ribbon {
    	
    	margin-left:210px;
    	margin-top:60px;
    	
    }
    
    /* Navigation */
    
    #navigation {
    	float:left;
    	margin: 13px 0px 0px 0px;
    }
    
    a.start {
       display:block;
       width: 237px;
       height: 74px;
       text-decoration: none;
       background: url(images/image_05.jpg);
       float:left;
    }
    a.start:hover {
       background-position: 100% 100%;
    }
    
    a.about {
       display:block;
       width: 237px;
       height: 74px;
       text-decoration: none;
       background: url(images/image_06.jpg);
       float:left;
    }
    a.about:hover {
       background-position: 100% 100%;
    }
    
    a.portfolio {
       display:block;
       width: 237px;
       height: 74px;
       text-decoration: none;
       background: url(images/image_07.jpg);
       float:left;
    }
    a.portfolio:hover {
       background-position: 100% 100%;
    }
    
    a.contact {
       display:block;
       width: 237px;
       height: 74px;
       text-decoration: none;
       background: url(images/image_08.jpg);
       float:left;
    }
    a.contact:hover {
       background-position: 100% 100%;
    }
    
    /* Steps */
    
    a.one {
       display:block;
       width: 125px;
       height: 212px;
       text-decoration: none;
       background: url(images/image_13.jpg);
       float:left;
    }
    a.one:hover {
       background-position: 100% 100%;
    }
    
    a.two {
       display:block;
       width: 125px;
       height: 212px;
       text-decoration: none;
       background: url(images/image_14.jpg);
       float:left;
    }
    a.two:hover {
       background-position: 100% 100%;
    }
    
    a.three {
       display:block;
       width: 125px;
       height: 212px;
       text-decoration: none;
       background: url(images/image_15.jpg);
       float:left;
    }
    a.three:hover {
       background-position: 100% 100%;
    }
    
    
    
    
    
    
    #contact-area {
    	margin-top: 0px;
    }
    
    #contact-area input, #contact-area textarea {
    	padding: 5px;
    	width: 250px;
    	font-family: Helvetica, sans-serif;
    	font-size: 0.9em;
    	margin: 0px 0px 10px 0px;
    	border: 2px solid #ccc;
    }
    
    #contact-area textarea {
    	height: 90px;
    }
    
    #contact-area textarea:focus, #contact-area input:focus {
    	border: 1px solid #900;
    }
    
    #contact-area input.submit-button {
    	width: 70px;
    	margin-left:305px;
    	float: left;
    }
    
    label {
    	float: left;
    	text-align: right;
    	margin-right: 10px;
    	width: 100px;
    	padding-top: 5px;
    	font-size: 0.9em;
    }
    
    #quickContact { margin-left:270px; margin-top:50px;}
    Thankyou

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by Crispy View Post
    Hey guys, I've coded my site, and it works perfectly in IE
    That means absolutely nothing. You must get the page working in a modern browser, like Firefox, before worrying about what IE is messing up. FF will show what you wrote while you never know what IE is going to do. Never use IE as a reference for how things should work.

    Did you mean to set the position of those elements over 1000px from the top? Cause that's where they are. Also, you have some misplaced tags that need fixing. Validate for those errors.

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    yeah that's the problem i'm having, them appearing 1000px from the top? Any idea why this is? I think it's something to do with floats? do i need to clear them somehow?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Crispy View Post
    yeah that's the problem i'm having, them appearing 1000px from the top? Any idea why this is? I think it's something to do with floats? do i need to clear them somehow?
    You have an extra <html> tag. Fix that and then check the validator for more errors. Then we can fix your dropped #navigation.

    Read about validating in my sig below.



    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    thanks for the responses guys, I have validated my code now =) to make it a little easier

    http://www.aboutchris.co.uk/madeeasy/index.html

    still having trouble with the alignment though?

    Thanks

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Start with this Crispy
    Code:
    @charset "utf-8";
    
    /*This is where we Reset for good practice*/
    
    * { margin: 0; padding: 0; }  
    
    body {
    	background-image:url(images/image_03.jpg);
    	background-repeat:repeat-x;
    	font-family:Helvetica, Arial, Sans-serif;
    	color:#FFF;
    
    }
    
    
    h1 { font-size:0.9em; color:#969696; }
    h2 { font-size:0.7em; color:#969696; }
    h3 { font-size:0.8em; color:#969696; }
    h4 { font-size:0.9em; color:#0c0e0e; }
    
    
    #mainText {
    
    	width:400px;
    	margin-top:50px;
    	margin-left:80px;
        font-size:0.75em;
    
    }
    
    
    
    
    #container {
    	/* header image is in here */
    	background-image:url(images/image_02.jpg); background-repeat:no-repeat;
    	width:1150px;
    	margin: 0 auto;
    overflow: auto; /*get rid of the height and clear floats with overflow*/
    	
    }
    /* Header */
    
    #header {	
    	margin-left:80px;		
    }
    
    #header_list { 	margin-top:68px; }
    
    #header li { margin-left:150px; list-style:none; font-family:Arial, Helvetica, sans-serif; font-size:0.8em; line-height:1.2em;}
    
    #leftBar { 
    
    	background-image:url(images/image_04.jpg); 
    	height:898px;
    	width:70px;
    	margin-top:13px;
    	float:left;
    }
    
    #rightBar {	
    	background: url(images/image_09.jpg);
    	height:898px;
    	width:93px;
    	float:right;
    }
    
    #blackbar {
    	
    	background-image:url(images/image_10.jpg);
    	height:58px;
    	width:1051px;
    	float:left;
    	margin-top:-4px;
    }
    
    #main {
    	
    	background-image:url(images/image_12.jpg);
    	height:765px;
    	width:561px;
    	float:left;	
    }
    
    #position_slider {	
    	margin-left:33px;
    	margin-top:-10px;	
    }
    
    #steps {	
    	height:210px;
    	width:490px;
    	float:left;
    }
    
    
    #contact {	
    	background: url(images/image_17.jpg);
    	height:554px;
    	width:490px;
    float:left;
    	margin-top:2px;	
    }
    
    #ourmost {	
    	margin-left:390px;
    	margin-top:30px;	
    }
    
    #title_ribbon {	
    	margin-left:210px;
    	margin-top:60px;	
    }
    
    /* Navigation */
    
    #navigation {
    /*remove float*/
    	margin: 13px 0px 0px 70px;
    }
    
    a.start {
       display:block;
       width: 237px;
       height: 74px;
       text-decoration: none;
       background: url(images/image_05.jpg);
       float:left;
    }
    a.start:hover {
       background-position: 100% 100%;
    }
    
    a.about {
       display:block;
       width: 237px;
       height: 74px;
       text-decoration: none;
       background: url(images/image_06.jpg);
       float:left;
    }
    a.about:hover {
       background-position: 100% 100%;
    }
    
    a.portfolio {
       display:block;
       width: 237px;
       height: 74px;
       text-decoration: none;
       background: url(images/image_07.jpg);
       float:left;
    }
    a.portfolio:hover {
       background-position: 100% 100%;
    }
    
    a.contact {
       display:block;
       width: 237px;
       height: 74px;
       text-decoration: none;
       background: url(images/image_08.jpg);
       float:left;
    }
    a.contact:hover {
       background-position: 100% 100%;
    }
    
    /* Steps */
    
    a.one {
       display:block;
       width: 125px;
       height: 212px;
       text-decoration: none;
       background: url(images/image_13.jpg);
       float:left;
    }
    a.one:hover {
       background-position: 100% 100%;
    }
    
    a.two {
       display:block;
       width: 125px;
       height: 212px;
       text-decoration: none;
       background: url(images/image_14.jpg);
       float:left;
    }
    a.two:hover {
       background-position: 100% 100%;
    }
    
    a.three {
       display:block;
       width: 125px;
       height: 212px;
       text-decoration: none;
       background: url(images/image_15.jpg);
       float:left;
    }
    a.three:hover {
       background-position: 100% 100%;
    }
    
    
    
    
    
    
    #contact-area {
    	margin-top: 0px;
    }
    
    #contact-area input, #contact-area textarea {
    	padding: 5px;
    	width: 250px;
    	font-family: Helvetica, sans-serif;
    	font-size: 0.9em;
    	margin: 0px 0px 10px 0px;
    	border: 2px solid #ccc;
    }
    
    #contact-area textarea {
    	height: 90px;
    }
    
    #contact-area textarea:focus, #contact-area input:focus {
    	border: 1px solid #900;
    }
    
    #contact-area input.submit-button {
    	width: 70px;
    	margin-left:305px;
    	float: left;
    }
    
    label {
    	float: left;
    	text-align: right;
    	margin-right: 10px;
    	width: 100px;
    	padding-top: 5px;
    	font-size: 0.9em;
    }
    
    #quickContact { margin-left:270px; margin-top:50px;}
    Read about clearing floats here - http://www.quirksmode.org/css/clearing.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    thanks, that helps, but in IE it is now pushed down like FF was? i will check out that article

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Change this portion from style.css (line 52):
    Code:
    #header_list {
    margin-top:68px;
    }
    to this:
    Code:
    #header_list {
    margin-bottom:67px;
    }
    Make these changes to #blackbar in style.css (line 73):
    Code:
    #blackbar {
    background-image:url(images/image_10.jpg);
    float:left;
    height:58px;
    margin-top:-4px;
    overflow:hidden;
    width:948px;
    }
    This prevents the black bar from jutting out past the navigation tabs.

    Make #contact in style.css (line 106) look like this:
    Code:
    #contact {
    background-image:url(images/image_17.jpg);
    height:554px;
    margin:266px 0 0 555px;
    width:490px;
    }
    This locates your contact form where you want it to be.

    Remove your image_16 tag from your HTML in the "steps" section. This was causing an unsightly gray field where it didn't belong.

    Last but not least, change #quickContact in style.css (line 264) to use a top padding rather than a top margin, like this:
    Code:
    #quickContact {
    margin-left:270px;
    padding-top:50px;
    }
    This fixes the collapsing margin issue that would pop up if you left this alone. Do a google search on collapsing margins to see what I mean.

    After all of that it looks just fine in FF2 for me... The ONLY hanging issues I see are 1) with the alignment of the background gradient in the bottom right corner of the page, and 2) with the alignment of your images/text in the recent work section. I'm too lazy to fix that up right now!

    This should give you a good start though. Let me know how it looks in IE after this.
    Last edited by Rowsdower!; 03-03-2009 at 07:00 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks Excavator I have started with your base!

    Rowsdower!

    I changed the
    Code:
    #header_list {
    margin-top:68px;
    }
    to

    Code:
    #header_list {
    margin-top:67px;
    }
    When I changed it to margin-bottom:67px; it through it off alot in mine? (I'm checking in the latest FF and Chrome)

    The #blackbar fix worked perfect and the #quickcontact

    The contact form on mine looks perfect and doesn't need changing atm?

    It's kind of gone vice versa atm, it now looks in IE like it did in FF

    Heres a screenshot:

    (You have to scroll down so I took to and combined )

    Thanks for all your help


  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I know what you mean about swapping places with respect to IE and FF. It seems bad, but this is how most people recommend you develop. You build and test in FF or similar, and then tweak (or hack) for IE. You kind of took the opposite approach and now we're back to what should have been square one.

    Also, just a sidebar here but I'm on FF2 since I don't yet trust FF3 -- I've heard a few unsavory bugs are in the new one. I don't know how FF3 would handle the corrections I made before... Then again I may have changed other things and forgotten to mention it.

    Anyway, if you have it looking great in FF all you have to do is create a separate CSS file for the chages you need to make it look great in IE.

    The overall process is something like this:
    Say you need the margins changed on an item from 200px to 150px. All you need to put in the CSS for the IE-specific changes is that chunk (e.g. #contact {margin-left:150px;}). You don't have to repeat the individual parts that don't change.

    Once you have all of the IE quirks corrected save the file as "style_ie.css" or whatever you like, then use a conditional statement in the HTML to link this extra stylesheet so that only IE will read this file. You will want to place this <link> AFTER the main CSS stylesheet so that the changes don't get overridden by the main CSS (remember, it's "cascading" style).

    Conditional statements look something like this:
    Code:
    <!--[if IE 6]>
    Special instructions for IE 6 here
    <![endif]-->
    You can specify which version of IE will read it, or leave out the "6" part and all IE versions will use the file.

    So overall, you've looking at this:

    HTML:
    Code:
    blah blah blah doctype and such...
    <head>
    blah blah blah
    <link rel="stylesheet" type="text/css" src="style.css" />
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" src="style_ie.css" />
    <![endif]-->
    </head>
    <body>
    blah blah blah...
    Then "style_ie.css" looks simply like this:
    Code:
    #contact {margin-left:150px;}
    <any other specific changes you need to make to any individual elements>...
    My syntax may not be all correct, but you get the idea. You should be able to find a resource or two to explain this better online somewhere.

    Last edited by Rowsdower!; 02-23-2009 at 07:06 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Afterthought:

    Do you have a live example of the current test version of the page?

    Also, if you need to check out how your pages are viewed by other browsers you can run it by here for free:
    http://browsershots.org/
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #12
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Here is the latest Live Version!

    http://aboutchris.co.uk/madeeasy/index.html

    That conditional statement sounds perfect. If only I could get it to look perfect in FF. I just need to figure out why:

    • The Pixel in bottom right is off
    • The jQuery is no longer working!
    • & Also change Slide:1, 2, 3, 4, 5 part to describe the actual picture


  •  

    Posting Permissions

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