CSS errors cross browsers, how to fix? 1

[swizzy]

I am having a problem with my web page with spaces on the navigation/left side:

http://www.esoteric1.net/contact.php

I wonder if an expert could advise me on what I might change in my CSS to reflect a clean page across all browsers?

I've tried several things, and it never looks right, particularly the table where the buttons are nestled and
the image on the left has a blank space in the center, I'm trying to close it all together in there.

TIA~
Miss Swizzy

 

[Vragabond]

I don't think the way you're doing your website (the single column table for the navigation list, the line breaks to avoid the content being under the header) is very good and would need a lot of re-writing. But if you just want to quickly fix the problem you're having, I would change all the images in the navigation and the image in the header to have [tt]display: block;[/tt]. That will force all possible white-space coming from the fact that images are treated as inline elements to be gone.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[swizzy]

Thanks for the insight Vragabond 8)

The page still isn't quite right, I wrote it the same as all the other link pages corresponding, however this is just a pain in my side.

It looks ok in IE, but not so good in any other browsers unfortunately.

I've tried your suggestions, however no such luck 8^(

I'll keep plugging at it tho.

Miss Swizzy

 

[Vragabond]

I don't think you understood completely the block comment. You should not apply display: block; to the #nav, but to all images inside the #nav. Try this (it works for me):

#nav img {
  display: block;
}

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[swizzy]

Hey it works!

Vragabond you are the best! In retrospect I wished I would have asked this question for you 4 days ago before spending so much time trying to figure it out on my own!

I am rather new to CSS, but I guess you live and learn.
It's nice to know I have techno pals like you I can count
on!

Thanks again,

Miss Swizzy

 

[swizzy]

Hey Vragabond one more thing:

How do I center my page for IE?

It centers properly for all other browsers but IE :-(

Thanks again for your help!

Miss Swizzy

 

[Vragabond]

If it is IE6 we're talking about, remove the xml declaration you have in your html file. The first thing (for IE6 to follow standards) in the html file must be the complete and valid doctype declaration. You have a valid doctype, but you have something (xml declaration) before it and that throws IE off.

If you need it for IEs before version 6, you will have to work with text-align: center.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[swizzy]

Hi Vragabond,

Thanks for your suggestions. I still am unable how to figure out how to center these pages correctly. Here is my css code:

body {
width: 800px;
margin-right: auto;
margin-left: auto;
position: relative;
clip: rect(auto auto auto auto);
background-color: #333333;
}

It doesn't work in IE I know, there is only one page in the following website that centers in IE and that is the .php
link above.

I do have a question however; this page in that same website
looks really out of whack in Opera Browser:

http://www.theartofpleasure.net/gallery.html

as well as a few other pages. It looks fine in every other browser (I haven't viewed it on a MAC however) yet Opera renders this hacked up look.

If you could lend me your infinite wisdom on how to fix this problem I will forever be grateful :^).

Thanks so much,

Miss Swizzy

 

[swizzy]

I forgot to post the code, my bad:

body {
width: 800px;
position: relative;
clip: rect(auto auto auto auto);
background-color: #333333;
margin: 0px;
padding: 0px;

}
#head {
height: 202px;
width: 800px;
left: 0px;
top: 0px;
position: absolute;
visibility: visible;
z-index: 3;
display: block;
margin: 0px;
padding: 0px;
right: 0px;
bottom: 0px;


}
#foot {
display: block;
height: 10px;
width: 800px;
position: absolute;
color: #cccc66;
top: 800px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
left: 0px;
visibility: visible;
z-index: 1;
padding-left: 200px;

}
#imgleft {
height: 197px;
width: 306px;
position: absolute;
display: block;
z-index: 4;
top: 202px;
left: 0px;
visibility: visible;
margin: 0px;
padding: 0px;
}
#img1 {
display: block;
height: 56px;
width: 306px;
position: absolute;
z-index: 5;
top: 399px;
left: 0px;
visibility: visible;
margin: 0px;
padding: 0px;
}
#img2 {
display: block;
height: 56px;
width: 306px;
position: absolute;
z-index: 6;
left: 0px;
visibility: visible;
top: 455px;
margin: 0px;
padding: 0px;

}
#img3 {
display: block;
height: 56px;
width: 306px;
position: absolute;
left: 0px;
top: 511px;
visibility: visible;
z-index: 7;
margin: 0px;
padding: 0px;
}
#img4 {
display: block;
visibility: visible;
position: absolute;
height: 55px;
width: 306px;
left: 0px;
top: 566px;
z-index: 8;
margin: 0px;
padding: 0px;

}
#img5 {
display: block;
height: 55px;
width: 306px;
position: absolute;
left: 0px;
top: 621px;
z-index: 9;
visibility: visible;
margin: 0px;
padding: 0px;
}
#img6 {
display: block;
width: 306px;
position: absolute;
left: 0px;
top: 676px;
z-index: 10;
margin: 0px;
padding: 0px;
height: 55px;
visibility: visible;
}
#img7 {
display: block;
height: 55px;
width: 306px;
position: absolute;
z-index: 11;
top: 731px;
margin: 0px;
padding: 0px;
visibility: visible;
left: 0;
}
classes:

<style type="text/css">
<!--
.content {
display: block;
height: 583px;
width: 487px;
z-index: 11;
left: 306px;
top: 202px;
position: absolute;
padding: 0px;
margin: 0px;
background-image: url(images/background/creambkgd_03.gif);
}
#slideshow {
margin: 0px 75px 125px;
padding: 0px;
}
a:link {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #CC9966;
}
a:hover {
color: #cc9966;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
}
a:active {
color: #cc9966;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
}
</style>