SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    England
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Can anyone give me a hint - 3 clmn site probs.

    Hi All,

    I am dabbling with pure CSS sites for the first time and starting to wonder wether I've chosen a bone a little too big for me to chew on.

    Anyway, the site is a 3 clm one with a Top navigation contained in the header. In i.e, I managed to almost get it to look exactly how I want (less the footer). However, I have serious problems in Mozilla with Tbles (DIV's) collapsing and overlapping. Please see this link http://www.funds4me.co.uk/test_internal.asp

    Hope someone can help.

    Cheers

    Marcel

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give me a few and I'll take a look at your site.

    How do you want the page arranged structurally? Do you want the content to appear at the top when CSS is not enabled, below the columns, or in between the left and right column?

    Your answer to this question will determine the source code order and its corresponding styles.

  3. #3
    SitePoint Member
    Join Date
    Mar 2004
    Location
    England
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan,

    Thanks so much for your reply. I guess prefferable I would like the site to remain looking as it is - it, main content between the other two colomns. I guess I better buy a good book about this huh? Any reccommendation for a complete novice in pure css sites?

  4. #4
    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)
    There's a problem with your link.

  5. #5
    SitePoint Member
    Join Date
    Mar 2004
    Location
    England
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    There's a problem with your link.
    . Yep thanks. Our server was down. Should be working fine now.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Check your dimensions carefully as you have inner elements that add up greater than the parents width. IE will stretch the container but mozilla will just let them overflow.

    For example your hoseasons holidays header are all 5px too wide because you have added 5px padding to the width.

    Code:
    .mrctitleote {height: 24px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color: #ffffff; padding-top: 5px; padding-left: 5px; float:left; background-color:#0066FF;}
    You have defined the width here:
    Code:
    #mrctitle, #mrctitle2, #mrctitle3, #mrctitle4, #mrctitle5, #mrctitle6{width: 419px; height:24px; float:none; POSITION: relative;
    Code:
    <div id="mrctitle3" class="mrctitleote">Hoseasons Holidays</div>
    As the parent is only 419px wide you cannot have an inner element width 419px and 5px padding left. The text is centred anyway so there so no need for the padding left so remove it.

    You have also set a height for the content block but your text is already too big to stay within the height. Again IE will expand the div but firefox will do what you told it. Either remove the height or reduce the content.

    Why are you absolutely placing the links within those sections. Just let them follow in the normal flow and they will fall into place.

    I read that Dan above is helping you with the code so I won't go into anymore detail.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can go into detail, Paul.

  8. #8
    SitePoint Member
    Join Date
    Mar 2004
    Location
    England
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks so much for your insightful reply. I read some Hacks on the sitepoint tutorials and managed to use them successfully. With regards to your suggestions see below

    Quote Originally Posted by Paul O'B
    Check your dimensions carefully as you have inner elements that add up greater than the parents width. IE will stretch the container but mozilla will just let them overflow.

    Followed and like magic all is fixed

    Quote Originally Posted by Paul O'B
    Why are you absolutely placing the links within those sections. Just let them follow in the normal flow and they will fall into place.
    This little trick didnt quite work for me. I'm sure its because I have another piece of code somewhere else, which shouldnt actually be there.

    Now I only have 3 issues left. If you could suggest 2 of them (havnt tried hard enough for the third and I love a challenge ) The first of the remaining problems is on the left navigation. If you look at it from ie, you can see that "Featured Merchant" and "Navigation" has a nice blue image background. Under Mozilla, the background for Navigation positions itself right under the other Featured Merchant Background.

    My second anoying thing is actually in IE. If you look at the last link of the Shop Categories, you will see a link which says "Utility Bills etc. Now browse right down to the bottom of the page on your left on the base of the last box (Hoseasons 5) you can see that a piece of that link appears " c." ????

    I'm sure I will have quite a few more questions but you will be pleased to know I bought the SitePoint book today

    Thanks again

    Marcel

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For firefox try adding clear both to the element as follows.
    Code:
    #blbg2 {width: 183px; height: 24px; border: 1px;clear:both}
    For the dupliacte character in ie try this fix:
    Code:
    #shopnav a{position:relative}

    You seem to be using a lot of unnecessary styles and lots of hacks for mozilla. You are defining the font family on hundreds of elements when you really only need to define it once on the body and then just define it where you want something different.

    Firefox will rareley need any hacks so your html>body hacks probably should be directed at IE instead as that is the likely culprit. However you will probably find that the issues do not really need hacks and so you should look at where your code is going wrong. make sure you are controlling all the default margins and padding correctly as this varies between browsers and you need to take control.

    Make sure you are clearing the floats and avoid using heights when in fact you want content to expand. Chack and dounle check your dimensions so that padding and borders are taken into account when widths are applied.

    You have applied massive height to the 2 outer columns and this is unlikely to work in any real world use as you should let content dictate the height. If you want equal columns then simply use a background image as in this example.

    http://www.pmob.co.uk/temp/3col-centred-template.htm


    Hope that helps


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
  •