...

View Full Version : Border-spacing & IE



leelu
07-08-2008, 08:01 PM
I have a table in which I want the cells particularly spaced. It is quite easy to achieve in Firefox (using border-spacing), but I cannot for the life of me get it to work in IE. I understand that no version of IE supports border-spacing (although IE8 plan to support it). What could I use as a substitute?

I do NOT want any attributes in my HTML; I want it all done in my CSS. Border-collapse: collapse is not an option, either, because I do not want my spacing to be zero.

This my current CSS, which works with Firefox:

div#navigationDiv table.navigation
{
margin-left: auto;
margin-right: auto;
text-align: center;
border-spacing: 15px;
}

If anyone could help me out, I would be very grateful. I have been trying to find a solution for this all day, and it's really starting to irritate me.

leelu
07-08-2008, 09:37 PM
Okay, I am attempting to use an unordered list in lieu of a table. I have it to where the list displays like this: blah blah blah blah , instead of the traditional top-to-bottom. However, I cannot get the whole thing centered on my page. Also, I think the spacing between each item in the list is still not working properly in IE. *wait, I take that back; the spacing is proper in IE*

Here is the CSS code for the ul list and its components:

div#navigationDiv ul#navigation
{
height: 2em;
list-style: none;
width: 740px;
margin-right: auto; <--this does not work
margin-left: auto; <--this does not work
}

div#navigationDiv ul#navigation li
{
float: left;
margin: 0px 1em 0px 1em;
}


Please, any help with my questions will be greatly appreciated.

jcdevelopment
07-08-2008, 09:47 PM
i believe this is your problem



div#navigationDiv ul#navigation li
{
float: left;
margin: 0px 1em 0px 1em;
}



try this



div#navigationDiv ul#navigation li
{
display:inline;
margin: 0px 1em 0px 1em;
}

leelu
07-08-2008, 10:00 PM
I changed my previous ul/li CSS to this:

div#navigationDiv ul#navigation
{
height: 2em;
/*list-style: none;*/
width: 740px;
}

div#navigationDiv ul#navigation li
{
display: inline;
/*float: left;*/
margin: 0px 1em 0px 1em;

}

I changed to display: inline as you suggested, but I am still having difficulty getting the list to center on my page.

It is at least displaying (nearly) identically now, whether I use Firefox or IE, though.

Thank you for the advice, by the way, whether it works or not. 8)

leelu
07-10-2008, 09:16 PM
If anyone has any suggestions, please, I'd like to hear them.

effpeetee
07-11-2008, 03:45 PM
We really need to see your entire code or better still a link to your site.

It is very difficult to help without access to your images, etc.

Frank

leelu
07-11-2008, 05:31 PM
CSS:

body
{
background-color: #000000;
color: #FFFFFF
}

div#companyName
{
width: 740px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

div#navigationDiv
{
width: 740px;
margin: 25px auto auto auto; /* top right bottom left */
}

div#navigationDiv table.navigation
{
margin-left: auto;
margin-right: auto;
text-align: center;
border-spacing: 15px;
}

div#navigationDiv ul#navigation
{
height: 2em;
/*list-style: none;*/
width: 740px;
}

div#navigationDiv ul#navigation li
{
display: inline;
margin: 0px 1em 0px 1em;
width: 740px;
}

img
{
border: none;
}

a
{
text-decoration: none;
}

a:hover
{
background-color: green;
}

div#content
{
width: 740px;
margin: 2em auto auto auto; /* top right bottom left */
border-top: 2px dotted; /* thickness type */
border-bottom: 2px dotted; /* thickness type */
padding: 2em 0px 1em 0px; /* top right bottom left */
}

div#content p
{
padding: 0em 2em 1em 2em; /* top right bottom left */
text-align: justify;
font-family: Arial;
font-size: 15px;
}

div#footer
{
width: 740px;
margin: 2em auto auto auto; /* top right bottom left */
margin-right: auto;
margin-left: auto;
}

div#footer p
{
font-family: Arial;
font-size: 10px;
text-align: center;
}


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir = "ltr" lang = "en-us">
<head>
<meta content = "text/html; charset = ISO-8859-1" http-equiv =
"content-type" />

<link rel = "shortcut icon" href = "BC.ico" />
<link rel = "stylesheet" type = "text/css" href = "home3_v2.css" />

<title> BC - Home </title>
</head>

<body>
<div id = "companyName"> <img src = " BC_logo.png" alt = "logo" />
</div>

<div id = "navigationDiv">
<ul id = "navigation">
<li> <a href = "home3_v2.html"> <img src = "BC_navHome.png" alt =
"Home" /> </a> </li>
<li> <a href = "services.html"> <img src = "BC_navServices.png" alt
= Services" /> </a> </li>
<li> <a href = "products.html"> <img src = "BC_navProducts.png" alt
= Products" /> </a> </li>
<li> <a href = "store.html"> <img src = "BC_navStore.png" alt =
"Store" /> </a> </li>
<li> <a href = "contact.html"> <img src = "BC_navContact.png" alt =
"Contact" /> </a> </li>
</ul>
</div>

<div id = "content">
</div>

<div id = "footer">
</div>
</body>
</html>

Okay, that is the whole of the code. I did not include the contents of the "content" and "footer" because it is just simple <p> stuff. The "companyName" and "navigationDiv" are the two that contain images. Also, the "companyName" is working fine. It's just the navigation that will not center.

Both the CSS and HTML were run through a validator and passed, so I do not think anything is incorrect, but I cannot think of anything else to do to make the navigation bar center.

I cannot link to the site because it is not up yet. I have just been local hosting it while I work on it. Oh, and the images used in the navigation bar are just pngs that say "Store" or "Contact", etc. I only used images for that because I used a font that is not very common--this way it always looks the same whether that browser has that font or not.

I hope all this helps. 8)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum