SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot asterikx's Avatar
    Join Date
    May 2002
    Location
    Montana
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry HTML Problem - Please Help...

    I'm creating a new design for the PhotoWired.com home page at: http://www.photowired.com/index3.asp. The section I've been working on is the area that has the 4 photos and the Site Updates box.

    You'll notice that the top line of the site updates box does not line up with the top of the site updates image (the one with orange text). Also, the bottom line is then pushed to 2px tall instead of 1.

    The other problem I've been unable to figure out is the little FAQ box below the photos and above the links. On my mac it shows a dark grey border on the right side that adds an additional pixel's width and remains the same as the images height. I'm confused and frustrated.

    I'm sure both of these are problems with my coding, but I've already scrutinized it...

    Any help would be greatly appreciated.

    -- asterikx

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My initial thought is to use the table within the DIV, like you are using, and instead of the way that you are implementing those lines (not sure how you're doing it), use CSS bordering instead. Apply a 10px border-top and border-bottom to the table itself.

    Sketch
    Aaron Brazell
    Technosailor



  3. #3
    SitePoint Zealot asterikx's Avatar
    Join Date
    May 2002
    Location
    Montana
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Border

    Sketch,

    Thanks for your help. The way that I have the borders set up currently is to create a table cell with a 1 pixel spacer Gif and the background color set to the appropriate grey.

    I'm fairly new with CSS. Would you (or anyone) provide an example of how to setup a table border using a stylesheet? Does the CSS tag go in the table cell tag or in a div tag?

    -- asterikx

  4. #4
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    asterix,

    if you write this code in your css file
    Code:
    table.border {
    	border:1px outset #550429;
    }
    and then in your code put this
    Code:
    <table class="border" border=.... etc>
    you can go here to find more details on what attributes you can set on the table.

    Please note though that this doesn't work fully in older browsers so best to check.

    Sarah
    Regular user

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sarah
    if you write this code in your css file
    Code:
    table.border {
    	border:1px outset #550429;
    }
    and then in your code put this
    Code:
    <table class="border" border=.... etc>
    Sarah, quick question...

    why double up your border code by using both CSS *and* the usual html-style border attribute?

    Honest question
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry Bill,

    Not sure what you mean by 'usual html-style border attribute'? do you mean Border="1" in html tags or rather how I have written the css?

    Sarah
    Regular user

  7. #7
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I was referring to is something like this:
    Code:
    <div id="whatever">
      <table style="border-top: 10px solid #666666; border-bottom: 10px solid #666666;">
        <tr>
          <td>
            <!--Put your content here -->
          </td>
        </tr>
      </table>
    </div>
    That's over-simplified, but you get the point.

    Sketch
    Aaron Brazell
    Technosailor




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
  •