SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FF Vs IE div problem - Please help going nuts here

    Hi

    The home page on my site is causing me alot of trouble, the two div's at the top anyway.

    link: www.askaboutvalidation.com

    It's perfect in IE 6 & 7 just the way I want it but in FF it's totally messed up.

    I just can't figure out what I need to change on my CSS.

    Here is my css for the top two div's they are contained in another div

    I thought clear both would clear the divs underneath but it doesn't.

    Any help would be great guys.

    Thanks in advance



    .xone
    {

    width:100%;
    border:0px solid #ccc;
    clear:both;
    }

    .aone
    {

    float:right;
    width:39%;
    border:1px solid #ccc;

    }

    .bone
    {

    float:left;
    width:60%;
    border:1px solid #ccc;

    }

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Validate your HTML first and fix the problems.

    http://validator.w3.org

    You can't expect CSS to behave as you expect if the HTML that it's being applied to isn't correct in the first place

    A lot of those errors occur because you've got an XHTML doctype and aren't closing all the tags with a trailing /

    If you don't really need XHTML (which I suspect you don't) then I'd change my doctype to

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    and then fix the rest of the validation issues.

    Also in future, it might be worth creating the site and checking it in a more standards compliant browser than internet explorer. If you use Firefox or Opera to check your site first then you're less likely to have problems when it comes to checking cross browser

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did create this using FF as my primary browser, I created the top two divs and checked in IE first which was fine then FF where the problem is occuring.

    I have changed the doctype and this has not helped at all. I am not trying for a quick fix but over the last numbe of years I have bought over 6 different sitepoint books to help me develope my skills. I try and ask questions here as a last resort.

    I can't image this being a major problem so if someone has a reson why FF is different then IE just for the top 2 divs then I would appreciate a solution

    Thanks in advance

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did create this using FF as my primary browser, I created the top two divs and checked in IE first which was fine then FF where the problem is occuring.
    That's a bit contradicting don't you think?

    I have changed the doctype and this has not helped at all. I am not trying for a quick fix but over the last numbe of years I have bought over 6 different sitepoint books to help me develope my skills. I try and ask questions here as a last resort.
    Impressive. So you'll know why you should ensure that your code is valid then?

    I can't image this being a major problem so if someone has a reson why FF is different then IE just for the top 2 divs then I would appreciate a solution
    Yep, there's an easy fix for it. You need a clearer in the following part of the code. Either use a div or br and then apply a class and the style using CSS.

    Code:
    </div>
    
    <br style="clear: both;" />
    		
    <div class="x">
    I'd still recommend that you take a look at the validator and correct the problems. Things like closing tags, alt text missing, using multiple ID's are easy to fix and will help to ensure that your site remains in good working order for future releases of browsers. At the moment you're relying on a browsers interpretation of wrong code which luckily at the moment is rendering correctly cross browser.

    Also those conditional comments are likely to be breaking things in different browsers.

    For example
    Code:
    <li><a href="http://www.askaboutvalidation.com/contact.php">&nbsp;&nbsp;&nbsp;CONTACT<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    Remove all of the IE6 conditional comments as those tables aren't needed. Also take the </a> out of the IE7 conditional comment and remove those comments too.

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply,

    I fixed it by just floating one of the divs then using a margin postion for the other div.

    I know the nav bar code sucks and I will fix it sometime, when there's a cross browser solution that allows me to have a dropdown with pure css


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
  •