#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    3
    Rep Power
    0

    IE7, IE6, Safari layout issues


    It seems like I must be getting close to what I want. This page displays almost perfectly in Firefox and IE8, as well as most browsers, but not in older IE and Safari.

    hangemhightaxidermy.com/construction_slides2.htm

    I would like to eliminate the brown space above the sliding photos, but can't figure out how to do it. After trying all sorts of padding and margin changes, I've decided we can live with it if necessary. The space entered the picture when I used a table to align two unordered lists in a row (one for the text bullets, one for the sliding photos). Before that I just had the sliding photo unordered list and there was no extra brown space.

    If you view the landscape tab you will see what it looks like with both lists and no table. yikes!

    My bigger problem is that this whole middle section is shifting far to the right in IE7, IE6, and Safari. I have looked into haslayout stuff, but honestly I'm an old self-taught web dev mom just getting back into design for a family member after being out for 10 years. There's a lot of new stuff!! Fun, but frustrating. Don't laugh too hard looking at my css. I have been using the W3 validators to help, but maybe an experienced person can see my issue. My brain/eyes are kind of glazed over at this point.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    On your logo image, you have align="left". What that does is try to make other elements wrap around it. In most browsers it's figuring out the middle section is too big and placing it below the image, but in others it's still trying to wrap that middle section, which is causing the issue. Try adding clear:left in your CSS for #mid.

    That image is also causing the space you're talking about for the most part. There are ways to fix that too, but that's going to be a little more complicated.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    3
    Rep Power
    0
    Originally Posted by rdoyle720
    On your logo image, you have align="left". What that does is try to make other elements wrap around it. In most browsers it's figuring out the middle section is too big and placing it below the image, but in others it's still trying to wrap that middle section, which is causing the issue. Try adding clear:left in your CSS for #mid.

    That image is also causing the space you're talking about for the most part. There are ways to fix that too, but that's going to be a little more complicated.
    Thank you! That does get rid of my shifting issue and most of the space issue; there's still a few brown pixels at the top. But now the logo is sitting on the black border instead of overlapping it and it is pushing the tab images up leaving a cream space between the tabs and black border, basically centered in the logo vertical space and aligned to the right. Before the logo image overlapped the #mid and the tabs sat on the black border.

    I've removed the tab images from a table and positioned the tabs relative to the logo to shift them back down to the black border. It looks a little chintzy between browsers, though as each one is a couple of pixels different. Right now I'm at one pixel of cream showing on IE and one pixel below the black border on Firefox. It seems like there must be a way to get the tab images to lay on that border. That's why I had them in a table so that I could align the images to the bottom of the cell. I've tried vertical-align: baseline and bottom. I can't seem to get the tabs to move except with positioning absolute or relative, and then it isn't precise across browsers.

    Is there a better way to position the logo than align=left? When I remove it, the logo goes to the center. I've tried an absolute position, but it becomes a problem on the 800 x 600 (I know!) monitors that they still use; I prefer to have the navigation tabs and text shift around the logo rather than have the logo floating over the navigation at this low-res. I've already told them that I'm not going to design everything for those monitors and 1024x768 is the lowest screen res that I want it to look good in, but it still needs to be functional at 800x600. So is there a way to have my logo on the left and my tab images on top of the black border? I'm OK with the logo not overlapping the black border; the clear:left basically kicked it up.

    Thanks again for the help!!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    3
    Rep Power
    0
    BTW, would is it better to stack boxes--like a cream colored box, then brown middle box, then cream colored box at the foot...all stacked on top of each other in bands within the main wrapper

    OR

    Nest boxes, as in a brown box within the larger cream box within the main wrapper?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    The way I'd suggest you position the logo is to use absolute positioning. So how do you accomplish that and still make everything work?

    First, add an id to the image, remove the align stuff and add an alt tag. Let's call it "logo":
    Code:
    <img width="330" height="95" id="logo" src="logo_test.png" alt="TRAX Construction Inc">
    The alt tag is for people who come to your site with screen readers, or if for some reason the image doesn't load.

    Now some would argue you should set the image as a background, but let's not worry about that for now.

    In your CSS add:

    Code:
    #logo {position: absolute; top: 10px; left: 10px}
    "But" you say, "this is messing everything up!". In your CSS, find the code for #main and add position: relative. Now your logo will be positioned 10px from the top and left of #main.

    But now your tabs are appearing under the logo. So add an id to those as well. Let's call 'em nav:

    Code:
    <table width="310px" cellspacing="0" cellpadding="0" border="0" id="nav">
    Now the nav should probably be a list rather than a table, but let's not worry about that either. To move the table over, use a left margin in your CSS:

    Code:
    #nav {margin-left: 400px}
    Note you can change the measurements to whatever you want.

    That should get you pretty close, and SHOULD work in IE6.

IMN logo majestic logo threadwatch logo seochat tools logo