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 11 of 11
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS List problem

    The last problem was solved, now there's another problem (or 2 actually).

    Here comes the code again:

    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="/topic/topiccode/pagina"><b>Topic: topic<br />Pagina: page<br />Post: post<br/></b></a>
    			</li>
    			
    			<li class="top">
    				<div style="float: left;">
    					<a href="/topic/code#pcode" class="body"><b>'Nickname' schreef op Dins 10-4-2009, week 42, 14:53:</b></a>
    				</div>
    				
    				<div style="float: right;">
    					<a href="/topic/47ndbn43/?p=reply&amp;q=Code">Q:DB6<img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in DB6" /></a>&nbsp;
    					<a href="/topic/g9694tnh/?p=reply&amp;q=Code"><img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in NB2" />Q:NB2</a>
    				</div>
    			</li>
    			
    			<li class="ms">		
    				Message
    			</li>
    			
    			<li class="bottom">
    				<div style="float: left;">
    					Link: link
    				</div>
    			</li>
    
    		</ul>
    	</li>
    	
    	<li class="bg2">
    		<ul>
    			<li class="bg2_left">
    				<a href="/topic/topiccode/pagina"><b>Topic: topic<br />Pagina: page<br />Post: post<br/></b></a>
    			</li>
    			
    			<li class="top">
    				<div style="float: left;">
    					<a href="/topic/code#pcode" class="body"><b>'Nickname' schreef op Dins 10-4-2009, week 42, 14:53:</b></a>
    				</div>
    				
    				<div style="float: right;">
    					<a href="/topic/47ndbn43/?p=reply&amp;q=Code">Q:DB6<img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in DB6" /></a>&nbsp;
    					<a href="/topic/g9694tnh/?p=reply&amp;q=Code"><img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in NB2" />Q:NB2</a>
    				</div>
    			</li>
    			
    			<li class="ms">		
    				Message
    			</li>
    			
    			<li class="bottom">
    				<div style="float: left;">
    					Link: link
    				</div>
    			</li>
    
    		</ul>
    	</li>
    </ul>
    
    </body>
    </html>
    css:

    Code:
    body {
    	margin : 10px;
    	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 .bg1 {
    	background-color : #e6e7ec;
    	border-style : solid;
    	border-color : #485780;
    	border-width : 1px 1px 0 1px;
    	margin : 0;
    	padding : 0;
    	width : 800px;
    	height: 160px;
    	display : block;
    }
    ul .bg2 {
    	background-color : white;
    	border-style : solid;
    	border-color : #485780;
    	border-width : 1px 1px 0 1px;
    	margin : 0;
    	padding : 0;
    	width : 800px;
    	height: 160px;
    	display : block;
    }
    ul li ul {
    	list-style : none;
    	padding : 0;
    	margin : 0;
    }
    ul li ul .bg1_left {
    	display : block;
    	width : 130px;
    	height : 160px;
    	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 : 160px;
    	float : left;
    	padding : 5px;
    	margin : 0;
    	border : 0;
    	background-color : #e6e7ec;
    }
    ul li ul .top {
    	display : block;
    	width : 650px;
    	height : 25px;
    	border : 0;
    	border-bottom : 1px solid #485780;
    	padding : 0;
    	margin : 0 5px 5px 5px;
    	font-size : 12pt;
    }
    ul li ul .bottom {
    	display : block;
    	width : 650px;
    	height : 25px;
    	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 : 90px;
    	border : 0;
    	padding : 5px;
    	margin : 0;
    	font-size : 12pt;
    }
    link: http://www.ge64.nl/test1234/test.html

    As you may see, when I add a second post it gets shifted to the right in Firefox, or the height isn't correct in IE. I tried adding </ul><ul> between the posts but it doesn't help. I can't seem to find out what's wrong

  • #2
    New Coder
    Join Date
    Nov 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Having a look now... but was wondering why you are using list elements instead of divs?

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Why have you placed everything in a list? I think better practise would be to simply create a set of nice divs so you don't have to worry about removing any padding or list style types. You will find it much easier to a). code and b). understand!
    "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

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well I recently read an article about using CSS over tables, and the main idea was 'use html tags for what they are made for'. well i suppose listing a number of posts is a list, so I used a list. by the way the only thing needed to remove the bullets and stuff is list-style:none;.

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fair enough, sounds like good logic.

    but it's stricter than that, ul should be used for unordered lists i.e.

    • one
    • two
    • three


    in your case i would rewrite the page and use divs instead, you'll have fewer problems (in my experience styling list elements is a ball ache due to the different ways they are rendered in IE and Firefox)

    Also keep your styles out of the tags where possible, which should be 99% of the time

  • #6
    New Coder
    Join Date
    Nov 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    k the problem seems to be that you haven't floated your bg1 and bg2 classes left

    Code:
    .bg1 {
    	background-color : #e6e7ec;
    	border-style : solid;
    	border-color : #485780;
    	border-width : 1px 1px 0 1px;
    	width : 800px;
    	height: 160px;
    	float:left;
    }

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, i dont know, but it seems to make no difference...

    Also I actually rewrote a big part of it using divs instead of lists, and when I finally got it to work, guess what, the SAME thing happened in firefox, though the IE problem was fixed by grouping the 3 left <li>'s (divs) into 1 div and floating it to the right. But in FF it still shifts itself to the right even when I put a div around the entire <ul> with the width and height and nopadding nomargin etc. I'm going to try around a bit more with that but it's getting annoying :P

  • #8
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wooo i fixed it (almost). I put a div around every <li class="bg1_left"> and floated that to the left. Now there's another major browser-related problem:

    In IE there is a slight margin between both posts, in FF there is no margin but the <li bg1_left> has more height than it should, and overlaps the one beneath it causing that part of the top border to disappear. I will post code and link for this within a few seconds.

    I think the FF problem is because of the 5px padding in the bg1_left, but if I make the height 150px instead of 160px, it shows up too short in IE (and perfect in FF). Is there a way to fix this?

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Adding the floats makes it look spot on in FF but no change to the layout in IE.
    "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

  • #10
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok here is the new code so far:

    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="resultstyle3.css" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div class="posts">
    
    	<div class="post_bg1">
    	
    		<div class="left">
    			<a href="/topic/topiccode/pagina"><b>Topic: topic<br />Pagina: page<br />Post: post<br/></b></a>
    		</div>
    			
    		<div class="right">
    			<div class="top">
    				<div style="float: left;">
    					<a href="/topic/code#pcode" class="body"><b>'Nickname' schreef op Dins 10-4-2009, week 42, 14:53:</b></a>
    				</div>
    					
    				<div style="float: right;">
    					<a href="/topic/47ndbn43/?p=reply&amp;q=Code">Q:DB6<img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in DB6" /></a>&nbsp;
    					<a href="/topic/g9694tnh/?p=reply&amp;q=Code"><img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in NB2" />Q:NB2</a>
    				</div>
    			</div>
    				
    			<div class="msg">		
    				Message
    			</div>
    				
    			<div class="bottom">
    				<div style="float: left;">
    					Link: link
    				</div>
    			</div>
    		</div>
    		
    	</div>
    
    	<div class="post_bg2">
    	
    		<div class="left">
    			<a href="/topic/topiccode/pagina"><b>Topic: topic<br />Pagina: page<br />Post: post<br/></b></a>
    		</div>
    			
    		<div class="right">
    			<div class="top">
    				<div style="float: left;">
    					<a href="/topic/code#pcode" class="body"><b>'Nickname' schreef op Dins 10-4-2009, week 42, 14:53:</b></a>
    				</div>
    					
    				<div style="float: right;">
    					<a href="/topic/47ndbn43/?p=reply&amp;q=Code">Q:DB6<img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in DB6" /></a>&nbsp;
    					<a href="/topic/g9694tnh/?p=reply&amp;q=Code"><img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in NB2" />Q:NB2</a>
    				</div>
    			</div>
    				
    			<div class="msg">		
    				Message
    			</div>
    				
    			<div class="bottom">
    				<div style="float: left;">
    					Link: link
    				</div>
    			</div>
    		</div>
    		
    	</div>
    
    </div>
    
    </body>
    </html>
    css:
    Code:
    body {
    	margin : 10px;
    	border : 0;
    }
    
    .posts {
    	width: 800px;
    	border:0;
    	margin:0;
    	padding:0;
    	display:block;
    	float:left;
    	clear:left;
    }
    
    .post_bg1 {
    	float:left;
    	clear:left;
    
    	background-color : #e6e7ec;
    	border-style : solid;
    	border-color : #485780;
    	border-width : 1px 1px 0 1px;
    	margin : 0;
    	padding : 0;
    	width : 800px;
    	height : 160px;
    	display : block;
    }
    
    .post_bg2 {
    	float:left;
    	clear:left;
    	
    	background-color : white;
    	border-style : solid;
    	border-color : #485780;
    	border-width : 1px 1px 1px 1px;
    	margin : 0;
    	padding : 0;
    	width : 800px;
    	height : 160px;
    	display : block;
    }
    
    a {
    	color : blue;
    }
    
    a:hover {
    	color : blue;
    	text-decoration : none;
    	border : 0;
    }
    
    img {
    	border : 0;
    }
    
    .left {
    	float: left; clear: left;
    	display : block;
    	width : 130px;
    	height : 160px;
    	padding : 5px;
    	margin : 0;
    	border : 0;
    	border-right : 1px solid #485780;
    	background-color : white;
    }
    .right {
    	float: right; clear: right;
    	display : block;
    	width : 650px;
    	height : 160px;
    	padding : 0;
    	margin : 0;
    	border : 0;
    }
    .top {
    	float: right; clear: right;
    	display : block;
    	width : 650px;
    	height : 25px;
    	border : 0;
    	border-bottom : 1px solid #485780;
    	padding : 0;
    	margin : 0 5px 5px 5px;
    	font-size : 12pt;
    }
    .bottom {
    	float: right; clear: right;
    	display : block;
    	width : 650px;
    	height : 25px;
    	border : 0;
    	border-top : 1px solid #485780;
    	padding : 0;
    	margin : 5px;
    	font-size : 10pt;
    }
    .msg {
    	float: right; clear: right;
    	font-family:"Courier New", Courier, monospace;
    	display : block;
    	width : 650px;
    	height : 90px;
    	border : 0;
    	padding : 5px;
    	margin : 0;
    	font-size : 12pt;
    }
    link: http://www.ge64.nl/test1234/test2.html

    the IE version looks like it's supposed to but in FF you see the left part is too big.

  • #11
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok thanks all very much for your help!!! I got it sorted now was a lot of work but Finally it all works in both IE and FF yay i'm so happy lol


  •  

    Posting Permissions

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