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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE6 Display Issues: Extra Margin/Padding & Rounded Corners

    Sorry for the vague subject — my brain is a bit fried and I couldn't think of another way to say it.

    I am having trouble with a website I'm designing. As is usual, it renders fine in FF but is not accurate with IE6. (Note: I'm on a Mac and had a friend send me a screenshot to see the issues.)

    Here's the link: http://agewithease.com/index2.htm

    Issues:
    1. In the screenshot, there was extra margin around the sidebar's<li> elements. I may have solved this by since adding 0px margin & padding to the <ul>, thereby clearing the browser defaults. If not, I'm not sure what's going on. (My friend on PC has gone to bed so I won't be able to get another screenshot until morning.)
    2. For some reason, some of the background colors aren't appearing. I've done some web searching and don't see any limitations in IE6; are there some?
    3. I've used a couple methods to do my rounded corners. The challenging ones are those containers that have a border on them. I used the negative margin method, and I saw somewhere that IE6 doesn't support neg margins on floated items. Is there a way around this?


    I apologize if any of this is unclear, or if I've missed obvious solutions easily found elsewhere. I promise I've done searches to try and figure this out.

    Thank you so much (in advance) for your help.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I am not sure that I have understood all you say but:

    Try this.

    #footer {
    background-image: url(/images/footerBg.gif);
    background-repeat: no-repeat;
    float: left;
    padding: 0.5em;
    width: 1006px;
    display:inline;

    }

    Edited using CSSVista.

    http://litmusapp.com/labs

    Frank

    Note that I use IE7
    Last edited by effpeetee; 01-24-2008 at 10:09 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Some simple fixes..
    Either add
    Code:
    #sidebarNav li a {
    	 height:100%;
            display: block;
    	margin: 0px;
    	padding: .5em;
    	border-right: 1px solid #002252;
    ........
    Or remove all border properties from the above and add it to
    Code:
    #sidebarNav li {
    	display: block;
    	list-style-type: none;
    	border-right: 1px solid #002252;
    	border-bottom: 1px solid #002252;
    	border-left: 1px solid #002252;
    	}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    BenDesign (01-24-2008)

  • #4
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you both for your responses. I made both of those changes and it seems to be getting there. Still a couple inconsistancies, if anyone has a thought on them:

    1. Rounded corner in top nav bar (id="masthead_Nav") isn't working. It uses absolute positioning with negative margins, but the containing div is floated, which I think may be the issue.

    2. In the right column (id="rightColumn"), there's a gap between the top border and the box.

    3. In the footer, an extra "com" is appearing on a second line. It's no where in the code or anything. Never seen anything like it!

    Again, thank you so much for your help!

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I do not have IE6 - these are from IE7 and FFox 3
    Frank
    Attached Thumbnails Attached Thumbnails IE6 Display Issues: Extra Margin/Padding &amp; Rounded Corners-screenhunter_03-jan.-24-17.59.jpg   IE6 Display Issues: Extra Margin/Padding &amp; Rounded Corners-screenhunter_04-jan.-24-18.00.jpg   IE6 Display Issues: Extra Margin/Padding &amp; Rounded Corners-screenhunter_05-jan.-24-18.00.jpg   IE6 Display Issues: Extra Margin/Padding &amp; Rounded Corners-screenhunter_06-jan.-24-18.01.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    BenDesign (01-24-2008)

  • #6
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for going out of your way to post those screen shots. It looks like it's perfect in IE7 now (awesome!).

    Unfortunately, the problems still persist in IE6. I can't figure this dang thing out, but it's close. Just the rounded corners issue and the extra "com" are the only major things.

    IE6 Screenshots:

    IE6 Display Issues: Extra Margin/Padding &amp; Rounded Corners-ss1.jpg IE6 Display Issues: Extra Margin/Padding &amp; Rounded Corners-ss2.jpg

    Thank you again for your help!
    Last edited by BenDesign; 01-24-2008 at 08:41 PM. Reason: added screenshots

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Hi!

    I can't help you further with IE6, but there are many links here.

    http://cavemonkey50.com/2005/12/the-...ie-hack-guide/

    http://exitfegs.co.uk/Sources.html

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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