SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two questions about CSS.

    I have a list that i use for my menu:

    Code:
    <ul class="menu">
    	<li><a href="shoutbox.php">Shoutbox</a></li>
    	<li><a href="maria_diary.php">Maria's Diary</a></li>
    </ul>
    Code:
    ul.menu {
    	list-style: 		none;
    	margin: 		0px 0px 10px 25px;
    	padding:		0px;
    }
    this list looks perfect in IE 6 but in opera 7 every <li> element has a space between them, like there is two <br/> after them. I want them to lay directly under each other.

    Question Nr. 2

    I i have a table that has 3 columns and I want the first one to be 20% of the width, the third one to be absolute 100px, and the middle (second) column to be 100% of what is left. how do I write that?


    Thanks in advance!

    Martin Lundberg
    Sweden

  2. #2
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lundberg
    this list looks perfect in IE 6 but in opera 7 every <li> element has a space between them, like there is two <br/> after them. I want them to lay directly under each other.
    Try:

    li { border: 0; margin: 0; padding: 0; }

    I i have a table that has 3 columns and I want the first one to be 20% of the width, the third one to be absolute 100px, and the middle (second) column to be 100% of what is left. how do I write that?
    I'm not sure that you can with tables - this being one of the many areas that CSS-P is superior. IS a table necessary? (IE. are you presenting tabular data?)

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In some browsers you have to get rid of any extra space in your source code for it to display list elements flush together. try changing your code to

    Code:
    <ul class="menu"><li><a href="shoutbox.php">Shoutbox</a></li><li><a href="maria_diary.php">Maria's Diary</a></li></ul>
    yes, it makes it harder to read/work with, but should have the desired effect.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Question 2:

    You could try something similar to the following:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <title>Tables</title>
    <style type="text/css">
    <!--
    table {width: 100%;}
    .c1 {width: 20%;}
    .c2 {width: 100px;}
    -->
    </style>
      </head>
      <body>
        <table border="1">
          <tr>
            <td class="c1">
              One
            </td>
            <td class="c2">
              Two
            </td>
            <td>
              Three
            </td>
          </tr>
        </table>
      </body>
    </html>

  5. #5
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder
    Question 2:

    You could try something similar to the following:
    I stand corrected

    Though the classes need to be applied as follows to achieve what he wants:

    <td class="c1"> One </td>
    <td> Two </td>
    <td class="c2"> Three </td>

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Argh, damn my Dyslexic mind

  7. #7
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    In some browsers you have to get rid of any extra space in your source code for it to display list elements flush together. try changing your code to

    Code:
    <ul class="menu"><li><a href="shoutbox.php">Shoutbox</a></li><li><a href="maria_diary.php">Maria's Diary</a></li></ul>
    yes, it makes it harder to read/work with, but should have the desired effect.
    Didn't work, the list still has spaces in opera... =/

    And for the table widths thanks xhtmlcoder, worked perfect, with hurricane's fix ofcourse =P

    any other ideas on the list problem?

    Martin Lundberg
    Sweden

  8. #8
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lundberg
    Didn't work, the list still has spaces in opera... =/
    did you try the additional style suggested by hurricane ?
    li { border: 0; margin: 0; padding: 0; }
    if so, and you're still having problems...can we see the page ? have you got a URL ?
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  9. #9
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oui! I did.

    Martin Lundberg
    Sweden

  10. #10
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Morges Switzerland
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had some similar problems and did this:

    On several places I've put: height : 16px;

    Without this, Opera 7 shows a lot of space between two menu items.

    For Internet Explorer 6 the line-height had to be set:
    line-height : 14px;

    When you don't do, it may look good, but when someone tries to change the font size, then only the

    When you don't do, it may look good, but when someone tries to change the font size, then only the space between the menu items changes; the font size itself remains the same

    My menu's are here: http://www.wimb.net/sec_site/menudemo/menudemo.html

    wimb

  11. #11
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean that u've putted height: 16px on several places? Where? =)

    Martin Lundberg
    Sweden

  12. #12
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! sorry, I got it now =) THanks, worked well!

    Martin Lundberg
    Sweden


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
  •