Testing my site out: Need some help. [Archive]

ciscoguy24

12-31-2005, 12:04 PM

Hi guys I am almost done in designing my layout for my photography gallery. (www.digitaleyesandears.com/test) But when viewing this site in firefox its all messed up. IE 6 is fine. Any Ideas on the areas I should look into?

Thanks
Adam

#####CSS######

body {
background-color:#959494;
text-align:center;
}

#wrapper {
width:875px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;

}

#contentleft {
width:135px;
height:585px;
padding:0px;
float:left;
background:#fff;
border:2px;
border-style:solid;
border-color:black;
background-color:#333333;
}

#contentcenter {
width:696px;
height:585px;
padding:20px;
float:left;
text-align:left;
background-color:#10100e;
text-align:center;
}

#contentimage {
width:425px;
height:500px;
padding:0px;
margin-top:30px;
margin-bottom:auto;
text-align:center;
}

#footer {
text-align:center;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
bottom:0px;
right:20px;
}

#gallery {
}

#contentcenter p {
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
color: #999;
}

#contentleft ul
{
list-style-type: none;
text-align: left;
margin-left:7px;
margin-top:25px;
}

#contentleft ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}

#contentleft ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
text-decoration: underline overline;color: #10100e;
}

#contentleft ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}

p.next {
margin-right:65px;

}

p.next a:hover {
text-decoration: underline overline;color: #10100e;
color:#959494;
}

p.next a {
color:#959494;
text-decoration:none;

}

######HTML#######

<html>

<head>

<link rel=stylesheet href="adamhoward.css" type="text/css" media=screen>

<title> :: DigitalEyesAndEars Photograghy :: ' Adam Howard ' </title>

<SCRIPT language="JavaScript">



</script>

<script language="JavaScript">

// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 4000

// Duration of crossfade (seconds)
var crossFadeDuration = 2

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/b&w-Baxter-Wood.jpg'
Pic[1] = 'images/b&w-Josh&Tommy-Sand.jpg'
Pic[2] = 'images/b&w-TampaFromDock-UT.jpg'
Pic[3] = 'images/b&w-TwoMen-UT.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

</head>

<Body onload="runSlideShow()">

<div id="wrapper">

<div id="contentleft">

<ul id="navlist">
<li><a href="photographer.html">The Photographer</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>

</ul>

</div>

<div id="contentcenter">

<div id="contentimage">

<img src="images/b&w-Baxter-Wood.jpg" name='SlideShow'>

</div>

<div id="footer">

<p> // All Images Coprighted by Adam Howard 2005 \\</p>

</div>

</div>

</div>

</body>

</html>

ray326

12-31-2005, 01:35 PM

Add a padding:0; to the #contentleft ul. Some browsers using padding some use indent for list indents. To clear them for all you have to do both.

Change your margin in #contentimage to margin:30px auto auto;. That's the real way to center a block element but IE doesn't know that.

In #contentleft try inserting height:621px !important; just before the existing height spec. IE doesn't get the box model right but it also doesn't get !important right so this is a standard work around for that.

Nice design.

ciscoguy24

12-31-2005, 02:30 PM

Add a padding:0; to the #contentleft ul. Some browsers using padding some use indent for list indents. To clear them for all you have to do both.

Change your margin in #contentimage to margin:30px auto auto;. That's the real way to center a block element but IE doesn't know that.

In #contentleft try inserting height:621px !important; just before the existing height spec. IE doesn't get the box model right but it also doesn't get !important right so this is a standard work around for that.

Nice design.

Hey Ry thanks for the pointers. I did what youi said with the css and its still messed up in firefox. Any other suggestions? Here is my lastest code for css
http://pastebin.com/485587

ray326

12-31-2005, 02:36 PM

Uh uh. No way is that CSS being served with the page.

ciscoguy24

12-31-2005, 02:42 PM

Ok cool I got it now. I had the wrong css file open when I was editing it duh!! Thanks sooo much Ray. Happy new year!

adam