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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2006
    Location
    Savannah, GA - Tech Pit of Despair
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display issues in IE 6+ (and a slight weirdness in Safari)

    This is a site on which I am currently working with friends: http://www.mondaynightcrew.com/
    This is a quick link to my stylesheet: http://www.mondaynightcrew.com/css/mncstyles.css

    It displays almost exactly the way that I want it to display in Firefox, but some typical problems are showing up in Internet Explorer 6 and 7. I'd like to position the right skyscraper ad to the right of the content, overlapping the borders for both the "content" and "contentholder" divs. My FF solution doesn't work for IE. I'm also having positioning issues with the header, which I will unify and change to an image map and hopefully solve that issue. Finally, the "content" borders do not line up correctly with the "contentholder" borders.

    Again, all of these issues are moot for FF (and a couple other browsers), but very distracting in IE. My Safari issue crops up under the "Comics" page, as the browser-drawn blue for the "content" div doesn't exactly match the jpg images blue for the comic and comic navigation buttons, despite being the same hex value. Should I recut the images and not flatten them? Does that even matter? Thanks in advance!

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Spiegal View Post
    I'd like to position the right skyscraper ad to the right of the content, overlapping the borders for both the "content" and "contentholder" divs. My FF solution doesn't work for IE.
    The problem is IE's broken float model. The situation has really not got better in IE7 compared to IE6.

    (1)
    Change your markup from this:
    Code:
    <div id="skyscraper">
    	[...]
    </div>
    <div id="content">
    	[...]
    </div>
    to this:
    Code:
    <div id="content">
    	<div id="skyscraper">
    		[...]
    	</div>
    	[...]
    </div>
    (2)
    Give #skyscraper position: relative to solve for a “clipping bug” in IE where an element with hasLayout clips areas that should be rendered outside the element. For example, this happens when you use negative margins.

    To avoid that you get overwhelmed, I think we better wait with all the other issues till you get the above things fixed.

  • #3
    New Coder
    Join Date
    Apr 2006
    Location
    Savannah, GA - Tech Pit of Despair
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that fixed my positioning issue! I also reworked the banner inside "content", and that seems to work better for spacing. I still have the odd borders in IE, though. Is IE adding something that I just don't see?

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Spiegal View Post
    I still have the odd borders in IE, though. Is IE adding something that I just don't see?
    I'm not sure where you see those border issues? Can you please point at them?

  • #5
    New Coder
    Join Date
    Apr 2006
    Location
    Savannah, GA - Tech Pit of Despair
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't take a picture of it at the moment; however, it displays on IE with SP2 (at least). The odd borders pop at the bottom of both advertisements, adding about 2-3 pixels of unintended space colored dark blue like the <body>. Also, in the same browser, another 3-4 pixels are jammed (same blue color) to the right of the "content" <div>, but to the left of the 3 px black-ish border. This problem does not display in any other browser that I've tested (i.e. Opera, FF, Safari) regardless of OS.

    I've created an image map to replace my cut apart header, which I'll be uploading tonight. That should fix my spacing problem up top, but I'm still stumped on this other spacing issue.


  •  

    Posting Permissions

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