4 replies [Last post]
claytonbellmor
claytonbellmor's picture
Offline
Regular
Athens, Georgia
Last seen: 12 years 46 weeks ago
Athens, Georgia
Joined: 2006-10-27
Posts: 33
Points: 0

A couple problems with a site. http://clay.bellmor.com/csscreator/imageload

In Safari (mac): Photo loads halfway. Fixes itself when you stretch the window.

In FF (mac): Photo loads normally. BUT... large red GIF doesn't load at all. ugh.

I originally used a transitional doctype, then switched it to strict. No changes.

I really haven't encountered this problem, ever, so I'm completely lost.

Photo is in a DIV named "picture" at the end of the HTML code.
Centered red GIF is in a DIV named "navigation" near the top of the HTML code.

HTML CODE





Congue nihil imperdiet doming id quod mazim placerat facer possim assum typi non habent claritatem. Tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim veniam quis. In hendrerit in vulputate velit esse molestie consequat vel illum dolore eu feugiat nulla facilisis. Tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel. Consectetuer adipiscing elit sed; diam nonummy nibh euismod nostrud exerci eum iriure dolor at vero eros. Legunt saepius claritas est etiam processus dynamicus qui sequitur, mutationem consuetudium lectorum mirum est. Et accumsan et iusto odio dignissim, qui blandit praesent luptatum! Ipsum dolor sit amet zzril delenit augue duis! Decima et quinta decima eodem modo typi qui nunc nobis, videntur parum clari fiant sollemnes in. Quam littera gothica quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per seacula quarta.

CSS CODE

* {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

html, body {
margin: 20px auto 0 auto;
width: 710px;
background-color: #e5f6ff;
font-family: lucida grande, helvetica, sans-serif;
font-size: 15px;
font-weight: normal;
line-height: 20px;
color: #000;
text-align: left;
}

#title {
margin: 0 0 30px 15px;
background-image: url(images/header.gif);
background-repeat: no-repeat;
width: 155px;
height: 149px;
float: left;
clear: both;
}

#navigation {
z-index: -5;
position: relative;
margin: 20px 0 -60px 0;
background-image: url(images/navbg.gif);
background-repeat: no-repeat;
width: 719px;
height: 160px;
float: left;
clear: both;
}

#navone {
margin: 0 12px 0 18px;
background-image: url(images/home.gif);
background-repeat: no-repeat;
width: 47px;
height: 32px;
float: left;
clear: left;
}

#navtwo {
margin: 0 1px 0 0;
background-image: url(images/moviereel.gif);
background-repeat: no-repeat;
width: 73px;
height: 60px;
float: left;
clear: none;
}

#navtwo:hover {
border-bottom: 5px solid #919191;
margin: -5px 1px 0 0;
background-image: url(images/moviereel.gif);
background-repeat: no-repeat;
width: 73px;
height: 60px;
float: left;
clear: none;
}

#navthree {
margin: 0 1px 0 0;
background-image: url(images/headshots.gif);
background-repeat: no-repeat;
width: 71px;
height: 60px;
float: left;
clear: none;
}

#navthree:hover {
border-bottom: 5px solid #919191;
margin: -5px 1px 0 0;
background-image: url(images/headshots.gif);
background-repeat: no-repeat;
width: 71px;
height: 60px;
float: left;
clear: none;
}

#navfour {
margin: 0 1px 0 0;
background-image: url(images/music.gif);
background-repeat: no-repeat;
width: 71px;
height: 60px;
float: left;
clear: none;
}

#navfour:hover {
border-bottom: 5px solid #919191;
margin: -5px 1px 0 0;
background-image: url(images/music.gif);
background-repeat: no-repeat;
width: 71px;
height: 60px;
float: left;
clear: none;
}

#navfive {

margin: 0 1px 0 0;
background-image: url(images/resume.gif);
background-repeat: no-repeat;
width: 71px;
height: 60px;
float: left;
clear: right;
}

