CSS List problem [Archive] - CodingForums.com

Ge64

01-05-2007, 01:41 PM

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

Here comes the code again:

html:

<!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&q=Code">Q:DB6<img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in DB6" /></a> 
<a href="/topic/g9694tnh/?p=reply&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&q=Code">Q:DB6<img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in DB6" /></a> 
<a href="/topic/g9694tnh/?p=reply&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:

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 :(

blueskyz

01-05-2007, 01:48 PM

Having a look now... but was wondering why you are using list elements instead of divs?

ahallicks

01-05-2007, 01:48 PM

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!

Ge64

01-05-2007, 01:52 PM

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;.

blueskyz

01-05-2007, 02:17 PM

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 :thumbsup:

blueskyz

01-05-2007, 02:27 PM

k the problem seems to be that you haven't floated your bg1 and bg2 classes left

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

Ge64

01-05-2007, 02:58 PM

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

Ge64

01-05-2007, 03:13 PM

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?

ahallicks

01-05-2007, 03:17 PM

Adding the floats makes it look spot on in FF but no change to the layout in IE.

Ge64

01-05-2007, 03:26 PM

Ok here is the new code so far:

html:
<!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&q=Code">Q:DB6<img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in DB6" /></a> 
<a href="/topic/g9694tnh/?p=reply&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&q=Code">Q:DB6<img src="http://www.inkoopactie.net/i/f/q.gif" alt="Citeer bericht in DB6" /></a> 
<a href="/topic/g9694tnh/?p=reply&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:
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.

Ge64

01-05-2007, 03:53 PM

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 :D yay :) i'm so happy lol