...

View Full Version : Internet explorer display problem



aatwo
02-06-2007, 09:08 PM
table.main{
margin-left:auto;
margin-right:auto;
width:780;
border-width:0;
border-spacing:0;
}

I figured setting both border width and border spacing to 0 would give gapless transitions between my table cells in both internet explorer (7) and firefox.

But lone behold Internet explorer fails the day and displays it with huge chunky gaps between each and every cell. Is there another property I should be defining or some way round this?



Also why does internet explorer render small text using the following code so massively. I was under the impression that small meant small.



p{font-size:small;}

nikkiH
02-06-2007, 09:37 PM
padding: 0px;

Maybe?

Oh, and do you have styles for the TDs?

drippin
02-06-2007, 09:40 PM
Like the other guy said, you need to do the same for TD and TR. Stupid i know, but some reason, its the only way IE will allow you to completely make the spacing go...


table.main {
border-width: 0px 0px 0px 0px;
border-spacing: 0px;
border-style: none none none none;
}
table.main th {
border-width: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-style: none none none none;
}
table.main td {
border-width: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-style: none none none none;
}

koyama
02-06-2007, 10:37 PM
I would be surprised if this works in IE.

You cannot control the spacing between cells through the border-spacing property of css. As of IE7 it still hasn't been adopted.

On the other hand the old way using the HTML cellspacing attribute still works.


<table cellspacing="0">...</table>

aatwo
02-06-2007, 10:38 PM
Ah ok I understand what must be done now. It just seems more intuitive that anything defined for the table would be inherited by all the sub elements such as td and tr.

Excavator
02-06-2007, 10:42 PM
Hello aatwo,
should you really be using tables?

aatwo
02-06-2007, 10:45 PM
I don't know should I not be? Personally I do not see any other way to organize my web page as well as tables allow.

What alternatives are there?

feras_wilson
02-06-2007, 10:53 PM
Search in the internet!

Excavator
02-06-2007, 11:03 PM
I don't know should I not be? Personally I do not see any other way to organize my web page as well as tables allow.

What alternatives are there?


First, check out the link about tables in my sig below.
Then give us a link to your site, or at least the code for it. I know someone here can show you how to do your site with floated divs instead of tables.

aatwo
02-06-2007, 11:15 PM
I was in fact reading through several of the links residing in your signature before reading your latest post, Excavator, how ever this all seems to be quite sketchy in my eyes. I begun the evening intent on redesigning my website and the hole has been getting deeper and deeper as I have discovered more and more flaws with my old design. To be honest I share the same sentiment as the character shown in this slide show explaining all about why tables are bad.

http://www.hotdesign.com/seybold/14transitional.html

Here is my current website.

http://www.aatwo.com/index.html

the style sheet is located at the following web address.

http://www.aatwo.com/style.css

Please bear in mind this is my first attempt at a style sheet.

Excavator
02-06-2007, 11:55 PM
Try this for a tableless start:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aatwo.com</title>
<style type="text/css">
html, body {
text-align: center;
}
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 780px;
margin: 0 auto;
}
#header {
width: 780px;
background-image: url(aatwo_files/banner.png);
height: 150px;
}
#nav {
height: 39px;
background-image: url(aatwo_files/navBackground.png);
}
#content {
background-image: url(aatwo_files/bodyMiddle.png);
background-repeat: repeat-y;
}
#footer {
background-image: url(aatwo_files/footer.png);
height: 44px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<!--closes header --></div>
<div id="nav"><p>some nav here</p></div>
<div id="content">
<p>Lots and lots of stuff in here.</p>
<p>Lots and lots of stuff in here.</p>
<p>Lots and lots of stuff in here.</p>
<p>Lots and lots of stuff in here.</p>
<p>Lots and lots of stuff in here.</p>
<p>Lots and lots of stuff in here.</p>
<p>Lots and lots of stuff in here.</p>
<p>Lots and lots of stuff in here.</p>
<!--closes content --></div>
<div id="footer">
<P class=alignM>Copyright 2006-2007 <A class=foot
href="http://www.aatwo.com/">aatwo.com</A> | <A class=foot
href="mailto:aaron.wi@gmail.com">Contact</A>
aatwo.com</P>
<!--closes footer --></div>
<!--closes wrapper --></div>
</body>
</html>


