...

View Full Version : CSS Problem, tried EVerything



Ge64
01-05-2007, 12:48 PM
I have a very small problem that I can't fix. Here's the code:

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="/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:

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

ahallicks
01-05-2007, 12:58 PM
And a link?

Ge64
01-05-2007, 12:58 PM
And a link?

Here you go:

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

BonRouge
01-05-2007, 01:08 PM
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;
}

ahallicks
01-05-2007, 01:09 PM
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!

Ge64
01-05-2007, 01:10 PM
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!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum