CSS no table layout problems - need help

macmediamacmedia
Posted:
in General Discussion edited January 2014
Hey all,

Having trouble getting this thing to work correctly in IE on the Mac. Seems to be fine in every other browser I've tried. Any ideas/fixes would be greatly appreciated. Also, when I view this page in DW Mx it looks like crap (doesn't resemble the parsed page at all - this concerns me because someone with a lot less knowledge may end it editing the site).



Download working files



Just an index page and stylesheet. The main problem is the Search box, it's supposed to be in the top right hand corner.



Thanks in advance,

Chas

Comments

  • Reply 1 of 4
    toweltowel Posts: 1,479member
    Quote:

    Originally posted by Macmedia

    The main problem is the Search box, it's supposed to be in the top right hand corner.



    Erm, what search box? (Firefox/Linux)



    Also, stylistically, put some sort of background behind the links at the top. The vertical stripes of the page background make them very painful to read.
  • Reply 2 of 4
    macmediamacmedia Posts: 152member
    Quote:

    Originally posted by Towel

    Erm, what search box? (Firefox/Linux)



    Also, stylistically, put some sort of background behind the links at the top. The vertical stripes of the page background make them very painful to read.



    Huh? I have no idea what you're seeing.
  • Reply 3 of 4
    toweltowel Posts: 1,479member
    Quote:

    Originally posted by Macmedia

    Huh? I have no idea what you're seeing.



    Edit: Oh, you meant the page contained in the downloadable .zip, not the page you linked to. I was confused by the giant banner "this page doesn't look right in IE", assuming it referred to the page I was looking at. Sorry.



    Yes, the search box does not render properly in IE/Mac. Have you checked out the Validator results? You may not want to use Strict XHTML (Transitional is much more forgiving), and there are a bunch of tag issues that should be resolved. Doesn't fix the search box, though...



    OK. The box is embedded in two nested DIV's, "header" and "search". Search has "float: right" and "text-align: left", which should put it on the right side on the container DIV, Header. But IE seems to have some issues with "float", so maybe rather than tightly sizing Search and putting it on the right side, it makes it as wide as its container (Header), and lets text-align convince it to put the search box on the left side instead. Firefox and Safari render the float properly, so it all looks correct.



    Changing Search's text-align to "right" seemed to resolve the issue in IE, because it forces the elements of Search over to that side. The only effect that change seems to have in Safari is to push the button to the right side of the text box, which IMO looks better, anyway.
  • Reply 4 of 4
    macmediamacmedia Posts: 152member
    Towel,

    Thanks for the input, greatly appreciated!



    Chas
Sign In or Register to comment.