#navfive:hover {
border-bottom: 5px solid #919191;
margin: -5px 1px 0 0;
background-image: url(images/resume.gif);
background-repeat: no-repeat;
width: 71px;
height: 60px;
float: left;
clear: right;
}

#news {
margin: 30px 0 0 0;
float: left;
clear: left;
width: 380px;
}

#news .title {
margin: 0 0 15px 15px;
background-image: url(images/news.gif);
background-repeat: no-repeat;
width: 55px;
height: 21px;
}

#news .bodyp {
background-color: transparent;
padding: 0 0 0 40px;
}

#sidemenu {
z-index: 30;
position: relative;
margin: 60px -10px 0 0;
float: right;
clear: right;
}

#sidemenu ul {
margin: 0 0 0 0;
list-style-type: none;
}

#sidemenu ul li {
margin: 10px 0 10px 0;
}

#tagone {
background-image: url(images/tag001.gif);
background-repeat: no-repeat;
width: 288px;
height: 72px;
}

#tagone:hover {
opacity: .9;
background-image: url(images/tag001.gif);
background-repeat: no-repeat;
width: 288px;
height: 72px;
}

#tagtwo {
background-image: url(images/tag002.gif);
background-repeat: no-repeat;
width: 288px;
height: 72px;
}

#tagtwo:hover {
opacity: .9;
background-image: url(images/tag002.gif);
background-repeat: no-repeat;
width: 288px;
height: 72px;
}

#tagthree {
background-image: url(images/tag003.gif);
background-repeat: no-repeat;
width: 288px;
height: 72px;
}

#tagthree:hover {
opacity: .9;
background-image: url(images/tag003.gif);
background-repeat: no-repeat;
width: 288px;
height: 72px;
}

#picture {
z-index: 0;
margin: 50px 0 0 0;
background-image: url(images/001.png);
background-repeat: no-repeat;
width: 357px;
height: 419px;
position: absolute;
top: 40px;
left: 390px;
float: left;
clear: none;
}

#spacing {
margin: 50px 0 0 0;
float: left;
clear: both;
}

Teach me, teach me.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 7 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Try removing the z-index

Try removing the z-index property from #navigation.

Why don't you put some of those images in the foreground, where they belong? All those overlapping, out of the flow, elements are just needless complications.

Have you looked at the page with styles turned off? There's nothing there.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

claytonbellmor
claytonbellmor's picture
Offline
Regular
Athens, Georgia
Last seen: 12 years 46 weeks ago
Athens, Georgia
Joined: 2006-10-27
Posts: 33
Points: 0

I'll certainly try to make

I'll certainly try to make the layout work without using z-indexing, which I try not to use if possible. And the reason I put all the images in the background is because I just don't like the dragging capabilities of foreground images. But that's just personal, I've never been told it's a bad thing.

thanks...and I'll update to see if that helps.

Teach me, teach me.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Clayton, before trying to

Clayton, before trying to debug problems you simply must have valid markup as well behaved browsers will struggle to apply your properties to invalid code, and have to make guesses as to what was intended or even just overlook requests that simply don't make sense to them.

You can't nest block level (div) inside inline ones ('a')

In a similar vein you have attempted to nest li elements inside anchors, again a no no.

A Head element must have as a mandatory requirement a 'title' element.

With an HTML DTD you are not required to close empty elements so this example would be wrong <meta content="" />

You must attempt to bring valid well formed markup to the forum otherwise it makes it very hard for us to offer meaningful help, instead we come off as moaning the whole time about valadating markup

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

claytonbellmor
claytonbellmor's picture
Offline
Regular
Athens, Georgia
Last seen: 12 years 46 weeks ago
Athens, Georgia
Joined: 2006-10-27
Posts: 33
Points: 0

I fixed the problem by

I fixed the problem by putting the image into the html markup and out of the css. Something about the positioning of the image and the heavy use of the margin. The site works correctly now.

Teach me, teach me.