SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Glasgow, Scotland
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Compatibility and formatting problems.

    Hey people!

    Thought Iíd make my first post a nice long one for yous .

    I'm working on a (hopefully) large site right now. I had previously designed the site using tables, but decided to attempt to convert (and improve) the base design using CSS. Iíve not really got any experience with CSS, but I wanted to learn it seeing as it offered more power over tables. Besides, given how complex I was intending to make the layout WITH tables, I thought it probably wouldnít take me much longerÖ All went (relatively) well when creating a very basic model to work with, however when I started embedding CSS boxes within a main CSS box I started getting margin, wrapping and cross browser compatibility problems . The layout is pretty complex, so Iíve had no luck scouring the internet for examples and tutorials, so I thought Iíd put the collective knowledge of the SitePoint forums to the test .

    RightÖ where to startÖ

    1. Iíve used absolute values to align the right column where I want itÖ The problem is itís great to look at until it extends further than the main or left columns - after that it overlaps the copyright on the bottom of the site, which I donít want. Iíve tried to avoid using absolute values, but the right column always ends up appearing below (and to the right) of the main column.

    2. Canít get the copyright information in the bottom to centre itself at the bottom of the page.

    3. I wanted the Latest Reviews and ELSPA Top 10 to be to take up 50% of the main panel each, with a small gap between them (probably 5px)

    4. Last main problemÖ There seems to be bugs in the formatting when the page is viewed at smaller resolutions (not as apparent without an actual POTD picture). Iím guessing itís some sort of wrapping problem that sometimes leaves large gaps between boxes (that I hadnít defined).

    Two minor points tooÖ

    1. It would be nice if there was a little more spacing between the POTD image and the text. I might be able to figure this one out myself, but if anyone could speed up the process, it would be appreciated.

    2. You might have noticed the table I stuck below the ELSPA Top 10. Is there an equally easy way of converting it to CSS or should I just take the easy route and keep it as a table?

    Any help in any or all those problems will be greatly appreciated.

    Oh Ė and for anyone else still reeling from my inconsistent formatting Ė donít worry, I just quickly threw together that page and didnít bother tidying the code. Itíll be fixed when I publish the siteÖ Honest!
    Attached Files Attached Files

  2. #2
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Glasgow, Scotland
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The attachment is taking a little bit to validate, so before this thread is relegated to somewhere near the rear of the forums here is a link to the work so far...

    http://sayro.yaboo.dk/Arkshell/dived.html

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Re: Compatibility and formatting problems.

    Originally posted by Ally153
    2. Canít get the copyright information in the bottom to centre itself at the bottom of the page.
    Try margin: auto;

    3. I wanted the Latest Reviews and ELSPA Top 10 to be to take up 50% of the main panel each, with a small gap between them (probably 5px)
    Try this:
    Code:
    #reviews {
     width: 45%;
     float: left;
     padding-right: 2.5%;
    }
    #top10 {
     width: 45%;
     float: left;
     padding-left: 2.5%;
    }

    4. Last main problemÖ There seems to be bugs in the formatting when the page is viewed at smaller resolutions (not as apparent without an actual POTD picture). Iím guessing itís some sort of wrapping problem that sometimes leaves large gaps between boxes (that I hadnít defined).

    Two minor points tooÖ

    1. It would be nice if there was a little more spacing between the POTD image and the text. I might be able to figure this one out myself, but if anyone could speed up the process, it would be appreciated.
    Try this:
    Code:
    CSS:
    <style type="text/css">
    img#potd {
      margin-right: 5px;
      margin-bottom: 5px;
    }
    </style>
    HTML
    <img id="potd" src="/images/blah.gif" alt="POTD" />

    2. You might have noticed the table I stuck below the ELSPA Top 10. Is there an equally easy way of converting it to CSS or should I just take the easy route and keep it as a table?
    It's tabular data, you can keep a table there as it is syntactically and semantically correct.

    Hope these help!

  4. #4
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Glasgow, Scotland
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm...

    The layout working ok for you? Unfortunately I didn't managed quite as well... Tried a few variations of margin: auto; in different places because I wasn't sure exactly where you meant I should put it (spot the newbie ). Also the review/top 10 problem still seems to be there, it's overlapping the copyright or news sections when the browser.

    This could all just be me though and my crummy understanding of CSS.

    Is the problem maybe how Iíve arranged my <div> tags in the body of the page?

    Thanks for the quick response though, much appreciated .


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
  •