Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Problem, tried EVerything

    I have a very small problem that I can't fix. Here's the code:

    html:
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" title="default" href="resultstyle.css" />
    <title>Untitled Document</title>
    </head>
    
    <body>
     
    <ul>
    	<li class="bg1">
    		<ul>
    			<li class="bg1_left"><a href="/user/l06b58qt/ph"><b>Something</b></a><br />
    
    				<b><small>Something</small></b><br />
    
    			</li>
    			
    			<li class="top">
    				<div style="float: left;">
    					<a href="/topic/7c917rcc#p7c917rcc" class="msg"><b>Nickname schreef op Date:</b></a>
    				</div>
    				
    				<div style="float: right;">
    
    					<a href="/topic/47ndbn43/?p=reply&amp;q=trqfkrqf"><img src="/i/f/q.gif" alt="Citeer bericht in db2" /></a>
    					<a href="/topic/47ndbn43/?p=reply&amp;q=trqfkrqf"><img src="/i/f/q.gif" alt="Citeer bericht in nb2" /></a>
    
    				</div>
    			</li>
    			
    			<li class="ms">		
    				Message
    			</li>
    			
    			<li class="bottom">
    				<div style="float: left;">
    
    					Something
    				</div>
    			</li>
    
    		</ul>
    	</li>
    </ul>
    
    </body>
    </html>
    css:
    Code:
    .bg1 {
    	background-color : #e6e7ec;
    }
    .bg2 {
    	background-color : white;
    }
    body {
    	margin : 5px;
    	border : 0;
    }
    a {
    	color : blue;
    	border : 0;
    	margin : 0;
    	padding : 0;
    }
    b {
    	color : blue;
    	border : 0;
    	margin : 0;
    	padding : 0;
    }
    a:hover {
    	color : blue;
    	text-decoration : none;
    	border : 0;
    }
    img {
    	border : 0;
    }
    ul {
    	list-style : none;
    	padding : 0;
    	margin : 0;
    	width : 800px;
    }
    ul li {
    	border-style : solid;
    	border-color : #485780;
    	border-width : 1px 1px 0 1px;
    	margin : 0;
    	padding : 0;
    }
    ul li ul {
    	list-style : none;
    	padding : 0;
    	margin : 0;
    }
    ul li ul .bg1_left {
    	display : block;
    	width : 130px;
    	height : 200px;
    	float : left;
    	padding : 5px;
    	margin : 0;
    	border : 0;
    	border-right : 1px solid #485780;
    	background-color : white;
    }
    ul li ul .bg2_left {
    	display : block;
    	width : 130px;
    	height : 200px;
    	float : left;
    	padding : 5px;
    	margin : 0;
    	border : 0;
    	background-color : #e6e7ec;
    }
    ul li ul .top {
    	display : block;
    	width : 650px;
    	height : 40px;
    	border : 0;
    	border-bottom : 1px solid #485780;
    	padding : 0;
    	margin : 5px;
    	font-size : 12pt;
    }
    ul li ul .bottom {
    	display : block;
    	width : 650px;
    	height : 40px;
    	border : 0;
    	border-top : 1px solid #485780;
    	padding : 0;
    	margin : 5px;
    	font-size : 10pt;
    }
    ul li ul .tp a {
    	color : blue;
    	border : 0;
    }
    ul li ul .tp a:hover {
    	color : blue;
    	text-decoration : none;
    	border : 0;
    }
    ul li ul .ms {
    	display : block;
    	width : 650px;
    	height : 100px;
    	border : 0;
    	padding : 5px;
    	margin : 0;
    	font-size : 12pt;
    }
    This is all the code, there is nothing more or less.

    The problem is (in firefox) the <li class="bg1_left"> isn't all the way up, there's a space between it and the top border of the <li class="bg1">. This doesn't happen in IE. You can see what I mean if you try it in ff.. I tried everything I could possible think of but nothing seems to help or it just makes it worse, does anyone have any ideas?

    P.S. All code is now valid HTML and valid CSS.
    Last edited by Ge64; 01-05-2007 at 11:54 AM.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    And a link?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahallicks View Post
    And a link?
    Here you go:

    http://www.ge64.nl/test1234/test.xhtml

  • #4
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    ul li ul .top {
    	display : block;
    	width : 650px;
    	height : 40px;
    	border : 0;
    	border-bottom : 1px solid #485780;
    	padding : 0;
    	margin : 0 5px 5px 5px;
    	font-size : 12pt;
    }

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Quick question. Why is it saved as .xhtml? IE won't render .xhtml files as they are not recognised?

    ^ Damn you Bonrouge, was just about to put that!
    Last edited by ahallicks; 01-05-2007 at 12:14 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BonRouge View Post
    Code:
    ul li ul .top {
    	display : block;
    	width : 650px;
    	height : 40px;
    	border : 0;
    	border-bottom : 1px solid #485780;
    	padding : 0;
    	margin : 0 5px 5px 5px;
    	font-size : 12pt;
    }
    YAY!!! thanks a LOT!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •