SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    May 2001
    Location
    Sydney
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images Un-aligned in Firefox

    Hi. I have got my current design working in IE but nothing i try will make it work in other browsers.

    I don't expect anyone to solve it outright for me but if someone could take a look and make sure I am not making any No-No errors then I would appreciate it!

    The webiste in its current form can be found at http://www.grokspot.com/nit/final/

    This is only my second attempt at a tableless design and I am trial-and-error/guessing my way through it

    Cheers.

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This way of centering a div does only work in IE:
    Code:
    #outer {
    	width: 100%;
    	background-color: #336699;
    	text-align: center;
    }
    For other browsers try:
    Code:
    #header {
    	width: 790px;
    	height: 353px;
    	font-size: 0px;
    	text-align: left;
            margin:auto;
    }
    The other problems, I suspect, come from either using float:left and never using clear:left - adding this to your footer helps a bit - or from using relative positioning. Most of your relative positions can be achieved with either padding or margin anyway, so try to replace all of them and see what happens.
    Dan G
    Marketing Strategist & Consultant

  3. #3
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    c2uk beat me to the punch. This is one reason why you should never design a page using IE because IE doesn't handle floats correctly among many other things. Always get your page working in a modern browser like Firefox first.

  4. #4
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I overlooked this here:

    Quote Originally Posted by Mencus
    This is only my second attempt at a tableless design and I am trial-and-error/guessing my way through it
    trial and error works only that much, there is so much you just can't guess. My best advice here is to look at some very good tutorials or use some css templates.

    Some good tutorials on navigation design (lists!) and floated layouts can be found at maxdesign: http://css.maxdesign.com.au/index.htm

    Here are some template sites / template tuts:
    http://www.intensivstation.ch/templates/
    http://www.pixy.cz/blogg/clanky/css-3col-layout/
    http://www.webreference.com/authorin...yout/advanced/
    http://www.glish.com/css/
    http://blog.html.it/layoutgala/
    Dan G
    Marketing Strategist & Consultant

  5. #5
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help guys. So far I have been able to fix some things by adding margin:auto; and clear:both to a variety of places. However, my background border image in content will not display in firefox. If set it to float and display it works but then it is left aligned rather than centered?

    Any ideas?

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add overflow: hidden to #content. This forces FF (and other browsers that follow the spec correctly - this doesn't include IE) to expand to contain the floats.

  7. #7
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is great! So far I have learnt more about floats, clear, margin and overflow :P

    Thanks Tyssen, overflow was able to help me with footer and border. I no wonly have one problem left. My nav links on footer are out of alignment in Firefox. I have tried a whole variety of things but cant get any to work.

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the overflow: hidden from #footer and set ul#navlist { margin: 0; } (Also, where you've got margin: auto, it should probably be margin: 0 auto because you only want auto margins on the left and right, not top and bottom.)


Bookmarks

Posting Permissions

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