...

View Full Version : CSS Border problem (with IE 6)



senkei
07-31-2007, 01:00 PM
Hi guys. I have a problem trying to get the borders to show up in my IE 6. They show up fine in firefox and opera. I was wondering if you could help me fix it.

<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #FF00FF;
}
#a {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#b {
border-bottom: 1px solid #FFFFFF;
}
-->
</style></head>

<body>
<table align="center" width="200">
<tr>
<td height="10" id="b"></td>
</tr>
<tr>
<td height="10" id="b"></td>
</tr>
<tr>
<td height="10" id="a"></td>
</tr>
</table>
</body>
</html>

_Aerospace_Eng_
07-31-2007, 01:12 PM
The td cells can't be empty. Try adding &nbsp; inside of them. I'm also curious as to why you are using tables for this. I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?".

Also you can't use the same ID more than once. If you must use the same styles then use a class. I would do like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
background: #F0F;
margin:0;
padding:0;
color:#FFF;
}

#container {
width:200px;
margin:auto;
}

.a {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
height:10px;
}

.b {
border-bottom: 1px solid #FFF;
height:10px;
}
</style>
</head>
<body>
<div id="container">
<div class="b"></div>
<div class="b"></div>
<div class="a"></div>
</div>
</body>
</html>

If text is to be inside of the elements then I wouldn't really set a height on them either.

senkei
07-31-2007, 01:50 PM
The td cells can't be empty. Try adding &nbsp; inside of them. I'm also curious as to why you are using tables for this. I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?".

Also you can't use the same ID more than once. If you must use the same styles then use a class.

If text is to be inside of the elements then I wouldn't really set a height on them either.Thanks for the quick reply and for the advice on IDs and class. I pretty much learnt what little html coding i know from looking at other people's coding and experimenting. So my knowledge is really lacking in general.

I've been using tables inside tables for yonks now to hold together images and text as the basis of my website's structure. I guess that's outdated and bad coding now. I'll definitely read up on your linky. Sounds helpful.

Anyways, what i was trying to do was make some space and a white line to separate my navigation buttons from my counter. I wanted to keep the 10px height so i didn't put &nbsp; inside them. Like:

[ button ]

---------- (line)

[ counter ]

How would you go about doing this? The problem i had was that the line wouldn't show up in IE unless i had something within the empty space. There's a few options i can take to do this, but they don't feel right to me.

I was either going to make an image and place it as a background in the space to make a separator but i really wanted to create the border from the code. The other option was to make a table but that feels kinda wrong.

Your method works, so should i use it? Or is there a better way or doing it?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum