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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS/HTML browser compatibility help!

    Hi all! Although not new to HTML and coding in general; I'm fairly new to the full CSS layout concept... My first attempt is going well - but I've found that what I worked up in Internet Explorer doesn't look so hot in FireFox. I'm using IE 7 and FireFox 3. Check out the following in IE, looks like I intended:

    http://www.printwell.com/newprintwell

    Then check in FireFox. Note particularly the top and bottom are way "off".

    My HTML:
    http://www.printwell.com/newprintwell/default.htm

    My CSS:
    http://www.printwell.com/newprintwell/styles.css

    ANY help would be greatly appreciated!

    Thanks!

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    You have to check your markup in a modern browser first, never IE. IE will screw you up more than anything. It is 11 years behind all other browsers in standards. So first get your markup working in anything else, Firefox/Safari/Opera, then look to see if/when IE screws it up.

    Also, validate your html and css. You have 4 css errors. In your html, you are using 'menu' as an id more than once. id names are unique and can only be used once on a page.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the advice! I validated my CSS and HTML and fixed all of the errors. However - my layout still doesn't look as I intended in FireFox, etc. It does however look as I want it to look in IE. I'm missing something. In IE, the green at the top of the screen goes all the way to the top of the window, and the black footer bar at the bottom is properly placed at the bottom of the window. However in FireFox and other browsers, the green top is nudged down and the footer bar apperas to be moved way up behind the 2-column content divs. Do I need to do something with z-index? HELP!

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PS: It seems that something in my "header" div is forcing the content of my "main" div down from the top of the page... When I remove the entire "header" section; the top of the "main" div aligns to the top of the window as expected.

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Update, problem #1 solved (the top) by adding this to the "main" div css:

    position: absolute;
    top: 0px;
    left: 0px;

    Now on to the bottom...

  • #6
    Regular Coder
    Join Date
    May 2008
    Location
    Oxford, UK
    Posts
    422
    Thanks
    14
    Thanked 27 Times in 27 Posts
    Quote Originally Posted by drhowarddrfine View Post
    It is 11 years behind all other browsers in standards.
    Just out of interest, where did you pluck 11 years from?

  • #7
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Start with the this and then look at the first link in my sig. But there are hundreds of such things. This is well known.

    kyleshea, as I said, we don't care what IE is doing yet. I'll look at your page in a few. Notice that none of the other browsers work like IE so what does that tell us about IE?
    Last edited by drhowarddrfine; 05-20-2009 at 02:47 PM.

  • #8
    Regular Coder
    Join Date
    May 2008
    Location
    Oxford, UK
    Posts
    422
    Thanks
    14
    Thanked 27 Times in 27 Posts
    it's just funny, because when I google for it, it's just a bunch of links to forums with your posts hatemongering IE.

    I couldn't see anyone else mentioning '11 years' anywhere.

    Just an observation

  • #9
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    When you google for what? 11 years? You just go to the first link, see the test, and subtract the years. The second link says "a decade behind". Close enough.

  • #10
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    @kyleshea,
    I don't see any differences now. Is it fixed?

  • #11
    New to the CF scene
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got it. Along with other things, I had to switch the black bar image in the footer from being a background to a regular old image img. For whatever reason - when setup as a background - the div didn't fall under the div above. When changed to an image - it was positioned under the above div as I intended. So, not sure if it's done "right" - but it's fixed!

    Thanks again!

  • #12
    New to the CF scene
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This seems to be a common issue I have; divs are having trouble falling UNDER the div above and want to align vertically right over top of the previous div. I thought that divs on a page are positioned by default in vertical order from top to bottom? Maybe I'm mistaking.

  • #13
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Yes, block level elements, such as the div, do that, but images are inline unless declared otherwise. You are also floating some of those so that could come into play. Also, absolute positioning removes elements from the normal flow.

  • #14
    New to the CF scene
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can anybody explian why in IE, the following produces 2 LINES; both centered on the page, with the second being UNDER the first and text right aligned.. And in FireFox - 1 LINE with the second being over top of the first. ???

    <div style="width: 800px; height: 8px; margin-left: auto; margin-right: auto;"><img src="images/footer.jpg" alt="" border="0" /></div>

    <div style="width: 800px; margin-left: auto; margin-right: auto; text-align: right;">Copyright ® 2009 Printwell Acquisitions, Inc.</div>

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It might be due to the box model bug of IE. Have a try by the following
    Code:
    #leftContentColHeader {/*styles.css (line 114)*/
    background-image:url(images/tableHeader_bg.jpg);
    background-repeat:repeat-x;
    height:26px;
    /*width:250px;*/
    }
    #leftContent {/*styles.css (line 122)*/
    font-size:10px;
    margin:4px 6px 10px 4px;
    /*width:250px;*/
    }
    #rightContentCol {/*styles.css (line 132)*/
    /*float:right;
    height:225px;
    width:543px;*/
    margin-left:260px;
    
    }
    #rightContent {/*styles.css (line 147)*/
    font-size:10px;
    margin:4px 6px 10px 4px;
    /*width:543px;*/
    }
    #rightContentColHeader {/*styles.css (line 139)*/
    background-image:url(images/tableHeader_bg.jpg);
    background-repeat:repeat-x;
    height:26px;
    /*width:543px;*/
    }
    have a look at http://bonrouge.com/2c-hf-fixed.php to see how to make a good 2 column layout.
    Last edited by abduraooft; 05-20-2009 at 03:51 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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