CSS no table layout problems - need help
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
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
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.
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.
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.
Thanks for the input, greatly appreciated!
Chas