SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    weird problem with borders

    i am trying to make the switch over to CSS but it seems even the simplest effects are hard to achieve for me.

    I am trying to make a border around a list. It works if i do something like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>Untitled</title>
    </head>
    <body>
    
    <ul style="border-color: blue; border-width: 1px; border-style: solid;">
    <li>e</li>
    </ul>
    
    </body>
    </html>

    But the border just creates a single line above the first list item in this example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>Untitled</title>
    <style type="text/css">
    <!--
    li
    {
    	background-color: maroon;
    	color: white;
    	font-size: 16px;
    	padding: 0.5% 1% 0.5% 1%;
    	font-family: monospace;
    	float: left;
    	margin: 0px 5px 0px 0px;
    	border-color: gray;
    	border-width: 2px;
    	border-style: solid;
    	font-weight: bold;
    	list-style: none;
    }
    -->
    </style>
    </head>
    <body>
    
    <ul style="border-color: blue; border-width: 1px; border-style: solid;">
    <li>e</li>
    </ul>
    
    </body>
    </html>
    Any ideas what i am doing wrong? im testing on firefox/Mac if it makes a difference.

    busch

  2. #2
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this

    ul{
    border: 1px solid blue;
    }

    li{
    background-color: maroon;
    color: white;
    font-size: 16px;
    padding: 0.5% 1% 0.5% 1%;
    font-family: monospace;
    margin: 0px 5px 0px 0px;
    border:2px solid gray;
    font-weight: bold;
    list-style: none;
    }

  3. #3
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still no luck

  4. #4
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you take the style off the ul in the html?

    <ul>
    <li>e</li>
    </ul>

  5. #5
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup.

  6. #6
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's the float.

    When you float something you take it out of the natural flow of the document which basically means that the space it was taking up inside the borders of the ul has gone and so your borders collapse and you get a thick line.

    By changing float:left to display:inline you stay in the borders and so... Then you need to add the same padding to the ul as you have to the li. Then it looks pretty cool. Good maroon...

    Actually - one more thing before I forget - you might want to learn the shorthand for borders, padding, etc - quite handy.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<title>Untitled</title>
    <style type="text/css">
    <!--
    ul 
    {
    	border: 1px solid blue;
    	padding: 0.5% 1%;
    	
    	}
    li
    {
    	background-color: maroon;
    	color: white;
    	font-size: 16px;
    	padding: 0.5% 1%;
    	font-family: monospace;
    	display:inline;
    	margin: 0px 5px 0px 0px;
    	border:2px solid gray;
    	font-weight: bold;
    	list-style: none;
    }
    -->
    </style>
    </head>
    <body>
    
    <ul>
    <li>e</li>
    <li>f</li>
    </ul>
    
    </body>
    </html>
    I hope this helps.

  7. #7
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BonRouge,
    Thanks! That solved my problem and added some valuable beta to my limited CSS knowledge.
    busch

  8. #8
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad I could help.


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
  •