#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    2
    Rep Power
    0

    Use of 'border-style:solid' results in misaligned text in Firefox


    I am at a total loss on this one.

    I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box.

    As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself).

    At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy.

    Css:
    Code:
    /* Navigation */
    
    #nav { 
    	width: 821px;
    	height: 18px;
    	border: 1px;
    	border-style: solid;
    	border-color:red;
    }
    
    
    #nav ul { 
    }
    
    #nav li {
    	display:inline;
    	float:left;
    	background-color:#9E0C0C;
    	text-align:center;
    	color:white;
    	font-family: arial, san-serif;
    	font-size: 14px;
    	font-variant: small-caps;
    }
    and page:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" >
    <link href="style.css" rel="stylesheet" type="text/css" media="screen">
    </head>
    <body>
    <div id="nav">
     	   		
    			<ul>
    				<li>Home</li>
    				<li>XXX</li>
    				<li>XXX</li>
    				<li>CCC</li>
    				<li>HHH</li>
    				<li>JJJ</li>
    				<li>kkk</li>
    				<li>KKK</li>
    			</ul>
    	</div>
    </body>
    </html>
    (As I said, I've stripped it to absolutely nothing else.)

    Any suggestions would be welcome.

    (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.)
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    363
    Rep Power
    133
    Hi there NMSaunders,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    #nav { 
        width:821px;
        /*height:18px;*/
        border-width:1px;
        border-style:solid;
        border-color:red;
        overflow:hidden;
     }
    #nav ul {
        margin:0;
        padding:0;
        list-style-type:none;
     }
    #nav li {
        display:inline;
        float:left;
        background-color:#9E0C0C;
        text-align:center;
        color:white;
        font-family:arial,san-serif;
        font-size:14px;
        font-variant:small-caps;
     }
    
    coothead
    ~ the original bald headed old fart ~
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    2
    Rep Power
    0
    Hi there

    Thank you for the help, and for the warm welcome.

    That worked for the menu bar (wooo!), but I am having the same issue elsewhere on the page, where I elected to use classes instead of explicitly identified divs so that I could apply a single formatting style in multiple places without restating it over and over.

    I applied the same approach to the 'title' class, but no go. Any ideas on why the class statement might not work?

    Code:
    .title { position: relative;
    	top: 4px ;
    	bottom: 5px;
     	margin-left: auto;
      	margin-right: auto;
    	width: 95%;
    	height: 18px;
    	padding: 2px 0px 0px 0px; 
    	background-color:#9E0C0C;
    	border: 2px;
    	border-style:solid;
                 border-color:red;
    	overflow:hidden;
    
    }
    The HTML looks like:

    Code:
    	<div id="right-main">
    		<div class="title">
    			<p>Gallery</p>
    		</div>
    		<div class="right-content">
    			<p>clickable image</p>
    		</div>
    
    	</div>
    Thank you again!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Location
    Los Angeles, CA
    Posts
    28
    Rep Power
    0
    add this to your css it should fix it

    Code:
    .title p { margin: 0; }

IMN logo majestic logo threadwatch logo seochat tools logo