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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    88
    Thanks
    4
    Thanked 1 Time in 1 Post

    CSS Site, Fine in ie, firefox slightly deformed

    Link
    CSS

    It looks how i designed it in IE but in firefox the layout seems to be all over the place.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Well that would be because you've designed it for the none-standards compliant browser! You'll find it a lot easier to code a web site for Firefox and then use hacks/conditional statements to get the correct rendering in IE, rather than the other way round.

    The first thing I would add, if I were you, is the Universal Selector as it will completely zero out all margins in IE and Firefox, giving you a more supple base to begin building your pages on. IE and FF add their own, so cancelling them out makes it much easier to build a page that looks the same in both browsers.

    To center your page you don't need all those negative margins and positioning, just use:

    Code:
    #maincontainer {
    	width: 776px;
    	height: auto;
    	margin: 0 auto;
    	overflow: hidden;
    }
    I'm not sure what you are using as a background to your site, but it would be best to put it here so that it would stretch the height of the container div, and therefore all of your content.

    Your footer would probably be better placed inside the container and all of that positioning removed again:

    Code:
    #footer {
    	width: 780px;
    	height: 31px;
    	background: url(images/footer.jpg) no-repeat;
    	float: left;
    }
    Just some tips to start with... plus you have some validation errors it would probably be worth sorting out too.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    88
    Thanks
    4
    Thanked 1 Time in 1 Post
    Thanks

    Decided just to re-do it, code it for firefox instead and seems to have worked out well.

    http://www.designerhost.co.uk/fireplace/firefox.html

    Not checked for validation errors.

    Shame about the jaggy fonts though, any way to sort that?

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Hmmm... two options... change them to images (not overly semantic, although they can have an alt tag) or try a different font. More and more frequently I'm finding that design I create in Photoshop simply don't look as good in browsers because they aren't able to render smooth, large fonts.

    I thought I'd let you know that I've stolen the code for the javascript thingy to use on my site, sorry! I like it so went through and took the relevant bits, hope you don't mind!

    I would suggest that you start indenting your code. I've checked for validation again and you have no alt tags in any of your images, which the doctype and web standards ask for. You can also get rid of the 'tabindex' as that is not required for anything as far as I can tell? And you are still missing a closing div, or have one too many open? Indent your code properly and you should be able to see which one it is you are missing
    Last edited by ahallicks; 06-01-2007 at 10:37 AM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

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