It's really very simple, well worth the extra effort to learn a new way of doing it. Just cut/paste the above code into your editor and correct the path to your images.

Arbitrator
02-07-2007, 12:42 AM
Like the other guy said, you need to do the same for TD and TR. Stupid i know, but some reason, its the only way IE will allow you to completely make the spacing go...I just tried this in Internet Explorer versions 6 and 7 and it doesn’t work.

The CSS2 border-spacing property isn’t supported by Internet Explorer. However, you can use the border-collapse: collapse declaration as an alternative, CSS‐based method of removing space between table cells. Assuming that none of the cells have been assigned borders and you want border-spacing to have a value of zero, then they’re effectively the same. If you want to specify a non‐zero border‐spacing aside from the default though, the closest equivalent in Internet Explorer would probably be to collapse the borders using the mentioned declaration and use spacer cells. Obviously, that’s not semantic and could get pretty messy.

aatwo
02-07-2007, 01:10 AM
Excavator, I must say you have provided me with an incredibly generous and helpful experience. As expected the script that you provided me with works perfectly with only very minor niggle that I am happy to work on independently.

I really believed it to be much more complicated than was shown by you so thank you again.

Excavator
02-07-2007, 01:18 AM
Right on! Another convert :thumbsup:

If you need any more help don't hesitate to ask! I'm hanging out here for the off season at least - :)

aatwo
02-07-2007, 01:54 AM
:D

I apologize for this next question. I already have a solution to this however I am trying to simply keep my cascading style sheet as neat as possible.

Is it possible to define the colors of a links various states within a single ID block?


For example. Here is an extract from the code which you provided me with, Excavator.

[code]#nav {
height: 59px;
background-image: url(images/template/original/navBackground.png);
line-height: 34px;
}[code]

Is it possible to define a set of hyper link rules that apply generically throughout the "div" element with the nav ID? Otherwise my solution involves assigning a class to every single hyperlink that I wish to make.

Arbitrator
02-07-2007, 02:20 AM
Is it possible to define a set of hyper link rules that apply generically throughout the "div" element with the nav ID?Use a descendant combinator (a space). For example:


#nav a { /* declarations here */ }

It reads, “Select all anchor (a) elements that are descendants of the element with the ID name nav.”

Excavator
02-07-2007, 02:23 AM
For a menu, specify the colors a little deeper than the div containing it. Have a look at an example I have (http://www.nopeople.com/CSS/menu_buttons_horizontal/no_images.html).

aatwo
02-07-2007, 04:37 PM
Thank you both Arbitrator and Excavator. I have come up with a very clean navigation bar using the example that Excavator was kind enough to share.

I am currently trying to place it precisely where I want. At the moment the whole navigational menu is approximately 10 pixels too high on the page with respect to the background image. Is there a way to fine tune this?

aatwo
02-07-2007, 05:13 PM
Just for reference you can see here what I mean here.

http://www.aatwo.com/template.html

Excavator
02-07-2007, 05:24 PM
Starting to shape up. Glad you could use the menu.
I think this will position for you - I only checked in FF though.

#navlist li {
float: left;
width: 80px;
height: 18px;
margin: 10px 0 10px 0;
list-style-type: none;
text-align: center;
background: #3F3F3F;
color: #CD8162;
font-size: small;
font: 70% Lucida Sans Unicode;
}

In case you don't already know, the padding/margin goes top,right,bottom,left.

aatwo
02-07-2007, 05:51 PM
Gah I could have sworn that I had tried that before. I tried adding a top margin however I just realized that I declared the top margin prior to resetting it to zero in the line of code you have just kindly modified for me and so obviously it didn't work.

aatwo
02-07-2007, 06:19 PM
http://www.aatwo.com/template.php

Thank you very much. I believe I am ready to begin adding content to my pages now that I have the basic template completed.

You've been a great help :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum